Bagaimana cara kerja stack di javascript?

Jika Anda seorang pengembang, atau bercita-cita menjadi pengembang, Anda mungkin sering mendengar istilah 'tumpukan'. Hari ini kita akan menyelam lebih dalam ke tumpukan untuk mendapatkan pemahaman yang lebih baik tentang bagaimana mesin JavaScript memproses blok kode saat skrip dijalankan. Kita akan melihat lebih dekat apa yang direpresentasikan tumpukan sebagai tipe data, bagaimana itu dapat digunakan dalam kode Anda, dan…

Ini adalah pos #48 dari seri ini, didedikasikan untuk menjelajahi JavaScript dan komponen bangunannya. Dalam proses mengidentifikasi dan mendeskripsikan elemen inti, kami juga membagikan beberapa aturan praktis yang kami gunakan saat membuat SessionStack, aplikasi JavaScript yang harus tangguh dan berperforma tinggi untuk membantu perusahaan mengoptimalkan pengalaman digital penggunanya

Pada artikel ini, kita akan melihat Tumpukan dan Antrean yang merupakan struktur data umum yang memiliki banyak kasus penggunaan di dunia nyata. Keduanya adalah struktur data linier yang memiliki elemen di samping satu sama lain. Anda dapat menganggap Tumpukan sebagai tumpukan piring yang diletakkan di atas meja, setiap piring berada di atas yang lain. Juga, bayangkan Antrean sebagai barisan orang di bandara yang menunggu giliran untuk mendapatkan boarding pass, masing-masing individu secara linier mengikuti satu sama lain.

Jangan lupa bahwa Struktur data dibagi menjadi dua kategori. linier dan nonlinier. Tumpukan dan Antrian memang membentuk urutan karena bersifat linier

Kami akan melihat kasus penggunaan, implementasi, dan membandingkan kedua struktur data

Ingatlah bahwa fokus bahasa pemrograman kita adalah JavaScript untuk implementasinya tetapi idenya bersifat umum dan tidak bergantung pada implementasi tertentu

Tumpukan adalah struktur data linier yang memungkinkan operasi hanya pada satu ujung, artinya semua operasi dasar seperti penyisipan hanya dapat dilakukan di ujung struktur. Alasan ini karena konsep Last in First Out (LIFO) dimana data terakhir yang ditempatkan akan menjadi data pertama yang akan dihapus.

Seperti yang telah disebutkan sebelumnya, kita dapat mengambil Tumpukan seperti tumpukan piring, setiap piring diletakkan di atas satu sama lain. Piring pertama yang diletakkan menjadi yang terakhir dilepas

Pada gambar di atas, push_ menambahkan elemen ke Stack sementara pop menghapus yang tersedia di atas. Push dan Pop adalah operasi dasar yang dilakukan pada Stacks tetapi ada lebih banyak lagi yang akan kita bahas nanti di artikel

Penting untuk dicatat betapa pentingnya Tumpukan dalam contoh dunia nyata. Elemen disimpan dalam urutan yang membuatnya lebih dapat diterapkan pada banyak skenario

Contoh kehidupan nyata yang umum adalah tumpukan piring tempat Anda dapat menambah atau menghapusnya, yang menjelaskan tentang Stacks kepada anak berusia 5 tahun.

Peramban menggunakan struktur data Tumpukan juga untuk menyimpan catatan riwayat penjelajahan Anda di mana kunjungan terakhir adalah yang pertama tercatat. Jadi, jika Anda menggunakan tombol kembali, Anda akan pergi ke situs yang terakhir dikunjungi

Sama seperti log panggilan di mana panggilan terakhir Anda ditempatkan di atas satu sama lain. Mekanisme Undo/Redo di editor teks menggunakan struktur data Stack untuk melacak aktivitas terbaru

Membalik kata dapat diterapkan menggunakan Stack di mana kita dapat mengeluarkan huruf dan apa yang kita dapatkan menjadi kebalikannya

Aplikasi Stack lainnya ada di Menara Hanoi dan ini adalah cara paling optimal untuk memecahkan teka-teki ini. Tujuan dari teka-teki ini adalah memindahkan semua cakram dari satu batang ke batang berikutnya

Kasus penggunaan lain untuk Tumpukan termasuk yang berikut;

• Penanganan rekursi
• Mundur
• Pemanggilan fungsi dalam Compiler
• Sebagian besar JVM berorientasi pada Stack

Stack mendukung dua operasi dasar yaitu;

• push - memasukkan ke dalam tumpukan
• pop - menghapus dari tumpukan

Operasi lain juga tersedia tetapi fungsinya adalah untuk memeriksa status Stack, tidak seperti operasi penyisipan dan penghapusan. Dan mereka;

