Masukkan Password
73 Cineflix: Mengatur Gambar Default
Lecture ini sebenarnya sangat bagus karena menghubungkan langsung materi sebelumnya tentang truthy/falsy dan operator || dengan kasus nyata di project movie streaming.
Masalahnya sederhana:
Ada movie yang punya URL gambar → tampilkan gambar tersebut. Ada movie yang tidak punya URL gambar → tampilkan gambar default
not-found.jpg.
Jadi kita ingin membuat pola:
movie.image ada?
↓
YA → gunakan gambar movie
TIDAK → gunakan gambar default
1. Masalah yang sedang diselesaikan
Di dalam movies array, setiap movie punya property:
{
name: "Interstellar",
image: "images/interstellar.jpg"
}
Movie seperti ini punya image URL/path:
"images/interstellar.jpg"
Maka:
<img src="images/interstellar.jpg">
bisa menampilkan gambar.
Tetapi ada movie yang:
{
name: "Some Movie",
image: ""
}
Perhatikan:
image: ""
Artinya kita tidak mempunyai image URL.
Kalau langsung dibuat:
<img src="">
hasilnya bukan gambar yang kita inginkan.
Maka lecture ingin membuat fallback:
image tersedia
↓
gunakan image tersebut
image tidak tersedia
↓
gunakan images/not-found.jpg
2. Kita membuat function displayMovieBanner()
Lecture membuat:
function displayMovieBanner(image) {
...
}
Parameter:
image
akan menerima:
movie.image
Misalnya movie pertama:
movie.image = "images/movie1.jpg";
maka:
displayMovieBanner(movie.image);
sebenarnya menjadi:
displayMovieBanner("images/movie1.jpg");
3. Inti function-nya
Konsep yang digunakan lecture adalah:
return image || "images/not-found.jpg";
Ini terlihat pendek sekali, tetapi sebenarnya ada konsep penting di baliknya.
Kita sudah belajar bahwa operator:
||
adalah OR.
Tetapi dalam JavaScript, || tidak selalu menghasilkan true atau false.
Ini sangat penting.
4. || di JavaScript bisa mengembalikan value
Misalnya:
let result = "Hello" || "World";
Hasilnya:
"Hello"
Bukan:
true
Kenapa?
Karena:
"Hello"
adalah truthy.
Operator || akan mengambil operand pertama yang truthy.
Mental modelnya:
A || B
A truthy?
├── YES → return A
└── NO → return B
Ini sangat penting.
5. Hubungkan dengan materi truthy/falsy sebelumnya
Kita sudah belajar beberapa value yang falsy:
false
0
""
null
undefined
NaN
Selain itu, kebanyakan value lainnya adalah truthy.
Contohnya:
"hello" → truthy
"images/a.jpg" → truthy
1 → truthy
100 → truthy
[] → truthy
{} → truthy
Dalam kasus lecture, yang paling penting adalah:
"images/movie.jpg" → truthy
"" → falsy
6. Kenapa image URL dianggap truthy?
Misalnya:
let image = "images/interstellar.jpg";
String tersebut tidak kosong.
Maka:
Boolean(image)
secara konsep:
true
Jadi:
image || "images/not-found.jpg"
menjadi:
"images/interstellar.jpg" || "images/not-found.jpg"
Karena operand pertama truthy:
↓
"images/interstellar.jpg"
Itulah yang dikembalikan.
7. Kalau image kosong?
Misalnya:
let image = "";
Kemudian:
image || "images/not-found.jpg"
menjadi:
"" || "images/not-found.jpg"
String kosong:
""
adalah falsy.
Jadi operator || lanjut memeriksa operand kedua.
Operand kedua:
"images/not-found.jpg"
adalah String yang tidak kosong → truthy.
Maka hasilnya:
"images/not-found.jpg"
8. Inilah yang disebut fallback
Istilah yang sangat penting di sini adalah:
fallback
Fallback berarti:
“Kalau value utama tidak tersedia, gunakan alternatif.”
Contoh dalam kehidupan sehari-hari:
Foto profil user ada?
↓
YA → gunakan foto user
TIDAK → gunakan avatar default
Sama seperti:
movie image ada?
↓
YA → gunakan movie image
TIDAK → gunakan not-found image
9. Visualisasi ||
Kode:
image || "images/not-found.jpg"
bisa kita baca seperti:
image
↓
truthy atau falsy?
↙ ↘
truthy falsy
↓ ↓
gunakan image gunakan default
↓ ↓
movie image not-found.jpg
Atau lebih singkat:
image || defaultImage
↑ ↑
utama cadangan
10. Function lengkap
Secara sederhana:
function displayMovieBanner(image) {
return image || "images/not-found.jpg";
}
Function ini sangat kecil, tetapi berguna.
Contoh:
displayMovieBanner("images/interstellar.jpg");
hasil:
"images/interstellar.jpg"
Sedangkan:
displayMovieBanner("");
hasil:
"images/not-found.jpg"
11. Kemudian digunakan di template HTML
Sebelumnya mungkin kita menulis:
<img src="${movie.image}">
Sekarang menjadi:
<img src="${displayMovieBanner(movie.image)}">
Perhatikan alurnya.
Misalnya:
movie.image
berisi:
"images/interstellar.jpg"
maka:
displayMovieBanner(movie.image)
menghasilkan:
"images/interstellar.jpg"
sehingga HTML akhirnya menjadi:
<img src="images/interstellar.jpg">
12. Kalau movie.image kosong?
Misalnya:
movie.image = "";
Kemudian:
displayMovieBanner(movie.image)
function menghasilkan:
"images/not-found.jpg"
Template akhirnya menjadi:
<img src="images/not-found.jpg">
Jadi browser menampilkan gambar default.
13. Alur lengkap dari data sampai UI
Ini bagian paling penting untuk memahami project.
movies array
↓
movie object
↓
movie.image
↓
displayMovieBanner()
↓
┌─────────────────────┐
│ image tersedia? │
└─────────────────────┘
↓ ↓
YA TIDAK
↓ ↓
movie.image not-found.jpg
↓ ↓
└───────┬──────┘
↓
template literal
↓
<img src="...">
↓
DOM
↓
UI
14. Kenapa tidak pakai if...else?
Kita sebenarnya bisa menulis:
function displayMovieBanner(image) {
if (image) {
return image;
} else {
return "images/not-found.jpg";
}
}
Ini benar.
Tetapi karena logikanya sederhana:
Kalau ada image gunakan image, kalau tidak gunakan default.
Kita bisa mempersingkat menjadi:
function displayMovieBanner(image) {
return image || "images/not-found.jpg";
}
Jadi || di sini berfungsi sebagai shortcut untuk kondisi sederhana.
15. Bandingkan if...else dengan ||
Versi panjang
if (image) {
return image;
} else {
return "images/not-found.jpg";
}
Versi singkat
return image || "images/not-found.jpg";
Keduanya memiliki tujuan yang sama dalam kasus ini.
Mental model:
if (image)
return image
else
return default
bisa dipadatkan menjadi:
image || default
16. Ini bukan sekadar “OR biasa”
Ini hal yang perlu kamu pahami dengan baik.
Kalau baru belajar, mungkin kamu berpikir:
image || defaultImage
artinya:
“Apakah image DAN defaultImage?”
Bukan.
Dalam konteks JavaScript:
A || B
dapat mengembalikan salah satu value.
Contoh:
"John" || "Mark"
→
"John"
Contoh:
"" || "Mark"
→
"Mark"
Jadi || sering digunakan sebagai default/fallback operator.
17. Contoh lain di luar project
Misalnya nama user:
let username = "";
Kita ingin kalau username kosong, gunakan "Guest".
Bisa:
let displayName = username || "Guest";
Karena:
username = ""
adalah falsy.
Hasil:
displayName = "Guest"
Contoh lain:
let username = "Budi";
let displayName = username || "Guest";
Karena "Budi" truthy:
displayName = "Budi"
18. Hubungan dengan materi || sebelumnya
Sebelumnya kita sudah belajar mental model:
||= ambil first truthy value.
Sekarang kita melihat penerapan nyatanya.
image || "images/not-found.jpg"
Artinya:
“Ambil image kalau image truthy. Kalau tidak, ambil default image.”
Ini adalah salah satu penggunaan || yang sangat umum.
19. Contoh beberapa value
Perhatikan:
"" || "default"
→ "default"
"movie.jpg" || "default"
→ "movie.jpg"
null || "default"
→ "default"
undefined || "default"
→ "default"
false || "default"
→ "default"
0 || "default"
→ "default"
Karena semua value pertama tersebut falsy.
20. Tapi hati-hati dengan 0
Ini penting sebagai pengetahuan lanjutan.
Misalnya:
let rating = 0;
let result = rating || 5;
hasilnya:
5
Padahal rating 0 mungkin valid.
Kenapa?
Karena:
0 = falsy
Jadi || menganggap 0 sebagai “tidak ada value”.
Untuk kasus seperti ini, kita kadang menggunakan nullish coalescing operator:
rating ?? 5
yang hanya fallback ketika value:
null
undefined
Tetapi belum perlu kamu fokuskan sekarang. Untuk kasus movie.image, "" memang sengaja dianggap “tidak ada image”, sehingga || cocok.
21. Kenapa lecture membuat function, padahal bisa langsung pakai ||?
Secara teknis bisa saja:
<img src="${movie.image || "images/not-found.jpg"}">
Tetapi lecture memilih:
displayMovieBanner(movie.image)
karena function membuat kode lebih terorganisir.
Bayangkan nanti logic-nya menjadi lebih kompleks:
apakah image ada?
↓
apakah URL valid?
↓
apakah menggunakan local image?
↓
kalau tidak → default image
Lebih mudah kalau logic tersebut diletakkan di:
displayMovieBanner()
daripada memenuhi template HTML dengan banyak kondisi.
22. Function ini juga membuat template lebih mudah dibaca
Bayangkan template:
let movieCard = `
<div class="movie-card">
<img src="${displayMovieBanner(movie.image)}">
<h2>${formatMovieName(movie.name)}</h2>
<p>${formatMovieDescription(movie.description)}</p>
<p>${formatGenre(movie.genre)}</p>
<div>${displayStarRatings(movie.rating)}</div>
</div>
`;
Sekarang setiap function punya pekerjaan masing-masing:
formatMovieName()
↓
format nama
formatMovieDescription()
↓
format description
formatGenre()
↓
format genre
displayStarRatings()
↓
format rating
displayMovieBanner()
↓
tentukan image
Ini membuat template menjadi jauh lebih bersih.
23. Kita sebenarnya sedang membuat “presentation layer”
Data asli:
{
name: "interstellar",
description: "Lorem ipsum...",
genre: ["sci-fi", "drama"],
rating: 4.6,
image: ""
}
Tetap seperti itu.
Kemudian sebelum ditampilkan ke user, kita format:
name
↓
"Interstellar"
description
↓
"Lorem ipsum..."
genre
↓
"Sci-fi, Drama"
rating
↓
"★★★★★"
image
↓
"images/not-found.jpg"
Jadi:
DATA ASLI
↓
format/transform
↓
UI
Ini pola yang sangat sering dipakai dalam aplikasi.
24. Jangan salah paham tentang image
Misalnya:
image: ""
bukan berarti file gambar "".
Ini berarti:
Property
imagememiliki String kosong sebagai value.
String kosong:
""
bisa digunakan sebagai tanda bahwa data image belum tersedia.
Kemudian function kita menerjemahkannya menjadi:
"images/not-found.jpg"
25. Analogi sederhana
Bayangkan kamu punya rak foto.
Setiap movie punya slot foto:
Movie A → 🖼️ ada foto
Movie B → 🖼️ ada foto
Movie C → ❌ tidak ada foto
Kamu punya aturan:
Kalau foto asli tersedia, gunakan foto asli. Kalau tidak, gunakan foto “Not Found”.
Dengan ||:
fotoAsli || fotoDefault
Jadi:
🖼️ asli ada
↓
gunakan asli
❌ asli tidak ada
↓
gunakan default
26. Hubungkan dengan operator &&
Kamu sudah belajar:
|| → first truthy
&& → first falsy
Untuk lecture ini kita menggunakan:
image || defaultImage
karena kita ingin:
cari value yang bisa digunakan.
Sedangkan && sering digunakan untuk pola:
isLoggedIn && showDashboard();
yang artinya:
kalau
isLoggedIntruthy, lanjutkan ke kanan.
Jadi jangan tertukar:
A || B
→ cari value truthy pertama
A && B
→ berhenti pada value falsy pertama
27. Connection dengan lecture sebelumnya tentang formatGenre
Sekarang project kita sudah punya beberapa function formatting.
Nama
formatMovieName(movie.name)
Description
formatMovieDescription(movie.description)
Genre
formatGenre(movie.genre)
Rating
displayStarRatings(movie.rating)
Image
displayMovieBanner(movie.image)
Semuanya bekerja sebagai transformer untuk UI.
movie object
│
┌────────────────┼─────────────────┐
↓ ↓ ↓
name description genre
↓ ↓ ↓
formatName formatDescription formatGenre
│ │ │
└────────────────┼─────────────────┘
│
format untuk UI
Dan:
rating → displayStarRatings()
image → displayMovieBanner()
28. Ada satu konsep penting: data asli vs data tampilan
Misalnya:
movie.image
adalah:
""
Kita tidak mengubah:
movie.image = "images/not-found.jpg";
Lecture hanya melakukan:
displayMovieBanner(movie.image)
yang menghasilkan default image.
Ini berarti:
Data asli:
movie.image = ""
Tampilan:
images/not-found.jpg
Ini bagus karena kita tidak merusak data asli.
29. Kenapa ini penting ketika nanti delete/create movie?
Ingat arsitektur project kita:
movies array
↓
render UI
movies adalah source of truth.
Kalau movie tidak memiliki image:
{
image: ""
}
kita tidak perlu mengubah data menjadi:
{
image: "images/not-found.jpg"
}
Kita cukup menentukan bagaimana data tersebut ditampilkan.
Dengan begitu:
movies array
↓
data tetap asli
↓
function formatter
↓
UI
30. Full flow project sejauh ini
Sekarang project mulai terlihat semakin jelas:
movies array
↓
forEach()
↓
movie object
↓
┌────────────────┼──────────────────┐
↓ ↓ ↓
name description genre
↓ ↓ ↓
formatName formatDescription formatGenre
│ │ │
└────────────────┼──────────────────┘
│
┌────────────────┼──────────────────┐
↓ ↓ ↓
rating image data lain
↓ ↓
displayStarRatings displayMovieBanner
│ │
└────────────────┼──────────────────┘
↓
template literal
↓
HTML String
↓
insertAdjacentHTML()
↓
DOM
↓
UI
Ini sebenarnya sudah menjadi mini rendering system.
31. Ringkasan method/operator yang digunakan
| Konsep | Fungsi | ||
|---|---|---|---|
movie.image | mengambil image dari object | ||
| ` | ` | memilih first truthy value | |
"" | falsy | ||
"images/movie.jpg" | truthy | ||
return | mengembalikan hasil dari function | ||
displayMovieBanner() | menentukan image yang ditampilkan | ||
insertAdjacentHTML() | memasukkan HTML ke DOM | ||
| template literal | membuat HTML String dinamis |
32. Mental model yang harus benar-benar kamu ingat
Kalau kamu melihat:
image || "images/not-found.jpg"
langsung baca:
“Kalau
imageada/bernilai truthy, pakai image. Kalau tidak, pakai gambar default.”
Bukan:
“
||berarti menghasilkan Boolean.”
Dalam JavaScript:
A || B
bisa mengembalikan value A atau value B.
🎯 Kesimpulan
Lecture ini sebenarnya sederhana tetapi sangat penting karena mengajarkan penggunaan nyata dari truthy/falsy + ||.
Function:
function displayMovieBanner(image) {
return image || "images/not-found.jpg";
}
bekerja seperti ini:
image
↓
apakah truthy?
↙ ↘
YA TIDAK
↓ ↓
return image return default image
↓ ↓
movie.jpg not-found.jpg
Kemudian:
${displayMovieBanner(movie.image)}
memastikan setiap movie selalu memiliki sesuatu yang bisa ditampilkan sebagai image.
Dan ini adalah pola yang sangat berguna di JavaScript:
value || defaultValue
yang bisa kamu baca sebagai:
“Gunakan
valuekalau tersedia; kalau tidak, gunakandefaultValue.”
Dalam project ini:
movie.image || "images/not-found.jpg"
→ gambar movie kalau ada, gambar default kalau tidak ada.