Map dan Set — Menghapus Duplikat dan Tally Berkunci

Kumpulkan tag yang menempel di sebuah produk ke dalam array, dan tag yang sama terus muncul berulang — buat tahu sebenarnya ada berapa jenis yang berbeda, kamu harus mengecek pakai includes tiap kali. Mau menyimpan pasangan key-value, seperti jumlah stok berdasarkan product ID, juga kena masalah yang sama kalau cuma pakai array: kamu butuh dua array terpisah untuk ID dan jumlah yang selaras berdasarkan posisi, dan key sebuah object cuma bisa berupa string dan symbol, jadi angka nggak bisa langsung dipakai sebagai key.

Artikel ini membahas Set, yang nggak pernah menyimpan duplikat, dan Map, yang bisa pakai lebih dari sekadar string sebagai key.

Menghapus Duplikat — Membangun Set

Misalnya kamu mau tahu berapa banyak tag berbeda yang sebenarnya dipakai di daftar produk yang ditandai tag. Dalam array biasa, tag yang sama muncul lebih dari sekali, jadi menghitungnya apa adanya bikin jumlahnya menggelembung. Kamu perlu struktur data yang sejak awal menyimpan value tanpa duplikat.

Set (struktur data yang menyimpan tiap value cuma sekali) dibangun dengan memberikan sebuah array, seperti new Set(tags). new di depan adalah syntax yang kamu taruh sebelum membuat instance baru dari jenis struktur data tetap, seperti Set atau Map.

Karena value yang sama tidak pernah menambah duplikat, membaca size saja memberitahumu jumlah value yang berbeda. Apakah dua value dianggap sama mengikuti aturan yang sama seperti ===.

Set bukan array, jadi index seperti uniqueTags[0] nggak akan mengembalikan apa-apa. Kalau butuh dalam bentuk array, konversikan pakai spread syntax, seperti [...uniqueTags].

Urutannya tetap persis seperti saat item pertama kali ditambahkan, jadi urutan kemunculan pertama di array aslinya terbawa tanpa berubah.

const tags = ["Sale", "New", "Sale", "Free Shipping"];

// Berikan sebuah array, dan kamu dapat Set dengan duplikat terhapus
const uniqueTags = new Set(tags);
console.log(uniqueTags.size);              // 3

// Konversi balik ke array dengan spread syntax (urutan penambahan terjaga)
console.log([...uniqueTags].join(", "));   // Sale, New, Free Shipping

// Array aslinya tidak tersentuh
console.log(tags.length);                  // 4

// Kamu juga bisa mulai dari Set kosong
const empty = new Set();
console.log(empty.size);                   // 0

Ambil tag berbeda yang sebenarnya dipakai, dari array tag yang menempel di produk. tags sudah dideklarasikan.

① Tampilkan jumlah array aslinya.

② Bangun struktur data dengan duplikat terhapus, dan tampilkan jumlahnya.

③ Konversi hasil dedup itu balik jadi array, digabung dengan ", ", dan tampilkan.

④ Tampilkan item ke-2 dari array ③, memastikan urutannya terjaga.

(Kalau berjalan dengan benar, penjelasan akan muncul.)

Menambah dan Menghapus Value — add, has, dan delete

Kadang kamu mau mencatat ID pengunjung dan menghitung orang yang sama sebagai 1 tidak peduli berapa kali dia balik lagi. Simpan ini di array, dan tiap penambahan berarti mengecek dengan includes sebelum push — makin banyak catatannya menumpuk, makin lama pengecekan itu makan waktu.

Set punya add untuk menambah value, has untuk mengecek apakah dia punya, delete untuk menghapus, dan size untuk jumlahnya. add tidak melakukan apa-apa saat value yang sama masuk, jadi kamu tidak pernah perlu mengecek sebelum menambah.

has mengembalikan true atau false, dan delete mengembalikan apakah dia benar-benar menghapus sesuatu.

const visitors = new Set(["u-102", "u-337"]);

// Cek apakah dia punya
console.log(visitors.has("u-102"));   // true
console.log(visitors.has("u-999"));   // false

// Tambah satu. Value yang sama tidak mengubah jumlahnya
visitors.add("u-541");
console.log(visitors.size);           // 3
visitors.add("u-541");
console.log(visitors.size);           // 3

// Hapus satu. Apakah dia benar-benar menghapus sesuatu, kembali sebagai hasil
console.log(visitors.delete("u-102"));  // true
console.log(visitors.delete("u-102"));  // false (sudah hilang)
console.log(visitors.size);             // 2

Operasikan catatan pengunjung hari ini dan pastikan bagaimana jumlahnya berubah. visitors sudah dideklarasikan.

① Tampilkan apakah u-337 sudah tercatat.

② Catat u-999, dan tampilkan jumlahnya.

③ Catat u-999 yang sama lagi, dan tampilkan jumlahnya.

④ Hapus u-102 dari catatan, dan tampilkan apakah dia masih ada.

Menyimpan Key-Value Pair — Map

Kadang kamu mau menyimpan key dan value sebagai pasangan, seperti jumlah stok berdasarkan product ID. Object juga bisa melakukan ini, tapi untuk menghitung key yang diputuskan saat runtime — seperti ID — dan menyesuaikannya seiring waktu, struktur data dengan method khusus lebih cocok dipakai.

