Masukkan Password
89 Perulangan pada Kunci Objek
Lecture ini membahas cara melakukan looping terhadap object, khususnya menggunakan:
Object.keys()Object.values()Object.entries()
Ini penting karena Array bisa langsung di-loop, sedangkan Object biasa tidak bisa langsung di-loop dengan for...of. Lecture ini menjelaskan cara “mengubah” isi object menjadi array terlebih dahulu, baru kemudian kita loop.
1. Masalah utama: Object tidak iterable
Misalnya kita punya object:
const user = {
name: "John",
age: 28,
gender: "male"
};
Object tersebut punya 3 property:
name → "John"
age → 28
gender → "male"
Kalau kita punya Array:
const users = ["John", "Mark", "Steve"];
for (const user of users) {
console.log(user);
}
Bisa.
Karena Array adalah iterable.
String juga iterable:
for (const char of "Hello") {
console.log(char);
}
Tetapi object biasa:
const user = {
name: "John",
age: 28
};
for (const item of user) {
console.log(item);
}
❌ Tidak bisa.
Karena object biasa bukan iterable.
2. Lalu bagaimana cara looping Object?
Pertama kita harus menentukan:
Apa yang ingin kita loop dari object?
Ada 3 kemungkinan:
OBJECT
│
├── Property names → Object.keys()
│
├── Property values → Object.values()
│
└── Name + value → Object.entries()
Contohnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
Kita bisa mendapatkan:
Property names
Object.keys(user);
hasil:
["name", "age", "gender"]
Property values
Object.values(user);
hasil:
["John", 28, "male"]
Property names + values
Object.entries(user);
hasil:
[
["name", "John"],
["age", 28],
["gender", "male"]
]
Nah, ini inti lecture-nya.
3. Object.keys()
Mari mulai dari yang paling sederhana.
const user = {
name: "John",
age: 28,
gender: "male"
};
const keys = Object.keys(user);
console.log(keys);
Hasil:
["name", "age", "gender"]
Perhatikan:
Object.keys()mengambil nama property dari object.
Bukan value-nya.
Visualisasinya
Object awal:
user
│
├── name → "John"
├── age → 28
└── gender → "male"
Setelah:
Object.keys(user)
menjadi:
[
"name",
"age",
"gender"
]
Jadi seperti kita mengambil label-label laci.
Object
┌─────────────┐
│ name John │
│ age 28 │
│ gender male │
└─────────────┘
↓
Object.keys()
↓
["name", "age", "gender"]
Karena hasilnya adalah Array, sekarang kita bisa menggunakan forEach(), for, for...of, dan sebagainya.
4. Loop menggunakan Object.keys()
Misalnya kita ingin mencetak:
User object has property name
User object has property age
User object has property gender
Kita bisa:
const user = {
name: "John",
age: 28,
gender: "male"
};
const keys = Object.keys(user);
keys.forEach((key) => {
console.log("User object has property " + key);
});
Output:
User object has property name
User object has property age
User object has property gender
Kenapa bisa?
Karena:
Object.keys(user)
menghasilkan:
["name", "age", "gender"]
Kemudian:
keys.forEach(...)
loop Array tersebut.
5. Ingat kembali forEach()
Kita sudah belajar sebelumnya:
array.forEach((element) => {
// lakukan sesuatu
});
Jadi:
keys.forEach((key) => {
console.log(key);
});
akan berjalan seperti:
Iteration 1
key = "name"
Iteration 2
key = "age"
Iteration 3
key = "gender"
Makanya output:
name
age
gender
Lecture juga menjelaskan bahwa selain forEach(), Array hasil Object.keys() tersebut dapat di-loop menggunakan for...of, for, atau while.
6. Object.keys() juga bisa mengetahui jumlah property
Ini salah satu penggunaan yang cukup sering muncul di interview.
Misalnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
Kita ingin mengetahui:
Ada berapa property di dalam object?
Gunakan:
Object.keys(user).length
Hasil:
3
Karena:
Object.keys(user)
menghasilkan:
["name", "age", "gender"]
dan Array tersebut mempunyai:
.length
yaitu:
3
Jadi:
console.log(Object.keys(user).length);
Output:
3
Lecture juga menggunakan contoh ini untuk menunjukkan bahwa Object.keys() mengembalikan Array, sehingga .length bisa digunakan.
7. Object.values()
Sekarang bagaimana kalau kita tidak membutuhkan nama property, tetapi hanya membutuhkan value?
Misalnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
Kita ingin mendapatkan:
John
28
male
Gunakan:
Object.values(user);
Hasil:
["John", 28, "male"]
Jadi:
Object.keys()
↓
ambil NAMA property
Object.values()
↓
ambil VALUE property
Lecture menunjukkan bahwa Object.values() juga menghasilkan sebuah Array.
8. Loop Object.values()
Contohnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
const values = Object.values(user);
for (let i = 0; i < values.length; i++) {
console.log(values[i]);
}
Hasil:
John
28
male
Perhatikan alurnya:
OBJECT
↓
Object.values(user)
↓
["John", 28, "male"]
↓
for loop
↓
John
28
male
9. Object.keys() vs Object.values()
Ini bagian yang sangat penting untuk dihafalkan.
| Method | Menghasilkan |
|---|---|
Object.keys(obj) | nama property |
Object.values(obj) | value property |
Object.entries(obj) | nama + value |
Contoh:
const user = {
name: "John",
age: 28
};
keys
Object.keys(user);
["name", "age"]
values
Object.values(user);
["John", 28]
10. Object.entries()
Sekarang kita masuk ke method ketiga.
Bagaimana kalau kita membutuhkan nama property DAN value-nya sekaligus?
Gunakan:
Object.entries(user);
Misalnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
const entries = Object.entries(user);
console.log(entries);
Hasilnya:
[
["name", "John"],
["age", 28],
["gender", "male"]
]
Ini sedikit lebih kompleks.
Karena hasilnya adalah Array yang berisi Array.
Atau disebut:
nested array
Lecture menjelaskan struktur ini sebagai Array yang setiap elemennya adalah Array berisi dua item: property name dan property value.
11. Memahami Object.entries() pelan-pelan
Misalnya:
const user = {
name: "John",
age: 28,
gender: "male"
};
Secara konsep:
user
│
├── name → John
├── age → 28
└── gender → male
Setelah:
Object.entries(user)
menjadi:
[
["name", "John"],
["age", 28],
["gender", "male"]
]
Sekarang kita bisa melihat masing-masing entry:
entry 0
["name", "John"]
↑ ↑
index 0 index 1
entry 1
["age", 28]
↑ ↑
index 0 index 1
entry 2
["gender", "male"]
↑ ↑
index 0 index 1
Jadi setiap entry mempunyai pola:
[propertyName, propertyValue]
12. Mengambil property name dan value
Misalnya:
entries[0]
hasilnya:
["name", "John"]
Kemudian:
entries[0][0]
hasil:
"name"
Sedangkan:
entries[0][1]
hasil:
"John"
Jadi:
entries[i][0] → property name
entries[i][1] → property value
Ini persis yang digunakan dalam lecture.
13. Loop Object.entries()
Contoh:
const user = {
name: "John",
age: 28,
gender: "male"
};
const entries = Object.entries(user);
for (let i = 0; i < entries.length; i++) {
console.log(
`Property name is ${entries[i][0]} and property value is ${entries[i][1]}`
);
}
Output:
Property name is name and property value is John
Property name is age and property value is 28
Property name is gender and property value is male
Alurnya:
entries[0]
↓
["name", "John"]
↓
entries[0][0] → "name"
entries[0][1] → "John"
Kemudian:
entries[1]
↓
["age", 28]
↓
entries[1][0] → "age"
entries[1][1] → 28
Dan seterusnya.
14. Ada cara yang lebih enak: destructuring
Karena kita sudah belajar Array Destructuring, sebenarnya kode:
entries[i][0]
entries[i][1]
bisa dibuat lebih mudah dibaca.
Misalnya:
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}
Hasil:
name John
age 28
gender male
Kenapa bisa?
Karena setiap entry berbentuk:
["name", "John"]
dan kita destructure:
[key, value]
menjadi:
key = "name"
value = "John"
Untuk entry berikutnya:
["age", 28]
menjadi:
key = "age"
value = 28
Ini sangat berguna dan akan sering kamu lihat di JavaScript modern.
15. Hubungkan dengan Array Destructuring
Kita sudah belajar:
const person = ["John", "Smith", 28];
const [firstName, lastName, age] = person;
Sekarang Object.entries() menghasilkan:
[
["name", "John"],
["age", 28]
]
Jadi kita bisa:
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}
Secara mental:
["name", "John"]
↓
[key, value]
↓
key = "name"
value = "John"
Jadi ini adalah kombinasi:
Object.entries + Array Destructuring + for…of
16. Analogi sederhana: lemari
Bayangkan object adalah sebuah lemari:
USER OBJECT
┌─────────────────────┐
│ name → John │
│ age → 28 │
│ gender → male │
└─────────────────────┘
Object.keys()
Kita hanya mengambil label laci:
["name", "age", "gender"]
Object.values()
Kita hanya mengambil isi laci:
["John", 28, "male"]
Object.entries()
Kita mengambil label + isi:
[
["name", "John"],
["age", 28],
["gender", "male"]
]
Ini cara paling gampang mengingatnya.
17. Perbandingan dengan method Array yang sudah kita pelajari
Kamu sekarang sudah punya cukup banyak method Array.
Coba kita bedakan:
Array
│
├── forEach() → proses setiap element
├── map() → transform setiap element
├── filter() → pilih element
├── find() → cari satu element
├── findIndex() → cari index
├── sort() → urutkan
└── includes() → cek apakah ada
Sedangkan:
Object
│
├── Object.keys()
│ ↓
│ ambil property names
│
├── Object.values()
│ ↓
│ ambil property values
│
└── Object.entries()
↓
ambil name + value
Dan setelah mendapatkan Array dari object, kita bisa memakai method Array:
Object.keys(user).forEach(...)
atau:
Object.values(user).forEach(...)
atau:
Object.entries(user).forEach(...)
18. Kenapa Object.keys() menghasilkan Array?
Ini konsep yang sangat penting.
Object:
const user = {
name: "John",
age: 28
};
tidak iterable secara langsung untuk for...of.
Maka:
Object.keys(user)
mengubah informasi yang kita butuhkan menjadi:
["name", "age"]
Sekarang kita punya Array.
Dan Array iterable.
Sehingga:
Object
↓
Object.keys()
↓
Array
↓
forEach / for...of / for
Begitu juga:
Object
↓
Object.values()
↓
Array
↓
loop
dan:
Object
↓
Object.entries()
↓
Array of Arrays
↓
loop
19. Kapan menggunakan masing-masing?
Ini cheat sheet yang paling penting:
Kalau hanya butuh nama property
Gunakan:
Object.keys(object)
Contoh:
const user = {
name: "John",
age: 28
};
Object.keys(user).forEach((key) => {
console.log(key);
});
Output:
name
age
Kalau hanya butuh value
Gunakan:
Object.values(object)
Contoh:
Object.values(user).forEach((value) => {
console.log(value);
});
Output:
John
28
Kalau butuh nama + value
Gunakan:
Object.entries(object)
Contoh:
Object.entries(user).forEach(([key, value]) => {
console.log(key, value);
});
Output:
name John
age 28
20. Contoh yang lebih realistis
Misalnya data movie di project CIN/Cinix:
const movie = {
id: 101,
name: "Bad Boys",
rating: 4.5,
releaseYear: 2024
};
Hanya nama property
console.log(Object.keys(movie));
Hasil:
["id", "name", "rating", "releaseYear"]
Hanya value
console.log(Object.values(movie));
Hasil:
[101, "Bad Boys", 4.5, 2024]
Nama + value
console.log(Object.entries(movie));
Hasil:
[
["id", 101],
["name", "Bad Boys"],
["rating", 4.5],
["releaseYear", 2024]
]
Misalnya ingin menampilkan semua informasi:
for (const [key, value] of Object.entries(movie)) {
console.log(`${key}: ${value}`);
}
Hasil:
id: 101
name: Bad Boys
rating: 4.5
releaseYear: 2024
21. Hubungannya dengan Object.groupBy() yang baru kita pelajari
Kamu sebelumnya belajar:
Object.groupBy(...)
Sekarang ada beberapa method Object yang perlu kamu bedakan:
Object.keys()
↓
"APA SAJA NAMA PROPERTY-NYA?"
Object.values()
↓
"APA SAJA VALUE-NYA?"
Object.entries()
↓
"NAMA PROPERTY + VALUE-NYA APA?"
Object.groupBy()
↓
"DATA-DATA INI MASUK KE KELOMPOK MANA?"
Jadi jangan sampai tertukar.
22. Kesalahan yang sering dilakukan pemula
❌ Salah 1: langsung for...of pada object
for (const item of user) {
console.log(item);
}
Object biasa tidak iterable.
Gunakan:
for (const key of Object.keys(user)) {
console.log(key);
}
atau:
for (const value of Object.values(user)) {
console.log(value);
}
atau:
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}
❌ Salah 2: mengira Object.keys() memberikan value
Object.keys(user);
Bukan:
["John", 28, "male"]
Tetapi:
["name", "age", "gender"]
❌ Salah 3: mengira Object.values() memberikan nama property
Object.values(user);
Bukan:
["name", "age", "gender"]
Tetapi:
["John", 28, "male"]
❌ Salah 4: lupa struktur Object.entries()
Object.entries(user);
bukan:
["name", "John", "age", 28]
Tetapi:
[
["name", "John"],
["age", 28]
]
Jadi ada nested array.
23. Ringkasan super penting
Kalau kamu melihat object:
const user = {
name: "John",
age: 28,
gender: "male"
};
ingat pola ini:
OBJECT
│
┌────────────┼────────────┐
↓ ↓ ↓
Object.keys Object.values Object.entries
│ │ │
↓ ↓ ↓
["name", ["John", [
"age", 28, ["name","John"],
"gender"] "male"] ["age",28],
["gender","male"]
]
Atau versi paling singkat:
keys() → KEY
values() → VALUE
entries() → KEY + VALUE
24. Cheat sheet untuk dihafalkan
| Yang dibutuhkan | Gunakan |
|---|---|
| Nama property | Object.keys(obj) |
| Value property | Object.values(obj) |
| Nama + value | Object.entries(obj) |
| Jumlah property | Object.keys(obj).length |
| Loop nama property | Object.keys(obj).forEach(...) |
| Loop value | Object.values(obj).forEach(...) |
| Loop nama + value | Object.entries(obj).forEach(...) |
Dan pola modern yang sangat sering digunakan:
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}
Mental model terakhir
Object tidak kita loop langsung. Kita tentukan dulu apa yang mau diambil dari object, ubah menjadi Array dengan
Object.keys(),Object.values(), atauObject.entries(), lalu Array tersebut kita loop.
OBJECT
↓
Pilih yang dibutuhkan
↓
keys / values / entries
↓
ARRAY
↓
forEach / for...of / for / map / filter / dll.
Ini juga menjadi jembatan penting dari materi Object → Array → looping → destructuring, yang nantinya akan sangat sering muncul ketika mengolah data dari API.