Lecture ini sangat penting karena sekarang kamu belajar bahwa slice() bukan hanya bisa dipakai pada Array, tetapi juga pada String.

Dan yang lebih penting lagi, lecture ini membandingkan:

slice()

dengan:

substring()

Keduanya bisa mengambil sebagian karakter dari String, tetapi ada perbedaan perilaku yang penting, terutama saat menggunakan negative index dan ketika start > end.

1. slice() bisa digunakan pada String

Sebelumnya kamu sudah belajar slice() pada Array.

Contoh Array:

let numbers = [10, 20, 30, 40, 50];

let result = numbers.slice(1, 4);

console.log(result);

Hasil:

[20, 30, 40]

Sekarang ternyata konsep slice() juga berlaku pada String.

Misalnya:

let str = "Hello, JavaScript!";

Kita bisa melakukan:

let newString = str.slice(7, 17);

console.log(newString);

Hasilnya adalah bagian String yang berada pada rentang index tersebut.

Jadi secara sederhana:

Array
  ↓
slice()
  ↓
sebagian Array baru

String
  ↓
slice()
  ↓
sebagian String baru

2. Syntax slice() pada String

Bentuknya:

string.slice(startIndex, endIndex)

Kedua parameter bersifat optional.

slice(start, end)
      ↓      ↓
    mulai  batas akhir

Aturannya:

Mulai dari startIndex, lalu mengambil karakter sampai sebelum endIndex.

Jadi:

start → INCLUDE
end   → EXCLUDE

Ini sama seperti konsep slice() pada Array yang sudah kamu pelajari.

3. Contoh tanpa parameter

Misalnya:

let str = "Hello, JavaScript!";

console.log(str.slice());

Karena tidak memberikan start maupun end, maka seluruh String dikembalikan:

Hello, JavaScript!

Jadi:

str.slice()

kurang lebih berarti:

“Ambil seluruh String.”

4. Menggunakan startIndex

Misalnya kita punya:

let str = "Hello, JavaScript!";

Bayangkan index-nya:

H e l l o ,   J a v a S c r i p t !
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Kalau kita melakukan:

str.slice(7);

maka kita mulai dari index 7:

H e l l o ,   J a v a S c r i p t !
0 1 2 3 4 5 6 7 ...
              ↑
            mulai

Karena endIndex tidak diberikan, maka JavaScript mengambil semuanya sampai akhir.

Hasil:

JavaScript!

Mental model:

slice(7)
   ↓
mulai index 7
   ↓
ambil sampai akhir

5. Menggunakan startIndex dan endIndex

Misalnya:

str.slice(7, 17);

Artinya:

Mulai dari index 7 dan berhenti sebelum index 17.

Misalnya:

J a v a S c r i p t !
7 8 9 10 11 12 13 14 15 16 17

Maka yang diambil:

7  → J
8  → a
9  → v
10 → a
11 → S
12 → c
13 → r
14 → i
15 → p
16 → t
17 → ! ← tidak ikut

Hasil:

JavaScript

Jadi aturan penting:

slice(start, end)

start → masuk
end   → tidak masuk

6. slice() tidak mengubah String asli

Ini juga sangat penting dan nyambung dengan lecture sebelumnya.

let str = "Hello, JavaScript!";

let result = str.slice(7, 17);

console.log(result);
console.log(str);

Hasil:

JavaScript
Hello, JavaScript!

String asli tetap utuh.

Secara mental:

str
 ↓
"Hello, JavaScript!"
      │
      │ slice()
      ↓
"JavaScript"

slice() membuat/menghasilkan String baru.

7. Hubungannya dengan substring()

Sebelumnya kamu sudah belajar:

substring(start, end)

Contoh:

let str = "Hello, JavaScript!";

console.log(str.substring(7, 17));

Hasilnya juga:

JavaScript

Jadi pada penggunaan normal:

str.slice(7, 17)

dan:

str.substring(7, 17)

bisa memberikan hasil yang sama.

Lalu pertanyaannya:

Kalau hasilnya sama, apa bedanya?

