Lecture ini membahas dua konsep yang sangat penting dalam JavaScript:

1. Dynamic Typing → tipe data variable bisa berubah.
2. Type Coercion → JavaScript otomatis mengubah suatu tipe data ke tipe data lain dalam kondisi tertentu.

Keduanya sering membuat JavaScript terasa “fleksibel”, tetapi juga bisa menjadi sumber bug kalau kita tidak memahaminya.

1. Hubungan dengan Lecture Sebelumnya

Di lecture sebelumnya kita belajar:

let name = "John";
let age = 28;
let isMarried = true;

Masing-masing value mempunyai tipe:

name       → "John" → String
age        → 28     → Number
isMarried  → true   → Boolean

Nah, sekarang muncul pertanyaan:

Apakah tipe data sebuah variable di JavaScript harus ditentukan dari awal dan tidak boleh berubah?

Jawabannya:

Tidak.

JavaScript adalah bahasa yang dynamically typed.

2. Apa Itu Dynamic Typing?

Dynamic typing berarti:

Tipe data suatu variable ditentukan berdasarkan nilai yang sedang disimpan di dalam variable tersebut.

Kita tidak perlu menuliskan tipe datanya secara manual.

Contoh:

let myVar = 100;

JavaScript melihat:

100
↓
Number

Maka:

myVar → 100 → Number

Kemudian kita bisa melakukan:

myVar = "Hello";

Sekarang:

myVar → "Hello" → String

Tipe datanya berubah dari:

Number

menjadi:

String

Dan JavaScript tidak menganggap itu sebagai error.

3. Contoh Dynamic Typing

Perhatikan:

let myVar = 100;

console.log(typeof myVar);

Hasil:

number

Kemudian:

myVar = "Hello";

console.log(typeof myVar);

Hasil:

string

Jadi variable yang sama:

myVar

bisa mengalami:

myVar
 ↓
100
 ↓
Number

kemudian:

myVar
 ↓
"Hello"
 ↓
String

4. Apa Itu typeof?

Lecture memperkenalkan operator:

typeof

typeof digunakan untuk mengetahui tipe data suatu value.

Contoh:

let name = "John";

console.log(typeof name);

Hasil:

string

Contoh:

let age = 28;

console.log(typeof age);

Hasil:

number

Contoh:

let isMarried = true;

console.log(typeof isMarried);

Hasil:

boolean

Jadi kita bisa menggunakan:

typeof variable

untuk mengecek tipe data.

5. typeof Bukan Function

Ini detail kecil tetapi bagus untuk diketahui.

Kita menulis:

typeof age

bukan:

typeof(age)

Walaupun JavaScript juga mengizinkan bentuk kedua dalam banyak kasus, typeof secara teknis adalah operator, bukan function.

Contoh:

console.log(typeof age);

Artinya:

typeof
  ↓
cek tipe data
  ↓
age
  ↓
number

6. Dynamic Typing Bukan Berarti Variable Tidak Punya Type

Ini kesalahpahaman yang cukup umum.

Ada yang berpikir:

“Karena JavaScript dynamically typed, berarti variable tidak punya data type.”

Sebenarnya bukan begitu.

Variable tetap menyimpan value yang memiliki type.

Misalnya:

let x = 10;

Value 10 memiliki tipe:

Number

Kemudian:

x = "Hello";

Sekarang value "Hello" memiliki tipe:

String

Jadi yang berubah adalah tipe value yang sedang disimpan.

7. Analogi Dynamic Typing

Bayangkan kamu punya sebuah kotak bernama:

myVar

Awalnya:

myVar
┌───────────┐
│    100    │
└───────────┘
    Number

Kemudian isinya diganti:

myVar
┌───────────┐
│  "Hello"  │
└───────────┘
    String

Kotaknya tetap bernama myVar.

Yang berubah adalah isi/value-nya, sehingga tipe value yang sedang disimpan juga berubah.

8. Kenapa Disebut “Dynamic”?

Karena type-nya dapat berubah selama program berjalan.

Misalnya:

let data = 100;

Saat ini:

data → Number

Kemudian:

data = "JavaScript";

Sekarang:

data → String

Kemudian:

data = true;

Sekarang:

data → Boolean

