Lecture ini penting banget karena mulai masuk ke “alat-alat utama” yang dipakai saat bekerja dengan Array. Kalau lecture sebelumnya membahas cara membuat dan mengakses array, lecture ini membahas property dan method yang akan sering kamu gunakan sehari-hari.

Kita bahas pelan-pelan dari konsep dasarnya sampai semua method yang ada di lecture.

1. Mengingat kembali: Apa itu Array?

Array adalah sebuah kumpulan data yang tersusun secara berurutan.

Contoh:

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

Array tersebut berisi 3 element:

Index     Value
  0       John
  1       Mark
  2       Mary

Ingat:

Index array selalu dimulai dari 0.

Jadi:

names[0] // "John"
names[1] // "Mark"
names[2] // "Mary"

2. Array adalah Object

Di lecture sebelumnya kita sudah belajar bahwa:

Array adalah special type of object di JavaScript.

Artinya, array mempunyai:

• property
• method

Contohnya:

names.length

length adalah property.

Sedangkan:

names.push("Steve");

push() adalah method.

Cara mudah membedakannya:

Biasanya:

property → tidak menggunakan ()
method   → menggunakan ()

3. Property length

Property pertama yang sangat penting adalah:

length

Fungsinya untuk mengetahui panjang array.

Misalnya:

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

console.log(names.length);

Hasil:

3

Karena ada 3 element:

["John", "Mark", "Mary"]

Kalau kita tambah element?

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

console.log(names.length);

names.push("Steve");

console.log(names.length);

Hasil:

3
4

Awalnya:

["John", "Mark", "Mary"]

Kemudian:

["John", "Mark", "Mary", "Steve"]

Maka length otomatis berubah.

4. length bukan sekadar “jumlah data”

Ini bagian yang cukup penting.

Banyak pemula menganggap:

array.length = jumlah element yang benar-benar terisi.

Lebih tepatnya, pada JavaScript:

length berkaitan dengan highest numeric index + 1.

Contoh normal:

let arr = ["A", "B", "C", "D"];

Index:

A → 0
B → 1
C → 2
D → 3

Index tertinggi adalah 3.

Maka:

length = 3 + 1
       = 4

Jadi:

arr.length // 4

5. Contoh yang agak aneh dengan length

Misalnya:

let arr = [];

arr[50] = 20;

Apa yang terjadi?

Kita tidak mengisi:

0
1
2
...
49

Tapi langsung mengisi index 50.

Jadi kira-kira strukturnya:

index 0   → empty
index 1   → empty
index 2   → empty
...
index 49  → empty
index 50  → 20

Index tertinggi adalah 50.

Maka:

arr.length

menghasilkan:

51

Karena:

highest index + 1
50 + 1
= 51

Sedangkan:

arr[5]

hasilnya:

undefined

karena index 5 tidak memiliki value.

Tapi jangan terlalu fokus pada kasus ini

Ini memang penting untuk memahami cara kerja JavaScript, tetapi dalam program sehari-hari kita biasanya tidak melakukan:

arr[50] = 20;

pada array kosong.

Biasanya kita menggunakan:

arr.push(...)

untuk menambahkan data.

6. length bisa digunakan untuk memotong Array

Ini salah satu fitur menarik.

Misalnya:

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

console.log(numbers);

Hasil:

[1, 2, 3, 4, 5]

Sekarang:

numbers.length = 2;

Kemudian:

console.log(numbers);

Hasil:

[1, 2]

Element 3, 4, dan 5 dihapus dari array.

Jadi:

numbers.length = 2;

berarti:

“Saya mau array ini hanya memiliki panjang 2.”

7. Hati-hati: setelah dipotong tidak bisa dikembalikan

Misalnya:

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

numbers.length = 2;

Sekarang:

[1, 2]

Kemudian kita lakukan:

numbers.length = 5;

Apakah hasilnya kembali menjadi:

[1, 2, 3, 4, 5]

