10 Method Array Javascript yang Wajib Kamu Tahu!

Array merupkan variabel yang bisa menampung banyak data sekaligus.

Contohnya begini, daripada kita menulis :


const color1 = 'purple';
const color2 = 'black';
const color3 = 'yellow';
const color4 = 'aqua';

Kita bisa menulisnya seperti ini:


const color = ['purple', 'black', 'yellow', 'aqua'];

Yup, dalam menulis array, kita membutuhkan tanda angle bracket atau kurung siku. Seperti yang sudah saya sampaikan diatas, Array bisa berisi banyak data, seperti, String, Number, Boolean dan lain sebagainya, sangat fleksibel sekali kan.

Ngomongin soal array, pada kesempatan kali ini, kita akan belajar bersama mengenail 10 method atau fungsi array paling populer yang bisa kita manffatkan untuk mempermudah serta mempercepat kita dalam bekerja menggunakan array.

10 Method Array Javascript yang Wajib Kamu Tahu!


1. forEach()

Yang pertaman adalah forEach(). forEach() merupakan fungsi yang bisa kita gunakan untuk melakukan looping atau perulangan pada array dengan cara yang lebih simpel. Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

numbers.forEach(number => {
console.log(number); // output: 1 2 3 4 5 6
});

2. includes()

Berikutnnya adalah includes(). Method includes() bisa kita gunakan untuk mengecek apakah dalam array terdapat suatu nilai tertentu yang kemudian akan menghasilkan nilai boolean true jika terdapat nilai yang dicari dan false jika nilai yang dicari tidak ada. Untuk cara penggunaanya bisa dilihat dibawah ini :


const sisters = ['Siska", "Ratna", "Tasya", "Defi", "Nataly"];
const ages = [18, 20, 20, 21, 22];

sisters.includes("Siska"); // output: true
sisters.includes("Natasya"); // output: false

ages.includes(20); // output: true
ages.includes(25); // output: false


3. filter()

Sesuai namanya, method filter() merupakan fungsi yang bisa kita gunakan untuk membuat array baru dengan menerapkan peraturan tertentu (filter). Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

// number(s) greater than 3
const filtered = numbers.filter(number => number > 3);
console.log(filtered); // output: [4, 5, 6]

console.log(numbers); // output: [1, 2, 3, 4, 5, 6]

4. map()

Method map() merupakan fungsi yang bisa kita gunakan untuk membuat array baru dengan menerapkan peraturan tertentu ke semua nilai didalamnya. Kadang yada yang suka bingung dengan map() dan filter() karena sama - sama membuat array baru, Intinya, filter() digunakan untuk memfilter atau mengambil nilai tertentu saja sedangkan map() digunakan untuk megubah semua nilai didalamnya. Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

// add one to every element
const oneAdded = numbers.map(number => number + 1);
console.log(oneAdded); // output [2, 3, 4, 5, 6, 7]

console.log(arr); // output: [1, 2, 3, 4, 5, 6]

5. reduce()

Method reduce() digunakan untuk menjumlahkan atau menggabungkan semua nilai di salam array. Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

const sum = numbers.reduce((total, value) => total + value, 0);
console.log(sum); // 21

6. some()

Mirip seperti includes(), method reduce() digunakan untuk memeriksa apakah setidaknya satu item didalam array lolos kondisi yang ditentukan. Jika lolos, itu mengembalikan 'true' jika tidak 'false'. Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

// at least one element is greater than 4?
const largeNum = numbers.some(number => number > 4);
console.log(largeNum); // output: true

// at least one element is less than or equal to 0?
const smallNum = numbers.some(number => number <= 0);
console.log(smallNum); // output: false

7. every()

Kalau tadi some() sekarang every(). Method every() digunakan untuk memeriksa apakah seluruh item didalam array lolos kondisi yang ditentukan. Jika lolos, itu mengembalikan 'true' jika tidak 'false'. Untuk cara penggunaanya bisa dilihat dibawah ini :


const numbers = [1, 2, 3, 4, 5, 6];

// all elements are greater than 4
const greaterFour = numbers.every(number => number > 4);
console.log(greaterFour); // output: false

// all elements are less than 10
const lessTen = numbers.every(number => number < 10);
console.log(lessTen); // output: true

8. sort()

Sesuai namanya, Method every() digunakan untuk mengurutkan nilai dalam array. Ada dua pilihan dalam melakukan pengurutan yaitu ascending untuk mengurutkan dari kecil ke besar, dan descending untuk mengurutkan dari besar ke kecil. Untuk cara penggunaanya bisa dilihat dibawah ini :


const arr = [1, 2, 3, 4, 5, 6];
const alpha = ['e', 'a', 'c', 'u', 'y'];

// sort in descending order
descOrder = arr.sort((a, b) => a > b ? -1 : 1);
console.log(descOrder); // output: [6, 5, 4, 3, 2, 1]

// sort in ascending order
ascOrder = alpha.sort((a, b) => a > b ? 1 : -1);
console.log(ascOrder); // output: ['a', 'c', 'e', 'u', 'y']

9. Array.from()

Method every() digunakan untuk mengubah semua hal yang mirip atau dapat diulang(looping) menjadi array, terutama saat bekerja dengan DOM, sehingga kita dapat menggunakan metode array lain seperti reduce, map, filter, dan sebagainya. Method ini adalah method favorit saya ketika bekerja menggunakan DOM. Untuk cara penggunaanya bisa dilihat dibawah ini :


const name = 'frugence';
const nameArray = Array.from(name);

console.log(name); // output: frugence
console.log(nameArray); // output: ['f', 'r', 'u', 'g', 'e', 'n', 'c', 'e']

Pengaplikasian dalam DOM


// I assume that you have created unorder list of items in our html file.

const lis = document.querySelectorAll('li');
const lisArray = Array.from(document.querySelectorAll('li'));

// is true array?
console.log(Array.isArray(lis)); // output: false
console.log(Array.isArray(lisArray)); // output: true

10. Array.of()

Method Array.of() digunakan untuk membuat array dari nilai yang diberikan. Untuk cara penggunaanya bisa dilihat dibawah ini :


const nums = Array.of(1, 2, 3, 4, 5, 6);
console.log(nums); // output: [1, 2, 3, 4, 5, 6]

Baiklah semoga artikel tentang 10 Method Array Javascript yang Wajib Kamu Tahu! bisa bermanfaat serta bisa kalian fahami ya kawan - kawan. Jangan lupa, moto seorang programmer itu learning by doing, gausah di hafal, tapi sering - sering praktek aja!

Post a Comment

Link Banner