Lecture ini membahas dua cara penting untuk membuat/mengisi Array secara dinamis, yaitu:

1. Array.prototype.fill()
2. Array.from()

Keduanya sama-sama bisa menghasilkan Array, tetapi tujuan dan cara kerjanya berbeda.

Mental model paling mudah:

fill()
→ "Saya sudah punya Array, sekarang isi beberapa/semua slot dengan nilai yang sama."

Array.from()
→ "Saya punya sesuatu yang bisa diiterasi, buat Array baru berdasarkan sesuatu itu."

1. Gambaran besar

Sebelumnya kamu sudah belajar membuat Array seperti:

let numbers = [1, 3, 5, 7, 9];

Sekarang ada situasi di mana kita ingin membuat Array secara dinamis.

Misalnya kita ingin:

[1, 1, 1, 1, 1]

atau:

["A", "B", "C", "D", "E"]

atau bahkan membuat Array baru dari Array lain:

[1, 3, 5, 7, 9]
        ↓
[2, 6, 10, 14, 18]

Untuk kebutuhan seperti itu, fill() dan Array.from() sangat berguna.

2. fill() itu apa?

fill() digunakan untuk:

mengisi Array dengan satu nilai tertentu.

Misalnya:

let arr = [1, 2, 3, 4, 5];

arr.fill(0);

Hasil:

[0, 0, 0, 0, 0]

Semua element diganti menjadi 0.

Jadi:

[1, 2, 3, 4, 5]
        ↓ fill(0)
[0, 0, 0, 0, 0]

3. Syntax fill()

Bentuk lengkapnya:

array.fill(value, start, end)

Ada tiga parameter:

fill(
   value,
   start,
   end
)

value

Nilai yang ingin digunakan untuk mengisi Array.

start

Mulai mengisi dari index berapa.

Optional.

end

Berhenti sebelum index berapa.

Optional.

Ini sama seperti banyak method yang sudah kamu pelajari:

substring(start, end)
slice(start, end)

end biasanya tidak ikut.

4. Contoh paling sederhana

let arr = [1, 2, 3, 4, 5];

arr.fill(10);

Hasil:

[10, 10, 10, 10, 10]

Kenapa?

Karena kita berkata:

“Isi semua element Array ini dengan 10.”

5. fill() bisa digunakan pada Array kosong

Ini bagian yang cukup menarik dari lecture.

Kita bisa membuat Array dengan ukuran tertentu menggunakan:

new Array(8)

Hasilnya:

[
  empty,
  empty,
  empty,
  empty,
  empty,
  empty,
  empty,
  empty
]

Panjang Array:

8

Tetapi belum ada nilai yang mengisi slot-slot tersebut.

Lalu:

let arr = new Array(8);

arr.fill(1);

Hasil:

[1, 1, 1, 1, 1, 1, 1, 1]

6. Kenapa new Array(8) berbeda dengan new Array(8, 9)?

Ini penting dan sudah pernah kamu pelajari sebelumnya.

Satu argument berupa integer

new Array(8)

berarti:

Buat Array dengan panjang 8.

Hasil konseptual:

[empty, empty, empty, empty, empty, empty, empty, empty]

Dua atau lebih argument

new Array(8, 9)

berarti:

Buat Array yang berisi 8 dan 9.

Hasil:

[8, 9]

Jadi:

new Array(8)
        ↓
length = 8


new Array(8, 9)
        ↓
[8, 9]

7. Membuat Array berisi 8 angka 1

Kita bisa melakukan:

let arr = new Array(8);

arr.fill(1);

Hasil:

[1, 1, 1, 1, 1, 1, 1, 1]

Ini adalah salah satu penggunaan praktis fill().

8. Parameter start

Misalnya:

let arr = new Array(8);

arr.fill(1, 2);

Artinya:

value = 1
start = 2

Mulai mengisi dari index 2.

Ingat, index dimulai dari 0.

index:
  0    1    2    3    4    5    6    7
[ ?    ?    1    1    1    1    1    1 ]
             ↑
           mulai

