Lecture ini melanjutkan pembahasan String methods, khususnya tiga method untuk mengecek isi String:

includes()
startsWith()
endsWith()

Ketiganya punya satu kesamaan besar:

Ketiganya mengembalikan Boolean: true atau false.

Kalau replace() yang sebelumnya kita pelajari digunakan untuk mengubah String, maka ketiga method ini digunakan untuk bertanya kepada String.

1. Gambaran besar

Bayangkan kita punya String:

let str = "Hello World!";

Kita bisa bertanya:

includes()

“Apakah String ini mengandung World?”

str.includes("World");

→ true

startsWith()

“Apakah String ini dimulai dengan Hello?”

str.startsWith("Hello");

→ true

endsWith()

“Apakah String ini diakhiri dengan World!?”

str.endsWith("World!");

→ true

Mental model:

"Hello World!"
 ↑          ↑
 │          │
 │          └── endsWith()
 │
 └── startsWith()

        ↓
     includes()
     bisa mencari
     di mana saja

2. Ketiganya menghasilkan Boolean

Ingat Boolean:

true
false

Jadi:

let result = str.includes("Hello");

console.log(result);

hasilnya:

true

Bukan:

"Hello"

dan bukan:

0

Jadi method-method ini sangat cocok digunakan di dalam kondisi:

if (str.includes("Hello")) {
    console.log("Ditemukan!");
}

3. includes()

Kita mulai dari includes().

Syntax:

string.includes(searchString)

Contoh:

let str = "Hello World";

let result = str.includes("Hello");

console.log(result);

Hasil:

true

Karena Hello memang ada di dalam String.

4. includes() mencari di mana saja

Ini konsep paling penting dari includes().

Misalnya:

let str = "Hello World";

Kita bisa mencari:

str.includes("Hello"); // true

str.includes("World"); // true

Bahkan:

str.includes("llo"); // true

dan:

str.includes("or"); // true

Kenapa?

Karena includes() tidak peduli apakah substring berada di awal, tengah, atau akhir.

Yang penting:

Substring tersebut ada di dalam String.

Visual:

"Hello World"
  ↑↑↑
 "llo" → ada → true

5. Kalau tidak ditemukan?

Misalnya:

let str = "Hello World";

console.log(str.includes("JavaScript"));

Hasil:

false

Karena:

"Hello World"

tidak memiliki:

"JavaScript"

Jadi:

ketemu?
   │
 ┌─┴─┐
yes  no
 ↓    ↓
true false

6. includes() juga bisa mencari satu karakter

Tidak harus satu kata.

Misalnya:

let str = "Hello World!";

Kita bisa:

str.includes("H"); // true

str.includes("!"); // true

str.includes(","); // false

Karena koma tidak ada di String tersebut.

Jadi:

includes()
    ↓
bisa mencari
    ↓
kata / substring / karakter

7. includes() bersifat case-sensitive

Ini sangat penting.

Misalnya:

let str = "Hello World";

Kemudian:

str.includes("Hello");

→ true

Tetapi:

str.includes("hello");

→ false

Kenapa?

Karena:

"Hello" ≠ "hello"

JavaScript membedakan uppercase dan lowercase.

8. Bagaimana membuat pencarian case-insensitive?

Salah satu cara sederhana adalah mengubah keduanya menjadi lowercase.

Misalnya:

let str = "Hello World";

let result = str.toLowerCase().includes("hello");

console.log(result);

Hasil:

true

Apa yang terjadi?

"Hello World"
      ↓
.toLowerCase()
      ↓
"hello world"
      ↓
.includes("hello")
      ↓
true

Karena "hello" sekarang cocok dengan "hello".

9. Jangan lupa String yang dicari juga harus konsisten

Misalnya:

let str = "Hello World";

str.toLowerCase().includes("WORLD");

Hasil:

false

Kenapa?

Karena String utama sudah menjadi:

"hello world"

tetapi kita mencari:

"WORLD"

Lebih aman:

str.toLowerCase().includes("world");

Jadi:

String utama → lowercase
search value → lowercase

10. Parameter kedua includes()

Lecture juga menjelaskan bahwa includes() memiliki parameter kedua:

string.includes(searchString, position)

position menentukan mulai pencarian dari index berapa.

Contoh:

let str = "Hello World";

str.includes("World", 6);

Hasil:

true

Karena pencarian dimulai dari index 6.

Mari lihat index:

String:  H e l l o   W o r l d
Index:   0 1 2 3 4 5 6 7 8 9 10

World dimulai dari index 6.

11. Contoh position yang membuat hasil berbeda

