DEV Community

Cover image for Array - JavaScript
boibolang
boibolang

Posted on

Array - JavaScript

Array adalah kumpulan nilai yang memiliki index berurutan (dimulai dai index ke-0), hampir semua bahasa pemrograman memiliki tipe data array atau tipe data yang perlakuannya mirip dengan array. Berikut adalah beberapa metode yang bisa diterapkan ketika bekerja dengan array.
Slice

/**
 * slice: mengakses array tanpa merubah isi array
 * slice tidak merubah array asal
 */

let arr = ['abigail', 'boston', 'cincinnati', 'duck', 'elephant'];
console.log(arr.slice(2)); // Output: ['abigail', 'boston', 'cincinnati']
console.log(arr.slice(1, 3)); // Output: ['boston', 'cincinnati']
console.log(arr.slice(-2)); // Ambil 2 element terakhir, Output: ['duck', 'elephant]
console.log(arr.slice(1, -2)); // Ambil element ke-1 sampai dengan sebelum 2 element terakhir, Output: ['boston', 'cincinnati]

// Ketiga kode dibawah menghasilkan output yang sama yaitu array arr itu sendiri
console.log(arr.slice());
console.log(arr);
console.log([...arr]);
Enter fullscreen mode Exit fullscreen mode

Splice

/**
 * splice: menambah/mengurangi element array
 * splice menghasilkan array baru, merubah array asal
 */

let arr2 = ['apple', 'bamboo', 'chocolate', 'dumb', 'eel'];
arr2.splice(1, 0, 'lemon', 'orange'); // Pada index ke-1, tambahkan elemen 'lemon' dan 'orange'
console.log(arr2); // Output: ['apple', 'lemon', 'orange', 'bamboo', 'chocolate', 'dumb', 'eel']
arr2.splice(3, 2); // Pada index ke-3 hapus 2 element
console.log(arr2); // Output: ['apple', 'lemon', 'orange', 'dumb', 'eel']
arr2.splice(-2); // Hapus 2 element terakhir
console.log(arr2); // Output: ['apple', 'lemon', 'orange']
arr2.splice(2); // Sisakan 2 element pertama, hapus yang lain
console.log(arr2); // Output: ['apple', 'lemon']
Enter fullscreen mode Exit fullscreen mode

Reverse

/**
 * reverse: merubah urutan array
 * reverse merubah array asal
 */

let arr3 = ['leonardo', 'donatello', 'raphael', 'michaelangelo'];
arr3.reverse();
console.log(arr3); // Output: ['michaelangelo', 'raphael', 'donatello', 'leonardo']
Enter fullscreen mode Exit fullscreen mode

Concat

/**
 * concat: menggabungkan isi 2 buah array
 * concat tidak merubah array asal
 */

let arr4 = [1, 2, 3, 4, 5];
let arr5 = ['pizza', 'mozarella', 'spaghetti', 'risotto'];
const arr6 = arr4.concat(arr5);
console.log(arr6); // Output: [1, 2, 3, 4, 5, 'pizza', 'mozarella', 'spaghetti', 'risotto']
console.log([...arr4, ...arr5]); // Bisa juga dengan spread, hasilnya sama seperti diatas
Enter fullscreen mode Exit fullscreen mode

Join

/**
 * join: menggabungkan isi didalam array dengan/tanpa parameter/karakter
 * join tidak merubah array asal, tetapi hasilnya berupa string bukan array
 */

console.log(arr6.join('-')); // Output: 1 - 2 - 3 - 4 - 5 - pizza - mozarella - spaghetti - risotto
console.log(arr6.join()); // default pemisah adalah tanda koma (,) Output: 1,2,3,4,5,pizza,mozarella,spaghetti,risotto
Enter fullscreen mode Exit fullscreen mode

At

/**
 * at: menunjuk isi array pda elemen tertentu
 */

let arr7 = [23, 24, 25, 50];
console.log(arr7[1]); // Output: 24
console.log(arr7.at(1)); // Output: 24

// Mendapatkan element terakhir dari array
console.log(arr7[arr7.length - 1]); // Output: 50
console.log(arr7.slice(-1)); // Output: 50
console.log(arr7.at(-1)); // Output: 50
Enter fullscreen mode Exit fullscreen mode

Iterasi

// foreach
const arr8 = [23, -45, 56, 35, -67, -43, 56];
arr8.forEach(function (value, key, map) {
  // parameter map dapat tidak ditulis
  if (value > 0) {
    console.log(`${key}: ${value} (positif)`);
  } else {
    console.log(`${key}: ${value} (negatif)`);
  }
});
Enter fullscreen mode Exit fullscreen mode

result

