Cara Menambah Elemen Array di JavaScript

Array adalah tipe data dinamis yang banyak digunakan. Pada praktiknya array bisa kita gunakan untuk menyimpan daftar buku, kita juga kadang butuh menambahkan buku entah di akhir, di awal atau di posisi tertentu. Pada artikel ini kita akan mengenal cara menambah elemen ke array dengan berbagai cara. Oke mari kita mulai.

Menambahkan Elemen ke Akhir Array

Pada JavaScript, kita menggunakan fungsi push untuk menambahkan satu atau lebih elemen ke akhir dari array. Fungsi ini akan mengembalikan jumlah elemen array setelah elemen baru ditambahkan.

Jika kita mempunyai daftar nama orang dan kita ingin menambahkan nama baru ke akhir daftar, maka kita dapat menggunakan fungsi push, seperti berikut:

const daftar = ["Levi", "Arka", "Apin"];
daftar.push("Habil");
console.log(daftar); // [ 'Levi', 'Arka', 'Apin', 'Habil' ]

Seperti yang saya katakan, kita juga dapat menambahkan lebih dari satu elemen dengan fungsi push:

const daftar = ["Levi", "Arka", "Apin"];
daftar.push("Habil", "Habib");
console.log(daftar); // [ 'Levi', 'Arka', 'Apin', 'Habil', 'Habib' ]

Pada penjelasan fungsi push, kami juga menyatakan bahwa ini juga akan mengembalikan panjang dari array baru

const daftar = ["Levi", "Arka", "Apin"];
console.log(daftar.push("Habil", "Habib")); // 5

Menambahkan Elemen ke Awal Array

Fungsi unshift mirip dengan fungsi push karena fungsi ini akan menambahkan elemen ke array tetapi elemen yang ditambahkan akan berada di awal array.

Misalkan kita ingin menambahkan nama ke awal dari array yang kita coba sebelumnya:

const daftar = ["Levi", "Arka", "Apin"];
daftar.unshift("Habil");
console.log(daftar); // [ 'Habil', 'Levi', 'Arka', 'Apin' ]

Sama seperti fungsi push, fungsi ini juga bisa digunakan untuk menambahkan beberapa elemen ke array.

const daftar = ["Levi", "Arka", "Apin"];
daftar.unshift("Habil", "Habib");
console.log(daftar); // [ 'Habil', 'Habib', 'Levi', 'Arka', 'Apin' ]

Sama seperti fungsi sebelumnya, fungsi ini juga akan mengembalikan panjang array baru.

const daftar = ["Levi", "Arka", "Apin"];
console.log(daftar.unshift("Habil", "Habib")); // 5

Menambahkan Elemen ke Posisi Tertentu pada Array

Sejauh ini, kita hanya melihat cara menambahkan elemen ke awal atau akhir array. Kalian mungkin bertanya bagaimana cara menambahkan elemen ke posisi tertentu pada array. Nah!, kalian bisa menggunakan fungsi splice untuk melakukan ini.

Fungsi splice adalah fungsi yang bisa mengubah isi dari array dengan menghapus, mengganti, atau menambah elemen pada posisi tertentu. Bagian ini akan mengulas bagaimana cara menambahkan elemen ke posisi tertentu. Jika kalian ingin mengetahui cara menghapus elemen dengan fungsi ini maka kalian bisa membaca Cara Menghapus Elemen Array di JavaScript

Berikut adalah syntax dari fungsi splice:

Array.splice(start_position, delete_count, new_element...);

• start_position menentukan indeks di mana kita akan menambahkan elemen di array. Jika kita ingin menambahkan beberapa elemen, maka ini menentukan di mana elemen pertama kali ditambahkan.
• delete_count menentukan jumlah elemen yang ingin kita hapus dari start_position. Karena kita hanya ingin menambahkan elemen ke array dan tidak ingin menghapus elemen, maka kita harus menentukan delete_count menjadi 0.
• Parameter berikutnya bisa lebih dari satu, ini adalah elemen yang ingin kita tambahkan pada posisi yang telah ditentukan.

