Array JavaScript Dijelaskan: Dasar-dasar, Operasi, dan Contoh Praktis

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

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

1. Pendahuluan

Apa Itu Array JavaScript dan Mengapa Mereka Penting?

Array JavaScript adalah salah satu elemen penting untuk mengelola dan memanipulasi data secara efisien. Dengan menggunakan array, Anda dapat menyimpan banyak nilai dalam satu variabel dan mengambil atau memodifikasinya sesuai kebutuhan.

Sebagai contoh, array sangat berguna saat menyimpan daftar nama pengguna, katalog produk, atau hasil perhitungan. Dalam pengembangan aplikasi web, array sering dipakai saat menangani data formulir atau data yang diambil dari API.

Contoh Penggunaan Praktis untuk Array

• Manajemen daftar : Mengelola item keranjang belanja atau daftar Todo.
• Penyaringan data : Pencarian pengguna dan fungsi pengurutan.
• Penanganan animasi : Mengontrol urutan elemen dan pembaruan dinamis.

Dengan cara ini, array menjadi struktur dasar untuk menangani data yang dikelompokkan dan topik yang tak tergantikan saat belajar JavaScript.

Apa yang Akan Anda Pelajari dalam Artikel Ini

Artikel ini menjelaskan array JavaScript secara sistematis dengan topik‑topik berikut:

1. Cara mendeklarasikan dan menginisialisasi array
2. Menambah, menghapus, dan mengambil elemen
3. Teknik pengurutan dan penyaringan
4. Metode penggabungan dan pemisahan array
5. Contoh penerapan praktis menggunakan array

Kontennya dirancang untuk pemula maupun pembelajar menengah, dengan cakupan lengkap mulai dari operasi dasar hingga teknik lanjutan.

Target Audiens

• Pemula : Mereka yang pertama kali bekerja dengan array.
• Pengembang menengah : Mereka yang ingin mempelajari operasi array yang lebih maju dan efisien.

Dengan contoh kode dan kasus penggunaan praktis, bahkan pemula dapat belajar dengan percaya diri.

Apa yang Dapat Anda Capai dengan Mempelajari Array

Dengan menguasai array JavaScript, Anda akan memperoleh keterampilan berikut:

• Manajemen dan manipulasi data : Menambah, menghapus, dan mengurutkan data dengan mudah.
• Integrasi API : Memproses dan menampilkan data yang diambil dari API web secara efisien.
• Pengembangan aplikasi : Membangun aplikasi sederhana berdasarkan contoh praktis.

Gunakan pengetahuan yang Anda dapatkan di sini untuk membuat program yang lebih maju dengan JavaScript.

2. Dasar-dasar Array: Deklarasi dan Inisialisasi

2.1 Definisi dan Peran Array

Di JavaScript, sebuah array adalah objek khusus yang memungkinkan Anda mengelola banyak nilai sekaligus. Setiap elemen memiliki urutan (indeks), sehingga mudah untuk mengambil dan memanipulasi data.

Peran Utama Array

1. Manajemen daftar : Mengatur daftar produk atau informasi pengguna.
2. Manipulasi data : Pemrosesan efisien seperti pengurutan dan pencarian.
3. Penanganan data dinamis : Mengubah dan memproses data yang diambil dari API.

Karakteristik Array

• Indeks dimulai dari 0.
• Elemen dengan tipe data berbeda dapat hidup berdampingan dalam satu array.

  let mixedArray = [1, "hello", true];
  console.log(mixedArray[1]); // "hello"
  

2.2 Mendeklarasikan dan Menginisialisasi Array

Deklarasi Array Dasar

Di JavaScript, array dapat dideklarasikan dengan dua cara berikut.

1. Menggunakan literal array (disarankan)

   let fruits = ["apple", "banana", "grape"];
   

2. Menggunakan konstruktor Array

   let fruits = new Array("apple", "banana", "grape");
   

Membuat Array Kosong

let emptyArray = [];

2.3 Mendeklarasikan Array Multidimensi

Array multidimensi menyimpan array di dalam sebuah array. Ini berguna saat mengelola struktur data hierarkis.

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

console.log(matrix[1][2]); // 6

2.4 Catatan Penting Saat Menginisialisasi Array

Mencampur Tipe Data

Karena array JavaScript dapat berisi tipe data yang berbeda, hal ini dapat menyebabkan kesalahan tak terduga jika tidak ditangani dengan hati‑hati.

let mixed = [1, "text", true];
console.log(typeof mixed[0]); // "number"
console.log(typeof mixed[1]); // "string"
console.log(typeof mixed[2]); // "boolean"

2.5 Contoh Operasi Array Dasar

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

