Lecture ini membahas Array, dan ini adalah konsep yang sangat penting karena Array akan sering sekali kamu gunakan dalam JavaScript.

Kalau lecture sebelumnya kita belajar Object untuk mengelompokkan data berdasarkan nama/property, sekarang kita belajar Array untuk membuat daftar data yang berurutan.

Gambaran paling sederhananya:

Object → data disimpan berdasarkan nama/key

Array  → data disimpan berdasarkan urutan/index

Contoh:

let user = {
    name: "John",
    age: 28
};

Di object kita mengambil data dengan nama property:

user.name
user.age

Sedangkan array:

let students = ["John", "Mark", "Alice"];

kita mengambil data berdasarkan index:

students[0]
students[1]
students[2]

Mari kita bahas dari dasar.

1. Apa itu Array?

Definisi sederhananya:

Array adalah kumpulan/list data yang disimpan secara berurutan dan setiap data memiliki index.

Misalnya kita ingin menyimpan daftar nama:

let students = ["John", "Mark", "Alice", "Bob"];

Array tersebut berisi 4 data:

students
   │
   ├── "John"
   ├── "Mark"
   ├── "Alice"
   └── "Bob"

Karena data tersebut tersusun secara berurutan, setiap item mendapatkan index.

Index       Value
  0      →  "John"
  1      →  "Mark"
  2      →  "Alice"
  3      →  "Bob"

Nah, konsep index ini adalah salah satu hal terpenting dalam Array.

2. Kenapa kita membutuhkan Array?

Misalnya kamu ingin menyimpan 5 nama siswa.

Tanpa array, kamu mungkin membuat:

let student1 = "John";
let student2 = "Mark";
let student3 = "Alice";
let student4 = "Bob";
let student5 = "David";

Kalau datanya 100 siswa?

Akan sangat merepotkan.

Dengan array:

let students = [
    "John",
    "Mark",
    "Alice",
    "Bob",
    "David"
];

Sekarang semua nama tersebut berada dalam satu variable:

students
   ↓
["John", "Mark", "Alice", "Bob", "David"]

Inilah tujuan utama Array:

Menyimpan banyak data dalam satu collection/list.

3. Analogi Array: Rak Barang

Bayangkan ada sebuah rak dengan beberapa slot:

┌─────────┬─────────┬─────────┬─────────┐
│  John   │  Mark   │  Alice  │   Bob   │
└─────────┴─────────┴─────────┴─────────┘
     0         1         2         3

Setiap slot memiliki nomor.

Nomor tersebut adalah index.

Jadi kalau kamu ingin mengambil Alice:

students[2]

karena Alice berada di slot nomor 2.

4. Index Array dimulai dari 0

⚠️ Ini salah satu hal yang paling penting.

JavaScript menggunakan zero-based indexing.

Artinya index pertama adalah:

0

Bukan:

1

Misalnya:

let students = [
    "John",
    "Mark",
    "Alice",
    "Bob"
];

Index-nya:

Index       Element

  0    →    "John"
  1    →    "Mark"
  2    →    "Alice"
  3    →    "Bob"

Jadi:

students[0]

→ "John"

students[1]

→ "Mark"

students[2]

→ "Alice"

students[3]

→ "Bob"

5. Kenapa mulai dari 0?

Ini memang terasa aneh ketika baru belajar.

Tapi kamu akan menemukan konsep ini di hampir semua bahasa pemrograman.

Anggap index sebagai jarak dari awal array.

Item pertama berada pada jarak 0 dari awal.

START
 ↓
[John] [Mark] [Alice]
  0      1       2

Jadi jangan terlalu dipikirkan sebagai:

“John adalah siswa nomor 0.”

Lebih mudah memikirkan:

“John berada pada index 0.”

6. Cara membuat Array

Lecture menjelaskan dua cara.

Cara pertama: Array Literal

Ini cara yang paling sering digunakan:

let students = [];

[] disebut square brackets.

Saat kita menulis:

let students = [];

kita membuat array kosong.

students → []

Belum ada element.

7. Langsung memasukkan data

Kita bisa langsung memasukkan data:

let students = ["John", "Mark", "Alice"];

Sekarang:

Index       Value

  0       "John"
  1       "Mark"
  2       "Alice"

8. Array bisa berisi berbagai tipe data

Ini salah satu karakteristik JavaScript yang penting.

Misalnya:

let data = [
    "John",
    28,
    true,
    null
];

Array tersebut berisi:

String  → "John"
Number  → 28
Boolean → true
null    → null

Jadi dalam JavaScript, sebuah array tidak wajib hanya berisi satu tipe data.

9. Bahkan Object bisa dimasukkan ke Array

Ini juga sangat penting karena nanti sering kamu temui.

Misalnya:

let students = [
    "John",
    28,
    true,
    {
        name: "Mark",
        age: 30
    }
];

Element terakhir adalah object:

{
    name: "Mark",
    age: 30
}

Jadi array bisa berisi:

String
Number
Boolean
null
undefined
Object
Array
Function
dll.

Contoh nyata yang lebih masuk akal:

let students = [
    {
        name: "John",
        age: 20
    },
    {
        name: "Alice",
        age: 21
    },
    {
        name: "Mark",
        age: 22
    }
];

Ini adalah pola yang sangat umum dalam aplikasi JavaScript:

Array
 │
 ├── Object
 ├── Object
 └── Object

Nanti kamu akan sering melihat format seperti ini ketika mengambil data dari API.

10. Array sebenarnya adalah Object

Lecture menekankan hal ini:

Array adalah special type of object dalam JavaScript.

Kamu sudah belajar sebelumnya bahwa JavaScript memiliki primitive types.

Array tidak termasuk primitive.

Karena itu:

typeof [];

hasilnya:

"object"

Contoh:

let students = ["John", "Mark"];

console.log(typeof students);

Output:

object

Jadi secara konsep:

Array
  ↓
special kind of Object
  ↓
memiliki property dan method khusus

Itulah mengapa nanti kamu akan menemukan:

students.length
students.push()
students.pop()
students.includes()

dan sebagainya.

Lecture berikutnya akan membahas property dan method tersebut.

11. Cara Mengakses Element

Untuk mengambil element array:

arrayName[index]

Contoh:

let students = ["John", "Mark", "Alice"];

Ambil John:

students[0]

Ambil Mark:

students[1]

Ambil Alice:

students[2]

Misalnya:

console.log(students[1]);

Output:

Mark

12. Kenapa menggunakan [] lagi?

Perhatikan:

Object menggunakan:

user["name"]

Array juga menggunakan:

students[0]

Syntax-nya sama-sama menggunakan square brackets.

Tetapi maknanya berbeda:

Object

user["name"]

artinya:

Ambil property bernama "name".

Array

students[0]

artinya:

Ambil element yang berada di index 0.

Jadi jangan tertukar.

13. Contoh Array dari Lecture

Lecture menggunakan data student seperti:

let student = [
    "John",
    28,
    "Male",
    123456,
    true
];

Sekarang kita beri index:

Index     Element

  0       "John"
  1       28
  2       "Male"
  3       123456
  4       true

Maka:

student[0]

→ "John"

student[1]

→ 28

student[2]

→ "Male"

student[3]

→ 123456

student[4]

→ true

14. Mengambil Element Ketiga

Misalnya:

let student = [
    "John",
    28,
    "Male",
    123456,
    true
];

Kita ingin mengambil element ketiga.

Karena index dimulai dari 0:

Element pertama → index 0
Element kedua   → index 1
Element ketiga  → index 2

Maka:

student[2]

Output:

Male

Ini adalah jebakan pemula yang sangat umum:

Element ke-3 bukan array[3].

Tetapi:

array[2]

15. console.log(array) vs console.log(array[index])

Ini juga dijelaskan di lecture.

Kalau:

console.log(student);

kamu meminta JavaScript menampilkan seluruh array.

Hasilnya kira-kira:

[
    "John",
    28,
    "Male",
    123456,
    true
]

Tetapi kalau:

console.log(student[2]);

kamu hanya meminta element pada index 2.

Hasil:

Male

Jadi:

array
 ↓
semua element

sedangkan:

array[index]
 ↓
satu element

Ini sangat berguna ketika debugging.

16. Array bisa dimanipulasi

Kita bukan hanya bisa membaca element.

Kita juga bisa mengubahnya.

Misalnya:

let student = [
    "John",
    28,
    "Male",
    123456,
    true
];

Kita ingin mengubah PIN:

123456

menjadi:

456789

PIN berada di index 3.

Maka:

student[3] = 456789;

Sekarang array menjadi:

Index     Value

  0       "John"
  1       28
  2       "Male"
  3       456789
  4       true

17. Pattern Read dan Update

Perhatikan pola ini:

Read

student[3]

artinya:

Ambil element index 3.

Update

student[3] = 456789;

artinya:

Ambil element index 3 lalu ganti nilainya menjadi 456789.

Konsepnya mirip dengan object yang baru kita pelajari.

Object:

user.age = 30;

Array:

student[3] = 456789;

Bedanya:

Object → berdasarkan property name
Array  → berdasarkan index

18. Array bersifat Dynamic

Ini salah satu karakteristik penting JavaScript Array.

Ukuran Array JavaScript bersifat dynamic.

Artinya kita tidak harus menentukan jumlah element ketika membuat array.

Misalnya:

let numbers = [10, 20, 30];

Tidak perlu mengatakan:

“Array ini harus memiliki 3 slot.”

Kita bisa menambahkan data lagi nanti.

Misalnya:

numbers[3] = 40;
numbers[4] = 50;

Sekarang:

10
20
30
40
50

Array dapat berkembang.

19. Dibandingkan dengan bahasa lain

Beberapa bahasa pemrograman memiliki array dengan ukuran yang harus ditentukan sejak awal.

Misalnya secara konsep:

buat array dengan ukuran 5

berarti array tersebut mempunyai kapasitas/ukuran tertentu.

JavaScript lebih fleksibel.

Kita bisa membuat:

let numbers = [];

kemudian menambahkan element seiring kebutuhan.

[]
 ↓
[10]
 ↓
[10, 20]
 ↓
[10, 20, 30]
 ↓
[10, 20, 30, 40]

Tidak perlu menentukan ukuran awal.

20. Cara kedua membuat Array: new Array()

Selain:

let numbers = [];

kita juga bisa:

let numbers = new Array();

Ini menghasilkan array kosong.

numbers → []

Kemudian kita bisa mengisinya:

let numbers = new Array(10, 20, 30);

Hasilnya:

[10, 20, 30]

Index:

0 → 10
1 → 20
2 → 30

21. Mana yang biasanya digunakan?

Dalam praktik JavaScript:

let numbers = [10, 20, 30];

jauh lebih umum digunakan daripada:

let numbers = new Array(10, 20, 30);

Karena lebih simpel dan mudah dibaca.

Jadi untuk sekarang:

Biasakan menggunakan [] untuk membuat array.

Contoh:

let students = ["John", "Alice", "Mark"];

Ini adalah syntax yang paling sering kamu lihat.

22. ⚠️ Jebakan new Array(10)

Nah, lecture memberikan warning yang sangat penting.

Perhatikan:

let numbers = new Array(10);

Mungkin kamu mengira hasilnya:

[10]

Ternyata bukan.

JavaScript menganggap 10 sebagai:

jumlah/length array

bukan sebagai element.

Hasilnya:

[]
length → 10

Jadi array tersebut memiliki panjang 10 tetapi tidak memiliki element yang berisi angka 10.

23. Kenapa new Array(10) berbeda?

Karena constructor Array mempunyai perilaku khusus.

Kalau diberikan satu argument berupa number:

new Array(10)

JavaScript menganggap:

"10 adalah panjang array"

Bukan:

"10 adalah element array"

Jadi:

new Array(10)

→ array dengan length 10.

24. Kalau Dua Number Bagaimana?

Perhatikan:

new Array(10, 20)

Ini berbeda.

Karena sekarang ada dua argument.

JavaScript menganggap keduanya sebagai element:

index 0 → 10
index 1 → 20

Hasil:

[10, 20]

Begitu juga:

