Lecture ini mulai masuk ke topik baru setelah Set, yaitu Map di JavaScript.

Kalau Set fokus utamanya adalah:

menyimpan nilai yang unik

maka Map fokus utamanya adalah:

menyimpan pasangan key → value, di mana key dan value bisa memiliki tipe data apa pun.

Ini adalah perbedaan paling penting yang harus kamu pegang dari awal.

1. Apa itu Map?

Map adalah struktur data yang menyimpan data dalam bentuk:

key → value

Contoh sederhana:

"name" → "Budi"
"age"  → 25

Jadi kita punya:

const myMap = new Map();

Kemudian kita bisa memasukkan:

key       value
----------------
"name" →  "Budi"
"age"  →  25

2. Bukankah Object juga punya key-value?

Nah, ini pertanyaan yang sangat bagus.

JavaScript sudah memiliki Object:

const user = {
  name: "Budi",
  age: 25
};

Object juga menyimpan:

key → value

Jadi mengapa kita membutuhkan Map?

Karena Map mempunyai karakteristik yang berbeda.

Perbedaan paling penting:

Object

Key biasanya berupa:

string
symbol

Map

Key bisa berupa tipe data apa pun.

Misalnya:

const myMap = new Map();

myMap.set("name", "Budi");
myMap.set(1, "Satu");
myMap.set(true, "Benar");

Di sini key-nya adalah:

"name" → String
1      → Number
true   → Boolean

Semuanya bisa menjadi key.

Bahkan object juga bisa menjadi key.

const user = {
  name: "Budi"
};

const map = new Map();

map.set(user, "Data milik Budi");

Ini adalah salah satu kemampuan Map yang sangat penting.

3. Gambaran sederhana Map

Bayangkan Map seperti sebuah tabel:

┌────────────┬────────────────────────────┐
│ Key        │ Value                      │
├────────────┼────────────────────────────┤
│ "question" │ "ES6 dirilis tahun berapa?"│
│ 1          │ 2013                       │
│ 2          │ 2015                       │
│ 3          │ 2016                       │
│ 4          │ 2020                       │
└────────────┴────────────────────────────┘

Setiap baris adalah satu entry.

Jadi kalau ada 5 baris:

5 entries

4. Cara membuat Map

Untuk membuat Map:

const myMap = new Map();

Kita menggunakan:

new

dan:

Map()

Sama seperti ketika kita membuat Set:

const mySet = new Set();

Untuk Map:

const myMap = new Map();

Awalnya Map masih kosong.

console.log(myMap);

Kurang lebih:

Map(0) {}

Angka 0 menunjukkan jumlah entry.

5. Map memiliki size

Sama seperti Set, Map mempunyai property:

size

Contoh:

const myMap = new Map();

console.log(myMap.size);

Hasil:

0

Kalau kita menambahkan satu entry:

myMap.set("name", "Budi");

console.log(myMap.size);

Hasil:

1

Kalau ada 5 key-value pair:

size = 5

Jadi:

myMap.size

berarti:

“Ada berapa entry di dalam Map ini?”

6. Menambahkan data menggunakan set()

Ini agak menarik karena kita menggunakan method bernama:

set()

Untuk memasukkan data ke Map:

myMap.set(key, value);

Misalnya:

const myMap = new Map();

myMap.set("name", "Budi");

Artinya:

key       value
"name" → "Budi"

7. set() membutuhkan dua argument

Perhatikan:

myMap.set("name", "Budi");

Ada dua nilai:

"name" → key
"Budi" → value

Bisa dibayangkan:

set(key, value)

Jadi:

myMap.set("name", "Budi");

dibaca:

Simpan "Budi" menggunakan "name" sebagai key.

8. Key bisa berupa Number

Tidak harus String.

Misalnya:

myMap.set(1, 2013);
myMap.set(2, 2015);
myMap.set(3, 2016);
myMap.set(4, 2020);

Sekarang Map mempunyai:

1 → 2013
2 → 2015
3 → 2016
4 → 2020

Perhatikan bahwa:

1

adalah Number, bukan String.

9. Key bisa berupa Boolean

Bahkan ini valid:

myMap.set(true, "Correct answer");
myMap.set(false, "Wrong answer");

Sekarang kita punya:

true  → "Correct answer"
false → "Wrong answer"

Jadi key tidak terbatas pada String.

10. Key bahkan bisa berupa Object

Ini salah satu perbedaan menarik dengan Object biasa.

const user = {
  name: "Budi"
};

const myMap = new Map();

myMap.set(user, "Data user Budi");

Di sini:

user

adalah object dan digunakan sebagai key.

Secara konsep:

Object user → "Data user Budi"

Jadi ingat:

Map sangat fleksibel dalam menentukan key.