Jadi index:

0 → tidak diisi
1 → tidak diisi
2 → 1
3 → 1
4 → 1
5 → 1
6 → 1
7 → 1

9. Parameter end

Sekarang:

let arr = new Array(8);

arr.fill(1, 2, 5);

Artinya:

value = 1
start = 2
end = 5

Mulai dari index 2, berhenti sebelum index 5.

Hasil:

index:
  0      1      2    3    4      5      6      7
[empty, empty,   1,   1,   1,   empty, empty, empty]
                   ↑         ↑
                 mulai      end

Jadi yang diisi hanya:

index 2
index 3
index 4

Index 5 tidak ikut.

10. Ingat aturan end = tidak termasuk

Ini pola yang sudah sering kamu lihat.

Misalnya:

arr.fill("X", 2, 5);

yang berubah:

2 ✅
3 ✅
4 ✅
5 ❌

Jadi:

start → termasuk
end   → tidak termasuk

Mental model:

fill(value, start, end)
                  ↑
            berhenti SEBELUM sini

11. fill() bisa mengganti data yang sudah ada

Misalnya:

let numbers = [1, 3, 5, 7, 9];

numbers.fill(100);

Hasil:

[100, 100, 100, 100, 100]

Data sebelumnya hilang karena diganti.

Bisa juga sebagian:

numbers.fill(100, 2, 5);

Hasil:

[1, 3, 100, 100, 100]

Karena:

index 0 → 1
index 1 → 3
index 2 → 100
index 3 → 100
index 4 → 100

12. fill() mengubah Array asli

Ini sangat penting.

fill() adalah mutating method.

Artinya:

let numbers = [1, 2, 3];

numbers.fill(0);

console.log(numbers);

hasil:

[0, 0, 0]

Array numbers sendiri berubah.

Bandingkan dengan beberapa method sebelumnya:

fill()
→ mengubah Array asli

sort()
→ mengubah Array asli

splice()
→ mengubah Array asli

Sedangkan:

map()
→ menghasilkan Array baru

filter()
→ menghasilkan Array baru

slice()
→ menghasilkan Array baru

Ini sangat penting untuk diingat.

13. Sekarang masuk ke Array.from()

Kalau fill() fokus pada mengisi Array, Array.from() punya ide berbeda.

Array.from() digunakan untuk:

membuat Array baru dari sesuatu yang iterable atau array-like.

Contoh:

Array.from("hello");

Hasil:

["h", "e", "l", "l", "o"]

Kenapa?

Karena String:

"hello"

bisa diproses karakter demi karakter.

14. Kenapa Array.from() dipanggil dari Array?

Sama seperti lecture sebelumnya tentang:

Object.groupBy()

Array.from() adalah static method.

Jadi kita menulis:

Array.from(...)

bukan:

"hello".from(...)

dan bukan:

[].from(...)

Mental model:

Array
 │
 └── from()

15. Contoh pertama Array.from()

let charArray = Array.from("hello");

console.log(charArray);

Hasil:

["h", "e", "l", "l", "o"]

Prosesnya:

"hello"
   ↓
Array.from()
   ↓
["h", "e", "l", "l", "o"]

Jadi String diubah menjadi Array.

16. Apa itu iterable?

Lecture menyebut:

iterable seperti String, Map, Set, Array, dan lain-lain.

Untuk level sekarang, pahami iterable sebagai:

sesuatu yang bisa diproses satu per satu.

Misalnya String:

"HELLO"
 ↓
H
E
L
L
O

Karena bisa diakses satu per satu, Array.from() bisa membuat Array darinya.

Contoh:

Array.from("ABC");

hasil:

["A", "B", "C"]

17. Array.from() juga menerima callback

Bentuk lengkapnya:

Array.from(iterable, callback)

Ada parameter ketiga juga:

Array.from(iterable, callback, thisArg)

Tetapi untuk sekarang, yang paling penting adalah dua pertama.

Array.from(
    iterable,
    callback
)

18. Callback pada Array.from()