new Array(10, 20, 30);

menjadi:

[10, 20, 30]

25. Perbedaan Penting

new Array(10)

→ array kosong dengan length 10.

Sedangkan:

new Array(10, 20)

→ array dengan element 10 dan 20.

Jadi:

new Array(10)
        ↓
  length = 10
  elements = none

sementara:

new Array(10, 20)
        ↓
  elements = 10, 20

26. Kenapa Ini Disebut “Bug” di Lecture?

Sebenarnya lebih tepat disebut quirk/perilaku khusus, bukan bug dalam arti JavaScript rusak.

Syntax:

new Array(10)

memang secara resmi memiliki arti:

Buat array dengan length 10.

Tetapi bagi pemula, ini bisa membingungkan karena kita mungkin berharap:

[10]

Karena itu lecture menyebutnya sebagai sesuatu yang perlu diwaspadai.

Dan karena biasanya kita menggunakan:

[]

masalah ini bisa dihindari.

Misalnya kalau kamu memang ingin membuat array berisi angka 10:

let numbers = [10];

Ini jelas berarti:

index 0 → 10

27. Contoh new Array dari Lecture

Misalnya:

let user = new Array(
    "admin",
    "read-write",
    "IT"
);

Array:

Index        Value

  0        "admin"
  1        "read-write"
  2        "IT"

Akses element kedua:

console.log(user[1]);

Output:

read-write

Kemudian kita bisa mengubahnya:

user[1] = "read-only";

Sekarang:

Index        Value

  0        "admin"
  1        "read-only"
  2        "IT"

28. Array vs Object

Karena kamu baru saja belajar Object, membandingkan keduanya akan sangat membantu.

Object

let user = {
    name: "John",
    age: 28
};

Data diakses berdasarkan nama property:

user.name
user.age

Array

let users = [
    "John",
    "Mark",
    "Alice"
];

Data diakses berdasarkan index:

users[0]
users[1]
users[2]

Jadi:

29. Analogi Object vs Array

Bayangkan Object seperti formulir biodata:

Name   → John
Age    → 28
Gender → Male

Kita tahu nama field-nya.

Sedangkan Array seperti daftar antrean:

1. John
2. Mark
3. Alice
4. Bob

Yang penting adalah urutan.

Dalam JavaScript:

let user = {
    name: "John",
    age: 28
};

vs:

let users = [
    "John",
    "Mark",
    "Alice"
];

Jadi:

Object cocok ketika kamu ingin menjelaskan “data ini apa”.

Array cocok ketika kamu ingin menyimpan “daftar data ini”.

30. Array Sangat Cocok untuk List

Contoh nyata:

Daftar nama

let names = [
    "John",
    "Alice",
    "Mark"
];

Daftar angka

let scores = [
    80,
    90,
    75,
    88
];

Daftar produk

let products = [
    "Laptop",
    "Mouse",
    "Keyboard"
];

Daftar boolean

let results = [
    true,
    false,
    true
];

31. Array + Object = Kombinasi yang Sangat Sering Dipakai

Ini pola yang sangat penting untuk kamu kenali.

Misalnya kita memiliki banyak student.

Kita bisa menggunakan:

let students = [
    {
        name: "John",
        age: 20
    },
    {
        name: "Alice",
        age: 21
    },
    {
        name: "Mark",
        age: 22
    }
];

Strukturnya:

students
│
├── index 0
│      ├── name → John
│      └── age  → 20
│
├── index 1
│      ├── name → Alice
│      └── age  → 21
│
└── index 2
       ├── name → Mark
       └── age  → 22

Untuk mengambil Alice:

students[1]

Hasilnya object:

{
    name: "Alice",
    age: 21
}

Untuk mengambil nama Alice:

students[1].name

Ini akan menghasilkan:

Alice

Memang belum dibahas mendalam di lecture ini, tapi contoh ini penting supaya kamu melihat kenapa Array dan Object sering digunakan bersama.

32. Array Bisa Diubah Setelah Dibuat

Misalnya:

let fruits = [
    "Apple",
    "Banana",
    "Orange"
];

Kita bisa mengubah:

fruits[1] = "Mango";