Jadi:

Number
   ↓
String
   ↓
Boolean

Itulah salah satu karakteristik dynamic typing.

9. JavaScript Tidak Meminta Kita Menulis Type

Misalnya pada variable ini:

let age = 28;

Kita tidak perlu menulis:

age → Number

di dalam code.

JavaScript sendiri mengetahui:

28 → Number

Begitu juga:

let name = "John";

JavaScript mengetahui:

"John" → String

dan:

let active = true;

JavaScript mengetahui:

true → Boolean

10. Keuntungan Dynamic Typing

Dynamic typing membuat kita bisa menulis code lebih cepat dan fleksibel.

Misalnya:

let value = 100;

Tidak perlu:

Number value = 100

atau syntax khusus lainnya untuk memberitahu JavaScript:

“value ini adalah Number.”

JavaScript otomatis mengetahuinya.

11. Tetapi Dynamic Typing Juga Bisa Menjadi Sumber Bug

Ini bagian yang sangat penting.

Fleksibilitas itu bagus, tetapi bisa berbahaya.

Misalnya:

let age = 28;

Kita awalnya menganggap:

age → Number

Kemudian di bagian lain program ada:

age = "twenty eight";

Sekarang:

age → String

Program mungkin masih berjalan tanpa error langsung.

Tetapi kode lain mungkin mengharapkan age sebagai Number.

Misalnya:

console.log(age + 2);

Kita mungkin mengharapkan:

30

Tetapi karena age sekarang String:

"twenty eight" + 2

hasilnya bukan seperti yang kita harapkan.

Jadi dynamic typing memberikan fleksibilitas, tetapi kita harus lebih hati-hati.

12. Dynamic Typing vs Static Typing

Sekarang kita bandingkan.

Dynamic Typing

JavaScript:

let value = 100;

value = "Hello";

Boleh.

Type value berubah:

Number → String

Static Typing

Pada bahasa yang statically typed, type variable biasanya ditentukan secara lebih ketat.

Misalnya TypeScript:

let age: number = 28;

Kita mengatakan:

age harus menyimpan Number.

Kemudian:

age = "Hello";

akan ditolak oleh sistem type karena String tidak sesuai dengan number.

13. Apa Itu TypeScript?

Lecture menyebut TypeScript.

TypeScript adalah bahasa yang dibangun di atas JavaScript dan menambahkan sistem type yang lebih kuat.

Contoh:

let age: number = 28;

Bagian:

: number

memberitahu:

Variable age harus bertipe number.

Kalau:

age = "John";

akan dianggap tidak sesuai dengan tipe yang sudah ditentukan.

14. Perbandingan JavaScript dan TypeScript

Secara sederhana:

JavaScript
"Silakan fleksibel."

Sedangkan TypeScript:

"Jelaskan dulu tipe datanya dan saya akan membantu mengecek."

15. Dynamic Typing vs Static Typing dengan Analogi

Bayangkan sebuah kotak.

Dynamic Typing

Kotak diberi label:

DATA

Hari ini isinya:

100

Besok:

"Hello"

Lusa:

true

Tidak masalah.

Static Typing

Kotak diberi label:

AGE : NUMBER

Kamu mencoba memasukkan:

28

✅ Boleh.

Tapi mencoba memasukkan:

"John"

❌ Ditolak.

16. Sekarang Masuk ke Type Coercion

Ini konsep kedua dalam lecture.

Type coercion berarti:

JavaScript secara otomatis mengubah value dari satu data type ke data type lain ketika diperlukan.

Contoh sederhana:

let age = 28;

console.log("My age is " + age);

Di sini ada:

"My age is "

yang merupakan String.

Sedangkan:

age

adalah Number.

Jadi JavaScript menghadapi:

String + Number

JavaScript kemudian melakukan type coercion.

Number:

28

diubah menjadi:

"28"

Kemudian:

"My age is " + "28"

menjadi:

"My age is 28"

17. Visualisasi Type Coercion

"My age is " + 28
       ↓          ↓
    String      Number
       │          │
       └────┬─────┘
            ↓
    JavaScript melakukan
       type coercion
            ↓
"My age is " + "28"
            ↓
     "My age is 28"

Inilah type coercion.