Nah, inilah inti lecture.

8. Perbedaan pertama: Negative Index

Ini salah satu keunggulan penting slice().

slice() mendukung negative index.

Sedangkan substring() tidak memperlakukan negative index dengan cara yang sama.

9. Apa itu negative index?

Biasanya kita menghitung dari depan:

H e l l o
0 1 2 3 4

Negative index menghitung dari belakang.

Misalnya:

H e l l o
0 1 2 3 4
-5 -4 -3 -2 -1

Jadi:

-1 → karakter terakhir
-2 → karakter kedua dari belakang
-3 → karakter ketiga dari belakang

Ini sangat berguna.

10. Contoh slice(-1)

Misalnya:

let str = "Hello, JavaScript!";

console.log(str.slice(-1));

-1 berarti:

ambil karakter terakhir.

Hasil:

!

Mental model:

"Hello, JavaScript!"
                 ↑
                -1
                 ↓
                 !

Jadi:

str.slice(-1)

adalah cara yang sangat praktis untuk mendapatkan karakter terakhir.

11. slice(-2)

Kalau:

str.slice(-2)

artinya:

mulai dari karakter kedua dari belakang dan ambil sampai akhir.

Misalnya akhir String:

... p t !
    ↑ ↑
   -2 -1

Maka hasil:

t!

12. slice(-4)

Misalnya:

let str = "Hello, JavaScript!";

console.log(str.slice(-4));

Hasil:

ipt!

Karena:

-4 → i
-3 → p
-2 → t
-1 → !

Ini adalah salah satu alasan slice() sangat berguna.

13. Bagaimana substring() menangani negative index?

Ini bagian yang harus kamu pahami.

Misalnya:

let str = "Hello, JavaScript!";

console.log(str.substring(-1));

substring() tidak menggunakan -1 sebagai:

karakter terakhir.

Negative value pada substring() diperlakukan sebagai 0.

Secara sederhana:

str.substring(-1)

dianggap seperti:

str.substring(0)

Maka hasilnya adalah seluruh String.

Hello, JavaScript!

14. Jadi perbedaannya

str.slice(-1)

→ karakter terakhir.

Sedangkan:

str.substring(-1)

→ dianggap mulai dari 0.

Jadi:

Ini perbedaan yang sangat penting.

15. Perbedaan kedua: start lebih besar dari end

Sekarang kita masuk ke perbedaan berikutnya.

Misalnya:

str.slice(5, 2)

Perhatikan:

start = 5
end   = 2

Berarti:

start > end

Apa yang terjadi?

16. slice() jika start > end

Pada slice():

str.slice(5, 2)

hasilnya:

""

yaitu empty string.

Mengapa?

Karena slice() tidak membalik posisi secara otomatis.

Kita mengatakan:

mulai dari 5
berhenti sebelum 2

Rentang tersebut tidak valid untuk arah normal slice().

Hasil:

""

17. substring() berbeda

Kalau kita melakukan:

str.substring(5, 2)

substring() akan menukar kedua index tersebut.

Seolah-olah kita menulis:

str.substring(2, 5)

Jadi:

substring(5, 2)
        ↓
ditukar
        ↓
substring(2, 5)

18. Contoh dengan "Hello"

Misalnya:

let str = "Hello";

Index:

H e l l o
0 1 2 3 4

Kita lakukan:

str.substring(4, 1);

Karena:

start = 4
end = 1

dan 4 > 1, substring() menukarnya menjadi:

str.substring(1, 4);

Yang diambil:

e l l

Hasil:

"ell"

19. Sedangkan slice()

Kalau:

str.slice(4, 1);

hasil:

""

Jadi:

slice(4, 1)
     ↓
start > end
     ↓
""

sedangkan:

substring(4, 1)
          ↓
start > end
          ↓
tukar menjadi substring(1, 4)
          ↓
"ell"

20. Jadi dua perbedaan utama

Sekarang kita bisa membuat tabel:

21. Mental model yang mudah

Bayangkan slice() sebagai orang yang patuh dengan instruksi persis.

