Lecture ini penting karena kamu mulai melihat bahwa String method bukan cuma untuk mengambil sebagian teks, tetapi juga sangat berguna untuk membersihkan/menyamakan format teks sebelum diproses.

Di lecture ini ada dua method utama:

toUpperCase()
toLowerCase()

Lalu keduanya digabung dengan substring() untuk membuat contoh yang lebih realistis.

1. toUpperCase()

toUpperCase() digunakan untuk mengubah seluruh karakter dalam sebuah String menjadi huruf kapital.

Syntax:

string.toUpperCase()

Contoh:

let str = "hello world";

let upperStr = str.toUpperCase();

console.log(upperStr);

Hasil:

HELLO WORLD

Perubahannya:

"hello world"
      ↓
toUpperCase()
      ↓
"HELLO WORLD"

2. toUpperCase() tidak mengubah String asli

Ini konsep yang sama dengan substring() yang baru saja kamu pelajari.

Misalnya:

let str = "hello world";

let upperStr = str.toUpperCase();

console.log(upperStr);
console.log(str);

Hasil:

HELLO WORLD
hello world

Jadi:

str
 ↓
"hello world"
 │
 │ toUpperCase()
 ↓
"HELLO WORLD"

str tetap:

"hello world"

Sedangkan hasil dari toUpperCase() adalah String baru:

"HELLO WORLD"

3. String bersifat immutable

Ini nyambung dengan materi String sebelumnya.

String di JavaScript bersifat immutable.

Sederhananya:

Method String tidak mengubah isi String yang sudah ada. Biasanya method tersebut menghasilkan String baru.

Contoh:

let name = "john";

name.toUpperCase();

console.log(name);

Hasilnya masih:

john

Kenapa?

Karena kita tidak menyimpan hasilnya.

Kalau ingin menyimpan hasil:

let name = "john";

let upperName = name.toUpperCase();

console.log(upperName);

Hasil:

JOHN

Atau kita bisa mengganti isi variabel dengan hasil baru:

let name = "john";

name = name.toUpperCase();

console.log(name);

Sekarang:

JOHN

Perhatikan, bukan toUpperCase() yang mengubah String lama. Kita mengisi ulang variabel name dengan String baru.

4. String dengan mixed case

toUpperCase() juga bekerja kalau hurufnya campur.

let mixedCase = "JaVaScRiPt";

console.log(mixedCase.toUpperCase());

Hasil:

JAVASCRIPT

Jadi tidak peduli awalnya:

javascript
JavaScript
JAVASCRIPT
JaVaScRiPt

semuanya akan menjadi:

JAVASCRIPT

5. toLowerCase()

Sekarang kebalikannya.

toLowerCase() digunakan untuk mengubah semua karakter menjadi huruf kecil.

Syntax:

string.toLowerCase()

Contoh:

let str = "HELLO WORLD";

let lowerStr = str.toLowerCase();

console.log(lowerStr);

Hasil:

hello world

Mental model:

"HELLO WORLD"
       ↓
toLowerCase()
       ↓
"hello world"

6. Sama seperti toUpperCase(), String asli tidak berubah

let str = "HELLO WORLD";

let lowerStr = str.toLowerCase();

console.log(lowerStr);
console.log(str);

Hasil:

hello world
HELLO WORLD

Jadi:

str
 ↓
"HELLO WORLD"
 │
 │ toLowerCase()
 ↓
"hello world"

7. Perbandingan keduanya

Cara mengingatnya:

UPPER  → BESAR → toUpperCase()
LOWER  → kecil → toLowerCase()

8. Use case pertama: format nama

Nah, bagian ini mulai menarik.

Misalnya kita punya nama:

john
MARY
sTeVe

Kita ingin semuanya memiliki format:

John
Mary
Steve

Aturannya:

Huruf pertama uppercase, sisanya lowercase.

Jadi:

john  → John
MARY  → Mary
sTeVe → Steve

Bagaimana caranya?

Kita bisa menggabungkan:

substring()
+
toUpperCase()
+
toLowerCase()

