JavaScript Array Insert - Cara Menambahkan ke Array dengan Fungsi Push, Unshift, dan Concat

Array JavaScript adalah salah satu tipe data favorit saya. Mereka dinamis, mudah digunakan, dan menawarkan sejumlah besar metode bawaan yang dapat kami manfaatkan.

Namun, semakin banyak opsi yang Anda miliki, semakin membingungkan untuk memutuskan mana yang harus Anda gunakan.

Pada artikel ini, saya ingin membahas beberapa cara umum untuk menambahkan elemen ke array JavaScript.

Metode Dorong

Metode array JavaScript pertama dan mungkin paling umum yang akan Anda temui adalah push () . Metode push () digunakan untuk menambahkan elemen ke akhir larik.

Katakanlah Anda memiliki larik elemen, setiap elemen adalah string yang mewakili tugas yang perlu Anda selesaikan. Masuk akal untuk menambahkan item yang lebih baru ke akhir larik sehingga kita bisa menyelesaikan tugas sebelumnya terlebih dahulu.

Mari kita lihat contoh dalam bentuk kode:

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item']

Baiklah, jadi push telah memberi kita sintaks yang bagus dan sederhana untuk menambahkan item ke akhir array kita.

Katakanlah kita ingin menambahkan dua atau tiga item sekaligus ke daftar kita, lalu apa yang akan kita lakukan? Ternyata, push () dapat menerima banyak elemen untuk ditambahkan sekaligus.

const arr = ['First item', 'Second item', 'Third item']; arr.push('Fourth item', 'Fifth item'); console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Sekarang setelah kita menambahkan beberapa tugas lagi ke array kita, kita mungkin ingin mengetahui berapa banyak item yang saat ini ada dalam array kita untuk menentukan apakah kita memiliki terlalu banyak di piring kita.

Untungnya, push () memiliki nilai yang dikembalikan dengan panjang array setelah elemen kita ditambahkan.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.push('Fourth item', 'Fifth item'); console.log(arrLength); // 5 console.log(arr); // ['First item', 'Second item', 'Third item', 'Fourth item', 'Fifth item']

Metode Unshift

Tidak semua tugas dibuat sama. Anda mungkin mengalami skenario di mana Anda menambahkan tugas ke array Anda dan tiba-tiba Anda menemukan satu yang lebih mendesak daripada yang lain.

Saatnya memperkenalkan teman kita unshift () yang memungkinkan kita menambahkan item ke awal larik kita.

const arr = ['First item', 'Second item', 'Third item']; const arrLength = arr.unshift('Urgent item 1', 'Urgent item 2'); console.log(arrLength); // 5 console.log(arr); // ['Urgent item 1', 'Urgent item 2', 'First item', 'Second item', 'Third item']

Anda mungkin memperhatikan dalam contoh di atas bahwa, seperti metode push () , unshift () mengembalikan panjang array baru untuk kita gunakan. Ini juga memberi kita kemampuan untuk menambahkan lebih dari satu elemen pada satu waktu.

Metode Concat

Kependekan dari concatenate (untuk menghubungkan bersama), metode concat () digunakan untuk menggabungkan dua (atau lebih) array.

Jika Anda ingat dari atas, metode unshift () dan push () mengembalikan panjang array baru. concat () , di sisi lain,akan mengembalikan larik yang benar-benar baru.

Ini adalah perbedaan yang sangat penting dan membuat concat () sangat berguna saat Anda berurusan dengan array yang tidak ingin Anda mutasikan (seperti array yang disimpan dalam status React).

Berikut adalah contoh kasus yang cukup mendasar dan langsung:

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = arr1.concat(arr2); console.log(arr3); // ["?", "?", "?", "?"] 

Katakanlah Anda memiliki beberapa larik yang ingin Anda gabungkan. Jangan khawatir, concat () ada untuk menyelamatkan hari ini!

const arr1 = ['?', '?']; const arr2 = ['?', '?']; const arr3 = ['?', '?']; const arr4 = arr1.concat(arr2,arr3); console.log(arr4); // ["?", "?", "?", "?", "?", "?"] 

Kloning dengan Concat

Ingat bagaimana saya mengatakan bahwa concat () dapat berguna ketika Anda tidak ingin mengubah array yang ada? Mari kita lihat bagaimana kita dapat memanfaatkan konsep ini untuk menyalin isi dari satu larik ke larik baru.

const arr1 = ["?", "?", "?", "?", "?", "?"]; const arr2 = [].concat(arr1); arr2.push("?"); console.log(arr1) //["?", "?", "?", "?", "?", "?"] console.log(arr2) //["?", "?", "?", "?", "?", "?", "?"]

Hebat! Kita pada dasarnya dapat "mengkloning" sebuah array menggunakan concat () .

Tapi ada 'gotcha' kecil dalam proses kloning ini. Larik baru adalah "salinan dangkal" dari larik yang disalin. Ini berarti bahwa objek apa pun disalin dengan referensi dan bukan objek sebenarnya.

Mari kita lihat contoh untuk menjelaskan gagasan ini dengan lebih jelas.

const arr1 = [{food:"?"}, {food:"?"}, {food:"?"}] const arr2 = [].concat(arr1); //change only arr2 arr2[1].food = "?"; arr2.push({food:"?"}) console.log(arr1) //[ { food: '?' }, { food: '?' }, { food: '?' } ] console.log(arr2) //[ { food: '?' }, { food: '?' }, { food: '?' }, { food: '?' } ]

Meskipun kami tidak secara langsung membuat perubahan apa pun pada larik asli kami, larik tersebut pada akhirnya dipengaruhi oleh perubahan yang kami buat pada larik kloning kami!

Ada beberapa cara berbeda untuk melakukan "deep clone" dari sebuah array dengan benar, tapi saya akan meninggalkannya untuk Anda sebagai pekerjaan rumah.

TL; DR

Saat Anda ingin menambahkan elemen ke akhir array, gunakan push (). Jika Anda perlu menambahkan elemen ke awal array, coba unshift (). Dan kamu bisamenambahkan array bersama menggunakan concat ().

Tentunya ada banyak opsi lain untuk menambahkan elemen ke larik, dan saya mengundang Anda untuk keluar dan menemukan beberapa metode larik yang lebih hebat!

Jangan ragu untuk menghubungi saya di Twitter dan beri tahu saya metode larik favorit Anda untuk menambahkan elemen ke larik.