11. set() mengembalikan Map itu sendiri

Ini bagian penting dari lecture.

Ketika kita melakukan:

myMap.set("name", "Budi");

set() bukan hanya menambahkan data.

Method tersebut juga mengembalikan Map yang sudah diperbarui.

Secara konsep:

myMap
   ↓
set("name", "Budi")
   ↓
Map yang sudah diperbarui

Karena set() mengembalikan Map, kita bisa melakukan method chaining.

12. Method chaining pada Map

Kita bisa menulis:

const myMap = new Map();

myMap
  .set("name", "Budi")
  .set("age", 25)
  .set("city", "Madiun");

Ini valid.

Kenapa?

Karena:

myMap.set("name", "Budi")

mengembalikan myMap.

Sehingga hasilnya bisa langsung dipanggil:

.set("age", 25)

Kemudian hasilnya lagi bisa dipanggil:

.set("city", "Madiun")

Secara mental:

myMap
 ↓
set()
 ↓
Map
 ↓
set()
 ↓
Map
 ↓
set()
 ↓
Map

13. Contoh Map seperti soal pilihan ganda

Lecture menggunakan contoh yang cukup bagus.

Misalnya kita ingin membuat data soal:

question → "In which year was ES6 released?"

1 → 2013
2 → 2015
3 → 2016
4 → 2020

correct → 2

true  → "Correct answer"
false → "Wrong answer"

Kita bisa menyimpannya dalam Map:

const myMap = new Map();

myMap
  .set("question", "In which year was ES6 released?")
  .set(1, 2013)
  .set(2, 2015)
  .set(3, 2016)
  .set(4, 2020)
  .set("correct", 2)
  .set(true, "Correct answer")
  .set(false, "Wrong answer");

Sekarang satu Map menyimpan seluruh informasi soal.

14. Mengambil value menggunakan get()

Kalau:

set()

digunakan untuk menambahkan data,

maka:

get()

digunakan untuk mengambil value berdasarkan key.

Sintaksnya:

myMap.get(key);

Misalnya:

myMap.get("question");

JavaScript akan mencari:

key = "question"

Kemudian mengembalikan value-nya.

Misalnya:

"In which year was ES6 released?"

15. Contoh get() sederhana

const myMap = new Map();

myMap.set("name", "Budi");
myMap.set("age", 25);

console.log(myMap.get("name"));

Output:

Budi

Kemudian:

console.log(myMap.get("age"));

Output:

25

Cara berpikirnya:

get(key)
   ↓
cari key
   ↓
kembalikan value

16. get() tidak mencari berdasarkan posisi

Ini penting karena kita sebelumnya belajar Array.

Pada Array:

const fruits = ["Apple", "Banana", "Orange"];

console.log(fruits[0]);

Kita mengambil berdasarkan index.

Tetapi Map tidak seperti itu.

Map mengambil data berdasarkan key:

myMap.get("name");

Jadi:

Array → index
Map   → key

Ini perbedaan fundamental.

17. Hal yang sangat penting: tipe key harus cocok

Ini salah satu bagian terpenting dari lecture.

Misalnya kita mempunyai:

const myMap = new Map();

myMap.set(1, "Option A");

Key-nya adalah:

1

yang merupakan Number.

Kalau kita melakukan:

myMap.get(1);

hasilnya:

Option A

Tetapi kalau:

myMap.get("1");

hasilnya:

undefined

Kenapa?

Karena:

1

dan:

"1"

adalah dua key yang berbeda.

18. Map tidak melakukan type coercion pada key

Ini harus kamu ingat.

1

adalah Number.

Sedangkan:

"1"

adalah String.

Di Map:

myMap.set(1, "Hello");

myMap.get(1);   // "Hello"

myMap.get("1"); // undefined

Jadi Map membedakan keduanya.

19. Kenapa ini penting?

Bayangkan kita punya:

myMap
  .set(1, 2013)
  .set(2, 2015)
  .set(3, 2016)
  .set(4, 2020);

Untuk mengambil option pertama:

myMap.get(1);

benar.

Jangan:

myMap.get("1");

Karena "1" bukan key yang sama dengan 1.

20. Map bisa memiliki key yang tipe datanya berbeda

Misalnya:

const map = new Map();

map.set("1", "String");
map.set(1, "Number");
map.set(true, "Boolean");

Sekarang ketiganya adalah entry yang berbeda.

"1"  → "String"
1    → "Number"
true → "Boolean"

Kita bisa mengambil masing-masing:

map.get("1");  // "String"
map.get(1);    // "Number"
map.get(true); // "Boolean"

Ini menunjukkan betapa fleksibelnya key pada Map.

21. Bagaimana kalau key tidak ditemukan?

Misalnya:

const map = new Map();

map.set("name", "Budi");