9. Langkah pertama: ambil karakter pertama

Misalnya:

let name = "john";

Kita ingin mengambil:

j

Karena index String dimulai dari 0:

j o h n
0 1 2 3
↑

Gunakan:

name.substring(0, 1);

Artinya:

mulai dari index 0
berhenti sebelum index 1

Hasil:

"j"

Kemudian kita ubah menjadi uppercase:

name.substring(0, 1).toUpperCase();

Hasil:

"J"

Jadi prosesnya:

"john"
  ↓
substring(0, 1)
  ↓
"j"
  ↓
toUpperCase()
  ↓
"J"

10. Simpan karakter pertama

Supaya lebih mudah dipahami, kita simpan ke variabel:

let firstChar = name.substring(0, 1).toUpperCase();

Sekarang:

firstChar = "J"

11. Ambil karakter sisanya

Sekarang kita ingin mengambil:

ohn

Kita sudah tahu karakter pertama berada di index 0.

Jadi karakter kedua mulai dari index 1.

j o h n
0 1 2 3
  ↑
 mulai dari sini

Gunakan:

let restChar = name.substring(1);

Karena kita tidak memberikan endIndex, maka:

ambil semuanya mulai dari index 1 sampai akhir.

Hasil:

"ohn"

12. Ubah sisanya menjadi lowercase

Sekarang:

let restChar = name.substring(1).toLowerCase();

Misalnya nama awalnya:

JOHN

Maka:

substring(1)
      ↓
"OHN"
      ↓
toLowerCase()
      ↓
"ohn"

Sekarang kita punya:

firstChar = "J";
restChar = "ohn";

13. Gabungkan keduanya

Sekarang:

firstChar + restChar

hasilnya:

"J" + "ohn"

→

"John"

Jadi keseluruhan proses:

            "JOHN"
               │
       ┌───────┴────────┐
       ↓                ↓
substring(0,1)     substring(1)
       ↓                ↓
      "J"              "OHN"
       ↓                ↓
toUpperCase()      toLowerCase()
       ↓                ↓
      "J"              "ohn"
       └───────┬────────┘
               ↓
          "J" + "ohn"
               ↓
             "John"

Ini sebenarnya inti utama contoh pertama dalam lecture.

14. Masukkan ke function

Sekarang kita bisa membuat function:

function formatName(name) {
  let firstChar = name.substring(0, 1).toUpperCase();
  let restChar = name.substring(1).toLowerCase();

  return firstChar + restChar;
}

Kemudian:

console.log(formatName("john"));
console.log(formatName("MARY"));
console.log(formatName("sTeVe"));

Hasil:

John
Mary
Steve

15. Mari bedah function-nya

Baris pertama

