Lecture ini melanjutkan project movie streaming admin panel yang sedang kita bangun. Kali ini kita mengubah rating angka menjadi tampilan bintang ⭐ agar UI lebih enak dilihat.

Sebelumnya:

Interstellar
Rating: 4.6

Sekarang ingin menjadi:

Interstellar
★★★★★

Yang menarik, lecture ini menggabungkan beberapa konsep yang sudah kita pelajari:

• function
• parameter
• typeof
• if
• for
• operator <
• +=
• Unicode
• String
• template literal
• validasi data

1. Tujuan utama lecture

Misalnya data movie:

let movie = {
    name: "Interstellar",
    rating: 4.6
};

Sebelumnya rating ditampilkan:

${movie.rating}

sehingga UI menjadi:

4.6

Sekarang kita ingin:

★★★★★

Tetapi ada aturan:

Rating movie dianggap valid jika nilainya berada di antara 0 sampai 5.

Jadi:

0     → valid
1     → valid
2.7   → valid
4.6   → valid
5     → valid

-1    → invalid
6     → invalid
"4"   → invalid

2. Kita membuat function khusus

Lecture membuat:

function displayStarRatings(rating) {
    ...
}

Kenapa dibuat function?

Karena kita akan melakukan proses yang cukup panjang:

rating
  ↓
validasi
  ↓
hitung jumlah bintang
  ↓
buat String bintang
  ↓
return String

Dengan function, kita bisa memanggilnya berkali-kali:

displayStarRatings(movie.rating)

untuk setiap movie.

3. Parameter rating

Perhatikan:

function displayStarRatings(rating) {

rating adalah parameter.

Misalnya:

displayStarRatings(4.6);

maka di dalam function:

rating = 4.6

Kalau:

displayStarRatings(2.7);

maka:

rating = 2.7

4. Langkah pertama: validasi rating

Lecture melakukan pengecekan:

if (
    typeof rating !== "number" ||
    rating < 0 ||
    rating > 5
) {
    console.log("Invalid rating");
    return "";
}

Mari kita pecah.

Ada tiga kondisi invalid.

Kondisi 1 — bukan Number

typeof rating !== "number"

Misalnya:

displayStarRatings("4");

Walaupun kelihatannya "4" seperti angka, sebenarnya:

typeof "4"

hasilnya:

"string"

Jadi:

typeof rating !== "number"

adalah:

true

Rating dianggap invalid.

5. Kenapa "4" berbeda dengan 4?

Ini penting karena sebelumnya kita sudah belajar dynamic typing.

4

adalah Number.

Sedangkan:

"4"

adalah String.

Jadi:

typeof 4
// "number"

sedangkan:

typeof "4"
// "string"

Walaupun secara visual mirip:

4
"4"

tipe datanya berbeda.

6. Kondisi 2 — rating kurang dari 0

rating < 0

Contoh:

rating = -2;

Maka:

-2 < 0

→ true

Berarti invalid.

Karena kita tidak ingin rating seperti:

-1
-2
-10

7. Kondisi 3 — rating lebih dari 5

rating > 5

Contoh:

rating = 6;

Maka:

6 > 5

→ true

Invalid.

Karena skala rating kita hanya:

0 ─────────────── 5

8. Mengapa menggunakan ||?

Kode:

if (
    typeof rating !== "number" ||
    rating < 0 ||
    rating > 5
)

|| berarti OR.

Artinya:

Kalau salah satu saja dari ketiga kondisi tersebut benar, rating dianggap invalid.

Contoh:

rating = "4"

Kondisi:

bukan number → TRUE
< 0          → FALSE
> 5          → FALSE

Karena ada satu TRUE:

TRUE || FALSE || FALSE
          ↓
        TRUE

→ invalid.

9. Contoh lainnya

Rating 4.6

typeof rating !== "number" → false
rating < 0                → false
rating > 5                → false

Maka:

false || false || false
          ↓
        false

Valid.

Rating 7

typeof rating !== "number" → false
rating < 0                → false
rating > 5                → true

Maka:

false || false || true
          ↓
        true

Invalid.

10. return "" saat invalid

Lecture kemudian:

console.log("Invalid rating");
return "";

Kenapa return ""?

Karena function ini nantinya digunakan di template literal:

${displayStarRatings(movie.rating)}

Kalau rating invalid, kita tidak ingin menampilkan sesuatu.

Maka function mengembalikan:

""

yaitu String kosong.

11. Membuat starString

Setelah rating dinyatakan valid:

let starString = "";

Awalnya kosong:

starString = ""

Kemudian kita akan menambahkan bintang sedikit demi sedikit.

Misalnya rating:

3

nantinya:

"★★★☆☆"

Jadi starString seperti sebuah wadah sementara untuk mengumpulkan bintang.

12. Bagian paling penting: for loop

Lecture menggunakan:

for (let i = 0; i < 5; i++) {
    ...
}

Kenapa 5?

Karena rating maksimum adalah 5 bintang.

Kita selalu ingin memeriksa lima posisi:

posisi 1
posisi 2
posisi 3
posisi 4
posisi 5

Dalam JavaScript index dimulai dari 0, sehingga:

i = 0
i = 1
i = 2
i = 3
i = 4

Total:

5 iterasi

13. Visualisasi for

Kode:

for (let i = 0; i < 5; i++) {

berarti:

i = 0 → jalan
i = 1 → jalan
i = 2 → jalan
i = 3 → jalan
i = 4 → jalan
i = 5 → berhenti

Karena ketika:

i = 5

kondisi:

5 < 5

adalah:

false

14. Bagaimana menentukan ⭐ atau ☆?

Ini inti algoritmanya:

if (i < rating) {
    // filled star
} else {
    // empty star
}

Mental modelnya:

Selama posisi bintang masih berada di bawah rating → ⭐ Setelah melewati rating → ☆

15. Contoh rating = 3

Misalnya:

rating = 3;

Loop:

Iterasi 1

i = 0

Cek:

0 < 3

→ true

Maka:

⭐

Iterasi 2

i = 1

1 < 3

→ true

Tambahkan:

⭐

Sekarang:

⭐⭐

Iterasi 3

i = 2

2 < 3

→ true

Sekarang:

⭐⭐⭐

Iterasi 4

i = 3

3 < 3

→ false

Maka tambahkan:

☆

Sekarang:

⭐⭐⭐☆

Iterasi 5

i = 4

4 < 3

→ false

Tambahkan:

☆

Hasil akhir:

⭐⭐⭐☆☆

16. Visualisasi lengkap

Untuk:

rating = 3

prosesnya:

i       kondisi       hasil
─────────────────────────────
0       0 < 3         ⭐
1       1 < 3         ⭐
2       2 < 3         ⭐
3       3 < 3         ☆
4       4 < 3         ☆

Hasil:

⭐⭐⭐☆☆

Ini sebenarnya algoritma yang sangat sederhana:

5 posisi
│
├── posisi < rating → ⭐
│
└── posisi >= rating → ☆

17. Dari mana karakter ⭐ dan ☆ berasal?

Lecture menggunakan Unicode.

Unicode adalah standar untuk merepresentasikan karakter.

Jadi selain huruf:

A
B
C

dan angka:

1
2
3

Unicode juga memiliki karakter seperti:

★
☆
♥
✓
→

18. Unicode untuk filled star

Lecture menggunakan:

"\u2605"

yang menghasilkan:

★

Strukturnya:

\ u 2 6 0 5
│ │ └──────┘
│ │    Unicode code
│ └─ menandakan Unicode escape
└─ escape character

Jadi:

"\u2605"

dibaca JavaScript sebagai karakter:

★

19. Unicode untuk empty star

Lecture menggunakan:

"\u2606"

yang menghasilkan:

☆

Jadi:

\u2605 → ★
\u2606 → ☆

20. Kenapa harus menggunakan \u?

Karena JavaScript mendukung Unicode escape sequence.

Contoh:

console.log("\u2605");

Output:

★

Jadi kita tidak harus mengetik karakter bintang secara langsung.

Kita bisa menggunakan representasi Unicode-nya.

21. Bug penting yang terjadi di lecture: = vs +=

Ini bagian yang sangat penting.

Awalnya lecture mendapatkan hasil hanya:

★

atau:

☆

padahal seharusnya:

★★★★★

Kenapa?

Karena menggunakan assignment:

starString = "\u2605";

Ini berarti:

Ganti isi starString dengan bintang baru.

Misalnya:

awal:
""

iterasi 1:
"★"

iterasi 2:
"★"

iterasi 3:
"★"

Setiap kali isinya ditimpa.

22. Kita sebenarnya ingin menambahkan

Yang kita butuhkan:

starString += "\u2605";

+= berarti:

starString = starString + "\u2605";

Jadi bukan mengganti, tetapi menambahkan ke isi sebelumnya.

23. Contoh +=

Misalnya:

let text = "";

Kemudian:

text += "A";

hasil:

"A"

Kemudian:

text += "B";

hasil:

"AB"

Kemudian:

text += "C";

hasil:

"ABC"

Jadi:

"" 
 ↓ += "A"
"A"
 ↓ += "B"
"AB"
 ↓ += "C"
"ABC"

24. Inilah yang terjadi pada star rating

starString = ""
      ↓
   += "★"
      ↓
    "★"
      ↓
   += "★"
      ↓
   "★★"
      ↓
   += "★"
      ↓
  "★★★"

Kemudian empty star:

"★★★"
   ↓
 += "☆"
   ↓
"★★★☆"
   ↓
 += "☆"
   ↓
"★★★☆☆"

25. Function secara keseluruhan

Secara konsep, function lecture menjadi seperti:

function displayStarRatings(rating) {
    if (
        typeof rating !== "number" ||
        rating < 0 ||
        rating > 5
    ) {
        console.log("Invalid rating");
        return "";
    }

    let starString = "";

    for (let i = 0; i < 5; i++) {
        if (i < rating) {
            starString += "\u2605";
        } else {
            starString += "\u2606";
        }
    }

    return starString;
}

Sekarang coba beberapa contoh.

displayStarRatings(5);

→

★★★★★

displayStarRatings(4);

→

★★★★☆

displayStarRatings(3);

→

★★★☆☆

displayStarRatings(2);

→

★★☆☆☆

displayStarRatings(1);

→

★☆☆☆☆

displayStarRatings(0);

→

☆☆☆☆☆

26. Bagaimana dengan rating desimal?

Nah, ini bagian menarik.

Misalnya:

displayStarRatings(4.6);

Loop tetap berjalan:

i = 0 → 0 < 4.6 → true → ★
i = 1 → 1 < 4.6 → true → ★
i = 2 → 2 < 4.6 → true → ★
i = 3 → 3 < 4.6 → true → ★
i = 4 → 4 < 4.6 → true → ★

Jadi:

★★★★★

27. Kenapa 4.6 menjadi 5 bintang?

Karena kondisi yang digunakan:

i < rating

dan:

4 < 4.6

adalah:

true

Maka posisi bintang ke-5 tetap mendapatkan filled star.

Secara matematis, jumlah filled star yang dihasilkan oleh algoritma ini adalah:

ceiling(rating)

untuk rating positif non-integer.

Contoh:

rating  → filled stars

1.1     → 2
2.1     → 3
2.7     → 3
3.2     → 4
4.6     → 5

28. Jadi ini BUKAN sistem half-star

Lecture juga menyebut:

Kalau mau, kita bisa menggunakan half star.

Artinya project ini belum membedakan:

4.1
4.5
4.9

Semuanya bisa terlihat:

★★★★★

Dengan algoritma saat ini.

Kalau ingin:

★★★★☆

untuk 4.6, kita membutuhkan logika tambahan untuk half-star atau sistem pembulatan tertentu.

Tetapi lecture sengaja menyederhanakan.

29. Memasukkan function ke movie card

Sebelumnya kita mungkin punya:

${movie.rating}

yang menghasilkan:

4.6

Sekarang diganti menjadi:

${displayStarRatings(movie.rating)}

Ini penting untuk memahami hubungan data → function → UI.

30. Alur data lengkap

Misalnya movie:

{
    name: "Interstellar",
    rating: 4.6
}

Kemudian:

displayStarRatings(movie.rating)

JavaScript melakukan:

movie.rating
     ↓
    4.6
     ↓
displayStarRatings(4.6)
     ↓
validasi
     ↓
for loop 5 kali
     ↓
★★★★★
     ↓
template literal
     ↓
HTML movie card
     ↓
browser

31. Ini sama dengan formatter sebelumnya

Kita sudah punya beberapa function formatter.

Misalnya:

formatMovieName(movie.name)

menghasilkan:

"Interstellar"

Kemudian:

formatMovieDescription(movie.description)

menghasilkan:

"Lorem ipsum..."

Sekarang:

displayStarRatings(movie.rating)

menghasilkan:

"★★★★★"

Jadi rendering card menjadi semacam:

movie
 │
 ├── name
 │     ↓
 │ formatMovieName()
 │
 ├── description
 │     ↓
 │ formatMovieDescription()
 │
 ├── genre
 │     ↓
 │ formatGenre()
 │
 └── rating
       ↓
   displayStarRatings()

Ini adalah pola yang bagus dalam programming:

Satu function melakukan satu pekerjaan yang spesifik.

32. Kenapa function ini menerima rating, bukan movie?

Kita bisa saja membuat:

displayStarRatings(movie)

tetapi function ini hanya membutuhkan:

rating

Jadi lebih baik:

displayStarRatings(movie.rating)

Karena function tersebut tidak perlu tahu tentang:

movie.name
movie.description
movie.genre
movie.image

Dia hanya peduli:

rating

Ini membuat function lebih reusable.

Misalnya nanti ada:

displayStarRatings(4.5)

tanpa harus memiliki seluruh movie object.

33. CSS juga ikut berperan

Lecture kemudian menunjukkan CSS:

.star-rating {
    color: gold;
}

Jadi JavaScript bertugas menghasilkan:

★★★★★

sedangkan CSS menentukan bagaimana tampilannya.

Mental modelnya:

JavaScript
    ↓
menghasilkan isi
"★★★★★"
    ↓
HTML
    ↓
CSS
    ↓
warna gold

Ini contoh bagus pembagian tanggung jawab:

JavaScript → behavior/data
HTML       → structure/content
CSS        → appearance/style

34. Jangan tertukar: JavaScript vs CSS

JavaScript:

starString += "\u2605";

menentukan:

“Bintang apa yang harus ditampilkan?”

CSS:

.star-rating {
    color: gold;
}

menentukan:

“Bintang tersebut harus terlihat seperti apa?”

Jadi:

JS → ★★★★★
CSS → warna, ukuran, spacing, dll.

35. Connection dengan materi for loop

Kita sudah belajar:

for (let i = 0; i < users.length; i++) {
    ...
}

Sekarang digunakan untuk kasus nyata:

for (let i = 0; i < 5; i++) {
    ...
}

Bedanya, kita tidak sedang loop Array.

Kita menggunakan loop untuk mengulang sebuah proses 5 kali.

i = 0 → bintang ke-1
i = 1 → bintang ke-2
i = 2 → bintang ke-3
i = 3 → bintang ke-4
i = 4 → bintang ke-5

Jadi for tidak hanya digunakan untuk Array.

36. Connection dengan if...else

Kita juga sudah belajar:

if (condition) {
    ...
} else {
    ...
}

Sekarang condition-nya:

if (i < rating)

Artinya:

kalau posisi bintang masih termasuk rating
        ↓
       ★

kalau tidak
        ↓
       ☆

37. Connection dengan operator <

Kita sudah pernah belajar comparison operator:

<
>
<=
>=
===
!==

Sekarang:

i < rating

dipakai untuk menentukan apakah posisi tertentu mendapatkan filled star.

Misalnya:

rating = 2.7

i = 0 → 0 < 2.7 → true
i = 1 → 1 < 2.7 → true
i = 2 → 2 < 2.7 → true
i = 3 → 3 < 2.7 → false
i = 4 → 4 < 2.7 → false

Hasil:

★★★☆☆

38. Connection dengan String

starString adalah String:

let starString = "";

Kemudian kita terus menambahkan karakter:

starString += "★";

Jadi kita menggunakan operator + untuk String concatenation.

Ini berhubungan dengan materi sebelumnya:

"Hello" + " World"

→

"Hello World"

Sekarang:

"★" + "★"

→

"★★"

39. Bedakan = dan +=

Ini sangat penting untuk diingat.

=

starString = "★";

Artinya:

Isi starString sekarang menjadi "★".

Isi lama dibuang.

+=

starString += "★";

Artinya:

starString = starString + "★";

Isi lama dipertahankan, lalu ditambah.

Analogi sederhana

Bayangkan starString adalah kotak.

Dengan:

=

kamu bilang:

“Kosongkan kotak, masukkan benda ini.”

Dengan:

+=

kamu bilang:

“Jangan buang isi kotak. Tambahkan benda ini.”

40. Full mental model lecture

Kalau saya sederhanakan seluruh lecture menjadi satu diagram:

                 movie.rating
                      ↓
                    4.6
                      ↓
          displayStarRatings(4.6)
                      ↓
                 VALIDASI
                      ↓
            ┌─────────┴─────────┐
            │                   │
        invalid               valid
            │                   │
            ↓                   ↓
       return ""          starString = ""
                                ↓
                         for 5 kali
                                ↓
                     apakah i < rating?
                       ↙              ↘
                    TRUE             FALSE
                      ↓                ↓
                     ★                ☆
                       ↘              ↙
                       +=
                        ↓
                  "★★★★★"
                        ↓
                  return String
                        ↓
                 template literal
                        ↓
                    movie card
                        ↓
                     UI ⭐

41. Satu hal penting: function ini sebenarnya melakukan dua pekerjaan

Kalau dilihat secara konsep, function ini melakukan:

A. Validasi

typeof rating !== "number"
rating < 0
rating > 5

B. Formatting

4.6 → ★★★★★
2.7 → ★★★☆☆

Untuk project pembelajaran ini tidak masalah.

Nanti dalam project yang lebih besar, kita bisa memisahkan:

validateRating()
       ↓
displayStarRatings()

Tetapi tidak perlu buru-buru melakukan itu sekarang. Fokus lecture adalah memahami algoritmanya.

42. Kenapa rating harus dicek terlebih dahulu?

Bayangkan kita tidak melakukan validasi.

Lalu seseorang memasukkan:

displayStarRatings(100);

Loop tetap hanya 5 kali, sehingga mungkin menghasilkan:

★★★★★

Padahal rating 100 tidak valid.

Atau:

displayStarRatings(-2);

Logika bintangnya menjadi tidak sesuai.

Atau:

displayStarRatings("hello");

kita mendapatkan behavior yang tidak kita inginkan.

Jadi validasi membantu menjaga function dari data yang tidak sesuai.

43. Yang sebenarnya sedang kita pelajari dari project ini

Jangan hanya mengingat:

“Unicode 2605 adalah star.”

Yang lebih penting adalah pola berpikirnya.

Kita memiliki data:

rating = 4.6

Kita punya requirement:

maksimal 5 bintang

Kita membuat algoritma:

ulang 5 kali
     ↓
cek posisi terhadap rating
     ↓
pilih ★ atau ☆
     ↓
gabungkan

Itulah inti programming.

44. Cheat sheet lecture

🎯 Kesimpulan

Lecture ini mengajarkan bagaimana mengubah data angka menjadi tampilan UI yang lebih user-friendly.

Sebelumnya:

movie.rating

hasil:

4.6

Sekarang:

displayStarRatings(movie.rating)

hasil:

★★★★★

Algoritmanya:

rating
  ↓
validasi 0–5
  ↓
buat String kosong
  ↓
loop 5 kali
  ↓
i < rating ?
  ├── YES → ★
  └── NO  → ☆
  ↓
gunakan += untuk mengumpulkan bintang
  ↓
return String
  ↓
tampilkan di movie card

Dan yang paling penting untuk diingat dari lecture ini adalah:

= mengganti nilai, sedangkan += menambahkan ke nilai yang sudah ada.

Kesalahan awal lecture justru sangat bagus untuk dipahami karena ini bug yang sering muncul ketika kita sedang membangun String secara bertahap di dalam loop.

I can also create an image explaining alur rating → for loop → ⭐/☆ → UI supaya lebih mudah divisualisasikan.