Kali ini, saya akan membahas tentang array dalam JavaScript, salah satu konsep dasar yang harus kamu pahami jika kamu ingin belajar bahasa pemrograman web yang satu ini. Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Array bisa membantu kamu membuat web yang lebih interaktif, dinamis, dan responsif. Yuk, simak penjelasan dan contoh array dalam JavaScript berikut ini!

Apa itu Array?

Array adalah tipe data yang berisi kumpulan dari nilai atau tipe data lain. Nilai di dalam array disebut dengan elemen, dan setiap elemen memiliki nomor urut yang dikenal dengan istilah indeks. Indeks array selalu dimulai dari angka nol (0).

Array berguna jika kamu ingin menyimpan dan mengolah banyak data dalam satu variabel. Misalnya, jika kamu ingin menampilkan daftar nama buah, kamu bisa menggunakan array untuk menyimpan nama-nama buah tersebut dalam satu variabel, daripada membuat banyak variabel untuk setiap buah.

Bagaimana Cara Membuat Array?

Ada beberapa cara yang bisa kamu lakukan untuk membuat array di JavaScript, seperti:

• Menggunakan tanda kurung siku ( [ ] )

• Menggunakan konstruktor Array ( new Array() )

• Menggunakan metode Array.of() atau Array.from()

Mari kita coba semuanya…

Membuat Array dengan Tanda Kurung Siku

Cara ini paling sering digunakan, karena paling sederhana dan mudah. Kamu cukup menulis tanda kurung siku ( [ ] ), dan memasukkan elemen-elemen yang ingin kamu simpan di dalam array, dipisahkan dengan tanda koma ( , ). Contoh:

// Membuat array dengan tanda kurung siku
let fruits = ["apple", "banana", "orange", "mango"];

Kode di atas akan membuat sebuah array yang berisi empat elemen, yaitu “apple”, “banana”, “orange”, dan “mango”. Elemen-elemen tersebut memiliki indeks sebagai berikut:

Elemen [Indeks], “apple”[0], “banana”[1], “orange”[2], “mango”[3].

Membuat Array dengan Konstruktor Array

Cara ini menggunakan kata kunci new untuk membuat sebuah objek Array, dan memasukkan elemen-elemen yang ingin kamu simpan di dalam array, dipisahkan dengan tanda koma ( , ). Contoh:

// Membuat array dengan konstruktor Array
let fruits = new Array("apple", "banana", "orange", "mango");

Kode di atas akan membuat array yang sama dengan cara sebelumnya, yaitu berisi empat elemen, yaitu “apple”, “banana”, “orange”, dan “mango”. Elemen-elemen tersebut memiliki indeks yang sama pula.

Membuat Array dengan Metode Array.of() atau Array.from()

Cara ini menggunakan metode bawaan dari objek Array, yaitu Array.of() atau Array.from(), untuk membuat sebuah array dari argumen yang diberikan. Contoh:

// Membuat array dengan metode Array.of()
let fruits = Array.of("apple", "banana", "orange", "mango");

// Membuat array dengan metode Array.from()
let fruits = Array.from("apple", "banana", "orange", "mango");

Kode di atas juga akan membuat array yang sama dengan cara-cara sebelumnya, yaitu berisi empat elemen, yaitu “apple”, “banana”, “orange”, dan “mango”. Elemen-elemen tersebut memiliki indeks yang sama pula.

Bagaimana Cara Mengakses Elemen Array?

Untuk mengakses elemen array, kamu bisa menggunakan nama variabel yang menyimpan array, diikuti dengan tanda kurung siku ( [ ] ), dan indeks elemen yang ingin kamu akses. Contoh:

// Mengakses elemen array
let fruits = ["apple", "banana", "orange", "mango"];

// Mengakses elemen pertama (indeks 0)
console.log(fruits[0]); // apple

// Mengakses elemen kedua (indeks 1)
console.log(fruits[1]); // banana

// Mengakses elemen ketiga (indeks 2)
console.log(fruits[2]); // orange

// Mengakses elemen keempat (indeks 3)
console.log(fruits[3]); // mango

Kamu juga bisa mengubah nilai elemen array dengan cara yang sama, yaitu dengan menetapkan nilai baru ke indeks yang bersangkutan. Contoh:

// Mengubah elemen array
let fruits = ["apple", "banana", "orange", "mango"];

// Mengubah elemen pertama (indeks 0)
fruits[0] = "grape"; // apple diganti dengan grape

// Mengubah elemen kedua (indeks 1)
fruits[1] = "lemon"; // banana diganti dengan lemon

// Mengubah elemen ketiga (indeks 2)
fruits[2] = "melon"; // orange diganti dengan melon

// Mengubah elemen keempat (indeks 3)
fruits[3] = "cherry"; // mango diganti dengan cherry

// Menampilkan array yang sudah diubah
console.log(fruits); // ["grape", "lemon", "melon", "cherry"]

Bagaimana Cara Mengolah Array?

Array memiliki banyak properti dan metode yang bisa kamu gunakan untuk mengolah data di dalamnya. Beberapa properti dan metode yang sering digunakan adalah:

• length — properti yang menyimpan jumlah elemen di dalam array

• push() — metode yang menambahkan elemen baru ke akhir array

• pop() — metode yang menghapus elemen terakhir dari array

• unshift() — metode yang menambahkan elemen baru ke awal array

• shift() — metode yang menghapus elemen pertama dari array

• splice() — metode yang menambahkan, menghapus, atau mengganti elemen di posisi tertentu

• slice() — metode yang mengambil sebagian elemen dari array dan mengembalikan array baru

• concat() — metode yang menggabungkan dua atau lebih array dan mengembalikan array baru

• join() — metode yang menggabungkan semua elemen array menjadi sebuah string

• reverse() — metode yang membalikkan urutan elemen array

• sort() — metode yang mengurutkan elemen array sesuai abjad atau kriteria tertentu

• forEach() — metode yang menjalankan sebuah fungsi untuk setiap elemen array

• map() — metode yang menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan array baru

• filter() — metode yang menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan array baru yang hanya berisi elemen yang memenuhi kondisi tertentu

• reduce() — metode yang menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan sebuah nilai tunggal

Mari kita lihat contoh penggunaan properti dan metode array di bawah ini:

// Membuat array
let fruits = ["apple", "banana", "orange", "mango"];

// Menggunakan properti length
console.log(fruits.length); // 4

// Menggunakan metode push()
fruits.push("grape"); // menambahkan grape ke akhir array
console.log(fruits); // ["apple", "banana", "orange", "mango", "grape"]

// Menggunakan metode pop()
fruits.pop(); // menghapus grape dari akhir array
console.log(fruits); // ["apple", "banana", "orange", "mango"]

// Menggunakan metode unshift()
fruits.unshift("lemon"); // menambahkan lemon ke awal array
console.log(fruits); // ["lemon", "apple", "banana", "orange", "mango"]

// Menggunakan metode shift()
fruits.shift(); // menghapus lemon dari awal array
console.log(fruits); // ["apple", "banana", "orange", "mango"]

// Menggunakan metode splice()
fruits.splice(2, 1, "melon", "cherry"); // menghapus orange dari indeks 2, dan menambahkan melon dan cherry
console.log(fruits); // ["apple", "banana", "melon", "cherry", "mango"]

// Menggunakan metode slice()
let newFruits = fruits.slice(1, 3); // mengambil elemen dari indeks 1 sampai 3 (tidak termasuk 3)
console.log(newFruits); // ["banana", "melon"]

// Menggunakan metode concat()
let moreFruits = fruits.concat(newFruits); // menggabungkan array fruits dan newFruits
console.log(moreFruits); // ["apple", "banana", "melon", "cherry", “mango”, “banana”, “melon”]

// Menggunakan metode join()
let fruitsString = fruits.join(", "); // menggabungkan semua elemen array menjadi sebuah string, dipisahkan dengan koma dan spasi
console.log(fruitsString); // “apple, banana, melon, cherry, mango”

// Menggunakan metode reverse()
fruits.reverse(); // membalikkan urutan elemen array
console.log(fruits); // [“mango”, “cherry”, “melon”, “banana”, “apple”]

// Menggunakan metode sort()
fruits.sort(); // mengurutkan elemen array sesuai abjad
console.log(fruits); // [“apple”, “banana”, “cherry”, “mango”, “melon”]

// Menggunakan metode forEach()
fruits.forEach(function(fruit) { // menjalankan sebuah fungsi untuk setiap elemen array
console.log("I like " + fruit); // fungsi yang akan menampilkan "I like " diikuti dengan nama elemen
});

// Menggunakan metode map()
let fruitsLength = fruits.map(function(fruit) { // menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan array baru
return fruit.length; // fungsi yang akan mengembalikan panjang nama elemen
});
console.log(fruitsLength); // [5, 6, 6, 5, 5]

// Menggunakan metode filter()
let longFruits = fruits.filter(function(fruit) { // menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan array baru yang hanya berisi elemen yang memenuhi kondisi tertentu
return fruit.length > 5; // fungsi yang akan mengembalikan true jika panjang nama elemen lebih dari 5
});
console.log(longFruits); // [“banana”, “cherry”, “mango”]

// Menggunakan metode reduce()
let totalLength = fruits.reduce(function(accumulator, fruit) { // menjalankan sebuah fungsi untuk setiap elemen array dan mengembalikan sebuah nilai tunggal
return accumulator + fruit.length; // fungsi yang akan mengembalikan jumlah panjang nama elemen
}, 0); // nilai awal accumulator adalah 0
console.log(totalLength); // 27

Penutup

Demikianlah artikel mengenai array dalam JavaScript yang saya buat untuk kamu. Semoga artikel ini bisa memberikan kamu pemahaman yang jelas dan mudah tentang array, dan menginspirasi kamu untuk belajar lebih dalam tentang JavaScript.

JavaScript adalah bahasa pemrograman web yang sangat populer dan berguna, yang wajib kamu kuasai jika kamu ingin menjadi developer yang handal.