Belajar Javascript Array

Stack dan Queue

Kita akan melanjutkan pembahasan mengenai array, khususnya untuk mengimplementasikan tipe data abstrak stack dan queue. Kita mulai dari stack terlebih dahulu.

Di gambar ilustrasi, kita bisa melihat tumpukan 6 buah buku. Kita ibaratkan tumpukan buku ini adalah sebuah array, dimana setiap buku adalah data yang disimpan di dalam array. Data yang berada di paling bawah adalah index nol. Dan nomor index bertambah ke arah atas.

Nah, stack ini memiliki sifat yang unik, dimana setiap kali kita hendak menambahkan data baru, maka kita harus menaruhnya di bagian tumpukan paling atas. Jadi data yang paling baru akan memiliki nomor index yang paling tinggi. Dan kemudian pada saat kita hendak mengeluarkan data dari dalam tumpukan, maka kita hanya bisa mengeluarkan data yang posisinya di paling atas. Kita tidak boleh mengeluarkan data dari bagian tengah ataupun bawah. Sistem mengeluarkan data dari tumpukan ini disebut dengan istilah Last In First Out atau LIFO. Data yang datangnya paling akhir, akan dikeluarkan terlebih dahulu.

Kita lihat contohnya ya. Misalkan kita memiliki array atau tumpukan yang masih kosong. Kita bisa menambahkan data baru pada tumpukan dengan menggunakan perintah push. Sebagai contoh kita tambahkan data baru huruf “A”. Maka kita menyimpan data “A” di dalam Array, dan secara otomatis mendapatkan index 0.

Selanjutnya kita jalankan lagi perintah push(“B”). Maka kita menumpukkan satu buah kotak baru di atas “A”, yang isinya adalah “B”. Data “B” ini mendapatkan index 1.

Kalau kita jalankan lagi perintah push(“C”). Teman-teman bisa menebak apa yang terjadi ya. Kita menambahkan satu lagi tumpukan baru dengan isi “C” dan mendapatkan index 2.

Untuk mengeluarkan data dari tumpukan, kita menggunakan perintah pop. Komputer akan mengambil bagian paling atas dari tumpukan untuk dikeluarkan.

Nah, ini adalah gambar operasi Stack yang diambil dari Wikipedia. Jadi disini kita hanya perlu mengenal 2 buah perintah ya. Yang pertama adalah push untuk menambahkan data baru ke bagian paling atas tumpukan. Sedangkan perintah kedua adalah pop yang berfungsi untuk mengeluarkan data yang berada di bagian paling atas dari tumpukan.

Kita langsung coba praktek ya. Saya telah menyediakan file HTML yang belum memiliki Javascript sama sekali. Jadi kita akan coding langsung di console dimulai dari awal. Pertama kita buat dahulu sebuah variable dengan nama stack yang berupa sebuah array. Maka sintaksnya menjadi:

let stack = [];

Tanda [] menunjukkan bahwa variable stack adalah sebuah array. Kalau kita lihat lagi variable stack, maka browser memberitahukan bahwa ini adalah sebuah array kosong.

Kita tambahkan dahulu data pertama ya. Seperti yang kita pelajari barusan, untuk menambahkan data pada bagian paling akhir stack, maka kita menggunakan method push. Argument yang kita isikan di dalam method push adalah data yang hendak kita simpan. Misalkan kita hendak menyimpan huruf “a”. Maka perintahnya menjadi

stack.push("a");

Kita lihat lagi isi dari stack, sekarang sudah ada satu data huruf “a”. Huruf “a” secara otomatis mendapatkan nomor index 0. Sedangkan properti length dari array sekarang bernilai 1.

Kita coba lagi ya. Sekarang kita tambahkan huruf “b”.

stack.push("b");

Sekarang isi array menjadi 2, yaitu “a” dan “b”. “b” secara otomatis mendapatkan index nomor 1.

Kita lanjutkan dengan menambahkan huruf “c”.

stack.push("c");

Sekarang isi stack bertambah lagi menjadi 3, yaitu “a”, “b”, dan “c”. Sampai disini teman-teman sudah mengerti ya, bagaimana cara kerja dari method push. Method push berfungsi untuk menambahkan data yang dikirimkan lewat argument, ke bagian akhir array.

