Masukkan Password
70 Cineflix: Format Nama Film
Tentu. Lecture ini sangat bagus untuk memahami kombinasi String Method + Array Method dalam kasus nyata.
Fokus utamanya adalah membuat nama film menjadi rapi dengan format:
interstellar → Interstellar
bad boys → Bad Boys
THE DARK KNIGHT → The Dark Knight
bAhUbAlI → Bahubali
Dan untuk mencapai itu, lecture menggabungkan 5 konsep penting:
split()
↓
map()
↓
at()
↓
substring()
↓
join()
Ditambah:
toUpperCase()
toLowerCase()
Mari kita bedah pelan-pelan.
1. Masalah yang ingin diselesaikan
Data movie kita ternyata penulisan namanya tidak konsisten.
Misalnya:
{
name: "interstellar"
}
Yang muncul:
interstellar
Padahal kita ingin:
Interstellar
Kemudian ada movie:
{
name: "bad boys"
}
Kita ingin:
Bad Boys
Bukan:
Bad boys
Karena setiap kata harus diawali huruf kapital.
Misalnya:
"bad boys"
menjadi:
"Bad Boys"
2. Kenapa tidak cukup menggunakan toUpperCase()?
Kita mungkin berpikir:
name.toUpperCase()
Misalnya:
"bad boys".toUpperCase()
hasilnya:
BAD BOYS
Padahal yang kita inginkan:
Bad Boys
Sebaliknya:
name.toLowerCase()
menghasilkan:
bad boys
Juga belum sesuai.
Masalahnya:
Kita perlu mengubah huruf pertama dari setiap kata menjadi uppercase, sedangkan karakter lainnya menjadi lowercase.
Jadi kita harus memproses kata per kata.
3. Strategi yang digunakan
Lecture menggunakan strategi:
"bad boys"
↓
split
↓
["bad", "boys"]
↓
map
↓
["Bad", "Boys"]
↓
join
↓
"Bad Boys"
Ini adalah inti seluruh lecture.
Kalau kamu memahami diagram tersebut, sebenarnya kamu sudah memahami sebagian besar lecture.
4. Function formatMovieName()
Pertama dibuat function:
function formatMovieName(name) {
...
}
Parameter:
name
akan berisi nama movie.
Misalnya:
formatMovieName("bad boys");
maka:
name = "bad boys"
5. Langkah pertama: split()
Kita ingin memisahkan setiap kata.
Misalnya:
"bad boys"
kita ingin:
["bad", "boys"]
Caranya:
let movieNameWords = name.split(" ");
split() adalah String method.
6. Apa fungsi split()?
Secara sederhana:
split()memecah sebuah String menjadi Array berdasarkan separator tertentu.
Contoh:
"Hello World".split(" ");
hasil:
["Hello", "World"]
Kenapa " "?
Karena kita ingin memisahkan berdasarkan spasi.
Contoh lainnya
"John Mark Steve".split(" ");
hasil:
["John", "Mark", "Steve"]
Jadi:
String
↓
split(" ")
↓
Array
7. Perhatikan perubahan tipe data
Ini penting sekali.
Awalnya:
name
adalah String.
Contoh:
"bad boys"
Setelah:
name.split(" ")
menjadi Array:
["bad", "boys"]
Jadi:
String
↓
split()
↓
Array
Ini akan menjadi pola penting dalam lecture ini.
8. Kenapa harus menjadi Array?
Karena kita ingin memproses setiap kata secara individual.
Misalnya:
"bad boys"
kita ingin:
bad → Bad
boys → Boys
Kalau masih String, lebih sulit memikirkan “kata pertama”, “kata kedua”, dan seterusnya.
Setelah menjadi Array:
["bad", "boys"]
kita bisa menggunakan:
map()
untuk memproses setiap kata.
9. Langkah kedua: map()
Sekarang kita punya:
let movieNameWords = ["bad", "boys"];
Kemudian:
let formattedWordsArray = movieNameWords.map((word) => {
...
});
Ingat konsep map():
map()digunakan untuk mentransformasi setiap element array dan menghasilkan Array baru.
10. Bedanya forEach() dan map()
Ini sangat penting karena sebelumnya kita baru saja belajar forEach().
forEach()
Digunakan ketika:
“Saya ingin melakukan sesuatu terhadap setiap element.”
Contoh project sebelumnya:
movies.forEach((movie) => {
// buat movie card
});
Tujuannya melakukan action/render.
map()
Digunakan ketika:
“Saya ingin mengubah setiap element menjadi bentuk baru.”
Contoh:
let numbers = [1, 2, 3];
let doubled = numbers.map((number) => {
return number * 2;
});
Hasil:
[2, 4, 6]
Jadi:
forEach()
→ proses setiap element
map()
→ transform setiap element
→ menghasilkan Array baru
Dalam lecture ini map() cocok karena:
["bad", "boys"]
↓ map
["Bad", "Boys"]
11. Parameter word
Di:
movieNameWords.map((word) => {
word berisi satu kata yang sedang diproses.
Iteration pertama:
word = "bad"
Iteration kedua:
word = "boys"
Jadi:
map()
│
├── word = "bad"
│
└── word = "boys"
12. Mendapatkan huruf pertama dengan at(0)
Sekarang kita ingin mengambil huruf pertama dari:
"bad"
Kita gunakan:
word.at(0)
Hasil:
"b"
Kenapa 0?
Karena index String dimulai dari 0.
"bad"
index:
0 1 2
↓ ↓ ↓
b a d
Jadi:
word.at(0)
→ "b"
13. Kenapa menggunakan at()?
at() digunakan untuk mengambil character pada index tertentu.
Contoh:
"Hello".at(0)
→ "H"
"Hello".at(1)
→ "e"
"Hello".at(4)
→ "o"
Yang menarik, at() juga mendukung index negatif:
"Hello".at(-1)
→ "o"
Tapi untuk lecture ini kita hanya membutuhkan:
word.at(0)
untuk mengambil huruf pertama.
14. Mengubah huruf pertama menjadi uppercase
Setelah mendapatkan:
word.at(0)
misalnya:
"b"
kita gunakan:
.toUpperCase()
Jadi:
word.at(0).toUpperCase()
menghasilkan:
"B"
Misalnya:
"bad".at(0).toUpperCase()
→ "B"
15. Simpan sebagai firstChar
Lecture membuat variable seperti:
let firstChar = word.at(0).toUpperCase();
Untuk:
word = "bad"
maka:
firstChar = "B"
16. Sekarang kita perlu mengambil sisa karakter
Kita sudah mengambil:
b
Tetapi masih ada:
ad
Kita ingin mengambil karakter mulai dari index 1.
"bad"
index:
0 1 2
↓ ↓ ↓
b a d
└─────┘
"ad"
Kita bisa menggunakan:
word.substring(1)
17. substring(1) artinya apa?
Misalnya:
"bad".substring(1)
hasil:
"ad"
Kenapa?
Karena:
"bad"
↑
index 1
substring(1) berarti:
Ambil String mulai dari index 1 sampai akhir.
Contoh
"hello".substring(1)
hasil:
"ello"
"javascript".substring(1)
hasil:
"avascript"
18. Kemudian toLowerCase()
Sisa karakter juga harus dibuat lowercase.
Jadi:
let restChar = word.substring(1).toLowerCase();
Misalnya:
word = "bAD"
Maka:
word.at(0)
↓
"b"
↓
toUpperCase()
↓
"B"
Kemudian:
word.substring(1)
↓
"AD"
↓
toLowerCase()
↓
"ad"
Hasil akhirnya:
"B" + "ad"
→
"Bad"
19. Jadi satu kata diproses seperti ini
Misalnya:
word = "bAD"
Alurnya:
"bAD"
│
┌───────┴────────┐
↓ ↓
at(0) substring(1)
↓ ↓
"b" "AD"
↓ ↓
toUpperCase() toLowerCase()
↓ ↓
"B" "ad"
└───────┬────────┘
↓
"B" + "ad"
↓
"Bad"
Ini inti logic untuk satu kata.
20. Kemudian digabung
Kita punya:
let firstChar = word.at(0).toUpperCase();
let restChar = word.substring(1).toLowerCase();
Kemudian:
return firstChar + restChar;
Contoh:
firstChar = "B"
restChar = "ad"
Maka:
"B" + "ad"
hasil:
"Bad"
21. Apa yang dilakukan map() sekarang?
Sekarang kita kembali ke:
movieNameWords.map((word) => {
...
});
Misalnya:
movieNameWords = ["bad", "boys"];
Iteration pertama
word = "bad"
diproses menjadi:
"Bad"
Iteration kedua
word = "boys"
diproses menjadi:
"Boys"
Karena map() mengembalikan hasil dari setiap callback:
["bad", "boys"]
berubah menjadi:
["Bad", "Boys"]
22. Inilah kelebihan map()
Perhatikan transformasinya:
Array lama
["bad", "boys"]
↓
map()
↓
Array baru
["Bad", "Boys"]
Array lama tidak perlu kita ubah secara langsung.
Kita menghasilkan array baru.
23. Langkah terakhir: join()
Sekarang kita punya:
["Bad", "Boys"]
Tetapi kita ingin hasil akhir berupa String:
"Bad Boys"
Caranya:
formattedWordsArray.join(" ");
24. Apa fungsi join()?
join() melakukan kebalikan dari split() dalam konteks sederhana.
split()
String → Array
"Bad Boys".split(" ")
→
["Bad", "Boys"]
join()
Array → String
["Bad", "Boys"].join(" ")
→
"Bad Boys"
Mental model:
"Bad Boys"
│
split(" ")
↓
["Bad", "Boys"]
│
join(" ")
↓
"Bad Boys"
25. Kenapa join(" ")?
Karena kita ingin memberikan spasi di antara setiap kata.
Kalau:
["Bad", "Boys"].join("")
hasilnya:
BadBoys
Tidak ada spasi.
Kalau:
["Bad", "Boys"].join(" ")
hasil:
Bad Boys
Kalau:
["Bad", "Boys"].join("-")
hasil:
Bad-Boys
Jadi parameter join() menentukan separator.
26. Seluruh proses untuk "bad boys"
Sekarang mari kita gabungkan semuanya.
Input:
"bad boys"
Step 1 — split()
"bad boys".split(" ")
hasil:
["bad", "boys"]
Step 2 — map()
Setiap kata diproses.
"bad"
↓
"Bad"
"boys"
↓
"Boys"
hasil:
["Bad", "Boys"]
Step 3 — join()
["Bad", "Boys"].join(" ")
hasil:
"Bad Boys"
27. Diagram keseluruhan
Ini diagram yang paling penting untuk lecture ini:
"bad boys"
│
↓
split(" ")
│
↓
["bad", "boys"]
│
↓
map()
│
┌──────────┴──────────┐
↓ ↓
"bad" "boys"
↓ ↓
at(0) at(0)
↓ ↓
"b" "b"
↓ ↓
toUpperCase() toUpperCase()
↓ ↓
"B" "B"
substring(1) substring(1)
↓ ↓
"ad" "oys"
↓ ↓
toLowerCase() toLowerCase()
↓ ↓
"ad" "oys"
↓ ↓
"Bad" "Boys"
└──────────┬──────────┘
↓
["Bad", "Boys"]
│
↓
join(" ")
│
↓
"Bad Boys"
28. Function lengkapnya
Secara konsep, function-nya menjadi seperti:
function formatMovieName(name) {
let movieNameWords = name.split(" ");
let formattedWordsArray = movieNameWords.map((word) => {
let firstChar = word.at(0).toUpperCase();
let restChar = word.substring(1).toLowerCase();
return firstChar + restChar;
});
return formattedWordsArray.join(" ");
}
Kemudian ketika membuat movie card:
${formatMovieName(movie.name)}
Jadi bukan lagi:
${movie.name}
melainkan:
${formatMovieName(movie.name)}
29. Kenapa function ini dipanggil untuk setiap movie?
Ingat lecture sebelumnya kita punya:
movies.forEach((movie) => {
...
});
Kemudian di dalamnya:
formatMovieName(movie.name)
Jadi:
Movie 1
↓
formatMovieName(movie1.name)
Movie 2
↓
formatMovieName(movie2.name)
Movie 3
↓
formatMovieName(movie3.name)
Movie 4
↓
formatMovieName(movie4.name)
Karena forEach() berjalan untuk setiap movie.
30. Contoh beberapa movie
Misalnya:
movies = [
{ name: "interstellar" },
{ name: "bad boys" },
{ name: "THE DARK KNIGHT" },
{ name: "bAhUbAlI" }
];
Function menghasilkan:
interstellar
↓
Interstellar
bad boys
↓
Bad Boys
THE DARK KNIGHT
↓
The Dark Knight
bAhUbAlI
↓
Bahubali
Jadi format akhirnya konsisten.
31. Kenapa tidak langsung begini?
Mungkin kamu berpikir:
name.toLowerCase()
kemudian:
name[0].toUpperCase()
Untuk satu kata memang bisa lebih sederhana.
Contoh:
let name = "INTERSTELLAR";
let result =
name[0].toUpperCase() +
name.substring(1).toLowerCase();
Hasil:
Interstellar
Tapi masalahnya adalah movie name bisa punya banyak kata:
the dark knight
Kita ingin:
The Dark Knight
Maka kita perlu:
String
↓
pisahkan menjadi words
↓
proses setiap word
↓
gabungkan kembali
Di situlah split() + map() + join() sangat berguna.
32. Ini contoh nyata penggunaan map()
Sebelumnya mungkin map() terlihat abstrak.
Misalnya:
let numbers = [1, 2, 3];
let result = numbers.map((number) => {
return number * 2;
});
Sekarang kamu bisa melihat contoh nyata:
["bad", "boys"]
↓ map
["Bad", "Boys"]
Jadi map() tidak selalu berhubungan dengan angka.
Bisa digunakan untuk:
- String
- Object
- Number
- data dari API
- data dari database
- dan lain-lain
Asalkan kita ingin mentransformasi setiap element menjadi nilai baru.
33. forEach() vs map() dalam project ini
Ini kemungkinan besar akan sering membingungkan, jadi perhatikan.
Kita menggunakan:
forEach() untuk movie
movies.forEach((movie) => {
// buat movie card
});
Karena kita ingin:
melakukan sesuatu untuk setiap movie.
map() untuk words
movieNameWords.map((word) => {
return formattedWord;
});
Karena kita ingin:
mengubah setiap word menjadi word yang sudah diformat.
Jadi:
movies
↓
forEach()
↓
buat/render card
movieNameWords
↓
map()
↓
ubah setiap word
34. split() dan join() adalah pasangan yang sangat berguna
Ini juga wajib diingat.
split()
Memecah:
String → Array
Contoh:
"apple banana orange".split(" ")
→
["apple", "banana", "orange"]
join()
Menggabungkan:
Array → String
Contoh:
["apple", "banana", "orange"].join(" ")
→
"apple banana orange"
Mental model:
split()
String ─────────→ Array
join()
Array ─────────→ String
35. Perhatikan bahwa String tidak berubah
Semua method seperti:
toUpperCase()
toLowerCase()
substring()
split()
tidak mengubah String asli.
Misalnya:
let name = "hello";
let result = name.toUpperCase();
console.log(name);
console.log(result);
hasil:
hello
HELLO
Jadi:
name → "hello"
result → "HELLO"
Begitu juga dalam function kita.
36. Apa yang terjadi dengan movie.name?
Misalnya:
movie.name = "bad boys";
Kemudian:
formatMovieName(movie.name)
Function mengolahnya dan menghasilkan:
"Bad Boys"
Tetapi itu tidak berarti movie.name otomatis berubah menjadi "Bad Boys".
Function hanya mengembalikan String baru.
Jadi:
movie.name
tetap:
"bad boys"
sedangkan:
formatMovieName(movie.name)
menghasilkan:
"Bad Boys"
Ini konsep penting tentang return value.
37. Kenapa bagus dibuat function terpisah?
Daripada menulis semua logic ini di dalam:
movies.forEach(...)
kita membuat:
formatMovieName()
Keuntungannya:
1. Lebih mudah dibaca
${formatMovieName(movie.name)}
langsung jelas:
format nama movie.
2. Bisa digunakan ulang
Misalnya nanti ada tempat lain yang juga membutuhkan formatting nama.
Kita tinggal:
formatMovieName(name)
3. Logic terpisah
render movie
↓
format name
masing-masing punya tugas sendiri.
Ini merupakan prinsip dasar yang bagus dalam programming:
Satu function sebaiknya memiliki tanggung jawab yang jelas.
38. Ada satu detail penting: map() menghasilkan array baru
Misalnya:
let words = ["bad", "boys"];
let formattedWords = words.map((word) => {
return word.toUpperCase();
});
Maka:
words
tetap:
["bad", "boys"]
Sedangkan:
formattedWords
menjadi:
["BAD", "BOYS"]
Jadi:
words
│
├── ["bad", "boys"]
│
└── map()
↓
formattedWords
↓
["BAD", "BOYS"]
Ini berbeda dari method array yang memodifikasi array secara langsung.
39. Satu potensi masalah: nama dengan spasi berlebih
Lecture menggunakan:
name.split(" ")
Untuk data yang rapi, ini bekerja dengan baik.
Tetapi bayangkan:
"bad boys"
Ada tiga spasi.
Dengan:
split(" ")
hasilnya bisa mengandung empty strings:
["bad", "", "", "boys"]
Untuk project pembelajaran ini kemungkinan datanya sudah rapi.
Jadi jangan terlalu khawatir dulu.
Tetapi secara teknis, data input dari user biasanya perlu dinormalisasi lebih lanjut.
40. Satu potensi masalah lagi: String kosong
Misalnya:
formatMovieName("")
Kemudian:
"".split(" ")
dan kita memproses hasilnya.
Kita perlu berhati-hati karena word.at(0) bisa menghasilkan undefined.
Untuk project ini, nama movie diasumsikan valid, jadi logic lecture cukup.
41. Hubungan dengan lecture sebelumnya
Sebelumnya kamu belajar:
toUpperCase()
toLowerCase()
substring()
Sekarang ditambahkan:
split()
map()
join()
at()
Yang menarik adalah semuanya digabungkan.
Sebelumnya:
"hello".toUpperCase()
hanya satu method.
Sekarang:
word.at(0).toUpperCase()
kita melakukan method chaining.
Kemudian:
word.substring(1).toLowerCase()
juga chaining.
42. Method chaining
Contoh:
word.at(0).toUpperCase()
dibaca dari kiri ke kanan:
word
↓
at(0)
↓
ambil huruf pertama
↓
toUpperCase()
↓
ubah menjadi uppercase
Contoh:
word.substring(1).toLowerCase()
dibaca:
word
↓
substring(1)
↓
ambil semua karakter kecuali pertama
↓
toLowerCase()
↓
ubah menjadi lowercase
Ini adalah pola yang sangat sering digunakan dalam JavaScript.
43. Seluruh function kalau dibaca dengan bahasa manusia
Kode:
function formatMovieName(name) {
let movieNameWords = name.split(" ");
let formattedWordsArray = movieNameWords.map((word) => {
let firstChar = word.at(0).toUpperCase();
let restChar = word.substring(1).toLowerCase();
return firstChar + restChar;
});
return formattedWordsArray.join(" ");
}
Kalau diterjemahkan ke bahasa manusia:
Terima nama movie.
Pisahkan nama tersebut berdasarkan spasi menjadi beberapa kata.
Untuk setiap kata:
- ambil huruf pertama,
- ubah menjadi uppercase,
- ambil semua karakter sisanya,
- ubah menjadi lowercase,
- gabungkan kembali.
Setelah semua kata selesai diproses, gabungkan semua kata menggunakan spasi.
Kembalikan hasil akhirnya.
Itulah seluruh logic-nya.
44. Cheat sheet lecture
| Method | Fungsi | Contoh | Hasil |
|---|---|---|---|
split() | String → Array | "a b".split(" ") | ["a","b"] |
map() | transform setiap element | [1,2].map(x => x*2) | [2,4] |
at() | ambil character berdasarkan index | "Hello".at(0) | "H" |
toUpperCase() | ubah menjadi uppercase | "hello".toUpperCase() | "HELLO" |
substring() | ambil sebagian String | "Hello".substring(1) | "ello" |
toLowerCase() | ubah menjadi lowercase | "HELLO".toLowerCase() | "hello" |
join() | Array → String | ["a","b"].join(" ") | "a b" |
45. Bedakan split() dengan join()
Ini wajib hafal secara mental:
SPLIT
String
↓
pecah
↓
Array
JOIN
Array
↓
gabung
↓
String
Jadi:
"Bad Boys".split(" ")
→
["Bad", "Boys"]
sedangkan:
["Bad", "Boys"].join(" ")
→
"Bad Boys"
46. Bedakan forEach() dengan map()
Juga sangat penting:
forEach()
↓
"Untuk setiap element, lakukan sesuatu."
Sedangkan:
map()
↓
"Untuk setiap element, ubah menjadi nilai baru."
↓
menghasilkan Array baru
Dalam project:
movies.forEach(...)
→ render movie.
movieNameWords.map(...)
→ format setiap word.
47. Alur besar project sampai sekarang
Sekarang project kita sudah memiliki dua lapisan penting:
movies
│
↓
forEach()
│
↓
satu movie
│
↓
formatMovieName()
│
↓
movie.name
│
↓
split()
│
↓
array words
│
↓
map()
│
↓
format tiap word
│
↓
join()
│
↓
formatted movie name
│
↓
template literal
│
↓
HTML card
│
↓
insertAdjacentHTML()
│
↓
DOM
│
↓
UI
Ini sudah merupakan kombinasi beberapa konsep JavaScript yang sebelumnya kita pelajari secara terpisah.
🎯 Inti yang harus kamu pahami
Kalau dibuat sesingkat mungkin:
"bad boys"
↓ split(" ")
["bad", "boys"]
↓ map()
["Bad", "Boys"]
↓ join(" ")
"Bad Boys"
Dan untuk satu kata:
"bAD"
↓
at(0)
↓
"b"
↓
toUpperCase()
↓
"B"
substring(1)
↓
"AD"
↓
toLowerCase()
↓
"ad"
"B" + "ad"
↓
"Bad"
Jadi lecture ini sebenarnya mengajarkan satu pola yang sangat berguna:
Pecah data menjadi bagian-bagian kecil (
split) → transform setiap bagian (map) → gabungkan kembali (join).
Pola seperti ini akan sering sekali kamu temui ketika mengolah String dan Array di JavaScript.