❌ Tidak.

Hasilnya kira-kira:

[1, 2, empty, empty, empty]

Karena 3, 4, dan 5 sudah dihapus.

Menambah kembali length hanya membuat ruang/index tersedia lagi. Data yang sudah dihapus tidak dikembalikan.

8. Trik mengosongkan Array dengan length = 0

Ini juga penting.

Misalnya:

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

Kalau kita ingin menghapus seluruh element:

numbers.length = 0;

Sekarang:

console.log(numbers);

Hasil:

[]

Array-nya masih ada, tetapi seluruh element-nya sudah dihapus.

Ini salah satu teknik yang sering muncul dalam interview JavaScript.

9. Method push()

Sekarang kita masuk ke method.

Method pertama:

push()

Fungsinya:

Menambahkan element ke bagian paling akhir array.

Contoh:

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

names.push("Ravi");

console.log(names);

Hasil:

["John", "Mark", "Mary", "Ravi"]

Sebelum:

John → Mark → Mary

Setelah push():

John → Mark → Mary → Ravi
                         ↑
                       ditambah

10. push() bisa menambahkan banyak element

Tidak harus satu.

Kita bisa:

names.push("Ravi", "Mukesh", "Sara");

Misalnya awalnya:

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

Setelah:

names.push("Ravi", "Mukesh", "Sara");

menjadi:

["John", "Mark", "Mary", "Ravi", "Mukesh", "Sara"]

Jadi:

push(a)

atau:

push(a, b, c, d)

keduanya bisa.

11. pop()

Kalau push() menambahkan data ke akhir, maka:

pop()

digunakan untuk:

menghapus element terakhir dari array.

Contoh:

let names = ["John", "Mark", "Mary", "Steve"];

names.pop();

console.log(names);

Hasil:

["John", "Mark", "Mary"]

Yang dihapus adalah:

Steve

12. pop() juga mengembalikan element yang dihapus

Ini penting.

Misalnya:

let names = ["John", "Mark", "Mary", "Steve"];

let removedElement = names.pop();

console.log(removedElement);

Hasil:

Steve

Jadi pop() melakukan dua hal:

1. Menghapus element terakhir

["John", "Mark", "Mary", "Steve"]
                              ↓
                           dihapus

menjadi:

["John", "Mark", "Mary"]

2. Mengembalikan element yang dihapus

let removedElement = names.pop();

Maka:

removedElement

berisi:

"Steve"

13. push() vs pop()

Ini pasangan yang sangat penting.

Bayangkan array seperti antrean dari sisi belakang:

[John, Mark, Mary]

push("Steve")
        ↓
[John, Mark, Mary, Steve]

Kemudian:

pop()

mengambil Steve kembali.

14. Method unshift()

Sekarang kebalikannya.

unshift()

digunakan untuk:

menambahkan element di awal array.

Contoh:

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

names.unshift("Jonas");

console.log(names);

Hasil:

["Jonas", "John", "Mark", "Mary"]

Jadi:

Sebelum:

John → Mark → Mary

unshift("Jonas")

Sesudah:

Jonas → John → Mark → Mary

15. unshift() juga bisa banyak element

Contoh:

names.unshift("Ravi", "Mukesh", "Sara");

Kalau awalnya:

["John", "Mark", "Mary"]

hasilnya:

["Ravi", "Mukesh", "Sara", "John", "Mark", "Mary"]

Jadi sama seperti push(), unshift() bisa menerima beberapa argument.

16. Method shift()

Kalau:

unshift()

menambahkan element di awal,

maka:

shift()

menghapus element dari awal.

Contoh:

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

names.shift();

console.log(names);

Hasil:

["Mark", "Mary"]

John dihapus.

17. shift() juga mengembalikan element yang dihapus

Sama seperti pop().

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

let removedElement = names.shift();

console.log(removedElement);

Hasil:

John

Array sekarang:

["Mark", "Mary"]

Sedangkan:

removedElement

berisi:

"John"

18. Empat method penting: push, pop, shift, unshift

Ini wajib kamu hafalkan.

Cara termudah adalah menggunakan pola berikut:

                 AWAL                 AKHIR

               ← shift       pop → 
               ← unshift     push →

Atau tabel:

Mnemonic sederhana:

push → dorong masuk dari belakang

[A, B] → push(C) → [A, B, C]

pop → ambil dari belakang

[A, B, C] → pop() → [A, B]

unshift → tambah di depan

[A, B] → unshift(C) → [C, A, B]

shift → buang dari depan

[A, B, C] → shift() → [B, C]

19. Mana yang mengembalikan value?

Ini juga perlu diperhatikan.

pop() → mengembalikan element yang dihapus

let x = names.pop();

shift() → mengembalikan element yang dihapus

let x = names.shift();

Sedangkan lecture menjelaskan push() dan unshift() sebagai method untuk melakukan aksi penambahan.

Ada sedikit nuansa teknis yang bagus untuk kamu ketahui: sebenarnya push() dan unshift() juga mengembalikan nilai, yaitu length array yang baru.

Contoh:

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

let result = names.push("Mary");

console.log(result);

Hasil:

3

Karena panjang array sekarang 3.

Dan:

let result = names.unshift("Steve");

juga mengembalikan length baru.

Namun untuk tahap belajar sekarang, fokus utamanya:

push/unshift = menambahkan element.

20. Method indexOf()

Sekarang kita punya method:

indexOf()

Fungsinya:

Mencari index dari sebuah element di dalam array.

Misalnya:

let names = ["John", "Mark", "Mary", "Steve"];

Index-nya:

0 → John
1 → Mark
2 → Mary
3 → Steve

Kalau kita:

let index = names.indexOf("Mark");

console.log(index);

hasil:

1

Karena "Mark" berada di index 1.

21. Kalau element tidak ditemukan?

Misalnya:

let index = names.indexOf("Ravi");

console.log(index);

Padahal array:

["John", "Mark", "Mary", "Steve"]

tidak memiliki "Ravi".

Maka:

-1

Jadi aturan indexOf():

ketemu     → return index
tidak ketemu → return -1

22. indexOf() bisa digunakan untuk mengecek apakah data ada

Ini salah satu penggunaan praktisnya.

Misalnya:

let names = ["John", "Mark", "Mary", "Steve"];

Kita ingin tahu apakah "Mark" ada.

Bisa:

if (names.indexOf("Mark") !== -1) {
    console.log("Mark ditemukan");
}

Kenapa !== -1?

Karena:

names.indexOf("Mark")

menghasilkan:

1

Berarti ditemukan.

Sedangkan:

names.indexOf("Ravi")

menghasilkan:

-1

Berarti tidak ditemukan.

23. Kenapa tidak langsung pakai if (names.indexOf(...))?

Ini jebakan yang penting untuk pemula.

Misalnya:

if (names.indexOf("John")) {
    ...
}

Ini bermasalah kalau "John" berada di index 0.

Karena:

names.indexOf("John")

menghasilkan:

0

Dan 0 adalah falsy.

Jadi cara aman untuk pengecekan adalah:

if (names.indexOf("John") !== -1) {
    console.log("John ditemukan");
}

24. indexOf() menggunakan pencocokan yang ketat

Contoh:

let numbers = [10, 20, 30];

console.log(numbers.indexOf(20));

Hasil:

1

Tetapi:

console.log(numbers.indexOf("20"));

hasilnya:

-1

Karena:

20

adalah Number, sedangkan:

"20"

adalah String.

Jadi tipe data juga penting.

Ini sejalan dengan pembahasan kita sebelumnya mengenai:

20 === "20" // false

25. Gambaran keseluruhan method

Sekarang gabungkan semuanya.

Misalnya:

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

Mengetahui jumlah element

names.length

Hasil:

3

Menambah di belakang