Kalau kamu bilang:

mulai 5, berhenti 2

dia bilang:

“Tidak ada bagian yang bisa saya ambil.”

→ ""

Sedangkan substring() lebih seperti:

“Kamu memberikan 5 dan 2? Oke, saya urutkan dulu.”

5, 2
 ↓
2, 5

Kemudian dia mengambil bagian tersebut.

22. Use case nyata dalam lecture: Employee ID

Nah, sekarang lecture masuk ke contoh yang lebih realistis.

Misalnya perusahaan memiliki Employee ID seperti:

BLR1234P

ID tersebut memiliki struktur:

BLR 1234 P
│   │    │
│   │    └── tipe employee
│   │
│   └────── employee number
│
└────────── city code

Misalnya:

BLR1234P

artinya:

BLR → Bangalore
1234 → ID employee
P → Permanent

Contoh lainnya:

NYC5678C

artinya:

NYC → New York
5678 → ID employee
C → Contract

23. Masalah yang ingin diselesaikan

Kita punya Array employee:

let employees = [
  {
    id: "BLR1234P",
    name: "John",
    department: "IT"
  },
  {
    id: "NYC5678C",
    name: "Mary",
    department: "HR"
  }
];

Kita ingin menampilkan:

Employee Detail
Name: John
City: Bangalore
Type: Permanent

Employee Detail
Name: Mary
City: New York
Type: Contract

Bagaimana caranya?

Kita perlu membongkar Employee ID.

24. Mendapatkan city code

Kita tahu tiga karakter pertama adalah city code.

Contoh:

BLR1234P
^^^
BLR

Maka:

id.slice(0, 3);

Kenapa 0, 3?

Karena:

B L R 1 2 3 4 P
0 1 2 3 4 5 6 7

Kita ingin:

index 0 → B
index 1 → L
index 2 → R

Index 3 tidak termasuk.

Maka:

id.slice(0, 3);

→

"BLR"

25. Kenapa menggunakan slice(0, 3)?

Karena kita ingin 3 karakter pertama.

Pattern-nya:

slice(0, jumlah)

Misalnya:

"ABCDEFG".slice(0, 3)

→

"ABC"

26. Membuat getCity()

Kita bisa membuat function:

function getCity(id) {
  let cityCode = id.slice(0, 3);

  switch (cityCode) {
    case "BLR":
      return "Bangalore";

    case "NYC":
      return "New York";

    case "LON":
      return "London";

    default:
      return "";
  }
}

Sekarang:

getCity("BLR1234P");

Prosesnya:

"BLR1234P"
    ↓
slice(0, 3)
    ↓
"BLR"
    ↓
switch
    ↓
"BLR" → "Bangalore"

Hasil:

Bangalore

27. Mendapatkan tipe employee

Sekarang kita ingin mendapatkan karakter terakhir.

Misalnya:

BLR1234P
       ↑
       P

Kita bisa menggunakan:

id.slice(-1);

Kenapa -1?

Karena:

-1 = karakter terakhir

Jadi:

"BLR1234P".slice(-1);

→

"P"

28. Membuat employeeType()

function employeeType(id) {
  let type = id.slice(-1);

  if (type === "P") {
    return "Permanent";
  } else {
    return "Contract";
  }
}

Prosesnya:

"BLR1234P"
       ↓
slice(-1)
       ↓
"P"
       ↓
type === "P"?
       ↓
yes
       ↓
"Permanent"

Kalau:

NYC5678C
       ↓
slice(-1)
       ↓
"C"
       ↓
"Contract"

29. Kenapa slice(-1) sangat berguna?

Ini contoh nyata dari kelebihan slice() dibanding substring().

Kalau kita ingin mengambil karakter terakhir, kita bisa:

id.slice(-1)

Tidak perlu tahu panjang String.

Misalnya ID:

BLR1234P
NYC987654C
LON123456789P

Kita tidak perlu menghitung panjangnya.

Selalu:

id.slice(-1)

→ ambil karakter terakhir.

Ini sangat praktis.