Ini adalah ilustrasi argumen fungsi splice untuk menambahkan elemen ke array.

Contohnya, kita mempunyai daftar nama seperti tadi:

const daftar = ["Levi", "Arka", "Apin"];

Misalkan, kita coba tambahkan “Habil” setelah “Levi”

const daftar = ["Levi", "Arka", "Apin"];
daftar.splice(1, 0, "Habil");
console.log(daftar); // [ 'Levi', 'Habil', 'Arka', 'Apin' ]

Seperti yang kita lakukan pada fungsi lainnya, kita juga bisa menambahkan lebih dari satu elemen:

const daftar = ["Levi", "Arka", "Apin"];
daftar.splice(1, 0, "Habil", "Habub");
console.log(daftar); // [ 'Levi', 'Habil', 'Habub', 'Arka', 'Apin' ]

Bonus: Mengganti Elemen dengan splice

Sekarang, kalian telah mengetahui bahwa fungsi splice bisa digunakan untuk menghapus dan menambahkan elemen. Fungsi ini juga bisa melakukan kedua hal tersebut secara bersamaan atau bisa kita sebut dengan mengganti elemen. Untuk mengganti elemen maka, delete_count harus lebih dari 0.

Misalkan kita mempunyai daftar nama seperti ini:

const daftar = ["Levi", "Arka", "Habil", "Apin"];

Kita ingin mengganti “Habil” dengan “Habib”. Dengan kata lain kita menghapus “Habil” (indeks ke-2) dan menambahkan “Habib” ke indeks ke-2.

const daftar = ["Levi", "Arka", "Habil", "Apin"];
daftar.splice(2, 1, "Habib");
console.log(daftar); // [ 'Levi', 'Arka', 'Habib', 'Apin' ]

Kita juga bisa mengganti 1 elemen dengan 2 atau lebih elemen. Contohnya kita mengganti “Habil” dengan “Habib” dan “Pujo”.

const daftar = ["Levi", "Arka", "Habil", "Apin"];
daftar.splice(2, 1, "Habib", "Pujo");
console.log(daftar); // [ 'Levi', 'Arka', 'Habib', 'Pujo', 'Apin' ]

Menambahkan Elemen dengan Fungsi concat

Kita dapat menggunakan fungsi concat untuk menambahkan elemen ke awal atau akhir dari array. Berbeda dengan fungsi sebelumnya, fungsi ini tidak mengubah array awal. Alih-alih, fungsi ini membuat array baru. Fungsi ini sebenarnya digunakan untuk menggabung beberapa array menjadi satu. Fungsi ini akan mengembalikan array hasil penggabungan

Kita dapat menggunakan fungsi ini untuk menambah elemen ke awal array:

const daftar = ["Levi", "Arka", "Apin"];
const daftarBaru = ["Habil", "Habib"].concat(daftar);
console.log(daftarBaru); // [ 'Habil', 'Habib', 'Levi', 'Arka', 'Apin' ]

Fungsi ini juga bisa digunakan untuk menambah elemen ke akhir array.

const daftar = ["Levi", "Arka", "Apin"];
const daftarBaru = daftar.concat(["Habil", "Habib"]);
console.log(daftarBaru); // [ 'Levi', 'Arka', 'Apin', 'Habil', 'Habib' ]

Kita juga bisa menambahkan elemen ke awal dan akhir dari array secara secara bersamaan:

const daftar = ["Levi", "Arka", "Apin"];
const daftarBaru = ["Habil"].concat(daftar, "Habib");
console.log(daftarBaru); // [ 'Habil', 'Levi', 'Arka', 'Apin', 'Habib' ]

Kesimpulan

Pada artikel ini, kita telah mempelajari berbagai cara untuk menambahkan elemen ke array pada awal, akhir atau posisi apa pun dengan fungsi splice.

Kita juga telah belajar bahwa fungsi concat bisa digunakan untuk menambahkan elemen tanpa mengganggu elemen awal.

Gunakan fungsi sesuai kebutuhan.