← Kembali ke kursus
Pelajaran kursus · JavaScript
Pelajaran 28

Array.from dan spread

Konversi iterable/array-like ke array + generator ke array.

Pahami konsepnya

Array.from() mengubah DUA jenis sumber menjadi array: iterable (Map, Set, generator, string) dan array-like (arguments, NodeList) — objek punya .length dan indeks numerik tapi bukan array sungguhan. Versi dengan mapFn: Array.from(sumber, x => x * 2) mengkonversi sekaligus mentransformasi.

Spread [...] juga mengubah iterable ke array, tapi HANYA yang iterable — arguments dan NodeList butuh Array.from. Keduanya menghasilkan array baru (salinan), bukan reference.

Generator + spread = array instan: function* range(n) { for (let i=0; i<n; i++) yield i; } lalu [...range(5)] memberi [0,1,2,3,4]. Ini pola yang bersih untuk membuat deret tanpa loop manual.

Coba contoh kode

// dari string
console.log(Array.from("halo"));

// dari Map
const m = new Map([["a", 1], ["b", 2]]);
console.log([...m]);  // [["a",1],["b",2]]

// dari Set
console.log([...new Set([1, 2, 2, 3])]);  // [1,2,3]

// dari generator
function* range(n) {
  for (let i = 0; i < n; i++) yield i;
}
console.log([...range(5)]);  // [0,1,2,3,4]
console.log(Array.from(range(5), x => x * x));  // [0,1,4,9,16]

Array.from dengan mapFn mengkonversi dan mentransformasi sekaligus — kuadrat dari range(5). Spread dari Set otomatis deduplikasi.

Latihan singkat

Uji: generator range(5) → [...range(5)] harus `[0,1,2,3,4]`.