Map (struktur data yang menyimpan key-value pair sesuai urutan pendaftarannya) dibangun dengan new Map(), dan kamu mendaftarkan entri dengan set(key, value). Untuk membaca satu, pakai get(key); untuk mengecek apakah satu ada, has(key); untuk jumlahnya, size.

set key yang sama lagi, dan value-nya ditimpa. Untuk mulai dengan entri yang sudah terisi, berikan array pasangan, seperti new Map([["P-001", 12], ["P-002", 5]]).

const stock = new Map();

// Daftarkan pasangan dengan set
stock.set("P-001", 12);
stock.set("P-002", 5);
console.log(stock.size);            // 2

// Cari value dari key dengan get
console.log(stock.get("P-002"));    // 5
console.log(stock.get("P-999"));    // undefined
console.log(stock.has("P-999"));    // false

// set key yang sama lagi, dan itu menimpa
stock.set("P-001", 8);
console.log(stock.get("P-001"));    // 8
console.log(stock.size);            // 2 (jumlahnya tidak bertambah)

// Kamu juga bisa membangunnya dengan pasangan sudah terisi
const prices = new Map([["P-001", 3980], ["P-002", 2480]]);
console.log(prices.get("P-001"));   // 3980

Value Sebuah Map Tidak Bisa Dibaca dengan Dot Notation

Tulis stock["P-001"] alih-alih stock.get("P-001"), dan kamu tidak akan dapat value-nya kembali. Syntax itu mencari property di object Map itu sendiri, yang tidak ada hubungannya dengan pasangan yang kamu daftarkan, jadi dia mengembalikan undefined. Rutekan pembacaan dan penulisan lewat get dan set.

Bangun struktur data yang menyimpan jumlah stok berdasarkan product ID. stock sudah dideklarasikan, kosong.

① Daftarkan P-001 sebagai 12, P-002 sebagai 5, dan P-003 sebagai 3, lalu tampilkan jumlahnya.

② Tampilkan jumlah stok P-002.

③ Tampilkan jumlah stok untuk P-999 yang belum terdaftar.

④ Perbarui stok P-001 jadi 4, dan tampilkan value-nya setelah diperbarui.

Memilih Antara Map dan Object — Type Key dan Urutan

Karena dia menyimpan key dan value sama seperti object, kamu memilih di antara keduanya. Saat key-nya tetap di waktu kamu menulis kodenya, seperti field settings, object cocok; saat kamu menghitung key yang bertambah saat runtime, seperti ID atau tanggal, Map lebih mudah dikerjakan.

Type key dan urutan itulah yang jadi dasar keputusanmu.

Key sebuah object dikonversi jadi string, jadi bahkan menulis record[2026], key sebenarnya adalah "2026". Map memakai apa pun value yang kamu berikan sebagai key persis apa adanya, jadi number 2026 dan string "2026" diperlakukan sebagai key berbeda.

Urutannya juga bekerja berbeda — Map selalu menjaga urutan pendaftarannya.

Untuk mendaftar isi sebuah Map, tulis [...stock.entries()] untuk mengonversinya jadi array pasangan [key, value], masing-masing array 2 element. Itu membiarkanmu mengambil 1 pasangan satu per satu, seperti entries[0]. Mengulangi langkah yang sama untuk tiap pasangan, berapa pun jumlahnya, dibahas lagi di artikel tentang loop.

Saat kamu cuma perlu key-nya, pakai stock.keys() — tapi karena yang dikembalikan bukan array, kamu tidak bisa langsung merangkai join padanya. Tulis [...stock.keys()] untuk mengonversinya jadi array dulu.

const scores = new Map([["math", 80]]);

// Map menjaga key number sebagai number
scores.set(2026, "this year's tally");
console.log(scores.get(2026));               // this year's tally
console.log(scores.get("2026"));             // undefined (key yang berbeda)

// Key sebuah object dikonversi jadi string
const record = {};
record[2026] = "this year's tally";
console.log(Object.keys(record)[0]);         // 2026
console.log(typeof Object.keys(record)[0]);  // string
console.log(record["2026"]);                 // this year's tally (diperlakukan sebagai key sama)

// Konversi keys() / entries() jadi array dengan spread syntax sebelum dipakai
console.log([...scores.keys()].join(", "));   // math, 2026

const pairs = [...scores.entries()];
console.log(pairs[0].join(": "));             // math: 80

// Object mengurutkan key mirip integer duluan
const ranking = {};
ranking[3] = "c";
ranking[1] = "a";
console.log(Object.keys(ranking).join(", "));  // 1, 3

Daftarkan isi sebuah Map stock, lalu pastikan perbedaan yang dibuat type key. stock sudah dideklarasikan, dengan 3 pasangan terdaftar.

① Ubah hanya key yang terdaftar jadi array, dan tampilkan digabung dengan ", ".

② Konversikan 3 pasangan jadi array pasangan [key, value], dan tampilkan tiap satu diformat sebagai "key: value" dalam 3 baris.

③ Daftarkan "Annual Ranking" dengan number 2026 sebagai key, lalu ambil kembali dengan key yang sama itu untuk ditampilkan.

④ Ambil entri yang sama dengan string "2026" sebagai gantinya, dan tampilkan apa yang kembali.