Selanjutnya kita mencoba perintah kedua dari stack, yaitu pop. Pop berfungsi untuk mengambil data yang berada di bagian paling akhir array, sekaligus menghapus data tersebut dari array. Berhubung stack kita berisi “a”, “b” dan “c”, maka pop akan mengambil huruf “c”. Kita ketik perintahnya.

stack.pop();

Hasilnya adalah huruf “c”, sedangkan kalau kita lihat isi stack kita tinggal 2 buah, yaitu “a” dan “b”.

Kalau kita lanjutkan pop, maka kita akan mendapatkan huruf “b”. Namun saya ingin menjelaskan bahwa nilai yang kita pop ini bisa kita simpan lagi sebagai sebuah variable, misalkan kita beri nama data. Maka sintaksnya menjadi:

let data = stack.pop();

Nah, sekarang isi dari stack kita adalah array dengan 1 buah data huruf “a”. Sedangkan isi dari variable data adalah huruf “b”. Jadi begitulah cara kerja push dan pop. Kita akan lanjutkan materi kita ke tipe data abstract Queue.

Queue dalam bahasa Indonesia adalah “Antrian”. Sebagai contoh, pada gambar ilustrasi kita adalah antrian untuk membayar di kasir super market. Untuk menambahkan data pada antrian, kita menggunakan perintah push, contohnya push(“Andi”). Sama seperti yang telah kita pelajari pada Stack ya. Kita menambahkan “Andi”, ke bagian paling belakang antrian. Berhubung antrian masih kosong, maka Andi mendapatkan posisi paling depan.

Selanjutnya kita tambahkan lagi “Budi”, “Charli” dan “Doni”. Sekarang sudah ada 4 orang di dalam antrian. Dan berhubung kita adalah programmer Javascript, maka nomor antrian kita dimulai dari angka 0.

Pertanyaan berikutnya, bagaimana caranya kita mengambil nama orang di dalam antrian, untuk mendapatkan pelayanan kasir? Kalau kita menggunakan perintah pop seperti pada stack, maka komputer akan mengeluarkan Doni dari antrian. Karena Doni memiliki nomor index yang paling tinggi. Untuk antrian, tentunya hal ini tidak sesuai ya. Karena antrian seharusnya menggunakan sistem FIFO atau First In First Out. Atau di dunia antrian, lebih terkenal dengan istilah First Come First Serve. Orang yang datang duluan akan dilayani terlebih dahulu. Oleh karena itu, yang benarnya adalah kita harus mengambil Andi untuk dilayani terlebih dahulu.

Nah, untuk mengambil Andi, kita bisa menggunakan perintah shift. Setelah kita menjalankan perintah shift, maka Andi keluar dari antrian. Sedangkan semua orang yang berada di dalam antrian akan maju ke depan. Jadi Budi yang tadinya di antrian nomor 1 menjadi nomor 0. Sedangkan Charli dari nomor 2 berubah menjadi nomor 1. Dan seterusnya.

Jadi disini jelas ya. Untuk tipe data abstract antrian, kita menggunakan perintah push untuk menambahkan data, dan kita menggunakan perintah shift untuk mengeluarkan data yang datangnya paling duluan.

Sekarang kita masuk ke kasus berikutnya. Bagaimana kalau kita hendak memasukkan seorang VIP, dimana orang tersebut langsung masuk ke antrian paling depan. Sedangkan orang-orang yang sudah terlanjur di dalam antrian harus mundur ke belakang.

Nah, disini kita bisa menggunakan perintah unshift. Mengapa namanya unshift? Mungkin karena sifatnya merupakan kebalikan dari shift ya. Kalau tadinya shift berfungsi untuk mengeluarkan orang pertama dari antrian. Sedangkan unshift ini berfungsi untuk memasukkan orang ke antrian pertama.

Kalau kita menjalankan perintah unshift(“VIP”), maka Budi, Charli dan Doni yang sudah berada di dalam antrian harus geser ke belakang. Sedangkan VIP langsung memotong antrian menjadi orang yang paling depan. Memang tidak adil ya bagi Budi, Charli dan Doni. Namun terkadang di dunia bisnis memang ada fasilitas VIP seperti ini. Jadi kita sebagai programmer, tetap harus menyediakan fungsi untuk memotong antrian. Dalam Javascript, kita tinggal menggunakan method unshift.

