Pada video sebelumnya kita telah mempelajari beberapa method Array yang sering dipakai. Ada method tertentu yang langsung mengubah isi array yang bersangkutan. Ada juga method tertentu yang membuat array baru. Nah, disini muncullah pertanyaan bagi kita. Bagaimana caranya kita bisa tau apakah dua buah array itu sama, atau dua buah array itu berbeda?

Untuk menjawab pertanyaan ini, kita harus memahami terlebih dahulu bagaimana cara Javascript menyimpan array di memory. Gambar pada slide ini sudah pernah kita bahas pada video Object String. Dan array juga termasuk ke tipe data object, jadi cara menyimpan datanya juga sama ya.

Jadi di gambar ini, kita bisa melihat bahwa pada saat kita menjalankan perintah untuk membuat variable baru dengan nama array1, yang isinya adalah angka 1, 2 dan 3, maka pada memory, browser membuat satu buah variable dengan nama array1, yang isinya adalah pointer. Pointer ini menunjuk ke bagian lain dari memory, yang kita sebut dengan nama Heap. Isi data 1, 2, dan 3 ini disimpan di dalam Heap yang ditunjuk oleh pointer. Berhubung Heap adalah memory yang bersifat dinamis, maka kita bisa dengan flexible menambah ataupun mengurangi isi array, sehingga menyebabkan jumlah memory yang digunakannya menjadi bertambah ataupun berkurang.

Sampai disini jelas ya. Kita masih mengulangi pelajaran dari Object String.

Selanjutnya kita membuat variable baru dengan nama array2, yang isinya adalah array1. Artinya browser membuat variable array2 pada memory. Dan kemudian array2 ini diisi dengan pointer yang menunjuk ke heap yang sama dengan yang ditunjuk oleh array1.

Sebagai akibatnya, array2 dan array1 adalah satu buah array yang sama. Kalau kita menggunakan strick equality operator, array2 === array1, maka hasilnya adalah true.

Apabila kita mengubah isi dari array2, misalkan nilai yang disimpan di index 0 menjadi -5, maka nilai yang disimpan oleh array2 menjadi -5, 2 dan 3. Dan nilai yang disimpan oleh array1 juga turut berubah, menjadi -5, 2 dan 3 juga.

Kita masuk ke contoh lainnya, kita membuat array1 dengan isi 1, 2 dan 3. Kemudian kita membuat lagi array2 dengan isi 1, 2 dan 3 juga. Kalau kita sebagai programmer, melihat bahwa kedua array isinya sama, maka kita berpikir bahwa keduanya adalah array yang sama. Namun kenyataannya, browser membuat dua buah array yang berbeda di dalam heap, dimana setiap variable menunjuk ke array masing-masing.

Apabila kita menjalankan perintah array1 === array2, maka kita mendapatkan jawaban false. Artinya array1 tidak sama dengan array2.

Lalu apabila kita menjalankan perintah array2[0] = -5. Maka yang berubah hanya isi dari array2, menjadi -5, 2 dan 3. Sedangkan array1 isinya tetap 1, 2, 3. Jadi teman-teman sudah bisa membedakan ya, antara array yang sama dengan array yang berbeda.

Kita langsung praktek coding ya. Saya membuka halaman yang Javascript-nya masih kosong. Jadi kita harus menuliskan sendiri coding kita mulai dari awal. Pertama kita tes terlebih dahulu dua buah array yang berbeda ya. Jadi kita buat 2 buah variable array dengan perintah

let array1 = [1, 2, 3];
let array2 = [1, 2, 3];

Kemudian kita tes apakah kedua array ini sama atau berbeda dengan perintah

array1 === array2;

Jawabannya adalah false. Jadi walaupun di mata kita kedua array ini sama-sama berisi 1, 2 dan 3. Namun menurut komputer kedua array ini adalah dua buah array yang berbeda. Mengapa? Karena kedua variable merujuk ke memori yang berbeda. Jadi kalau kita mencoba untuk mengubah isi dari array1:

array1[0] = -10;

Sekarang kita lihat lagi isi dari kedua array. Isi dari array1 adalah -10, 2, 3. Sedangkan isi dari array2 tetap 1, 2, 3. Artinya kedua array memang berbeda ya. Jadi perubahan yang kita lakukan pada array1 tidak merubah array2.

Jadi ini adalah perbedaan mendasar antara tipe data primitif dengan tipe data pointer. Kalau kita melihat ke tipe data primitif:

10 === 10;

Maka jawabannya adalah true. Karena memory diisi langsung dengan nilai 10. Sehingga apabila dibandingkan, nilai 10 yang dikiri adalah sama dengan nilai 10 yang dikanan. Namun hasilnya berbeda kalau kita menggunakan array yang merupakan tipe data pointer.

[10] === [10];

Kita mendapatkan jawaban false, walaupun menurut kita isi arraynya sama. Mengapa false? Karena array yang di kiri disimpan pada memori yang berbeda dari array yang di kanan.

Kita refresh browser dan kita ulang coding dari awal. Kali ini kita akan mencoba untuk membuat 2 buah array yang sama. Bagaimana caranya? Tentunya teman-teman masih ingat ya coding dari slide barusan.