names.push("Steve");

Hasil:

["John", "Mark", "Mary", "Steve"]

Menghapus dari belakang

names.pop();

Hasil:

["John", "Mark", "Mary"]

Menambah di depan

names.unshift("Ravi");

Hasil:

["Ravi", "John", "Mark", "Mary"]

Menghapus dari depan

names.shift();

Hasil:

["John", "Mark", "Mary"]

Mencari index

names.indexOf("Mark");

Hasil:

1

26. Visualisasi paling mudah

Bayangkan array seperti rak buku.

INDEX
  ↓

[0]       [1]       [2]       [3]
 John     Mark      Mary      Steve

push()

Taruh buku di paling belakang:

John → Mark → Mary → Steve → Ravi

pop()

Ambil buku paling belakang:

John → Mark → Mary → Steve
                         ↑
                       diambil

unshift()

Taruh buku di paling depan:

Ravi → John → Mark → Mary

shift()

Ambil buku paling depan:

John → Mark → Mary
  ↑
diambil

indexOf()

Tanya:

“Buku Mark ada di posisi berapa?”

Jawaban:

1

length

Tanya:

“Ada berapa posisi/elements?”

Jawaban:

3

27. Hal penting tentang length

Ada satu konsep yang perlu benar-benar kamu pahami:

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

Maka:

names.length

adalah:

3

Tetapi index terakhir:

2

Karena:

John → index 0
Mark → index 1
Mary → index 2

Jadi:

length = jumlah/ukuran array

index terakhir = length - 1

Contoh:

names.length // 3

Index terakhir:

names.length - 1 // 2

Ini akan sangat berguna nanti saat kita belajar looping.

28. Semua method ini mengubah array atau tidak?

Ini konsep yang juga penting.

Mengubah array

Method berikut mengubah array asli:

push()
pop()
shift()
unshift()

Contoh:

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

names.push("Mary");

console.log(names);

Array names benar-benar berubah menjadi:

["John", "Mark", "Mary"]

Sedangkan:

indexOf()

tidak mengubah array.

Ia hanya mencari dan mengembalikan informasi.

names.indexOf("Mark");

Array tetap sama.

29. length adalah property, bukan method

Perhatikan perbedaan:

names.length

Bukan:

names.length()

Karena length adalah property.

Sedangkan:

names.push("John");

menggunakan () karena push adalah method/function.

Jadi:

names.length       ← property
names.push(...)    ← method
names.pop()        ← method
names.shift()      ← method
names.unshift(...) ← method
names.indexOf(...) ← method

30. Kenapa Array punya method seperti ini?

Karena Array adalah object.

Ingat konsep sebelumnya:

Object
 ├── properties
 └── methods

Array juga memiliki:

Array
 ├── length
 ├── push()
 ├── pop()
 ├── shift()
 ├── unshift()
 ├── indexOf()
 └── banyak method lainnya...

Makanya ketika kamu melihat:

names.push(...)

sebenarnya konsepnya sama seperti object yang kita pelajari sebelumnya:

object.property

atau:

object.method()

31. Hubungannya dengan Object dan Method

Lecture sebelumnya:

let user = {
    name: "John",

    calculateAge: function() {
        ...
    }
};

Di situ:

user.name

adalah property.

Sedangkan:

user.calculateAge()

adalah method.

Sekarang pada array:

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

kita punya:

names.length

property.

Dan:

names.push("Steve")

method.

Jadi konsepnya sama.

32. Cheat Sheet yang wajib kamu hafalkan

33. Cara mengingat 4 method utama

Gunakan pola ini:

             MENAMBAH        MENGHAPUS

DEPAN        unshift()       shift()

BELAKANG     push()          pop()

Atau:

DEPAN
  ↑
unshift() = tambah
shift()   = hapus
  ↓

BELAKANG
  ↑
push()    = tambah
pop()     = hapus

Kalau kamu hafal tabel ini, kamu sudah menguasai bagian terbesar dari lecture ini.