Misalnya:

let numbers = [1, 3, 5, 7, 9];

let result = Array.from(
    numbers,
    (num) => {
        return num * 2;
    }
);

Hasil:

[2, 6, 10, 14, 18]

Kenapa?

Karena callback dijalankan untuk setiap element:

1 → 1 × 2 → 2
3 → 3 × 2 → 6
5 → 5 × 2 → 10
7 → 7 × 2 → 14
9 → 9 × 2 → 18

19. Ini mirip sekali dengan map()

Nah! Ini bagian yang sangat penting.

Kamu mungkin langsung berpikir:

“Lho, bukannya ini sama seperti map()?”

Benar.

Untuk kasus:

Array.from(numbers, num => num * 2)

hasilnya memang mirip dengan:

numbers.map(num => num * 2)

Contoh:

let result1 = Array.from(
    numbers,
    num => num * 2
);

dan:

let result2 = numbers.map(
    num => num * 2
);

Keduanya menghasilkan:

[2, 6, 10, 14, 18]

20. Lalu kenapa ada Array.from() kalau sudah ada map()?

Karena tujuan utamanya berbeda.

map()

Digunakan untuk:

Mengubah setiap element dari Array menjadi Array baru.

numbers.map(...)

Array.from()

Digunakan untuk:

Membuat Array dari iterable/array-like, dan opsional melakukan transformasi.

Array.from(iterable, callback)

Jadi Array.from() lebih general dalam hal sumber datanya.

21. Contoh yang menunjukkan perbedaannya

String:

let text = "hello";

Kita bisa:

Array.from(text);

hasil:

["h", "e", "l", "l", "o"]

Ini bukan sekadar “mapping Array lama”.

Kita sedang:

String
  ↓
Array baru

Sedangkan map() biasanya:

Array
  ↓
Array baru

Jadi:

map()
Array → Array

Array.from()
Iterable/array-like → Array

22. Array.from() dengan transformasi

Misalnya kita ingin setiap karakter menjadi uppercase:

let result = Array.from(
    "hello",
    (char) => {
        return char.toUpperCase();
    }
);

Hasil:

["H", "E", "L", "L", "O"]

Proses:

"hello"
   ↓
Array.from()
   ↓
h → H
e → E
l → L
l → L
o → O
   ↓
["H", "E", "L", "L", "O"]

23. Array.from() dan map() bisa terlihat sama

Contoh:

Array.from([1, 2, 3], x => x * 2);

hasil:

[2, 4, 6]

Sama dengan:

[1, 2, 3].map(x => x * 2);

hasil:

[2, 4, 6]

Tetapi jangan menyimpulkan:

“Array.from() adalah map().”

Bukan.

Lebih tepat:

Array.from()
→ membuat Array dari sumber tertentu

map()
→ mentransformasi element Array

Array.from() kebetulan juga menyediakan callback untuk transformasi.

24. Perbedaan paling penting: fill() vs Array.from()

Sekarang kita bandingkan.

Mental model:

fill()
→ "ISI"

Array.from()
→ "BUAT"

25. Analogi sederhana

Bayangkan kamu punya 5 kotak.

fill()

Kotaknya sudah ada:

[ ][ ][ ][ ][ ]

Lalu kamu bilang:

Isi semua kotak dengan bola merah.

[🔴][🔴][🔴][🔴][🔴]

Itulah:

arr.fill("🔴");

Array.from()

Kamu punya sebuah sumber:

"ABCDE"

Lalu kamu bilang:

Buatkan saya kotak Array berdasarkan isi sumber ini.

Hasil:

[A][B][C][D][E]

Itulah:

Array.from("ABCDE");

26. Contoh praktis fill()

Misalnya kita ingin membuat Array kosong berisi 10 nilai default:

let scores = new Array(10).fill(0);

Hasil:

[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]

Ini berguna ketika kita membutuhkan slot sebanyak tertentu.

Misalnya:

hari 1 → 0
hari 2 → 0
hari 3 → 0
...
hari 10 → 0

