nadiannis

Array Method pada JS yang Biasa Digunakan

Annisa NadiaNov 17, 2022 · 8 min read · ___ views
Array Method pada JS yang Biasa Digunakan

Dalam beberapa kali membangun aplikasi menggunakan bahasa JavaScript, saya menemui beberapa array method yang seringkali digunakan.

Berikut ini array method yang biasa digunakan.

  • filter()
  • find()
  • forEach()
  • includes()
  • map()
  • reduce()
  • sort()

filter()

Method filter() digunakan untuk menyeleksi item-item suatu array berdasarkan kondisi tertentu. Method ini menerima argumen berupa callback function. Callback function tersebut memiliki argumen item, index, dan array yang di-filter.

Callback function dieksekusi untuk setiap item. Jika callback function me-return nilai true, maka item disimpan ke dalam array hasil. Jika me-return nilai false, maka item tidak akan disimpan di array hasil.

Sintaksnya seperti ini.

arr.filter((item, index, array) => {
  // if the condition is true, the item is stored in the result array & iteration continues,
  // if the condition is false, the item is not being included in the result array
});

Ini contoh sederhana cara menggunakan method filter().

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
const result = students.filter((student) => student[0] === 'H');
console.log(result);

/*
Output: 
['Harry', 'Hermione']
*/

find()

Method find() digunakan untuk menemukan item dalam array yang pertama kali ditemukan sesuai dengan kondisi tertentu. Method ini menerima argumen berupa callback function. Callback function tersebut memiliki argumen item, index, dan array dari item yang ingin ditemukan.

Callback function dieksekusi untuk setiap item. Jika callback function me-return nilai true, maka item di-return dan pencarian dihentikan. Namun jika item yang dicari tidak ditemukan, maka undefined akan di-return.

Sintaksnya seperti ini.

arr.find((item, index, array) => {
  // if the condition is true, then the item is returned & iteration is stopped,
  // returns undefined if nothing found
});

Ini contoh sederhana cara menggunakan method find().

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
const result = students.find((student) => student === 'Ron');
console.log(result);

/*
Output: 
Ron
*/

forEach()

Method forEach() digunakan untuk melakukan perulangan yang diterapkan pada array. Method ini menjalankan suatu fungsi untuk setiap item dari array. Callback function menjadi argumen method ini. Callback function tersebut menerima argumen item, index, dan array yang dilakukan perulangan. Method forEach() akan selalu me-return undefined.

Sintaksnya seperti ini.

arr.forEach((item, index, array) => {
  // Do something with the item
});

Ini contoh sederhana cara menggunakan method forEach().

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
students.forEach((student, index, array) => {
  console.log(`${student} is at index ${index} in ${array}`);
});

/*
Output:
Harry is at index 0 in Harry,Hermione,Ron,Neville
Hermione is at index 1 in Harry,Hermione,Ron,Neville
Ron is at index 2 in Harry,Hermione,Ron,Neville
Neville is at index 3 in Harry,Hermione,Ron,Neville
*/

includes()

Method includes() digunakan untuk mengetahui apakah dalam suatu array terdapat nilai tertentu. Method ini memiliki parameter value, yaitu value yang ingin dicari, dan parameter fromIndex, yaitu indeks dimulainya pencarian. Parameter fromIndex opsional untuk digunakan. Method ini me-return true jika value ditemukan dan false jika tidak ditemukan.

Sintaksnya seperti ini.

arr.includes(value, fromIndex);

Ini contoh sederhana cara menggunakan method includes().

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
students.includes('Hermione'); // returns true
students.includes('Draco'); //returns false
students.includes('Harry', 1); //returns false

map()

Method map() digunakan untuk mentransformasi item-item dalam suatu array. Method ini menerima argumen berupa callback function. Callback function tersebut memiliki argumen item, index, dan array yang tiap item-nya ingin ditransformasi.

Callback function dieksekusi untuk setiap item. Method ini me-return array baru yang tiap item-nya merupakan hasil dari apa yang dilakukan dalam callback function.

Sintaksnya seperti ini.

arr.map((item, index, array) => {
  // returns the new value
});

Ini contoh sederhana cara menggunakan method map().

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
const result = students.map((student) => {
  return {
    name: student,
    length: student.length,
  };
});
console.log(result);

/*
Output: 
[{name: 'Harry', length: 5}, {name: 'Hermione', length: 8}, {name: 'Ron', length: 3}, {name: 'Neville', length: 7}]
*/

reduce()

Method reduce() digunakan untuk mengumpulkan item-item dalam array menjadi single value. Method ini menerima argumen berupa callback function dan initialValue yang opsional untuk digunakan. Callback function tersebut memiliki argumen accumulator, item, index, dan array yang ingin di-reduce.

Callback function dieksekusi untuk setiap item. Argumen accumulator menyimpan value hasil eksekusi callback function di iterasi sebelumnya. Pada iterasi pertama, value accumulator adalah initialValue. Namun jika initialValue tidak diberikan maka akan mengambil item pertama dari array (arr[0]).