34. Contoh lengkap

Coba perhatikan kode berikut:

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

console.log(names.length);

names.push("Steve");

console.log(names);

let removed = names.pop();

console.log(removed);

names.unshift("Ravi");

console.log(names);

removed = names.shift();

console.log(removed);

let index = names.indexOf("Mark");

console.log(index);

Urutannya:

Awal

["John", "Mark", "Mary"]

length

3

push("Steve")

["John", "Mark", "Mary", "Steve"]

pop()

Steve dihapus:

["John", "Mark", "Mary"]

dan:

removed = "Steve"

unshift("Ravi")

["Ravi", "John", "Mark", "Mary"]

shift()

Ravi dihapus:

["John", "Mark", "Mary"]

dan:

removed = "Ravi"

indexOf("Mark")

Mark berada di:

index 1

35. ⚠️ Jebakan yang perlu kamu ingat

Jebakan 1 — Lupa index dimulai dari 0

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

Bukan:

John → 1
Mark → 2
Mary → 3

Tetapi:

John → 0
Mark → 1
Mary → 2

Jebakan 2 — Mengira length sama dengan index terakhir

names.length // 3

Index terakhir:

2

Karena:

lastIndex = length - 1;

Jebakan 3 — Lupa pop() menghapus dari belakang

["A", "B", "C"].pop()

yang hilang:

C

bukan A.

Jebakan 4 — Lupa shift() menghapus dari depan

["A", "B", "C"].shift()

yang hilang:

A

Jebakan 5 — indexOf() menghasilkan -1 jika tidak ketemu

["A", "B"].indexOf("C")

hasil:

-1

Jebakan 6 — Jangan melakukan ini untuk cek keberadaan element

if (names.indexOf("John")) {
    ...
}

Karena jika John ada di index 0, kondisi dianggap falsy.

Lebih aman:

if (names.indexOf("John") !== -1) {
    ...
}

36. Hubungan dengan materi sebelumnya

Kalau kita rangkum perjalanan materi kita sampai sekarang:

Variable
   ↓
Data Types
   ↓
Object
   ↓
Property & Method
   ↓
Array
   ↓
Array Property & Method

Kita sekarang mulai melihat bahwa JavaScript menyediakan banyak method bawaan untuk mempermudah pekerjaan kita.

Daripada kita harus membuat semuanya sendiri:

// mencari element secara manual
// menghapus element secara manual
// menambah element secara manual

JavaScript sudah menyediakan:

push()
pop()
shift()
unshift()
indexOf()

Ini adalah salah satu alasan kenapa memahami method sangat penting dalam JavaScript.

🎯 Inti lecture ini

Kalau setelah lecture ini kamu hanya mengingat beberapa hal, pastikan ini:

1. Array adalah object khusus

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

Array memiliki property dan method.

2. length

names.length

Untuk mengetahui panjang array.

3. push()

names.push("Steve");

Menambahkan element ke akhir.

4. pop()

names.pop();

Menghapus element dari akhir dan mengembalikan element yang dihapus.

5. unshift()

names.unshift("Steve");

Menambahkan element ke awal.

6. shift()

names.shift();

Menghapus element dari awal dan mengembalikan element yang dihapus.

7. indexOf()

names.indexOf("Mark");

Mencari index suatu element.

Kalau tidak ditemukan:

-1

8. length = 0

names.length = 0;

Mengosongkan array.

🧠 Satu tabel untuk dihafalkan

                     ARRAY

        AWAL                    AKHIR

   unshift()  ← TAMBAH →  push()
   shift()    ← HAPUS  →  pop()

                     ↓
                  length
              "berapa panjang?"

                     ↓
                 indexOf()
              "ada di index berapa?"

Kalau kamu sudah nyaman dengan length, push, pop, shift, unshift, dan indexOf, kamu sudah punya fondasi yang bagus untuk masuk ke method-method array berikutnya.