27. Contoh praktis Array.from()

Misalnya kita ingin membuat Array angka:

let numbers = Array.from(
    "12345",
    num => Number(num)
);

Hasil:

[1, 2, 3, 4, 5]

Perhatikan:

Sumber awal:

"12345"

adalah String.

Callback:

num => Number(num)

mengubah setiap karakter menjadi Number.

28. Array.from() bisa mengubah iterable menjadi Array

Ini salah satu kegunaan paling penting.

Misalnya kita punya Set:

let mySet = new Set([1, 2, 3]);

Kemudian:

let arr = Array.from(mySet);

hasil:

[1, 2, 3]

Mental model:

Set
 ↓
Array.from()
 ↓
Array

Ini berguna karena Array mempunyai banyak method seperti:

map()
filter()
find()
sort()
forEach()

yang mungkin ingin kita gunakan.

29. Hubungkan dengan NodeList dari DOM

Ini justru relevan dengan materi DOM yang sudah kamu pelajari.

Misalnya:

let elements = document.querySelectorAll(".movie");

Hasilnya adalah NodeList, bukan Array biasa.

Kamu bisa mengubahnya menjadi Array:

let elementsArray = Array.from(elements);

Sekarang:

NodeList
   ↓
Array.from()
   ↓
Array

Kemudian kita bisa dengan mudah menggunakan Array methods.

Misalnya:

let elementsArray = Array.from(elements);

let names = elementsArray.map((element) => {
    return element.textContent;
});

Jadi Array.from() sangat berguna ketika kamu mendapatkan data dalam bentuk array-like/iterable, tetapi ingin mengolahnya sebagai Array.

30. Hubungan dengan getElementsByName()

Di project CIN kamu sebelumnya ada:

let contactElements =
    document.getElementsByName("contact");

Hasilnya bukan Array asli.

Kamu sudah belajar bahwa hasil tersebut berupa collection/NodeList-like object.

Dengan Array.from(), secara konsep kamu bisa melakukan:

let contactArray =
    Array.from(contactElements);

Sekarang kamu mempunyai Array.

Ini salah satu alasan kenapa Array.from() penting dalam JavaScript yang berhubungan dengan DOM.

31. Perhatikan fill() dan object

Ada satu catatan teknis yang sangat penting.

Misalnya:

let arr = new Array(3).fill({});

Hasilnya terlihat seperti:

[{}, {}, {}]

Tetapi ketiga element tersebut menunjuk ke object yang sama.

arr[0] ─┐
arr[1] ─┼──→ object yang sama
arr[2] ─┘

Jadi:

arr[0].name = "John";

bisa membuat:

arr[1].name
arr[2].name

juga menjadi "John".

Ini karena fill() mengisi dengan nilai yang sama, dan untuk object nilai tersebut adalah reference yang sama.

Untuk beginner, cukup ingat:

fill() aman dan sederhana untuk primitive seperti 0, 1, false, "hello", tetapi hati-hati jika mengisi dengan object/Array.

32. fill() bukan push()

Jangan tertukar.

push()

Menambahkan element:

let arr = [1, 2];

arr.push(3);

hasil:

[1, 2, 3]

fill()

Mengganti/mengisi slot yang sudah ada:

let arr = [1, 2, 3];

arr.fill(9);

hasil:

[9, 9, 9]

Jadi:

push()
→ TAMBAH element

fill()
→ ISI/GANTI element yang ada

33. fill() juga bukan map()

Misalnya:

let numbers = [1, 2, 3];

fill()

Semua menjadi nilai yang sama:

numbers.fill(10);

hasil:

[10, 10, 10]

map()

Setiap element bisa menghasilkan nilai berbeda:

numbers.map(num => num * 10);

hasil:

[10, 20, 30]

Jadi:

fill()
→ satu nilai untuk banyak slot

map()
→ setiap element bisa menghasilkan nilai berbeda

34. Array.from() vs fill() dalam membuat Array

Misalnya kita ingin:

[0, 0, 0, 0, 0]