Kemudian:

map.get("age");

Karena tidak ada key "age":

undefined

Jadi:

map.get(key)

akan menghasilkan undefined jika key tersebut tidak ada.

22. has() untuk mengecek apakah key ada

Nah, daripada mengambil value dan melihat apakah hasilnya undefined, Map mempunyai method:

has()

Sintaks:

myMap.has(key);

Method ini menghasilkan:

true

atau:

false

23. Contoh has()

const myMap = new Map();

myMap.set("name", "Budi");
myMap.set("age", 25);

console.log(myMap.has("name"));

Output:

true

Karena key "name" memang ada.

Sedangkan:

console.log(myMap.has("city"));

Output:

false

Karena key "city" tidak ada.

24. Bedakan has() dan get()

Ini juga penting.

get()

Digunakan ketika kita ingin mendapatkan value.

myMap.get("name");

Hasil:

"Budi"

has()

Digunakan ketika kita hanya ingin mengecek apakah key tersedia.

myMap.has("name");

Hasil:

true

Jadi:

get() → "Berikan saya value-nya."

has() → "Apakah key ini ada?"

25. Menghapus entry menggunakan delete()

Map juga mempunyai:

delete()

Untuk menghapus entry berdasarkan key.

Sintaks:

myMap.delete(key);

Misalnya:

const myMap = new Map();

myMap.set("name", "Budi");
myMap.set("age", 25);
myMap.set("city", "Madiun");

myMap.delete("age");

Sekarang:

"name" → "Budi"
"city" → "Madiun"

Entry "age" sudah dihapus.

26. delete() menggunakan key, bukan value

Misalnya:

myMap.set("name", "Budi");

Untuk menghapusnya:

myMap.delete("name");

Bukan:

myMap.delete("Budi");

Karena yang digunakan untuk mencari entry adalah key.

Ingat:

key → value

delete() mencari berdasarkan:

key

27. delete() menghasilkan boolean

Method delete() juga memberikan informasi apakah entry berhasil dihapus.

Misalnya:

myMap.delete("name");

Jika key "name" ada:

true

Jika key tidak ada:

false

Contoh:

console.log(myMap.delete("name"));

bisa menghasilkan:

true

Sedangkan:

console.log(myMap.delete("unknown"));

menghasilkan:

false

28. Menghapus semua entry dengan clear()

Kalau kita ingin menghapus seluruh isi Map, gunakan:

clear()

Contoh:

const myMap = new Map();

myMap
  .set("name", "Budi")
  .set("age", 25)
  .set("city", "Madiun");

console.log(myMap.size);
// 3

myMap.clear();

console.log(myMap.size);
// 0

Setelah clear():

Map kosong

29. Ringkasan method penting Map

Sejauh lecture ini, ada beberapa method/property yang harus kamu tahu:

30. Perbandingan Map dan Set

Karena kita baru saja belajar Set, sekarang sangat penting membedakan keduanya.

Set

Menyimpan:

value
value
value

Contoh:

const set = new Set([
  "Budi",
  "Andi",
  "Siti"
]);

Tidak ada key-value pair.

Map

Menyimpan:

key → value

Contoh:

const map = new Map();

map.set("name", "Budi");
map.set("age", 25);

Strukturnya:

"name" → "Budi"
"age"  → 25

31. Set vs Map vs Object

Ini juga bagus untuk kamu pahami sejak awal.

• Object modern juga punya Symbol sebagai property key, tetapi bukan berarti key Object bisa sembarang object/number dengan identitas seperti pada Map.

Untuk level dasar, mental modelnya:

Array  → daftar berurutan
Set    → kumpulan value unik
Map    → key → value
Object → data berbentuk property

32. Contoh lengkap dari lecture

Sekarang kita buat versi sederhananya.

const myMap = new Map();

myMap
  .set("question", "In which year was ES6 released?")
  .set(1, 2013)
  .set(2, 2015)
  .set(3, 2016)
  .set(4, 2020)
  .set("correct", 2)
  .set(true, "Correct answer")
  .set(false, "Wrong answer");

Kita sekarang punya:

"question" → "In which year was ES6 released?"
1          → 2013
2          → 2015
3          → 2016
4          → 2020
"correct"  → 2
true       → "Correct answer"
false      → "Wrong answer"

33. Mengambil pertanyaan

const question = myMap.get("question");

console.log(question);

Hasil:

In which year was ES6 released?

34. Mengambil pilihan jawaban

console.log(myMap.get(1));
console.log(myMap.get(2));
console.log(myMap.get(3));
console.log(myMap.get(4));

Output:

2013
2015
2016
2020

35. Mengecek jawaban benar

Kita tahu:

myMap.get("correct")

menghasilkan:

2

Jadi jika user menjawab:

const answer = 2;