// for-of
for (const [key, value] of arr8.entries()) {
  if (value > 0) {
    console.log(`${key}: ${value} (positif)`);
  } else {
    console.log(`${key}: ${value} (negatif)`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Hasil dari kode program for-of sama dengan forEach diatas.

// foreach dengan map
const abbr = new Map([
  ['HP', 'Harry Potter'],
  ['HG', 'Hermione Granger'],
  ['RW', 'Ron Weasley'],
]);
abbr.forEach(function (value, key) {
  console.log(`${key}: ${value}`);
});
Enter fullscreen mode Exit fullscreen mode

result

// foreach dengan set
const currencies = new Set(['USD', 'GBP', 'JPY', 'EUR', 'IDR', 'GBP']);
currencies.forEach(function (value, _) {
  // Karena set hanya berisi pasangan value-value maka parameter kedua pada foreach diisi '_' karena wajib ada
  console.log(`${value}`); // Output: USD GBP JPY EUR IDR
});
Enter fullscreen mode Exit fullscreen mode

Data Transformation: map, filter, reduce

// map: memanipulasi elemen array, mengembalikan array baru sehingga harus disimpan dalam varabel baru
const ppn = 1.11;
const harga = [12000, 15000, 16000, 20000, 25000, 35000];
const hargaPpn = harga.map(function (value) {
  return value * ppn;
});
console.log(hargaPpn);
Enter fullscreen mode Exit fullscreen mode

result

// filter: mem-filter elemen array, mengembalikan array baru sehingga harus disimpan dalam varabel baru
const hargaBaru = harga.filter(function (value) {
  return value > 17000;
});
console.log(hargaBaru);
Enter fullscreen mode Exit fullscreen mode

result

// reduce: mengembalikan nilai tunggal
const hargaAll = harga.reduce(function (acc, value, i) {
  console.log(`Iteration ${i}: ${acc}`);
  return acc + value;
}, 0); // 0: nilai awal accumulator
console.log(hargaAll); // Output: 123000

// reduce untuk mencari nilai maksimum dalam sebuah array
const max = harga.reduce(function (acc, value) {
  if (acc > value) return acc;
  else return value;
}, harga[0]);
console.log(max); // Output: 35000
Enter fullscreen mode Exit fullscreen mode

Beberapa metode array yang lain.

// find: mengembalikan elemen array berdasarkan kondisi, hanya elemen yang pertama kali ditemukan akan dikembalikan
const hargaBig = harga.find((value) => value > 20000); // menggunakan arrow function, return keyword tidak perlu ditulis jika hasilnya hanya satu baris
console.log(hargaBig); // Output: 25000

// includes: mengembalikan nilai boolean (true/false) jika ditemukan elemen yang sesuai
console.log(harga.includes(16000)); // Output: true
console.log(harga.includes(50000)); // Output: false

// some: mengembalikan nilai true jika kondisi terpenuhi meskipun hanya satu
console.log(harga.some((value) => value > 25000)); // Output: true

// every: mengembalikan nilai true hanya jika semua kondisi terpenuhi
console.log(harga.every((value) => value > 25000)); // Output: false
console.log(harga.every((value) => value > 10000)); // Output: true

// flat: menghilangkan pemisah dalam nested array sehingga menjadi satu kesatuan array
const arr9 = [[1, 2, 3], [4, 5, 6], 7, 8];
console.log(arr9.flat()); // Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

const arr10 = [[[1, 2], 3], [4, [5, 6]], 7, 8];
console.log(arr10.flat()); // menghilangkan pemisah array 1 dimensi, Output: [ [1, 2], 3, 4, [5, 6], 7, 8 ]
console.log(arr10.flat(2)); // menghilangkan pemisah array 2 dimensi, Output: [ 1, 2, 3, 4, 5, 6, 7, 8 ]

// flatMap: memanipulasi semua elemen array (map) dan menciptakan array 1 level (flat) baru
const flMp = arr9.flat().flatMap(function (value) {
  return value * 2;
});
console.log(flMp); // Output: [ 2, 4, 6, 8, 10, 12, 14, 16 ]

// sort: mengurutkan array, merubah array asal
const penumpang = ['Harry', 'Hermione', 'Herman', 'Hadi', 'Hardi'];
console.log(penumpang.sort()); // Output: [ "Hadi", "Hardi", "Harry", "Herman", "Hermione" ]
console.log(penumpang); // Output: // Output: [ "Hadi", "Hardi", "Harry", "Herman", "Hermione" ]

const arr11 = [2, 4, 5, 6, 9, 12, 45, 32, 78];
console.log(arr11.sort()); // isi dari arr11 dianggap sebagai string sehingga hasilnya: [ 12, 2, 32, 4, 45, 5, 6, 78, 9 ]

// cara yang benar
arr11.sort(function (a, b) {
  if (a > b) return 1;
  if (a < b) return -1;
});
console.log(arr11); // Output: [ 2, 4, 5, 6, 9, 12, 32, 45, 78 ]
arr11.sort((a, b) => a - b);
console.log(arr11); // Output: [ 2, 4, 5, 6, 9, 12, 32, 45, 78 ]
arr11.sort((a, b) => b - a);
console.log(arr11); // Output: [ 78, 45, 32, 12, 9, 6, 5, 4, 2 ]

// new Array(): menciptakan array baru
const arr12 = new Array(7); // menciptakan array kosong 1 dimensi dengan 7 elemen
console.log(arr12); // Output: [ <7 empty slots> ]

// fill: mengisi elemen array, merubah array asal
arr12.fill(2); // mengisi semua elemen array dengan angka 2
console.log(arr12); // Output: [ 2, 2, 2, 2, 2, 2, 2 ]
arr12.fill(1, 3); // mengisi dengan angka 1 mulai elemen ke-3
console.log(arr12); // Output: [ 2, 2, 2, 1, 1, 1, 1 ]
arr12.fill(4, 3, 5); // mengisi dengan angka 4 mulai elemen ke-3 sampai dengan sebelum elemen ke-5
console.log(arr12); // Output: [ 2, 2, 2, 4, 4, 1, 1 ]

// from: menciptakan array baru
const arr13 = Array.from({length: 7}, () => 3); // menciptakan array 1 dimensi dengan 7 elemen berisi angka 3
console.log(arr13); // Output: [ 3, 3, 3, 3, 3, 3, 3 ]
const arr14 = Array.from({length: 7}, (_, i) => i + 1); // menciptakan array 1 dimensi dengan 7 elemen, tiap elemen berisi index array + 1
console.log(arr14); // Output: [ 1, 2, 3, 4, 5, 6, 7 ]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)