JavaScript: Cara Menambahkan Elemen ke Array (push, unshift, splice, concat, spread) — Panduan untuk Pemula hingga Menengah

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Pendahuluan

2. Konsep Dasar Array

Apa Itu Array? — Dasar-dasar Manajemen Data

Contoh:

let fruits = ["apple", "banana", "orange"];
console.log(fruits); // ["apple", "banana", "orange"]

console.log(fruits[0]); // "apple"

Inisialisasi Array dan Operasi Dasar

1. Membuat array kosong:

   let arr = [];
   

2. Membuat array dengan nilai awal:

   let numbers = [1, 2, 3, 4];
   

3. Menulis array dalam beberapa baris:

   let colors = [
     "red",
     "blue",
     "green"
   ];
   

console.log(colors.length); // 3

3. Metode Dasar untuk Menambahkan Elemen ke Array

3.1 Menambahkan ke Akhir: push()

Apa Itu push()?

Sintaks

array.push(element1, element2, ..., elementN);

Contoh

let fruits = ["apple", "banana"];
fruits.push("orange");
console.log(fruits); // ["apple", "banana", "orange"]

Contoh: Menambahkan Beberapa Elemen

fruits.push("grape", "melon");
console.log(fruits); // ["apple", "banana", "orange", "grape", "melon"]

3.2 Menambahkan ke Awal: unshift()

Apa Itu unshift()?

Sintaks

array.unshift(element1, element2, ..., elementN);

Contoh

let animals = ["dog", "cat"];
animals.unshift("rabbit");
console.log(animals); // ["rabbit", "dog", "cat"]

3.3 Menambahkan di Posisi Manapun: splice()

Apa Itu splice()?

Sintaks

array.splice(start, deleteCount, item1, item2, ..., itemN);

Contoh

let colors = ["red", "blue", "green"];
colors.splice(1, 0, "yellow");
console.log(colors); // ["red", "yellow", "blue", "green"]

colors.splice(2, 1, "purple");
console.log(colors); // ["red", "yellow", "purple", "green"]

Ringkasan

4. Teknik Lanjutan: Menggabungkan Array dan Menambahkan Elemen

4.1 Menggabungkan Array: concat()

Apa Itu concat()?

Sintaks

array1.concat(array2, array3, ...);

Contoh

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = array1.concat(array2);
console.log(result); // [1, 2, 3, 4, 5, 6]

4.2 Menggabungkan Array dengan Spread Syntax (...)

Apa Itu Spread Syntax?

Sintaks

[...array1, ...array2, ...elements];

Contoh

let array1 = [1, 2, 3];
let array2 = [4, 5, 6];

let result = [...array1, ...array2];
console.log(result); // [1, 2, 3, 4, 5, 6]

4.3 Membandingkan Opsi untuk Penggabungan Array

Ringkasan

• Metode concat() : Cara non-mutasi untuk menggabungkan array tanpa mengubah yang asli.
• Spread syntax : Pendekatan modern dan ringkas untuk operasi array yang fleksibel.

5. Praktik Terbaik untuk Penanganan Array yang Efisien

5.1 Metode Mutasi vs. Non-Mutasi

Apa Itu Metode Mutasi?

Apa Itu Metode Non-Mutasi?

5.2 Menulis Kode yang Memperhatikan Performa

Mengoptimalkan Loop

let length = arr.length;
for (let i = 0; i < length; i++) {
  console.log(arr[i]);
}

Menggunakan Method Chaining

let numbers = [1, 2, 3, 4, 5];
let result = numbers
  .filter(num => num > 2)
  .map(num => num * 2);

console.log(result); // [6, 8, 10]

5.3 Meningkatkan Keterbacaan Kode

Gunakan Nama Variabel yang Jelas

let userIds = [1, 2, 3];

Tambahkan Komentar Secara Tepat

let evenIds = userIds.filter(id => id % 2 === 0);

Gunakan Template Literals

let name = "Yamada";
let age = 25;
console.log(`${name} is ${age} years old.`);

Ringkasan

• Memilih antara metode mutasi dan non-mutasi
• Menggunakan loop yang memperhatikan performa dan method chaining
• Meningkatkan keterbacaan melalui penamaan dan komentar

6. Contoh Praktis dan Kasus Penggunaan

6.1 Mengelola Data Input Formulir

Skenario: Menyimpan Nilai Input Formulir dalam Array

let userList = [];

function addUser(name) {
  userList.push(name);
  console.log(userList);
}

addUser("Sato");
addUser("Suzuki");
addUser("Tanaka");

["Sato"]  
["Sato", "Suzuki"]  
["Sato", "Suzuki", "Tanaka"]

Menghapus Elemen Spesifik dari Array