let array1 = [1, 2, 3];
let array2 = array1;

Artinya kita mengisikan array2 dengan pointer yang sama dengan array1. Baik array2 maupun array1 merujuk ke array yang sama. Jadi kalau kita jalankan perintah

array1 === array2;

Maka jawabannya adalah true. Kalau kita coba merubah isi dari array1

array1[0] = -10;

Maka sekarang isi dari array1 adalah -10, 2, 3. Dan yang menariknya disini adalah isi dari array2 ikut berubah menjadi -10, 2, 3. Karena keduanya adalah array yang sama. Jadi kalau kita mencoba untuk merubah array yang pertama, maka kita ikut merubah array yang kedua.

Jadi sekarang teman-teman sudah bisa membedakan ya, array yang sama dengan array yang berbeda. Sebagai contoh kalau kita memanggil method Reverse, maka kita akan mendapatkan array yang sama. Jadi kalau kita jalankan kode seperti

let array3 = array1.reverse();
array3 === array1;

Maka kita mendapatkan jawaban true. Karena method reverse mengembalikan array yang sama.

Kita refresh lagi browser. Selanjutnya kita akan membahas mengenai penggunaan const pada array. Kalau teman-teman melihat contoh coding, baik dari situs dokumentasi seperti MDN ataupun coding buatan orang lain, kita sering menemukan bahwa deklarasi variable array menggunakan const, bukan let. Mengapa begitu?

Kita ulangi sebentar ya. Kalau kita menggunakan const untuk membuat konstanta dengan tipe data primitif seperti angka, perintahnya adalah

const NUM = 10;

Maka nilai dari NUM sudah tidak bisa diganti lagi. Kalau kita coba ganti menjadi nilai 5, atau kita ganti menjadi string “skysen”, maka kita mendapatkan error.

Sama seperti kita membuat array dengan menggunakan const. Sebagai contoh

const array1 = [1, 2, 3];

Kita sudah tidak bisa mengganti nilainya, baik menjadi 10, string “skysen”, ataupun menjadi array [1, 2, 3] lagi. Namun yang menariknya disini, berhubung array adalah tipe data pointer, yang tidak bisa diubah hanyalah pointernya saja. Jadi array1 harus menunjuk ke array yang sama. Namun yang menarik disini, isi array masih tetap bisa kita ubah dengan menggunakan method maupun index.

Sebagai contoh, saya panggil method push(4). Maka sekarang isi array1 menjadi [1, 2, 3, 4];

Atau saya ganti nilai array1[0] = -10. Sekarang isinya menjadi [-1, 2, 3, 4];

Jadi penggunaan const disini hanya untuk memastikan bahwa array1 tidak diubah menjadi tipe data lain atau menunjuk ke array yang lain. Namun const tetap memperbolehkan kita untuk memanipulasi isi data array, baik dengan menggunakan method maupun index.

Sebagai bagian terakhir dari video ini, kita akan membahas bagaimana kalau kita menggunakan array sebagai argument dalam function. Kita buka kembali coding Javascript, dan kita tuliskan kode sederhana:

function updateParameter(param)
{
  param = 10;
  console.log("Di dalam function, nilai = " + param);
}

let num = 1;
updateParameter(num);
console.log("Di luar function, nilai = " + num);

Jadi disini kita membuat satu buah function dengan nama updateParameter yang menggunakan satu buah parameter dengan nama param. Di dalam function, kita ubah nilai param menjadi 10. Dan kemudian kita tuliskan nilai param di console. Di luar function, kita membuat variable num dengan nilai awal 1 dan kita gunakan untuk memanggil function updateParameter. Setelah itu kita tuliskan nilai num di console.

Kita simpan dan jalankan di browser. Maka kita mendapatkan hasil

Di dalam function, nilai = 10
Di luar function, nilai = 1

Mengapa begitu? Karena pada saat memanggil function updateParameter, browser hanya mengirimkan nilainya saja, yaitu angka 1 ini sebagai parameter. Jadi semua perubahan yang kita lakukan terhadap parameter, hanya berlaku di dalam function saja. Sedangkan di luar function, nilai dari variable num tetap 1. Hal ini biasanya kita sebut dengan nama parsing parameter by value.

Sekarang kita ubah sedikit coding kita. Kita akan menggunakan array sebagai parameter. Jadi kita ubah coding-nya menjadi:

function updateParameter(param)
{
  param[0] = 10;
  console.log("Di dalam function, nilai = " + param);
}

let array1 = [1, 2, 3];
updateParameter(array1);
console.log("Di luar function, nilai = " + array1);

Kalau kita jalankan, maka kita mendapatkan hasil

Di dalam function, nilai = 10,2,3
Di luar function, nilai = 10,2,3

Sekarang perubahan yang kita lakukan di dalam function, hasilnya turut mengubah variable array1 yang berada di luar function. Mengapa? Karena pada saat kita mengirimkan array1 sebagai argument, yang dikirimkan adalah pointer ke memory array. Artinya param dan array1 menunjuk ke array yang sama. Jadi perubahan yang kita lakukan pada param di dalam function, akan turut mengubah isi array1 di luar function. Hal ini kita sebut dengan nama parsing parameter by reference.

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.