30. Kemudian menggunakan forEach()

Lecture kemudian melakukan looping terhadap Array employee.

Misalnya:

employees.forEach(function(emp) {
  console.log("Employee Detail");
  console.log("Name:", emp.name);
  console.log("City:", getCity(emp.id));
  console.log("Type:", employeeType(emp.id));
  console.log("");
});

Mari kita bedah.

31. forEach() bekerja satu per satu

Misalnya:

employees

berisi:

Employee 1
Employee 2
Employee 3

forEach() akan menjalankan callback untuk setiap employee:

employees
    ↓
 employee 1
    ↓
 callback
    ↓
 employee 2
    ↓
 callback
    ↓
 employee 3
    ↓
 callback

Variabel:

emp

berisi employee yang sedang diproses.

32. emp.name

Kalau object:

{
  id: "BLR1234P",
  name: "John",
  department: "IT"
}

maka:

emp.name

menghasilkan:

John

Sedangkan:

emp.id

menghasilkan:

BLR1234P

33. Memanggil getCity(emp.id)

Kita punya:

getCity(emp.id)

Misalnya:

emp.id
 ↓
"BLR1234P"
 ↓
getCity()
 ↓
slice(0, 3)
 ↓
"BLR"
 ↓
"Bangalore"

Jadi:

console.log(getCity(emp.id));

akan menghasilkan:

Bangalore

34. Memanggil employeeType(emp.id)

Kemudian:

employeeType(emp.id)

Prosesnya:

"BLR1234P"
    ↓
slice(-1)
    ↓
"P"
    ↓
if
    ↓
"Permanent"

35. Keseluruhan flow program

Sekarang kita bisa melihat hubungan semua konsep:

Employee Array
      ↓
   forEach()
      ↓
   employee
      ↓
    emp.id
      │
      ├───────────────┐
      ↓               ↓
 getCity()       employeeType()
      ↓               ↓
 slice(0, 3)       slice(-1)
      ↓               ↓
   "BLR"              "P"
      ↓               ↓
"Bangalore"       "Permanent"
      └───────┬───────┘
              ↓
        Employee Detail

Jadi slice() di sini menjadi alat untuk membongkar informasi yang tersembunyi di dalam String ID.

36. Ini sebenarnya konsep yang sangat penting

Perhatikan Employee ID:

BLR1234P

Sebenarnya ini hanya satu String.

Tetapi String tersebut memiliki struktur:

BLR | 1234 | P
 ↓     ↓     ↓
city   ID   type

Kita menggunakan slice() untuk mengambil bagian-bagian tersebut.

Ini adalah contoh sederhana dari:

String parsing

Artinya:

mengambil bagian tertentu dari sebuah String untuk mendapatkan informasi yang kita butuhkan.

Nanti ketika kamu membuat aplikasi yang lebih besar, konsep seperti ini akan sering muncul.

37. slice() pada String vs Array

Sekarang penting untuk menghubungkan dengan materi sebelumnya.

Array

let arr = [10, 20, 30, 40, 50];

arr.slice(1, 4);

→

[20, 30, 40]

String

let str = "Hello";

str.slice(1, 4);

→

"ell"

Jadi method yang sama bisa digunakan pada dua jenis data:

Array
  ↓
slice()
  ↓
Array baru

String
  ↓
slice()
  ↓
String baru

38. Tapi hasilnya berbeda tipe

Ini jangan dilupakan.

let arr = [10, 20, 30];

let result = arr.slice(1, 2);

console.log(typeof result);

Hasil:

object

Karena hasilnya Array.

Sedangkan:

let str = "ABC";

let result = str.slice(1, 2);

console.log(typeof result);

Hasil:

string

Karena kita memanggil slice() pada String.

39. slice() vs substring() — versi super sederhana

Kalau kamu sedang bingung memilih:

slice()

str.slice(start, end)

Kelebihan penting:

✅ mendukung negative index
✅ start > end → ""

substring()

str.substring(start, end)

Perilakunya:

❌ negative index → diperlakukan sebagai 0
🔄 start > end → ditukar