let str = "Hello World";

console.log(str.includes("Hello", 0));

→ true

Tetapi:

console.log(str.includes("Hello", 1));

→ false

Karena pencarian dimulai dari index 1, sehingga bagian yang dimulai dari index 0 tidak lagi menjadi bagian yang dicari dari posisi tersebut.

Mental model:

includes("Hello", 0)
              ↑
        mulai dari index 0

includes("Hello", 1)
              ↑
        mulai dari index 1

Untuk penggunaan sehari-hari, biasanya kita cukup menggunakan:

str.includes("Hello");

Parameter position berguna ketika kita ingin mengontrol dari mana pencarian dimulai.

12. startsWith()

Sekarang kita pindah ke:

startsWith()

Kalau includes() bertanya:

“Apakah ada di mana saja?”

startsWith() bertanya:

“Apakah String dimulai dengan ini?”

Syntax:

string.startsWith(searchString)

Contoh:

let str = "Hello World";

console.log(str.startsWith("Hello"));

Hasil:

true

Karena String dimulai dengan Hello.

13. startsWith() tidak mencari sembarangan

Misalnya:

let str = "Hello World";

Ini:

str.startsWith("World");

hasilnya:

false

Walaupun World memang ada di dalam String.

Kenapa?

Karena:

"Hello World"
       ↑
     World

World bukan di awal.

Jadi:

includes("World")
      ↓
     true

startsWith("World")
      ↓
     false

Ini perbedaan yang sangat penting.

14. startsWith() bisa mencari karakter

Misalnya:

let str = "Hello World";

str.startsWith("H"); // true

Karena String dimulai dengan H.

Tetapi:

str.startsWith("W"); // false

Karena W bukan karakter pertama.

Visual:

"Hello World"
 ↑
 H → startsWith("H") → true

"Hello World"
       ↑
       W → startsWith("W") → false

15. startsWith() juga case-sensitive

let str = "Hello World";

str.startsWith("Hello"); // true
str.startsWith("hello"); // false

Sama seperti includes().

Kalau ingin case-insensitive:

str.toLowerCase().startsWith("hello");

Hasil:

true

16. endsWith()

Sekarang kebalikannya:

endsWith()

Kalau:

startsWith → awal

maka:

endsWith → akhir

Syntax:

string.endsWith(searchString)

Contoh:

let str = "Hello World!";

console.log(str.endsWith("World!"));

Hasil:

true

Karena String memang berakhir dengan:

World!

17. Hati-hati dengan endsWith()

Misalnya:

let str = "Hello World!";

Kita melakukan:

str.endsWith("World");

Hasil:

false

Kenapa?

Karena bagian akhirnya adalah:

"World!"

bukan:

"World"

Ada ! setelah World.

Visual:

"Hello World!"
       └──────┘
       "World!" ← benar

"World" ← tidak sama dengan bagian akhir

Jadi:

str.endsWith("World!"); // true
str.endsWith("World");  // false

18. endsWith() bisa mencari satu karakter

Contoh:

let str = "Hello World!";

str.endsWith("!"); // true

Tetapi:

str.endsWith("d"); // false

Kenapa?

Karakter terakhir adalah:

!

bukan:

d

19. endsWith() juga case-sensitive

let str = "Hello World!";

str.endsWith("World!"); // true
str.endsWith("world!"); // false

Kalau ingin case-insensitive:

str.toLowerCase().endsWith("world!");

→ true

20. Perbedaan ketiganya

Ini bagian yang wajib banget dikuasai.

Misalnya:

let text = "Hello JavaScript!";

includes()

text.includes("JavaScript");

→ true

Karena JavaScript ada di mana saja.

startsWith()

text.startsWith("Hello");

→ true

Karena Hello ada di awal.

endsWith()

text.endsWith("!");

→ true

Karena ! ada di akhir.

Visual:

"Hello JavaScript!"
 ↑                ↑
 │                │
 │                └── endsWith()
 │
 └── startsWith()

      JavaScript
          ↑
          └── includes()

21. Tabel perbandingan

Mental model:

includes()
   ↓
"ADA DI MANA SAJA?"


startsWith()
   ↓
"AWALNYA APA?"


endsWith()
   ↓
"AKHIRNYA APA?"

22. Use case 1 — Validasi email

Sekarang kita masuk ke bagian yang lebih praktis dari lecture.

Lecture membuat fungsi:

validateEmail()

Tujuannya adalah melakukan validasi sederhana terhadap email.

Misalnya kita punya:

test@gmail.com

Kita ingin mengecek:

1. Email tidak boleh dimulai dengan @
2. Email harus mengandung @
3. Email harus berakhir dengan .com

23. Menggunakan startsWith()

Kita bisa mengecek:

email.startsWith("@")

Kalau:

@gmail.com

maka:

email.startsWith("@");

→ true

Artinya email dimulai dengan @, sehingga kita anggap invalid.

Kita bisa:

if (email.startsWith("@")) {
    return false;
}

Artinya:

Kalau email dimulai dengan @, langsung return false.

24. Menggunakan endsWith()

Kita ingin email berakhir dengan .com.

Maka:

email.endsWith(".com")

Kalau:

test@gmail.com

hasilnya:

true

Tetapi:

test@gmail

hasilnya:

false

Maka:

if (!email.endsWith(".com")) {
    return false;
}

! membalik Boolean.

Misalnya:

email.endsWith(".com")
        ↓
      false
        ↓
        !
        ↓
      true

Maka masuk ke if.

25. Menggunakan includes()

Kita juga ingin memastikan email memiliki:

@

Maka:

email.includes("@")

Misalnya:

"test@gmail.com".includes("@")

→ true

Tetapi:

"test.gmail.com".includes("@")

→ false

Maka:

if (!email.includes("@")) {
    return false;
}

26. Bentuk fungsi lengkapnya

Versi sederhana dari konsep lecture:

function validateEmail(email) {
    if (email.startsWith("@")) {
        return false;
    }

    if (!email.endsWith(".com")) {
        return false;
    }

    if (!email.includes("@")) {
        return false;
    }

    return true;
}

Kemudian:

console.log(validateEmail("test@gmail.com"));

→

true

Sedangkan:

console.log(validateEmail("test@gmail"));

→

false

Dan:

console.log(validateEmail("@test@gmail.com"));

→

false

27. Tapi ingat: ini BUKAN validasi email sungguhan

Ini penting untuk memahami batasan lecture.

Fungsi tadi hanyalah contoh sederhana untuk belajar includes(), startsWith(), dan endsWith().

Email sebenarnya memiliki aturan yang jauh lebih kompleks.

Misalnya fungsi di atas mungkin menerima sesuatu seperti:

abc@.com

yang jelas bukan validasi email yang baik.

Jadi jangan menganggap:

startsWith()
endsWith()
includes()

sendirian sudah cukup untuk memvalidasi email secara production-grade.

Lecture menggunakan email hanya sebagai use case pembelajaran.

28. Use case 2 — Filter produk berdasarkan nama

Nah, bagian ini sangat bagus karena menggabungkan materi sebelumnya.

Kita sudah belajar:

array.filter()

Sekarang kita gabungkan dengan:

includes()

Misalnya ada array:

let products = [
    { name: "Smart Watch", price: 100 },
    { name: "Smart TV", price: 500 },
    { name: "Analog Watch", price: 80 }
];

Kita ingin mencari produk berdasarkan nama.

Misalnya user mencari:

smart

29. Menggunakan filter()

Kita bisa:

let result = products.filter(function(product) {
    return product.name.toLowerCase().includes("smart");
});

Mari kita bongkar pelan-pelan.

30. filter() akan mengecek setiap product

Array:

products
│
├── Smart Watch
├── Smart TV
└── Analog Watch

filter() mengunjungi satu per satu.

Product pertama

Smart Watch

Kemudian:

product.name.toLowerCase()

menjadi:

"smart watch"

Kemudian:

"smart watch".includes("smart")

→ true

Maka produk masuk hasil.

Product kedua

Smart TV

→ lowercase:

"smart tv"

Kemudian:

"smart tv".includes("smart")

→ true

Masuk hasil.

Product ketiga

Analog Watch

→ lowercase:

"analog watch"

Kemudian:

"analog watch".includes("smart")

→ false

Tidak masuk hasil.

31. Hasil akhirnya

[
    { name: "Smart Watch", price: 100 },
    { name: "Smart TV", price: 500 }
]

Visual:

Products
   │
   ├── "Smart Watch"
   │       ↓
   │   includes("smart")
   │       ↓
   │      true
   │       ↓
   │      KEEP
   │
   ├── "Smart TV"
   │       ↓
   │   includes("smart")
   │       ↓
   │      true
   │       ↓
   │      KEEP
   │
   └── "Analog Watch"
           ↓
       includes("smart")
           ↓
          false
           ↓
         REMOVE

Ini contoh bagus bagaimana beberapa konsep mulai terhubung satu sama lain.

32. Kenapa menggunakan toLowerCase()?