18. Contoh dengan console.log

let age = 28;

console.log("My age is " + age);

Output:

My age is 28

Yang terjadi di belakang layar kira-kira:

age = 28
   ↓
Number
   ↓
di-coerce menjadi String
   ↓
"28"
   ↓
"My age is " + "28"
   ↓
"My age is 28"

19. Perhatikan: Value Aslinya Tidak Berubah

Ini penting.

Misalnya:

let age = 28;

console.log("My age is " + age);

console.log(typeof age);

Hasil:

My age is 28
number

Jadi age tetap:

28 → Number

Type coercion hanya terjadi dalam proses operasi tersebut.

Bukan berarti variable age secara permanen berubah menjadi String.

20. Contoh Lebih Lengkap

let age = 28;

console.log(age);
console.log(typeof age);

console.log("My age is " + age);

console.log(age);
console.log(typeof age);

Hasil kira-kira:

28
number
My age is 28
28
number

Jadi:

age
 ↓
tetap Number

21. Contoh dengan Banyak Data Type

Lecture memberikan contoh:

let firstName = "John";
let age = 28;
let isMarried = true;

alert(
    firstName +
    " is a " +
    age +
    " years old male. Is he married? " +
    isMarried
);

Di sini terdapat:

firstName  → String
age        → Number
isMarried  → Boolean

Tetapi kita menggabungkannya dengan String.

JavaScript akan melakukan coercion sehingga semuanya dapat digunakan dalam hasil String.

Hasil:

John is a 28 years old male. Is he married? true

22. Apa yang Terjadi di Belakang Layar?

Kita punya:

"John"

Sudah String.

Kemudian:

28

adalah Number.

Ketika digabungkan menggunakan + dengan String:

Number → String

Kemudian:

true

adalah Boolean.

JavaScript juga dapat mengubahnya menjadi representasi String:

true → "true"

Secara konseptual hasil akhirnya menjadi seperti:

"John"
+
" is a "
+
"28"
+
" years old male. Is he married? "
+
"true"

Kemudian semuanya digabungkan.

23. Jadi Type Coercion Itu Otomatis

Kita tidak perlu menulis secara manual:

String(age)

untuk kasus concatenation seperti ini.

JavaScript bisa melakukan coercion sendiri.

Contoh:

let age = 28;

console.log("Age: " + age);

JavaScript menangani konversinya.

24. Type Coercion Tidak Selalu Berarti Number → String

JavaScript dapat melakukan berbagai jenis konversi otomatis tergantung konteks.

Misalnya:

"10" - 2

Hasilnya:

8

Kenapa?

Karena operator - mengharapkan operasi numerik, sehingga JavaScript mencoba mengubah:

"10"

menjadi:

10

Kemudian:

10 - 2

menjadi:

8

Ini juga contoh type coercion.

25. + Punya Perilaku yang Perlu Diperhatikan

Operator + agak spesial karena bisa digunakan untuk:

Penjumlahan

10 + 20

hasil:

30

Concatenation String

"Hello " + "World"

hasil:

Hello World

Dan ketika String bertemu Number:

"10" + 20

hasil:

"1020"

bukan:

30

Karena dalam konteks tersebut terjadi String concatenation.

26. Ini Contoh yang Sering Membingungkan

console.log(10 + 20);

Hasil:

30

Tetapi:

console.log("10" + 20);

Hasil:

1020

Dan:

console.log("10" + "20");

Hasil:

1020

Karena:

"10" + "20"

adalah penggabungan String.

27. Jangan Menganggap Semua Operator Berperilaku Sama

Misalnya:

"10" + 2

hasil:

"102"

Tetapi:

"10" - 2

hasil:

8

Kenapa?

Karena JavaScript memiliki aturan coercion yang berbeda tergantung operator.

Untuk sekarang tidak perlu menghafal semua aturannya. Yang penting:

JavaScript sering melakukan konversi tipe secara otomatis, jadi kita harus memperhatikan data type value yang sedang kita gunakan.

Nanti saat masuk lecture operators, ini akan dibahas lebih dalam.

28. Dynamic Typing dan Type Coercion Itu Berbeda

Ini sangat penting karena kedua istilah ini mudah tertukar.