function removeUser(name) {
  userList = userList.filter(user => user !== name);
  console.log(userList);
}

removeUser("Suzuki");

["Sato", "Tanaka"]

6.2 Menambahkan Data Dinamis dalam Aplikasi Manajemen Tugas

Skenario: Menambahkan Tugas dan Melacak Penyelesaian

let tasks = [];

function addTask(name) {
  tasks.push({ name: name, completed: false });
  console.log(tasks);
}

function completeTask(index) {
  tasks[index].completed = true;
  console.log(tasks);
}

addTask("Cleaning");
addTask("Laundry");
completeTask(0);

[{ name: "Cleaning", completed: true }, { name: "Laundry", completed: false }]

6.3 Menangani Struktur Data Kompleks

Skenario: Bekerja dengan Array dan Objek Bersarang

let users = [
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer"] },
];

function addRole(userId, role) {
  let user = users.find(user => user.id === userId);
  if (user && !user.roles.includes(role)) {
    user.roles.push(role);
  }
  console.log(users);
}

addRole(2, "editor");

[
  { id: 1, name: "Sato", roles: ["admin", "editor"] },
  { id: 2, name: "Suzuki", roles: ["viewer", "editor"] }
]

Ringkasan

1. Mengelola data input formulir – Operasi dasar untuk menambah dan menghapus item.
2. Membangun aplikasi manajemen tugas – Penanganan array dinamis dan pembaruan status.
3. Menangani struktur data kompleks – Menambah dan memperbarui elemen dalam array dan objek bersarang.

7. Pertanyaan yang Sering Diajukan (Q&A)

Q1. Apa cara termudah untuk mengosongkan sebuah array?

Jawaban: Setel properti length menjadi 0

let arr = [1, 2, 3, 4];
arr.length = 0;
console.log(arr); // []

Q2. Bagaimana cara menambahkan hanya elemen unik (tanpa duplikat)?

Jawaban: Gunakan includes() atau Set

let arr = [1, 2, 3];
let value = 3;

if (!arr.includes(value)) {
  arr.push(value);
}
console.log(arr); // [1, 2, 3]

let arr = [1, 2, 3];
let values = [3, 4, 5];

arr = [...new Set([...arr, ...values])];
console.log(arr); // [1, 2, 3, 4, 5]

Q3. Bagaimana cara menambahkan elemen ke array bersarang?

Jawaban: Gunakan push() atau sintaks spread

let nestedArray = [[1, 2], [3, 4]];
nestedArray.push([5, 6]);
console.log(nestedArray); // [[1, 2], [3, 4], [5, 6]]

nestedArray[1].push(7);
console.log(nestedArray); // [[1, 2], [3, 4, 7], [5, 6]]

Ringkasan

8. Ringkasan Akhir dan Tabel Perbandingan

8.1 Ringkasan Keseluruhan

Operasi Dasar Array

• Apa itu array? Sebuah struktur yang mengelola banyak nilai, dan Anda mengakses elemen melalui indeks.
• Inisialisasi dan operasi dasar Array mudah dibuat dengan [], dan Anda dapat memeriksa jumlah elemen dengan length .

Metode untuk Menambah/Menghapus Elemen

• Menambah ke akhir: push() Sederhana dan banyak digunakan, tetapi mengubah (mutasi) array asli.
• Menambah ke awal: unshift() Berguna ketika urutan penting, tetapi perhatikan kinerja.
• Menambah/menghapus di posisi mana saja: splice() Sangat fleksibel, tetapi sintaksnya bisa agak kompleks.

Menggabungkan dan Memperluas Array

• concat() Cara yang tidak memutasi, aman untuk menggabungkan beberapa array.
• Sintaks spread (...) Sederhana, mudah dibaca, dan ideal untuk lingkungan JavaScript modern.

Tips Efisiensi

• Metode mutasi vs non-mutasi Pilih metode non-mutasi ketika Anda perlu mempertahankan data asli.
• Loop yang berfokus pada kinerja Optimalkan untuk kecepatan dan efisiensi memori bila diperlukan.

Contoh dan Kasus Penggunaan

• Manajemen input formulir Simpan nilai dalam array dan terapkan penambahan/penghapusan dengan mudah.
• Sistem manajemen tugas Tambah dan hapus tugas secara dinamis serta lacak status penyelesaian.
• Operasi data bersarang Tangani struktur kompleks dengan fleksibel menggunakan array dan objek bersarang.

8.2 Tabel Perbandingan Metode Array

Ringkasan

• Operasi inti array dan metode untuk menambah/menghapus elemen.
• Teknik lanjutan seperti penggabungan dan ekspansi array.
• Kasus penggunaan praktis dan tips untuk manajemen array yang efisien.
• Pertanyaan umum dan solusinya.

Langkah Selanjutnya