Karena includes() case-sensitive.

Kalau user mengetik:

smart

tetapi nama produk:

Smart Watch

tanpa toLowerCase():

"Smart Watch".includes("smart")

→ false

Padahal kita ingin menganggap:

Smart
smart
SMART

sebagai pencarian yang sama.

Maka:

product.name.toLowerCase().includes(searchString.toLowerCase())

lebih aman untuk pencarian case-insensitive.

Contoh:

function filterProducts(searchString) {
    return products.filter(product =>
        product.name.toLowerCase().includes(searchString.toLowerCase())
    );
}

Sekarang:

filterProducts("smart");

dan:

filterProducts("SMART");

bisa menghasilkan hasil yang sama.

33. includes() vs startsWith() dalam pencarian produk

Ini juga dibahas lecture.

Misalnya:

"Smart Watch"

includes("watch")

"Smart Watch".toLowerCase().includes("watch");

→ true

Karena watch ada di dalam nama.

startsWith("watch")

"Smart Watch".toLowerCase().startsWith("watch");

→ false

Karena nama produk dimulai dengan:

Smart

bukan:

Watch

34. Kapan menggunakan includes()?

Kalau pencarian boleh berada di mana saja.

Contoh:

"Smart Watch"

Search:

"watch"

→ cocok.

Search:

"smart"

→ cocok.

Search:

"art"

→ juga cocok karena art ada di dalam Smart.

35. Kapan menggunakan startsWith()?

Kalau user harus mencari sesuatu yang berada di awal nama.

Misalnya:

"Smart Watch".startsWith("Smart");

→ true

Tetapi:

"Smart Watch".startsWith("Watch");

→ false

36. Kapan menggunakan endsWith()?

Kalau ingin mencari sesuatu di akhir String.

Contoh file:

let fileName = "photo.jpg";

fileName.endsWith(".jpg");

→ true

Ini salah satu use case yang sangat umum.

Misalnya:

if (fileName.endsWith(".pdf")) {
    console.log("Ini file PDF");
}

37. Contoh lain: cek ekstensi file

Misalnya:

let file = "document.pdf";

Kita bisa:

file.endsWith(".pdf");

→ true

Sedangkan:

file.endsWith(".jpg");

→ false

Mental model:

"document.pdf"
          ↑↑↑↑
          .pdf

endsWith(".pdf")
      ↓
     true

38. Contoh: cek URL

Misalnya:

let url = "https://example.com";

Kita bisa:

url.startsWith("https://");

→ true

Artinya String dimulai dengan https://.

Atau:

url.endsWith(".com");

→ true

Kita juga bisa:

url.includes("example");

→ true

Jadi ketiga method ini bisa digunakan untuk pemeriksaan yang berbeda.

39. Hubungan dengan if

Karena ketiganya menghasilkan Boolean, mereka sangat cocok dengan if.

Contoh:

let username = "john123";

if (username.startsWith("john")) {
    console.log("Username dimulai dengan john");
}

Atau:

if (username.includes("123")) {
    console.log("Username mengandung angka 123");
}

Atau:

if (username.endsWith("123")) {
    console.log("Username diakhiri dengan 123");
}

Jadi pola yang perlu kamu kenali:

String
  ↓
method pengecekan
  ↓
true / false
  ↓
if
  ↓
lakukan sesuatu

40. Hubungan dengan operator !

Kamu sudah belajar logical operator sebelumnya.

Misalnya:

email.includes("@")

menghasilkan:

true

Kalau kita tulis:

!email.includes("@")

maka:

true
 ↓
!
 ↓
false

Jadi:

if (!email.includes("@")) {
    return false;
}

bisa dibaca:

“Kalau email tidak mengandung @, return false.”

Ini sangat umum dalam JavaScript.

41. Perhatikan bentuk kode ini

if (!email.endsWith(".com")) {
    return false;
}

Jangan bingung membacanya.

Urutkan:

Pertama

email.endsWith(".com")

bertanya:

Apakah email diakhiri .com?

Misalnya hasilnya:

false

Kedua

!false

menjadi:

true

Ketiga

Karena kondisi if menjadi true:

return false;

Jadi:

endsWith(".com")
       ↓
     false
       ↓ !
      true
       ↓
return false

42. includes() vs indexOf()

Kamu sebelumnya juga sudah belajar:

indexOf()

Ini menarik untuk dibandingkan.

Misalnya:

let text = "Hello World";

Dengan indexOf():

text.indexOf("World");

hasil:

6

Karena World dimulai dari index 6.

Kalau tidak ditemukan:

text.indexOf("JavaScript");

hasil:

-1

Sedangkan includes():

text.includes("World");

hasil:

true

dan:

text.includes("JavaScript");

hasil:

false

Jadi:

indexOf()
   ↓
memberikan POSISI/index


includes()
   ↓
memberikan true/false

Kalau pertanyaanmu cuma:

“Ada atau tidak?”

includes() biasanya lebih mudah dibaca.

43. includes() vs startsWith() vs endsWith() vs indexOf()

Contoh:

let text = "Hello World";

text.includes("World");
// true

text.startsWith("Hello");
// true

text.endsWith("World");
// true

text.indexOf("World");
// 6

44. Connection dengan materi replace()

Sekarang kita punya dua kelompok method:

Method untuk mengubah/menghasilkan String baru

replace()
slice()
substring()
trim()
toUpperCase()
toLowerCase()
concat()

Method untuk mengecek kondisi String

includes()
startsWith()
endsWith()

Contohnya:

let text = "Hello World";

Mau mengubah:

text.replace("World", "JavaScript");

Mau mengecek:

text.includes("World");

Jadi:

replace()
   ↓
"ubah"

includes()
   ↓
"cek"

45. Connection dengan filter()

Ini juga sangat penting karena lecture mulai menggabungkan materi.

Sebelumnya:

products.filter(...)

Kita sudah tahu:

filter() membutuhkan kondisi yang menghasilkan true atau false.

Sekarang:

product.name.includes(searchString)

menghasilkan:

true / false

Maka sangat cocok dengan filter().

Alurnya:

products
   ↓
filter()
   ↓
ambil product satu per satu
   ↓
product.name
   ↓
toLowerCase()
   ↓
includes(searchString)
   ↓
true / false
   ↓
true  → masuk hasil
false → tidak masuk

Ini sebenarnya mulai menunjukkan kekuatan JavaScript:

Method-method kecil bisa digabung untuk membuat fitur yang lebih besar.

46. Catatan kecil tentang nama method

Penulisan yang benar adalah:

includes()
startsWith()
endsWith()

Bukan:

start widths
insid
intswith

Itu hanya kesalahan transkripsi caption.

Jadi hafalkan:

includes
startsWith
endsWith

Perhatikan W pada:

startsWith
endsWith

karena menggunakan camelCase.

47. Cheat sheet

let text = "Hello JavaScript!";

Apakah mengandung sesuatu?

text.includes("JavaScript");
// true

Apakah dimulai dengan sesuatu?

text.startsWith("Hello");
// true

Apakah diakhiri sesuatu?

text.endsWith("!");
// true

Case-insensitive

text.toLowerCase().includes("javascript");
// true

Dengan if

if (text.includes("JavaScript")) {
    console.log("Ditemukan");
}

Dengan filter

let result = products.filter(product =>
    product.name.toLowerCase().includes(searchString.toLowerCase())
);

48. Mental model terakhir

Bayangkan kamu memegang sebuah String:

"Hello JavaScript!"

Lalu kamu bertanya:

🔍 includes()

“Apakah ada kata/karakter ini di mana saja?”

"Hello JavaScript!"
       ↑
       JavaScript
          ↓
        true

🚪 startsWith()

“Apakah String ini dimulai dengan ini?”

"Hello JavaScript!"
 ↑
Hello
 ↓
true

🏁 endsWith()

“Apakah String ini diakhiri dengan ini?”

"Hello JavaScript!"
                 ↑
                 !
                 ↓
               true

🎯 Kesimpulan

Kalau ingin mengingat lecture ini dengan sangat sederhana:

             STRING
                │
       ┌────────┼────────┐
       ↓        ↓        ↓
   includes  startsWith endsWith
       │        │        │
       ↓        ↓        ↓
   DI MANA     AWAL      AKHIR
   SAJA?       ?         ?
       │        │        │
       └────────┼────────┘
                ↓
          true / false

Rumus cepat:

text.includes("abc")

➡️ “Apakah abc ada di mana saja?”

text.startsWith("abc")

➡️ “Apakah abc ada di awal?”

text.endsWith("abc")

➡️ “Apakah abc ada di akhir?”

Dan karena ketiganya menghasilkan Boolean, mereka sangat cocok dipakai bersama:

if
filter()
ternary
!
&&
||

Jadi lecture ini sebenarnya bukan cuma mengajarkan 3 method String baru, tetapi mulai menunjukkan bagaimana String methods + Boolean + if + filter() dapat digabung untuk membuat fitur nyata seperti validasi input dan pencarian/filter produk.