Dynamic Typing

Berhubungan dengan tipe variable/value yang dapat berubah.

Contoh:

let x = 10;

x = "Hello";

Type berubah:

Number → String

Type Coercion

Berhubungan dengan JavaScript mengubah type secara otomatis dalam suatu operasi/konteks.

Contoh:

let x = 10;

console.log("Value: " + x);

Dalam operasi tersebut:

10 → "10"

29. Analogi Keduanya

Bayangkan x adalah sebuah kotak.

Dynamic Typing

Kamu mengganti isi kotak:

x → 100

kemudian:

x → "Hello"

Isi variable berubah.

Type Coercion

Isi kotaknya tetap:

x → 100

Tetapi saat digunakan dalam situasi tertentu, JavaScript berkata:

“Untuk operasi ini saya membutuhkan bentuk String.”

Maka JavaScript menggunakan representasi:

100 → "100"

untuk operasi tersebut.

Variable aslinya tidak harus berubah.

30. Contoh yang Menggabungkan Keduanya

let value = 100;

Saat ini:

value → Number

Kemudian:

console.log("Value: " + value);

Terjadi type coercion:

100 → "100"

Tetapi:

console.log(typeof value);

tetap:

number

Kemudian:

value = "Hello";

Sekarang terjadi dynamic typing:

value
 ↓
"Hello"
 ↓
String

Jadi dua konsepnya berbeda.

31. Kenapa JavaScript Melakukan Type Coercion?

Karena JavaScript dirancang cukup fleksibel.

Misalnya:

let age = 28;

alert("My age is " + age);

Kalau JavaScript tidak melakukan coercion otomatis, kita mungkin harus melakukan:

alert("My age is " + String(age));

Dengan coercion, JavaScript membantu kita melakukan konversi tersebut secara otomatis dalam konteks yang sesuai.

32. Tetapi Fleksibilitas Bisa Menimbulkan Bug

Misalnya:

let price = "100";
let quantity = 2;

console.log(price + quantity);

Hasil:

1002

Padahal mungkin programmer menginginkan:

200

Kenapa?

Karena:

price → "100" → String
quantity → 2 → Number

Dan + dengan String menyebabkan concatenation.

Ini contoh kenapa memahami type sangat penting.

33. Jangan Hanya Melihat Bentuknya

Perhatikan:

let a = 10;
let b = "10";

Secara visual:

10
"10"

terlihat hampir sama.

Tetapi:

a → Number
b → String

Dan perilakunya bisa berbeda.

Misalnya:

console.log(a + 5);

hasil:

15

Sedangkan:

console.log(b + 5);

hasil:

105

34. Gunakan typeof Saat Bingung

Saat debugging, biasakan melakukan:

console.log(typeof variable);

Misalnya kamu bingung:

“Kenapa hasil perhitunganku aneh?”

Coba:

console.log(value);
console.log(typeof value);

Contoh:

let price = "100";

console.log(price);
console.log(typeof price);

Hasil:

100
string

Nah, langsung terlihat bahwa price ternyata String, bukan Number.

35. Hubungan dengan Lecture Developer Console

Ini kembali ke lecture sebelumnya.

Kita sudah belajar bahwa Console dapat digunakan untuk debugging.

Sekarang kita punya tools tambahan:

console.log(value);
console.log(typeof value);

Misalnya:

let age = 28;

console.log(age);
console.log(typeof age);

Output:

28
number

Kalau ternyata:

age = "28";

maka:

28
string

Console membantu kita melihat apa yang sebenarnya terjadi.

36. Contoh Praktis

Bayangkan kita membuat sistem harga:

let price = 100;
let quantity = 3;

console.log(price * quantity);

Hasil:

300

Kemudian data dari suatu sumber ternyata masuk sebagai String:

price = "100";

Sekarang:

console.log(price * quantity);

JavaScript bisa melakukan coercion dalam operasi perkalian sehingga hasilnya masih bisa menjadi:

300

Tetapi jika kita menggunakan:

console.log(price + quantity);

hasilnya:

1003

Inilah kenapa type coercion perlu dipahami.

37. Apakah Type Coercion Selalu Buruk?

Tidak.

Type coercion bisa sangat membantu.