Sekarang:

0 → Apple
1 → Mango
2 → Orange

Jadi array bukan sesuatu yang immutable.

Kita bisa memanipulasi element-nya.

33. Jangan Bingung dengan Kata “Element”

Dalam Array, setiap item disebut element.

Misalnya:

let fruits = [
    "Apple",
    "Banana",
    "Orange"
];

Maka:

"Apple"  → element
"Banana" → element
"Orange" → element

Index-nya:

"Apple"  → index 0
"Banana" → index 1
"Orange" → index 2

Jadi:

Element = item yang berada di dalam Array.

34. Array memiliki urutan

Kata penting dalam lecture:

ordered collection

Artinya data memiliki urutan.

Misalnya:

let numbers = [10, 20, 30];

Urutannya:

10 → 20 → 30

Kalau:

let numbers = [30, 10, 20];

ini adalah array yang berbeda urutannya:

30 → 10 → 20

Index mengikuti posisi:

0 → 30
1 → 10
2 → 20

Jadi index sangat berhubungan dengan posisi element.

35. Hal yang Perlu Kamu Waspadai: Index di luar Array

Misalnya:

let fruits = ["Apple", "Banana", "Orange"];

Index yang tersedia:

0
1
2

Kalau kamu mencoba:

console.log(fruits[5]);

tidak ada element di index 5.

Hasilnya:

undefined

Ini berbeda dengan error.

Jadi:

fruits[5]

→ undefined.

36. Pola Dasar Array

Untuk sekarang, hafalkan pola ini:

Membuat

let arr = [];

Membuat sekaligus mengisi

let arr = [10, 20, 30];

Membaca

arr[0];

Mengubah

arr[0] = 100;

Menampilkan seluruh array

console.log(arr);

Menampilkan satu element

console.log(arr[0]);

37. Contoh Lengkap

Mari kita buat contoh dari awal:

let students = [
    "John",
    "Mark",
    "Alice",
    "Bob"
];

Array:

Index     Value

  0       John
  1       Mark
  2       Alice
  3       Bob

Ambil John:

console.log(students[0]);

→ John

Ambil Alice:

console.log(students[2]);

→ Alice

Ubah Mark menjadi David:

students[1] = "David";

Sekarang:

0 → John
1 → David
2 → Alice
3 → Bob

Tampilkan semuanya:

console.log(students);

→ seluruh array.

38. Hubungkan dengan CRUD

Seperti object, kamu bisa membayangkan operasi dasar Array:

Array
 │
 ├── READ   → arr[index]
 │
 └── UPDATE → arr[index] = value

Lecture berikutnya akan memperkenalkan berbagai method sehingga kita bisa melakukan operasi lain dengan lebih mudah, misalnya menambahkan dan menghapus element.

39. Kenapa Array Penting untuk JavaScript?

Karena dalam aplikasi nyata kita sering mendapatkan sekumpulan data.

Misalnya API mengembalikan:

users
products
orders
comments
messages
students

Biasanya data tersebut direpresentasikan sebagai Array.

Contoh:

let products = [
    {
        name: "Laptop",
        price: 1000
    },
    {
        name: "Mouse",
        price: 20
    },
    {
        name: "Keyboard",
        price: 50
    }
];

Jadi ketika kamu sudah memahami:

Object
+
Array

kamu sudah mulai memiliki fondasi untuk memahami struktur data JavaScript yang sangat umum.

40. ⚠️ Beberapa Jebakan Pemula

Jebakan 1 — Mengira index dimulai dari 1

❌

students[1]

untuk element pertama.

✅

students[0]

Jebakan 2 — Mengira new Array(10) menghasilkan [10]

❌ Bukan.

new Array(10)

berarti array dengan:

length = 10

dan belum memiliki element 10.

Kalau ingin:

[10]

gunakan:

[10]

Jebakan 3 — Mengira Array hanya boleh satu tipe

Di JavaScript ini boleh:

let data = [
    "John",
    28,
    true,
    null
];

Jebakan 4 — Menganggap Array bukan Object

Secara teknis:

typeof []

menghasilkan:

"object"

Array adalah special kind of object.