• isFull — memeriksa apakah stack sudah penuh
• isEmpty — memeriksa apakah stack kosong
• mengintip - mendapatkan elemen di bagian atas Stack

Dalam praktiknya, Anda cenderung melihat operasi isFull, isEmpty dan peek tetapi tidak selalu diperlukan. Yang paling banyak digunakan dan penting adalah push dan pop karena Anda perlu menambah dan menghapus item di Stack

Mari kita lihat algoritma yang akan kita gunakan untuk setiap operasi ini

Kita harus memiliki pemahaman dasar tentang cara kerja Stack sekarang, operasi dasar, dan beberapa kasus penggunaan, tetapi bagaimana kita mengimplementasikannya? . Menerapkan struktur data Stack dapat dilakukan dalam beberapa cara, yang umum adalah array dan daftar tertaut. Karena cara yang umum dalam mengimplementasikan Stack, sekarang dianggap sebagai Abstract Data Type (ADT). Sekarang terserah Anda untuk memutuskan bagaimana Anda ingin mengimplementasikan Stack, selama operasi utama push dan pop tidak berubah

Dalam JavaScript, array sudah memiliki fitur yang perlu kita gunakan pada Stack, itulah sebabnya kita akan menggunakan array untuk mengimplementasikannya pada implementasi kita.

Kami membuat Stack dengan dua atribut count_ dan pop0 elemen akan disimpan. Jika Anda perhatikan, pop_1 adalah objek, bukan array karena kita tidak akan belajar banyak jika kita menggunakan array. Kita bisa saja menggunakan metode array yang sudah ada

Operasi pertama kami yang merupakan push metode mengambil elemen yang disimpan pada posisi count dan count bertambah segera setelah elemen ditambahkan

Metode kami selanjutnya akan membantu memeriksa apakah hitungannya 0 yang berarti Stack kami kosong. Metode ini berguna dalam pop_ jika kita harus memeriksa apakah Stack kosong sebelum kita menghapus elemen

Metode pop memeriksa apakah Stack kosong sebelum melakukan penghapusan. Jumlahnya dikurangi dan data di lokasi itu kemudian dihapus

Metode Peek mengembalikan elemen di bagian atas Stack tanpa menghapusnya

Struktur data ini persis seperti yang dimaksud dalam aplikasi dunia nyata. Ini mengikuti pola bahwa apa pun yang masuk lebih dulu akan keluar lebih dulu. Kami telah melihat dari Stacks bagaimana ini mengikuti pola Last In First Out. Antrian mengikuti pola First In First Out. Operasi cenderung terjadi di kedua ujung Antrean. Data dimasukkan melalui bagian belakang/ekor struktur sedangkan pemindahan data hanya terjadi di bagian depan/kepala struktur

Definisi Antrian yang lebih baik dalam perspektif saya adalah struktur data yang hanya dibatasi untuk memasukkan data melalui bagian depan dan menghapus data melalui bagian belakang. Ini adalah kumpulan data linier dan data di sini dapat berupa tipe data apa pun

Antrean bekerja pada skenario first come first serve yang artinya tidak lebih dari antrean umum di terminal bandara atau antrean tiket film

Kasus penggunaan yang paling umum adalah antrean di stasiun bus, tiket film, atau di mana pun Anda harus menunggu giliran untuk dilayani atau dilayani. Ini cukup banyak menjelaskan bahwa siapa pun yang datang pertama akan dilayani terlebih dahulu. Namun fokus utama kami adalah bagaimana Queue bekerja di komputer

Kasus penggunaan lainnya adalah ketika sumber daya perlu dibagikan atau disajikan tetapi sumber daya ini hanya dapat menangani atau melayani satu permintaan dalam satu waktu. Artinya setiap permintaan harus menunggu giliran untuk mendapatkan sumber daya. Lebih masuk akal untuk mengantri permintaan ini sehingga masing-masing ditangani secara bergiliran

Melihatnya dari perspektif lain, bayangkan sebuah kantor dengan hanya satu printer yang terhubung ke banyak komputer. Jika 3 pengguna komputer perlu mencetak dokumen, printer tidak menolaknya jika datang bersamaan. Itu menempatkan permintaan dalam antrian. Antrean Siap yang merupakan jenis Proses Penjadwalan Antrean mengelola semua pengguna komputer sehingga permintaan terlama dapat mencetak dokumen yang diinginkan terlebih dahulu

Juga, dalam struktur data Pohon, traversal pohon biner urutan tingkat menggunakan antrian untuk melacak node yang dikunjunginya saat mencari