Misalnya:

let age = 28;

console.log("I am " + age + " years old.");

Sangat praktis.

Tanpa coercion otomatis, kita harus melakukan konversi sendiri.

Masalahnya bukan pada coercion-nya.

Masalahnya adalah:

Kita harus tahu kapan JavaScript melakukan coercion dan hasilnya seperti apa.

38. Ringkasan Perbedaan Istilah

39. Contoh Semua Konsep Sekaligus

let value = 100;

console.log(typeof value);

Output:

number

Kemudian:

console.log("Value is " + value);

Terjadi coercion:

100 → "100"

Tetapi:

console.log(typeof value);

tetap:

number

Kemudian:

value = "Hello";

Sekarang dynamic typing terjadi:

Number → String

Kemudian:

console.log(typeof value);

hasil:

string

40. Gambaran Besar

                 JavaScript
                     │
          ┌──────────┴──────────┐
          │                     │
   Dynamic Typing          Type Coercion
          │                     │
          ↓                     ↓
Type bisa berubah       Type otomatis
selama program          dikonversi dalam
berjalan                konteks tertentu
          │                     │
          ↓                     ↓
let x = 10;             "Age: " + 10
x = "Hello";                   ↓
          │                    10
          ↓                     ↓
Number → String             "10"

41. Hal yang Wajib Kamu Ingat

Kalau lecture ini diringkas menjadi beberapa kalimat:

🟢 Dynamic Typing

JavaScript menentukan type berdasarkan value:

let x = 10;       // Number
x = "Hello";      // String
x = true;         // Boolean

Satu variable dapat menyimpan value dengan type berbeda pada waktu yang berbeda.

🟢 typeof

Digunakan untuk mengetahui type:

typeof x

Contoh:

console.log(typeof 10);       // number
console.log(typeof "Hello");  // string
console.log(typeof true);     // boolean

🟢 Static Typing

Pada sistem static typing seperti TypeScript, type dapat ditentukan lebih ketat:

let age: number = 28;

Variable tersebut dimaksudkan untuk menyimpan Number.

🟢 Type Coercion

JavaScript dapat melakukan konversi otomatis:

let age = 28;

console.log("My age is " + age);

Secara konsep:

28
↓
"28"
↓
"My age is 28"

42. Cara Mengingat Dynamic Typing vs Type Coercion

Gunakan kalimat sederhana ini:

Dynamic typing = type dari value yang disimpan bisa berubah.

Contoh:

x → Number
x → String

Sedangkan:

Type coercion = JavaScript mengubah representasi/type value secara otomatis ketika dibutuhkan oleh suatu operasi.

Contoh:

"Age: " + 28
        ↓
"Age: " + "28"

🎯 Cheat Sheet Terakhir

// Dynamic Typing
let value = 100;

console.log(typeof value);
// number

value = "Hello";

console.log(typeof value);
// string

// Type Coercion
let age = 28;

console.log("My age is " + age);
// My age is 28

// Boolean → String dalam concatenation
let isMarried = true;

console.log("Married: " + isMarried);
// Married: true

// Mengecek type
console.log(typeof "Hello");
// string

console.log(typeof 100);
// number

console.log(typeof true);
// boolean

Dan yang paling penting:

┌──────────────────────────────────────┐
│          DYNAMIC TYPING              │
│                                      │
│ variable bisa menyimpan value        │
│ dengan type yang berbeda             │
│                                      │
│  x = 10       → Number               │
│  x = "Hello"  → String               │
└──────────────────────────────────────┘


┌──────────────────────────────────────┐
│           TYPE COERCION              │
│                                      │
│ JavaScript otomatis mengonversi      │
│ type dalam konteks tertentu          │
│                                      │
│  "Age: " + 28                        │
│        ↓                             │
│  "Age: " + "28"                      │
│        ↓                             │
│  "Age: 28"                            │
└──────────────────────────────────────┘

Inti besarnya: JavaScript memang fleksibel karena dynamic typing, dan JavaScript juga sering membantu dengan automatic type coercion. Fleksibilitas ini membuat coding lebih praktis, tetapi juga berarti kita harus terbiasa mengecek data type supaya tidak terkena bug yang sulit ditemukan.