Kita bisa menggunakan:

new Array(5).fill(0);

Sangat cocok.

Sedangkan Array.from() juga bisa digunakan:

Array.from(
    { length: 5 },
    () => 0
);

Hasil:

[0, 0, 0, 0, 0]

Tapi untuk kebutuhan sederhana seperti ini, fill() lebih mudah dibaca:

new Array(5).fill(0);

35. Kalau ingin membuat angka berbeda-beda?

Misalnya:

[0, 1, 2, 3, 4]

fill() tidak cocok karena fill() menggunakan nilai yang sama.

Kita bisa menggunakan Array.from():

let numbers = Array.from(
    { length: 5 },
    (_, index) => index
);

Hasil:

[0, 1, 2, 3, 4]

Ini contoh bagus untuk memahami kelebihan callback pada Array.from().

Secara mental:

index 0 → 0
index 1 → 1
index 2 → 2
index 3 → 3
index 4 → 4

36. Ringkasan cara berpikir

Ketika melihat masalah:

“Saya punya Array dan ingin mengisi semua/sebagian dengan nilai yang sama.”

Gunakan:

fill()

Contoh:

new Array(5).fill(0);

“Saya punya String/Set/NodeList/dll dan ingin membuat Array.”

Gunakan:

Array.from()

Contoh:

Array.from("hello");

“Saya ingin membuat Array dari sumber sekaligus transformasi.”

Bisa:

Array.from(source, item => transform(item));

Contoh:

Array.from("hello", char => char.toUpperCase());

hasil:

["H", "E", "L", "L", "O"]

37. Cheat sheet

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
          fill()
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

array.fill(value)
array.fill(value, start)
array.fill(value, start, end)

→ mengisi Array dengan nilai yang sama
→ mengubah Array asli
→ end tidak termasuk

Contoh:

let arr = [1, 2, 3, 4, 5];

arr.fill(0);

[0, 0, 0, 0, 0]

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
        Array.from()
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Array.from(iterable)

→ membuat Array baru

Contoh:

Array.from("ABC");

hasil:

["A", "B", "C"]

Dengan callback:

Array.from(
    [1, 2, 3],
    num => num * 2
);

hasil:

[2, 4, 6]

38. Hubungkan semua Array method yang sudah kamu pelajari

Sekarang daftar method kamu sudah semakin banyak:

forEach()
    ↓
"Lakukan sesuatu untuk setiap element"

map()
    ↓
"Ubah setiap element"

filter()
    ↓
"Pilih element yang cocok"

find()
    ↓
"Cari satu element"

findIndex()
    ↓
"Cari posisi element"

sort()
    ↓
"Urutkan"

splice()
    ↓
"Hapus/ubah isi Array"

includes()
    ↓
"Cek apakah ada"

groupBy()
    ↓
"Kelompokkan"

fill()
    ↓
"Isi dengan nilai yang sama"

Array.from()
    ↓
"Buat Array dari iterable/array-like"

🧠 Inti lecture ini

Kalau harus mengingat hanya 4 hal, ingat ini:

1. fill() → isi

new Array(5).fill(0);

→ [0, 0, 0, 0, 0]

2. fill() mengubah Array asli

arr.fill(10);

arr ikut berubah.

3. Array.from() → buat Array dari sumber lain

Array.from("hello");

→ ["h", "e", "l", "l", "o"]

4. Array.from() bisa sekaligus transformasi

Array.from([1, 2, 3], num => num * 2);

→ [2, 4, 6]

Jadi mental model akhirnya:

                 ARRAY
                   │
          ┌────────┴────────┐
          ↓                 ↓
       fill()          Array.from()
          │                 │
          ↓                 ↓
    "ISI yang ada"     "BUAT yang baru"
          │                 │
          ↓                 ↓
     nilai sama       dari iterable
                         +
                    optional callback

Dan ini nyambung sangat bagus dengan materi sebelumnya: fill() adalah mutating method seperti sort()/splice(), sedangkan Array.from() menghasilkan Array baru seperti map()/filter().