animals.push("rabbit");
console.log(animals); // ["dog", "cat", "bird", "rabbit"]

animals[1] = "lion";
console.log(animals); // ["dog", "lion", "bird", "rabbit"]

Ringkasan

Pada bagian ini, kami membahas topik-topik berikut yang terkait dengan array JavaScript:

1. Definisi dan peran array
2. Sintaks dasar untuk deklarasi dan inisialisasi
3. Array multidimensi dan pengindeksan
4. Pertimbangan penting serta contoh kode praktis

Dengan menguasai dasar‑dasar ini, Anda akan dapat melanjutkan ke langkah berikutnya dengan lancar: operasi array dasar.

3. Operasi Array Dasar: Tambah, Hapus, dan Ambil

3.1 Cara Menambahkan Elemen

Tambahkan Elemen ke Akhir – push()

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

Tambahkan Elemen ke Awal – unshift()

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

3.2 Cara Menghapus Elemen

Hapus Elemen dari Akhir – pop()

let colors = ["red", "blue", "green"];
let removed = colors.pop();
console.log(colors); // ["red", "blue"]
console.log(removed); // "green"

Hapus Elemen dari Awal – shift()

let numbers = [1, 2, 3, 4];
let removedNumber = numbers.shift();
console.log(numbers); // [2, 3, 4]
console.log(removedNumber); // 1

Hapus Elemen dari Posisi Manapun – splice()

let sports = ["soccer", "baseball", "basketball", "tennis"];
sports.splice(1, 2);
console.log(sports); // ["soccer", "tennis"]

3.3 Cara Mengambil Elemen

Mengambil dengan Indeks

let drinks = ["water", "tea", "coffee"];
console.log(drinks[0]); // "water"
console.log(drinks[2]); // "coffee"

Dapatkan Elemen Terakhir dalam Array

let cities = ["Tokyo", "Osaka", "Kyoto"];
console.log(cities[cities.length - 1]); // "Kyoto"

Mengambil Elemen yang Memenuhi Kondisi – find()

let numbers = [10, 20, 30, 40];
let result = numbers.find(num => num > 25);
console.log(result); // 30

Ringkasan

Pada bagian ini, kami membahas poin‑poin kunci berikut tentang operasi array JavaScript:

1. Cara menambahkan elemen (push() dan unshift())
2. Cara menghapus elemen (pop(), shift(), dan splice())
3. Cara mengambil elemen (akses indeks, find(), dan includes())

Dengan menggabungkan operasi dasar ini, Anda dapat memanipulasi array secara bebas dan efektif.

4. Mengurutkan dan Menyaring Array

4.1 Cara Mengurutkan Array

Urutkan secara Ascending/Descending – sort()

let numbers = [40, 10, 30, 20];
numbers.sort((a, b) => a - b);
console.log(numbers); // [10, 20, 30, 40]

Membalik Urutan – reverse()

let letters = ["a", "b", "c", "d"];
letters.reverse();
console.log(letters); // ["d", "c", "b", "a"]

4.2 Cara Menyaring Array

Ekstrak Elemen yang Memenuhi Kondisi – filter()

let numbers = [1, 2, 3, 4, 5, 6];
let evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // [2, 4, 6]

Dapatkan Elemen Pertama yang Memenuhi Kondisi – find()

let ages = [15, 20, 25, 30];
let firstAdult = ages.find(age => age >= 20);
console.log(firstAdult); // 20

Dapatkan Indeks Elemen Pertama yang Cocok – findIndex()

let scores = [50, 70, 85, 40];
let highScoreIndex = scores.findIndex(score => score > 80);
console.log(highScoreIndex); // 2

Ringkasan

Pada bagian ini, kami menjelaskan secara detail cara mengurutkan dan menyaring array JavaScript.

1. Pengurutan: Mengontrol urutan menggunakan sort() dan reverse().
2. Penyaringan: Menggunakan filter() untuk mengekstrak hanya elemen yang memenuhi suatu kondisi.
3. Pencarian: Menemukan elemen spesifik dengan find() dan findIndex().

5. Menggabungkan, Membagi, dan Mengubah Array

5.1 Cara Menggabungkan Array

Menggabungkan Array – concat()

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = fruits.concat(vegetables);
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

Menggabungkan dengan Sintaks Spread

let fruits = ["apple", "banana"];
let vegetables = ["carrot", "spinach"];
let combined = [...fruits, ...vegetables];
console.log(combined); // ["apple", "banana", "carrot", "spinach"]

5.2 Cara Membagi Array

Mengambil Bagian – slice()