kita bisa membandingkan:

const isCorrect = answer === myMap.get("correct");

Hasil:

true

Kalau user menjawab:

const answer = 4;

maka:

const isCorrect = answer === myMap.get("correct");

hasil:

false

36. Menariknya, boolean juga digunakan sebagai key

Karena kita sebelumnya menyimpan:

.set(true, "Correct answer")
.set(false, "Wrong answer")

kita bisa melakukan:

console.log(myMap.get(isCorrect));

Kalau:

isCorrect === true

maka:

myMap.get(true)

menghasilkan:

Correct answer

Kalau:

isCorrect === false

maka:

myMap.get(false)

menghasilkan:

Wrong answer

Ini contoh bagus untuk menunjukkan fleksibilitas key pada Map.

37. Perhatikan bagaimana Map bekerja

Contoh:

const isCorrect = answer === myMap.get("correct");

console.log(myMap.get(isCorrect));

Alurnya:

User memasukkan jawaban
        ↓
Bandingkan dengan correct answer
        ↓
isCorrect = true / false
        ↓
Gunakan true / false sebagai key
        ↓
Ambil value dengan get()
        ↓
"Correct answer" / "Wrong answer"

Jadi satu Map bisa menyimpan berbagai jenis key:

String
Number
Boolean

dan semuanya bisa digunakan untuk mengambil value.

38. Satu hal yang harus sangat kamu ingat: Map bukan Object biasa

Misalnya:

const map = new Map();

map.set("name", "Budi");

Jangan mengambilnya dengan:

map.name

Itu bukan cara kerja Map.

Gunakan:

map.get("name");

Jadi:

Object:
user.name

Map:
map.get("name")

Untuk memasukkan data:

Object:
user.name = "Budi"

Map:
map.set("name", "Budi")

39. Mental model yang paling mudah

Bayangkan kamu mempunyai kamus.

Key              Value
────────────────────────────
"apple"       →  "apel"
"book"        →  "buku"
"house"       →  "rumah"

Kalau kamu bertanya:

Apa arti "book"?

Kamu menggunakan:

dictionary.get("book");

dan mendapatkan:

"buku"

Itulah konsep dasar Map:

Berikan key → Map memberikan value.

40. Cheat sheet

// Membuat Map
const map = new Map();

// Menambahkan data
map.set("name", "Budi");

// Menambahkan data dengan key Number
map.set(1, "One");

// Menambahkan data dengan key Boolean
map.set(true, "Yes");

// Mengambil value
map.get("name");

// Mengecek key
map.has("name");

// Menghapus satu entry
map.delete("name");

// Menghapus semua entry
map.clear();

// Jumlah entry
map.size;

Dan karena set() mengembalikan Map:

const map = new Map()
  .set("name", "Budi")
  .set("age", 25)
  .set("city", "Madiun");

41. Kesimpulan utama

Kalau diringkas, lecture ini mengajarkan 7 hal penting.

1. Map adalah struktur data key-value

key → value

2. Key dan value bisa memiliki berbagai tipe data

Misalnya:

map.set("name", "Budi");
map.set(1, 2013);
map.set(true, "Correct");

3. Buat Map dengan new Map()

const map = new Map();

4. Tambahkan data dengan set()

map.set(key, value);

Dan set() mengembalikan Map sehingga bisa di-chain:

map
  .set("name", "Budi")
  .set("age", 25);

5. Ambil value dengan get()

map.get(key);

Contoh:

map.get("name");

6. Cek keberadaan key dengan has()

map.has("name");

Hasil:

true / false

7. Hapus data dengan delete() atau clear()

Satu entry:

map.delete("name");

Semua entry:

map.clear();

🧠 Mental model terakhir

Kalau kamu melihat:

const map = new Map();

langsung bayangkan sebuah kamus/tabel:

              Map
               │
       ┌───────┴────────┐
       ↓                ↓
      key             value
       │                │
   "name"  ─────────→ "Budi"
      1     ─────────→ 2013
    true    ─────────→ "Benar"

Lalu ingat empat operasi utama:

set(key, value)
     ↓
"Masukkan data"

get(key)
     ↓
"Ambil value"

has(key)
     ↓
"Apakah key ini ada?"

delete(key)
     ↓
"Hapus entry ini"

Dan satu perbedaan yang wajib banget kamu ingat dari lecture ini:

map.set(1, "Hello");

map.get(1);   // "Hello"
map.get("1"); // undefined

1 dan "1" adalah key yang berbeda di Map.

Kalau Set bisa kamu ingat sebagai “kumpulan value unik”, maka Map bisa kamu ingat sebagai “kamus yang memetakan key ke value”. Itu fondasi yang akan sangat membantu ketika masuk ke materi Map yang lebih lanjut.