40. Contoh perbandingan

Misalnya:

let text = "JavaScript";

Normal

text.slice(0, 4);

→ "Java"

text.substring(0, 4);

→ "Java"

Sama.

Negative index

text.slice(-3);

→ "ipt"

Sedangkan:

text.substring(-3);

-3 dianggap 0:

→ "JavaScript"

Berbeda.

Start > end

text.slice(5, 2);

→ ""

Sedangkan:

text.substring(5, 2);

diubah menjadi:

text.substring(2, 5);

→ "vaS"

Berbeda.

41. Catatan teknis kecil

Ada satu hal yang perlu kamu ketahui dari lecture:

Caption mengatakan substring() “does not handle negative indices correctly”. Lebih tepatnya:

substring() mengonversi nilai negatif menjadi 0.

Jadi bukan benar-benar error.

Contoh:

"Hello".substring(-2, 4);

diproses seperti:

"Hello".substring(0, 4);

→

"Hell"

Ini detail kecil, tapi bagus kamu tahu sejak sekarang.

42. Mana yang sebaiknya kamu gunakan?

Untuk kode JavaScript modern, slice() sangat berguna terutama karena negative index.

Misalnya:

id.slice(-1)

untuk mengambil karakter terakhir.

Atau:

id.slice(0, 3)

untuk mengambil tiga karakter pertama.

Sementara substring() juga masih berguna dan penting untuk dipahami karena kamu akan menemukannya dalam kode dan tutorial.

43. Cheat sheet

STRING EXTRACTION
────────────────────────────────

slice(start, end)
    ↓
ambil sebagian String
    ↓
start masuk
end tidak masuk

Dari awal

"JavaScript".slice(0, 4)

→ "Java"

Dari index tertentu sampai akhir

"JavaScript".slice(4)

→ "Script"

Karakter terakhir

"JavaScript".slice(-1)

→ "t"

Beberapa karakter terakhir

"JavaScript".slice(-3)

→ "ipt"

44. Perbandingan dengan method sebelumnya

Sekarang kamu sudah punya beberapa String method:

Dan beberapa method bisa digabung:

let name = "jOHN";

let formatted =
  name.substring(0, 1).toUpperCase() +
  name.substring(1).toLowerCase();

→

John

Jadi semakin lama kamu belajar, kamu akan mulai menggabungkan beberapa method untuk menyelesaikan satu masalah.

🧠 Inti lecture ini

Kalau hanya mengingat beberapa hal, fokus pada ini:

1. slice() bisa digunakan pada String

str.slice(start, end);

2. end tidak termasuk

slice(2, 5)

2 → masuk
3 → masuk
4 → masuk
5 → tidak masuk

3. Tanpa end, ambil sampai akhir

str.slice(7);

4. slice() mendukung negative index

str.slice(-1);

→ karakter terakhir.

Ini sangat berguna.

5. substring() tidak bekerja dengan negative index seperti slice()

str.substring(-1);

Negative -1 diperlakukan sebagai 0.

6. Kalau start > end

str.slice(5, 2);

→ ""

Sedangkan:

str.substring(5, 2);

→ index ditukar menjadi:

str.substring(2, 5);

7. slice() tidak mengubah String asli

String asli
    ↓
  slice()
    ↓
String baru

🎯 Mental model paling penting

Bayangkan slice() sebagai gunting ✂️:

"Hello, JavaScript!"
       ↑          ↑
     start       end

Gunting mulai di start dan berhenti sebelum end.

Dan kalau kamu menggunakan:

slice(-1)

kamu berkata:

“Mulai dari 1 karakter sebelum ujung String.”

Makanya:

"Hello!".slice(-1)

→

!

Sedangkan dalam contoh Employee ID:

BLR1234P
^^^    ↑
│      │
│      └── slice(-1) → P
│
└───────── slice(0,3) → BLR

Dari satu String "BLR1234P", kita bisa mengambil bagian-bagian informasi yang kita perlukan. Itu inti penggunaan slice() yang ingin diperkenalkan oleh lecture ini.