let colors = ["red", "blue", "green", "yellow", "purple"];
let selectedColors = colors.slice(1, 4);
console.log(selectedColors); // ["blue", "green", "yellow"]

Menghapus atau Mengganti Elemen – splice()

let languages = ["JavaScript", "Python", "Ruby", "Java"];
languages.splice(1, 2);
console.log(languages); // ["JavaScript", "Java"]

5.3 Cara Mengubah Array

Mengubah Array menjadi String – join()

let items = ["apple", "banana", "grape"];
let result = items.join(", ");
console.log(result); // "apple, banana, grape"

Mengubah String menjadi Array – split()

let str = "apple,banana,grape";
let arr = str.split(",");
console.log(arr); // ["apple", "banana", "grape"]

Meratakan Array Multidimensi – flat()

let numbers = [1, [2, 3], [4, [5, 6]]];
let flatNumbers = numbers.flat(2);
console.log(flatNumbers); // [1, 2, 3, 4, 5, 6]

Ringkasan

Pada bagian ini, kami mengeksplorasi metode untuk menggabungkan, membagi, dan mengubah array JavaScript.

1. Menggabungkan array menggunakan concat() dan sintaks spread.
2. Membagi array dengan slice() dan memodifikasinya menggunakan splice().
3. Mengubah array dan string dengan join() dan split().
4. Meratakan array bersarang menggunakan flat().

6. Mengulang Array dan Teknik Lanjutan

6.1 Metode Pengulangan Array

Pengulangan Dasar dengan Pernyataan for

let fruits = ["apple", "banana", "grape"];
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}
// Output: apple, banana, grape

Pengulangan Ringkas dengan for...of

let colors = ["red", "blue", "green"];
for (let color of colors) {
  console.log(color);
}
// Output: red, blue, green

Pengulangan dengan forEach()

let animals = ["cat", "dog", "bird"];
animals.forEach((animal, index) => {
  console.log(`${index}: ${animal}`);
});
// Output: 0: cat, 1: dog, 2: bird

Membuat Array Baru dengan map()

let numbers = [1, 2, 3, 4];
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]

6.2 Teknik Lanjutan

Menghapus Elemen Duplikat

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Meratakan Array – flat()

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]

Ringkasan

Pada bagian ini, kami membahas teknik pengulangan dan penggunaan array lanjutan.

1. Pengulangan dasar menggunakan for dan for...of.
2. Pemrosesan efisien dan pembuatan array dengan forEach() dan map().
3. Teknik lanjutan seperti menghapus duplikat dan meratakan array.

7. Contoh Praktis: Membuat Aplikasi Sederhana Menggunakan Array

7.1 Membuat Aplikasi Daftar Todo

Gambaran Fitur

Aplikasi ini adalah daftar Todo sederhana dengan fitur-fitur berikut:

1. Menambahkan tugas baru.
2. Menghapus tugas yang selesai.
3. Menampilkan daftar tugas saat ini.

Contoh Kode

let tasks = [];

// Function to add a new task
function addTask(task) {
  tasks.push(task);
  console.log(`Added: ${task}`);
  displayTasks();
}

// Fungsi untuk menghapus tugas function removeTask(index) { if (index >= 0 && index < tasks.length) { let removed = tasks.splice(index, 1); console.log(Dihapus: ${removed[0]}); displayTasks(); } else { console.log(“Indeks tidak valid”); } }

// Fungsi untuk menampilkan tugas saat ini function displayTasks() { console.log(“Tugas Saat Ini:”); tasks.forEach((task, index) => { console.log(${index + 1}: ${task}); }); }

// Test execution addTask(“Study JavaScript”); addTask(“Create a shopping list”); addTask(“Check emails”);

removeTask(1); // Menghapus tugas kedua

### Sample Output

Ditambahkan: Study JavaScript Ditambahkan: Create a shopping list Ditambahkan: Check emails Tugas Saat Ini: 1: Study JavaScript 2: Create a shopping list 3: Check emails Dihapus: Create a shopping list Tugas Saat Ini: 1: Study JavaScript 2: Check emails

### Summary



In this section, we introduced a practical application that leverages array operations.



1. **Todo List Application** : Practiced adding, removing, and displaying elements using arrays.
2. **Search and Data Aggregation** : Demonstrated flexible data handling through array manipulation.







## 8. Conclusion: Mastering Array Operations



JavaScript arrays are powerful tools for efficiently managing and manipulating data. This article comprehensively covered everything from basic operations to advanced techniques and practical examples.



### 8.1 Article Recap



#### 1. Basic Array Operations



* **Declaration and initialization** : Learned how to create arrays and work with multidimensional structures.
* **Adding, removing, and retrieving elements** : Practiced dynamic data manipulation using methods such as `push()` and `pop()` .