Kemudian argumen item adalah item dari array di iterasi yang sedang berlangsung (current item). Pada iterasi pertama, value item adalah item pertama array (arr[0]) jika initialValue diberikan. Namun jika initialValue tidak diberikan, maka pada iterasi pertama, value item adalah item kedua dari array (arr[1]).

Lalu argumen index adalah indeks dari current item. Pada iterasi pertama, value index adalah 0 jika initialValue diberikan. Namun jika initialValue tidak diberikan, maka pada iterasi pertama, value index adalah 1. Sementara argumen array merupakan array yang di-reduce.

Sintaksnya seperti ini.

arr.reduce((accumulator, item, index, array) => {
  // ...
}, initialValue);

Ini contoh sederhana cara menggunakan method reduce().

const numbers = [10, 3, 2, 7, 5];
const result = numbers.reduce(
  (total, currentNumber) => total + currentNumber,
  0
);
console.log(result);

/*
Output:
27
*/

sort()

Method sort() digunakan untuk mengurutkan item-item suatu array. Method ini secara opsional menerima argumen berupa callback function yang merupakan fungsi untuk komparasi. Callback function tersebut menerima argumen a yang merupakan item pertama dan b yang merupakan item kedua untuk dibandingkan.

Sintaksnya seperti ini.

// Without function
arr.sort();

// With arrow function
arr.sort((a, b) => {
  // Returns a value
});

// With a separate comparison function
function compareFunc(a, b) {
  // Returns a value
}
arr.sort(compareFunc);

Jika fungsi untuk komparasi tidak diberikan, maka hasil default-nya adalah item-item yang terurut menaik. Tiap item tersebut dikonversi menjadi string kemudian dibandingkan.

const students = ['Harry', 'Hermione', 'Ron', 'Neville'];
students.sort();
console.log(students);

/*
Output:
['Harry', 'Hermione', 'Neville', 'Ron']
*/

const numbers = [10, 3, 2, 7, 5];
numbers.sort();
console.log(numbers);

/*
Output:
[10, 2, 3, 5, 7]
*/

Perhatikan contoh di atas. Ketika mengurutkan array dengan item berupa string, hasilnya item-item diurutkan menaik sesuai dengan kode karakter-karakternya. Namun saat mengurutkan array yang item-nya berupa angka, hasilnya tidak sesuai dengan yang diekspektasikan. Hal itu karena angka-angka tersebut dikonversi menjadi string sehingga yang dibandingkan adalah kode karakter-karakter, bukan angka. Dapat dilihat pada contoh di atas bahwa “10” < “2”.

Kita dapat memberikan fungsi komparasi sendiri sebagai argumen method sort(). Fungsi komparasi menerima argumen a yang merupakan item pertama dan b yang merupakan item kedua untuk dibandingkan. Fungsi ini me-return nilai negatif, 0, atau positif.

  • Nilai negatif artinya item pertama diposisikan lebih dulu.
  • Nilai 0 artinya posisi item pertama dan item kedua tetap.
  • Nilai positif artinya item pertama diposisikan setelahnya.

Dengan aturan seperti di atas, maka bisa dilakukan seperti berikut untuk membuat angka-angka terurut menaik, di mana angka yang lebih kecil diposisikan lebih dulu daripada angka yang lebih besar.

  • Jika a < b, return -1, maka a berada di posisi lebih dulu.
  • Jika a > b, return 1, maka a berada di posisi setelahnya.
  • Jika a == b, return 0, maka posisi keduanya tetap.
function compareFunc(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  return 0;
}

// Fungsi di atas dapat disederhanakan menjadi seperti ini
function compareFunc(a, b) {
  return a - b;
}

Jika ingin mengurutkan menurun, di mana angka yang lebih besar diposisikan lebih dulu daripada angka yang lebih kecil, maka dilakukan seperti berikut.

  • Jika a > b, return -1, maka a berada di posisi lebih dulu.
  • Jika a < b, return 1, maka a berada di posisi setelahnya.
  • Jika a == b, return 0, maka posisi keduanya tetap.
function compareFunc(a, b) {
  if (a > b) return -1;
  if (a < b) return 1;
  return 0;
}

// Fungsi di atas dapat disederhanakan menjadi seperti ini
function compareFunc(a, b) {
  return b - a;
}

Ini contoh sederhana penggunaan method sort() dengan fungsi komparasi.

const numbers = [10, 3, 2, 7, 5];
numbers.sort((a, b) => a - b);
console.log(numbers);

/*
Output:
[2, 3, 5, 7, 10]
*/

const numbers = [10, 3, 2, 7, 5];
numbers.sort((a, b) => b - a);
console.log(numbers);

/*
Output:
[10, 7, 5, 3, 2]
*/
Edit on GitHub

Get in Touch

© 2021 - 2024 Annisa Nadia Neyla