Ada dua operasi dasar yang digunakan oleh Queues. Operasi ini hanya melibatkan penambahan data ke antrean — data pertama juga akan menginisialisasi Antrean sebelum ditambahkan, sedangkan operasi kedua menghapus data dari Antrean. Kami akan membahas operasi dasar yang bekerja dengan Queues

• Enqueue — menambahkan item ke antrean
• Dequeue - menghapus item dari antrian

Sama seperti Stack, kami juga memiliki beberapa operasi lagi, mereka tidak memanipulasi atau memindahkan data tetapi memeriksa status Antrian

• Mengintip — mendapatkan data di depan Antrean
• isEmpty — memeriksa apakah memori (Queue) kosong
• isFull — memeriksa apakah memori sudah penuh

Kebanyakan orang suka menamainya sebagai push. Mari kita lihat algoritme sederhana untuk menambahkan data ke Antrean

Mari kita terapkan operasi fundamental dari Queue yang hanya Enqueue dan Dequeue

Sebelum kita mulai membuat Queue dan metodenya, mari kita buat kelas Node. Kelas Node ini akan berisi nilai data yang ditambahkan ke Queue dan pointer ke Node berikutnya

Selanjutnya, kami membuat Queue yang menyimpan dua properti. depan dan belakang antrian. Alasan mengapa kita pertama kali membuat pop_7 adalah untuk tidak menulis kode berlebihan dalam metode pop8 dan pop9

Metode pop8 pertama-tama menambahkan node baru, memeriksa apakah Queue kosong sehingga menambahkan node baru ini ke Queue yang berarti bagian depan dan belakang sedang ditempati oleh node baru

Selain itu, jika Antrean tidak kosong, kami hanya menambahkan node ke belakang/belakang Antrean

Metode selanjutnya yaitu pop_9 pergi ke depan Antrian, juga memeriksa apakah Antrian kosong. Jika tidak kosong kita jadikan node depan menunjuk ke node selanjutnya di Queue

Tumpukan dan Antrian selalu merupakan struktur data yang paling banyak dibahas. Ini karena keduanya memiliki operasi yang berlawanan. Stack mengikuti pola LIFO — Last In First Out sedangkan Queues menggunakan FIFO — First In First Out. Contoh umum Stack adalah tumpukan piring sedangkan Queue adalah antrian di terminal bus

Selain itu, Tumpukan memiliki properti teratas yang menunjuk ke elemen paling atas di Tumpukan. Itu digunakan untuk melacak dan melakukan semua operasi. Tetapi Queues memiliki dua properti yaitu front dan back untuk memasukkan dan menghapus item yang ada di Queue

Tumpukan sebagian besar digunakan dalam kompiler untuk memproses pernyataan. Misalnya, ada dua komponen di mesin V8 yaitu Heap dan Call stack. Tumpukan Panggilan menggunakan LIFO untuk menyimpan panggilan fungsi di mana setiap panggilan fungsi didorong ke bagian atas Tumpukan

Antrian sebagian besar digunakan untuk sistem perpesanan seperti RabbitMQ. Ini terjadi ketika suatu proses mengirim pesan ke proses lain untuk digunakan. Pesan adalah antrean pertama dan dikirim menggunakan pola FIFO

Anda harus sangat berhati-hati tentang struktur data yang Anda pilih untuk tugas tertentu, terutama untuk tugas yang berpotensi menurunkan kinerja produk Anda. Memiliki kerumitan pencarian untuk fungsionalitas yang harus real-time dan bergantung pada banyak data dapat membuat produk Anda tidak dapat digunakan

Bahkan jika Anda merasa keputusan yang tepat telah dibuat, selalu perlu untuk memverifikasi bahwa ini memang benar dan pengguna Anda memiliki pengalaman hebat dengan produk Anda

Solusi seperti SessionStack akan memungkinkan Anda untuk memutar ulang perjalanan pelanggan sebagai video, menunjukkan kepada Anda bagaimana pelanggan benar-benar merasakan produk Anda. Anda dapat dengan cepat menentukan apakah kinerja produk Anda sesuai dengan harapan mereka atau tidak. Jika Anda melihat ada yang salah, Anda dapat menjelajahi semua detail teknis dari browser pengguna seperti jaringan, informasi debug, dan segala sesuatu tentang lingkungannya sehingga Anda dapat dengan mudah memahami masalah dan menyelesaikannya

Bagaimana stack frame mengkompilasi kode JavaScript?

Bagaimana kode JavaScript dijalankan & tumpukan panggilan?

Bagaimana Anda membuat tumpukan dalam JavaScript?

Apa itu struktur data tumpukan dalam JavaScript?