Kita praktek lagi ya untuk method shift dan unshift. Kita mulai kembali dari script kosong. Kita buat sebuah variable queue dan langsung kita isikan datanya dengan “Andi”, “Budi”, “Charli”, dan “Doni”.

let queue =  ["Andi", "Budi", "Charli", "Doni"];

Kita cek isi dari variable queue. Sudah ada 4 buah data dengan index dimulai dari 0.

Kita jalankan method queue.shift(). Maka “Andi” keluar dari antrian. Kita lihat lagi isi dari variable queue.

Sekarang Budi menempati index 0, Charli menempati index 1 dan Doni menempati index 2. Jadi nomor indexnya berubah ya. Semua data yang masih ada di dalam array, nomor indexnya berkurang satu. Sedangkan nilai length dari array berubah dari 4 menjadi 3.

Sama seperti method pop, kita bisa menyimpan hasil dari shift ke dalam variable. Sebagai contoh kita jalankan perintah

let name = queue.shift();

Maka Budi sebagai orang yang mengantri di paling depan, akan keluar dari antrian dan disimpan di dalam variable name. Kita lihat lagi isi dari variable queue dan name. Nantinya variable name ini bisa kita gunakan lagi untuk proses berikutnya, seperti untuk mencatat barang apa saja yang dibeli oleh Budi, metode pembayaran apa yang hendak digunakan, dan sebagainya.

Selanjutnya kita akan mencoba untuk memasukkan seorang VIP ke dalam antrian. Namun masuknya bukan dari belakang ya. Masuknya harus langsung memotong antrian di paling depan. Sedangkan orang-orang yang sudah berada di dalam antrian harus mundur ke belakang. Kita coba jalankan perintahnya

queue.unshift("VIP");

Dan kita lihat isi dari variable queue. Sekarang index 0 ditempati oleh VIP. Sedangkan Charli dan Doni yang berada di dalam antrian mesti mundur kebelakang, nomor indexnya bertambah satu. Properti length berubah dari 2 menjadi 3.

Oke ya. Kita sudah belajar mengenai tipe data abstract stack dan queue, dimana ada 4 buah method yang mengimplementasikan kedua tipe data ini. Untuk tipe data stack, kita menggunakan method push untuk menambahkan data, dan kita menggunakan method pop untuk mengeluarkan data. Sedangkan untuk tipe data queue, normalnya kita menggunakan push untuk menambahkan data dan menggunakan shift untuk mengeluarkan data. Namun untuk kondisi tertentu, kita bisa menggunakan unshift untuk menambahkan data langsung di awal antrian. Method shift dan unshift sedikit lebih rumit dibandingkan dengan push dan pop, karena shift dan unshift menyebabkan perubahan nomor index pada data array.

2 Jam 21 Menit
1. Pendahuluan 16 Menit
3. Head 13 Menit
10. Tabel 21 Menit
1 Jam 2 Menit
1. Form 15 Menit
2. Validasi 12 Menit
3. Input Type 15 Menit
4. Dropdown 9 Menit
1 Jam 29 Menit
9. Pseudo Class 11 Menit
3 Jam 26 Menit
2. Lebar/Width 13 Menit
16. CSS Reset 6 Menit
2 Jam 21 Menit
4. Flex-Wrap 10 Menit
3 Jam 17 Menit
7. Flex Utility 16 Menit
8. Operator 28 Menit
11. Objek String 18 Menit
4. Scope 10 Menit
5. Rekursif 10 Menit
8. Notasi Big O 24 Menit
4. Prototype 18 Menit
7. Map 19 Menit
8. Set 12 Menit
2. DOM Selector 40 Menit
7. DOM Traversal 14 Menit
Dengan menggunakan fasilitas tanya jawab, maka Anda bisa bertanya dan akan dijawab langsung oleh instruktur kursus.
Anda belum terdaftar pada kursus ini sehingga tidak bisa mengajukan pertanyaan.