#### 2. Sorting and Filtering Arrays



* **Sorting** : Explained how to change element order using `sort()` and `reverse()` .
* **Filtering** : Demonstrated how to extract data that meets specific conditions using `filter()` and `find()` .



#### 3. Merging, Splitting, and Transforming Arrays



* **Merging** : Mastered flexible merging using `concat()` and the spread syntax.
* **Splitting and transforming** : Manipulated data using `slice()` , `splice()` , `join()` , and `split()` .



#### 4. Looping and Advanced Techniques



* **Looping** : Improved efficiency with `for` , `forEach()` , and `map()` .
* **Advanced techniques** : Learned duplicate removal and array flattening.



#### 5. Practical Example



* **Todo List Application** : Experienced how array operations are applied in real-world applications.
* **Search and data aggregation** : Implemented flexible searching and data processing.



### 8.2 Why Array Operations Matter



#### Why Are Array Operations Important?



Array operations are essential skills for organizing, analyzing, and displaying data. They are frequently used in the following scenarios:



1. **Data management and presentation** : Filtering API data and displaying it in tables.
2. **Form and user input handling** : Dynamically managing lists and processing inputs.
3. **Search and sorting features** : Efficiently handling large datasets.
4. **Application development fundamentals** : Building UI components such as shopping carts and task management systems.



### 8.3 Next Steps in Learning



#### 1. Further Use of Array Methods



* **Suggested challenge** : Build an application that displays and filters API data using array operations.



#### 2. Comparing and Choosing Other Data Structures



* Learn **Objects** , **Set** , and **Map** to choose the right structure for each use case.



#### 3. Practical Use in JavaScript Frameworks



* Apply these skills in frameworks such as React or Vue.js.



### 8.4 Reference Links and Resources



* **MDN Web Docs: Array Object**  <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array>
* **JavaScript.info: Arrays and Methods**  <https://javascript.info/>



### 8.5 Final Advice for Readers

JavaScript array operations sangat penting untuk membangun fondasi pemrograman yang solid. Artikel ini membimbing Anda melalui teknik dasar maupun lanjutan.

Saran

1. Latihan secara langsung : Tulis dan uji kode untuk memperkuat pemahaman Anda.
2. Kembangkan kemampuan pemecahan masalah : Ubah masalah dunia nyata menjadi kode.
3. Berkomitmen pada pembelajaran berkelanjutan : Ikuti teknik dan kerangka kerja modern.

Lanjut ke Langkah Berikutnya!

Gunakan artikel ini sebagai dasar dan teruskan ke pembuatan aplikasi yang lebih maju serta mempelajari kerangka kerja modern.

FAQ: Pertanyaan yang Sering Diajukan

Q1. Apa Perbedaan Antara map() dan forEach()?

• map() : Mengembalikan array baru. Ia menerapkan transformasi pada setiap elemen dan mengumpulkan hasilnya.
• forEach() : Tidak mengembalikan array baru dan hanya mengeksekusi fungsi untuk setiap elemen.

Contoh:

let numbers = [1, 2, 3];

// map()
let doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6]

// forEach()
numbers.forEach(num => console.log(num * 2));
// Output: 2, 4, 6

Q2. Bagaimana Cara Mengurutkan Angka dengan Benar?

Metode sort() membandingkan elemen sebagai string secara default. Untuk mengurutkan angka dengan tepat, Anda harus menyediakan fungsi perbandingan.

Contoh:

let numbers = [40, 100, 1, 5, 25];
numbers.sort((a, b) => a - b);
console.log(numbers); // [1, 5, 25, 40, 100]

Q3. Bagaimana Cara Menghapus Elemen Duplikat dari Array?

Anda dapat dengan mudah menghapus duplikat menggunakan objek Set.

Contoh:

let numbers = [1, 2, 2, 3, 4, 4, 5];
let uniqueNumbers = [...new Set(numbers)];
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Q4. Bagaimana Cara Memeriksa Apakah Sebuah Elemen Ada di dalam Array?

Gunakan metode includes() untuk menentukan apakah elemen tertentu ada dalam array.

Contoh:

let fruits = ["apple", "banana", "grape"];
console.log(fruits.includes("banana")); // true
console.log(fruits.includes("melon")); // false

Q5. Bagaimana Cara Mengonversi Array Multidimensi menjadi Array Satu Dimensi?

Gunakan metode flat() untuk meratakan array bersarang.

Contoh:

let nested = [1, [2, 3], [4, [5, 6]]];
let flatArray = nested.flat(2);
console.log(flatArray); // [1, 2, 3, 4, 5, 6]