function formatName(name) {

Kita membuat function bernama:

formatName

Function menerima parameter:

name

Misalnya kita memanggil:

formatName("MARY");

maka:

name = "MARY"

Baris kedua

let firstChar = name.substring(0, 1).toUpperCase();

Ambil karakter pertama:

"M"

Kemudian uppercase:

"M"

Baris ketiga

let restChar = name.substring(1).toLowerCase();

Ambil semua karakter setelah karakter pertama:

"ARY"

Kemudian lowercase:

"ary"

Baris terakhir

return firstChar + restChar;

Gabungkan:

"M" + "ary"

menjadi:

"Mary"

16. Kenapa kita membutuhkan toLowerCase() pada bagian belakang?

Ini penting.

Misalnya hanya melakukan:

name.substring(0, 1).toUpperCase()

kita hanya mendapatkan:

J

Belum mendapatkan:

John

Lalu kalau kita mengambil sisanya:

name.substring(1)

dan tidak menggunakan toLowerCase():

JOHN
 ↓
J + OHN
 ↓
JOHN

Padahal kita ingin:

John

Makanya:

name.substring(1).toLowerCase()

diperlukan.

17. Use case kedua: membandingkan String

Ini penggunaan yang sangat penting dalam aplikasi nyata.

Misalnya kita memiliki email dari user:

let userEmail = "John@Gmail.com";

Dan email di database:

let emailInDb = "john@gmail.com";

Secara manusia, kita mungkin menganggap keduanya sama:

John@Gmail.com
john@gmail.com

Tetapi JavaScript membedakan uppercase dan lowercase.

Ini disebut case-sensitive.

18. Kalau langsung dibandingkan

console.log(userEmail === emailInDb);

Hasil:

false

Kenapa?

Karena:

"John@Gmail.com"
"john@gmail.com"
 ↑
beda huruf besar/kecil

JavaScript tidak otomatis menganggap keduanya sama.

19. Solusinya: samakan case terlebih dahulu

Kita bisa mengubah keduanya menjadi lowercase:

console.log(
  userEmail.toLowerCase() === emailInDb.toLowerCase()
);

Sekarang keduanya menjadi:

john@gmail.com
john@gmail.com

Maka:

true

Prosesnya:

User input
"John@Gmail.com"
       ↓
toLowerCase()
       ↓
"john@gmail.com"

Database
"john@gmail.com"
       ↓
toLowerCase()
       ↓
"john@gmail.com"

       ↓
     ===

       ↓
     true

20. Kenapa harus kedua-duanya?

Misalnya hanya:

userEmail.toLowerCase() === emailInDb

Maka:

"John@Gmail.com"
      ↓
"john@gmail.com"

dibandingkan dengan:

"john@gmail.com"

Ini kebetulan menghasilkan true.

Tetapi secara konsep lebih aman untuk membuat kedua sisi memiliki format yang sama:

userEmail.toLowerCase() === emailInDb.toLowerCase()

Mental model:

Normalisasi dulu → baru bandingkan.

21. Bisa menggunakan toUpperCase() juga

Secara konsep kita juga bisa melakukan:

userEmail.toUpperCase() === emailInDb.toUpperCase()

Misalnya:

"John@Gmail.com"
       ↓
"JOHN@GMAIL.COM"

"john@gmail.com"
       ↓
"JOHN@GMAIL.COM"

Kemudian:

"JOHN@GMAIL.COM" === "JOHN@GMAIL.COM"

→ true

Jadi:

toLowerCase() → keduanya jadi lowercase
toUpperCase() → keduanya jadi uppercase

Yang penting adalah keduanya dinormalisasi ke bentuk yang sama.

22. Ini disebut normalisasi

Istilah yang bagus untuk kamu kenal:

Normalization = mengubah data ke bentuk standar supaya lebih mudah dibandingkan/diproses.

Contoh:

"JOHN"
"john"
"John"
"jOhN"

Kalau kita normalisasi menggunakan:

.toLowerCase()

semuanya menjadi:

"john"

Kemudian baru dibandingkan.

Ini sangat umum dalam programming.

23. Contoh lain: username

Misalnya user mengetik:

Budi123

sedangkan database menyimpan:

budi123

Kalau sistem memang ingin username diperlakukan case-insensitive, kita bisa:

let input = "Budi123";
let stored = "budi123";

console.log(input.toLowerCase() === stored.toLowerCase());

Hasil:

true

24. Tetapi hati-hati dengan password

Ini penting sebagai catatan praktik nyata.

Jangan sembarangan melakukan:

password.toLowerCase()

untuk password.

Password biasanya case-sensitive.

Contoh:

Password123
password123

seharusnya bisa dianggap berbeda.

Jadi penggunaan toLowerCase() harus sesuai kebutuhan data.

Untuk email/username tertentu → normalisasi mungkin diperlukan.

Untuk password → jangan ubah case kecuali memang desain sistem secara eksplisit mengharuskannya.

25. Hubungan dengan method yang sudah kamu pelajari

Sekarang mulai terlihat bahwa String methods bisa dirangkai.

Misalnya:

name.substring(0, 1).toUpperCase()

Cara membacanya dari kiri ke kanan:

name
 ↓
substring(0, 1)
 ↓
ambil karakter pertama
 ↓
toUpperCase()
 ↓
ubah menjadi uppercase

Contoh:

"john"
 ↓
"j"
 ↓
"J"

Ini disebut method chaining secara umum.

Contoh lain:

name.substring(1).toLowerCase()

"JOHN"
   ↓
"OHN"
   ↓
"ohn"

Kemudian:

firstChar + restChar

"J" + "ohn"
       ↓
    "John"

26. Method chaining

Jadi jangan kaget kalau nanti melihat kode seperti:

let result = name.substring(0, 1).toUpperCase();

Ini bukan berarti substring() dan toUpperCase() bekerja sekaligus pada String asli.

Lebih tepatnya:

name.substring(0, 1)
        ↓
menghasilkan String baru
        ↓
String baru tersebut
        ↓
.toUpperCase()
        ↓
menghasilkan String baru lagi

Secara mental:

name
 ↓
substring()
 ↓
hasil baru
 ↓
toUpperCase()
 ↓
hasil akhir

27. Perbedaan substring() dengan toUpperCase()

Jangan sampai dua method ini dianggap sama jenisnya.

substring()

Tujuannya:

Mengambil sebagian String.

"Hello".substring(1, 4);

→

"ell"

toUpperCase()

Tujuannya:

Mengubah case seluruh karakter.

"hello".toUpperCase();

→

"HELLO"

Jadi:

substring()    → MENGAMBIL
toUpperCase()  → MENGUBAH CASE
toLowerCase()  → MENGUBAH CASE

28. Ringkasan seluruh lecture

String
  │
  ├── toUpperCase()
  │      ↓
  │   semua huruf → UPPERCASE
  │
  ├── toLowerCase()
  │      ↓
  │   semua huruf → lowercase
  │
  └── substring()
         ↓
      mengambil sebagian karakter

Ketiganya menghasilkan String baru dan tidak mengubah String asli.

29. Cheat sheet

30. Pola format nama yang perlu kamu pahami

function formatName(name) {
  let firstChar = name.substring(0, 1).toUpperCase();
  let restChar = name.substring(1).toLowerCase();

  return firstChar + restChar;
}

Flow-nya:

"jOHN"
   │
   ├── substring(0, 1)
   │       ↓
   │      "j"
   │       ↓
   │   toUpperCase()
   │       ↓
   │      "J"
   │
   └── substring(1)
           ↓
         "OHN"
           ↓
       toLowerCase()
           ↓
         "ohn"

        ↓ JOIN

      "J" + "ohn"

        ↓

      "John"

31. Pola membandingkan String

Kalau ingin membandingkan dua String dan case tidak boleh menyebabkan perbedaan, gunakan pola:

str1.toLowerCase() === str2.toLowerCase()

atau:

str1.toUpperCase() === str2.toUpperCase()

Mental modelnya:

STRING 1 ──→ NORMALISASI ──┐
                            ├──→ COMPARE
STRING 2 ──→ NORMALISASI ──┘

Contoh:

let email1 = "John@Gmail.com";
let email2 = "john@gmail.com";

console.log(
  email1.toLowerCase() === email2.toLowerCase()
);

→

true

🧠 Inti yang harus kamu ingat

Ada 3 konsep utama dari lecture ini:

1. toUpperCase()

"hello".toUpperCase()

→ "HELLO"

Semua huruf menjadi uppercase.

2. toLowerCase()

"HELLO".toLowerCase()

→ "hello"

Semua huruf menjadi lowercase.

3. Gabungkan dengan substring()

name.substring(0, 1).toUpperCase()

→ ambil karakter pertama → jadikan uppercase.

name.substring(1).toLowerCase()

→ ambil sisanya → jadikan lowercase.

Kemudian:

firstChar + restChar

→ gabungkan menjadi nama yang rapi.

Dan untuk perbandingan:

email1.toLowerCase() === email2.toLowerCase()

→ samakan format terlebih dahulu, baru bandingkan.

Jadi sebenarnya lecture ini sedang mengajarkan satu pola programming yang lebih besar:

Ambil data → ubah/normalisasi data → gunakan data tersebut sesuai kebutuhan.

Itu pola yang akan sering sekali kamu temui ketika nanti mulai membuat aplikasi JavaScript yang lebih nyata.