Jebakan 5 — Lupa membedakan element dan index

Misalnya:

let fruits = ["Apple", "Banana"];

0 adalah index.

"Apple" adalah element.

Jadi:

index  → 0
element → "Apple"

41. Cheat Sheet Array

Array kosong

let students = [];

Array dengan data

let students = ["John", "Mark", "Alice"];

Index

0 → John
1 → Mark
2 → Alice

Mengambil element

students[0];
students[1];
students[2];

Mengubah element

students[1] = "David";

Menampilkan seluruh array

console.log(students);

Menampilkan satu element

console.log(students[1]);

Dengan new Array

let numbers = new Array(10, 20, 30);

⚠️ Hati-hati

new Array(10);

bukan:

[10]

tetapi array dengan:

length = 10

42. Object vs Array — versi paling mudah

Kalau kamu masih bingung kapan menggunakan Object dan kapan Array, gunakan pertanyaan ini:

“Saya ingin menyimpan satu benda yang punya banyak informasi?”

Gunakan Object.

let user = {
    name: "John",
    age: 28,
    gender: "Male"
};

Karena satu user punya banyak informasi.

“Saya ingin menyimpan banyak benda dalam sebuah daftar?”

Gunakan Array.

let users = [
    "John",
    "Mark",
    "Alice"
];

Karena kita memiliki banyak user/data dalam sebuah list.

Bahkan bisa digabung:

let users = [
    {
        name: "John",
        age: 28
    },
    {
        name: "Mark",
        age: 30
    }
];

Ini artinya:

Array untuk mengumpulkan banyak object.

43. Mental Model yang Sebaiknya Kamu Simpan

Bayangkan Array seperti rak dengan nomor slot.

             ARRAY
┌──────────┬──────────┬──────────┬──────────┐
│  "John"  │  "Mark"  │ "Alice"  │  "Bob"   │
└──────────┴──────────┴──────────┴──────────┘
      0          1          2          3

Kalau mau mengambil "Alice":

students[2]

Kalau mau mengganti "Alice" menjadi "Sarah":

students[2] = "Sarah";

Jadi:

arr[index]
    │
    └── posisi element yang ingin kita akses

⭐ Inti Lecture yang Wajib Kamu Ingat

Ada sekitar 8 konsep utama.

1. Array adalah collection/list

let names = ["John", "Mark", "Alice"];

2. Array menyimpan data secara berurutan

John → Mark → Alice

3. Setiap element memiliki index

John  → 0
Mark  → 1
Alice → 2

4. Index dimulai dari 0

names[0] // John

5. Array bisa menyimpan berbagai tipe data

let data = [
    "John",
    28,
    true,
    null
];

6. Array adalah special type of Object

typeof []
// "object"

Dan karena itu Array mempunyai berbagai property dan method.

7. Element bisa diakses dan diubah menggunakan index

names[1]

untuk membaca.

names[1] = "David";

untuk mengubah.

8. Array JavaScript bersifat dynamic

Kita tidak perlu menentukan ukuran array sejak awal.

let numbers = [];

bisa berkembang sesuai kebutuhan.

🧠 Rumus sederhana untuk mengingat semuanya

ARRAY
  ↓
LIST / COLLECTION
  ↓
ELEMENT
  ↓
punya INDEX
  ↓
INDEX DIMULAI DARI 0

Contoh:

let students = ["John", 28, "Male", 123456, true];

Maka:

             students
                │
    ┌───────────┼────────────┐
    ↓           ↓            ↓
 index 0     index 1       index 2 ...
  "John"       28          "Male"

Akses:

students[0]

Update:

students[0] = "Mark";

Dan satu kalimat yang paling penting untuk lecture ini:

Array adalah object khusus yang digunakan untuk menyimpan kumpulan data secara berurutan, di mana setiap element dapat diakses berdasarkan index yang dimulai dari 0.

Setelah ini, bagian yang sangat penting untuk dikuasai adalah property dan method Array, karena di situlah kita mulai belajar cara menambah, menghapus, mencari, menggabungkan, memotong, dan memproses element Array dengan cara yang jauh lebih praktis.