Masukkan Password
80 Metode groupBy()
Lecture ini memperkenalkan Object.groupBy(), sebuah fitur JavaScript modern yang mulai tersedia di ES2024. Konsepnya sangat berguna karena kita sering punya Array berisi banyak data, lalu ingin mengelompokkan data tersebut berdasarkan kategori tertentu.
Kalau lecture sebelumnya banyak membahas:
filter() → memilih data
sort() → mengurutkan data
find() → mencari satu data
maka sekarang:
groupBy() → MENGELOMPOKKAN data
1. Apa itu groupBy()?
Bayangkan kita punya data:
let numbers = [1, 2, 3, 4, 5, 6];
Kita ingin mengelompokkan:
genap:
2, 4, 6
ganjil:
1, 3, 5
Tanpa groupBy(), kita mungkin harus membuat dua Array sendiri:
let even = [];
let odd = [];
numbers.forEach((num) => {
if (num % 2 === 0) {
even.push(num);
} else {
odd.push(num);
}
});
Hasilnya:
even // [2, 4, 6]
odd // [1, 3, 5]
Dengan groupBy(), kita bisa memberitahu JavaScript:
“Untuk setiap element, tentukan dia masuk kategori apa.”
2. Sintaks Object.groupBy()
Sintaks dasarnya:
Object.groupBy(iterable, callback)
Ada dua argument.
Object.groupBy(
iterable,
callback
)
Argument pertama
iterable
Data yang mau kita kelompokkan.
Contohnya:
[1, 2, 3, 4, 5]
atau Array object:
[
{ name: "John", city: "London" },
{ name: "Mark", city: "Paris" }
]
Argument kedua
callback
Function yang menentukan:
“Element ini harus masuk kelompok yang mana?”
3. Kenapa namanya Object.groupBy()?
Ini penting.
Lecture menekankan bahwa groupBy() bukan Array method.
Kita tidak menulis:
numbers.groupBy(...)
Melainkan:
Object.groupBy(...)
Kenapa?
Karena groupBy() adalah static method pada Object.
Bandingkan:
Array method
movies.filter(...)
movies.map(...)
movies.find(...)
movies.sort(...)
Method dipanggil dari Array.
Sedangkan:
Object.groupBy(...)
dipanggil dari Object.
Jadi secara konsep:
Array
│
├── filter()
├── map()
├── find()
├── sort()
└── forEach()
Object
│
└── groupBy()
4. Contoh pertama: mengelompokkan angka genap dan ganjil
Kita punya:
let numbers = [1, 2, 3, 4, 5, 6];
Kita ingin:
even → [2, 4, 6]
odd → [1, 3, 5]
Code:
let grouped = Object.groupBy(
numbers,
(num) => {
if (num % 2 === 0) {
return "even";
} else {
return "odd";
}
}
);
Kemudian:
console.log(grouped);
Hasil konseptual:
{
even: [2, 4, 6],
odd: [1, 3, 5]
}
Perhatikan bahwa hasilnya Object, bukan Array.
5. Bagaimana groupBy() bekerja?
Ini bagian paling penting.
Kita punya:
numbers = [1, 2, 3, 4, 5, 6]
groupBy() akan memproses setiap element.
Secara mental model:
numbers
↓
┌───────┐
│ 1 │ → callback → "odd"
├───────┤
│ 2 │ → callback → "even"
├───────┤
│ 3 │ → callback → "odd"
├───────┤
│ 4 │ → callback → "even"
├───────┤
│ 5 │ → callback → "odd"
├───────┤
│ 6 │ → callback → "even"
└───────┘
Kemudian JavaScript mengelompokkan berdasarkan hasil callback:
"odd"
↓
[1, 3, 5]
"even"
↓
[2, 4, 6]
Hasil akhirnya:
{
odd: [1, 3, 5],
even: [2, 4, 6]
}
6. Apa fungsi return di callback?
Ini inti dari groupBy().
Perhatikan:
(num) => {
if (num % 2 === 0) {
return "even";
} else {
return "odd";
}
}
return di sini bukan mengembalikan hasil akhir groupBy().
return memberitahu groupBy():
“Element ini masuk kategori apa?”
Misalnya:
num = 4
maka:
return "even";
Artinya:
4 → kelompok "even"
Kalau:
num = 5
maka:
return "odd";
Artinya:
5 → kelompok "odd"
7. Analogi sederhana: kotak
Bayangkan kamu punya banyak barang:
🍎 🍌 🍎 🍊 🍌 🍎
Kamu ingin memasukkannya ke kotak berdasarkan jenis buah.
Apel
├── 🍎
├── 🍎
└── 🍎
Pisang
├── 🍌
└── 🍌
Jeruk
└── 🍊
groupBy() seperti petugas yang bertanya kepada setiap barang:
“Kamu masuk kategori apa?”
Callback-lah yang menjawab.
element
↓
callback
↓
category/key
↓
masukkan ke kelompok tersebut
8. Istilah penting: key
Lecture mengatakan callback harus mengembalikan key.
Misalnya:
return "even";
Maka:
"even"
adalah key.
Dan:
return "odd";
adalah key lainnya.
Hasil:
{
even: [...],
odd: [...]
}
Jadi:
callback
↓
menghasilkan key
↓
groupBy menggunakan key
↓
element dimasukkan ke group tersebut
9. groupBy() tidak menentukan kategorinya sendiri
Ini juga penting.
JavaScript tidak tahu bahwa:
2 = even
3 = odd
Kita yang memberitahu lewat callback.
Misalnya:
(num) => {
if (num % 2 === 0) {
return "even";
}
return "odd";
}
Kita membuat aturan:
remainder 0 → even
selain itu → odd
10. Kenapa menggunakan %?
Kamu sudah belajar % sebelumnya.
num % 2
menghasilkan sisa pembagian dengan 2.
Contoh:
4 % 2 // 0
6 % 2 // 0
8 % 2 // 0
Artinya genap.
Sedangkan:
3 % 2 // 1
5 % 2 // 1
7 % 2 // 1
Artinya ganjil.
Jadi:
num % 2 === 0
berarti:
Apakah angka ini genap?
11. Sekarang contoh kedua: people
Contoh kedua lebih menarik karena Array berisi object.
Misalnya:
let people = [
{
name: "John",
age: 28,
city: "New York"
},
{
name: "Mark",
age: 30,
city: "London"
},
{
name: "Steve",
age: 25,
city: "New York"
},
{
name: "David",
age: 35,
city: "London"
},
{
name: "Peter",
age: 29,
city: "Paris"
}
];
Kita ingin mengelompokkan berdasarkan:
city
Hasil yang kita inginkan:
New York
├── John
└── Steve
London
├── Mark
└── David
Paris
└── Peter
12. Menggunakan Object.groupBy()
Code:
let peopleByCity = Object.groupBy(
people,
(person) => {
return person.city;
}
);
Kemudian:
console.log(peopleByCity);
hasilnya kira-kira:
{
"New York": [
{
name: "John",
age: 28,
city: "New York"
},
{
name: "Steve",
age: 25,
city: "New York"
}
],
"London": [
{
name: "Mark",
age: 30,
city: "London"
},
{
name: "David",
age: 35,
city: "London"
}
],
"Paris": [
{
name: "Peter",
age: 29,
city: "Paris"
}
]
}
13. Mari kita bedah callback-nya
Callback:
(person) => {
return person.city;
}
Misalnya element pertama:
{
name: "John",
age: 28,
city: "New York"
}
Maka:
person.city
menghasilkan:
"New York"
Berarti:
John
↓
"New York"
↓
masuk group "New York"
Element kedua:
{
name: "Mark",
age: 30,
city: "London"
}
maka:
person.city
menghasilkan:
"London"
Berarti:
Mark
↓
"London"
↓
masuk group "London"
14. Proses lengkapnya
Misalnya:
people = [
John,
Mark,
Steve,
David,
Peter
];
groupBy() secara konsep melakukan:
John
↓
city = "New York"
↓
New York group
Mark
↓
city = "London"
↓
London group
Steve
↓
city = "New York"
↓
New York group
David
↓
city = "London"
↓
London group
Peter
↓
city = "Paris"
↓
Paris group
Hasil:
New York → [John, Steve]
London → [Mark, David]
Paris → [Peter]
15. Perhatikan: object aslinya tetap ada
groupBy() tidak mengubah object person menjadi String.
Misalnya:
John
tetap:
{
name: "John",
age: 28,
city: "New York"
}
Yang digunakan untuk menentukan kelompok hanya:
person.city
Jadi:
person object
│
┌────────┼────────┐
↓ ↓ ↓
name age city
│
↓
"New York"
│
↓
group key
Dan object lengkapnya dimasukkan ke Array group.
16. groupBy() menghasilkan Object yang property-nya adalah kategori
Ini adalah karakteristik penting.
Misalnya:
Object.groupBy(
people,
person => person.city
);
menghasilkan:
{
"New York": [...],
"London": [...],
"Paris": [...]
}
Jadi:
key
↓
Array
Strukturnya:
grouped
│
├── "New York" → [person, person]
├── "London" → [person, person]
└── "Paris" → [person]
17. Kenapa hasilnya Object?
Karena kita sedang membuat hubungan:
kategori → kumpulan data
Misalnya:
{
action: [...],
comedy: [...],
drama: [...]
}
Ini sangat cocok direpresentasikan sebagai Object.
Kamu bisa mengakses group tertentu:
peopleByCity["London"]
hasil:
[
{
name: "Mark",
...
},
{
name: "David",
...
}
]
Atau:
peopleByCity["Paris"]
hasil:
[
{
name: "Peter",
...
}
]
18. groupBy() vs filter()
Ini sangat penting karena kamu baru saja belajar filter() di project.
filter()
Tujuannya:
memilih element yang memenuhi kondisi.
Misalnya:
let londonPeople = people.filter((person) => {
return person.city === "London";
});
hasil:
[
Mark,
David
]
groupBy()
Tujuannya:
membuat beberapa kelompok sekaligus berdasarkan key.
let peopleByCity = Object.groupBy(
people,
person => person.city
);
hasil:
{
London: [Mark, David],
New York: [John, Steve],
Paris: [Peter]
}
Jadi:
filter()
↓
"Siapa yang cocok dengan kondisi ini?"
groupBy()
↓
"Kelompokkan semua data berdasarkan kategori masing-masing."
19. Analogi filter() vs groupBy()
Bayangkan ada 10 siswa.
filter()
Kamu bertanya:
“Siapa saja yang berasal dari Jakarta?”
Hasil:
[Andi, Budi, Citra]
groupBy()
Kamu berkata:
“Pisahkan semua siswa berdasarkan kota.”
Hasil:
Jakarta
→ [Andi, Budi, Citra]
Surabaya
→ [Doni, Eko]
Bandung
→ [Fajar, Gita]
Jadi groupBy() lebih seperti membuat beberapa filter() sekaligus secara otomatis berdasarkan kategori.
20. groupBy() vs sort()
Ini juga perlu dibedakan.
sort()
Mengubah urutan:
3, 1, 2
↓
1, 2, 3
groupBy()
Membuat kelompok:
1, 2, 3, 4, 5
↓
even → [2, 4]
odd → [1, 3, 5]
Jadi:
sort()
→ URUTKAN
filter()
→ PILIH
groupBy()
→ KELOMPOKKAN
21. groupBy() vs map()
map()
Setiap element diubah menjadi bentuk baru.
let names = people.map(person => {
return person.name;
});
Hasil:
["John", "Mark", "Steve", "David", "Peter"]
groupBy()
Setiap element menentukan group-nya:
let peopleByCity = Object.groupBy(
people,
person => person.city
);
Hasil:
{
"New York": [...],
"London": [...],
"Paris": [...]
}
Mental model:
map()
element → element baru
filter()
element → masuk / tidak
groupBy()
element → group mana?
22. Perhatikan callback groupBy()
Callback:
(person) => person.city
terlihat sangat sederhana.
Kenapa?
Karena yang kita butuhkan memang hanya:
person
↓
person.city
↓
key
Misalnya:
person.city
bisa menghasilkan:
"London"
Maka object itu dimasukkan ke group:
London
23. Key tidak harus bernama city
Ini sangat penting.
groupBy() tidak peduli kamu menggunakan:
city
atau:
age
atau:
genre
atau kategori apa pun.
Yang penting callback mengembalikan key.
Misalnya kelompok berdasarkan umur:
let peopleByAge = Object.groupBy(
people,
person => person.age
);
Secara konsep:
{
25: [Steve],
28: [John],
29: [Peter],
30: [Mark],
35: [David]
}
24. Contoh yang lebih realistis: film
Ini sangat relevan dengan project CIN/Cinix kamu.
Misalnya:
let movies = [
{
name: "Interstellar",
genre: "sci-fi"
},
{
name: "Inception",
genre: "sci-fi"
},
{
name: "Bad Boys",
genre: "action"
},
{
name: "The Hangover",
genre: "comedy"
}
];
Kita ingin:
sci-fi
├── Interstellar
└── Inception
action
└── Bad Boys
comedy
└── The Hangover
Bisa:
let moviesByGenre = Object.groupBy(
movies,
movie => movie.genre
);
Hasil:
{
"sci-fi": [
{
name: "Interstellar",
genre: "sci-fi"
},
{
name: "Inception",
genre: "sci-fi"
}
],
"action": [
{
name: "Bad Boys",
genre: "action"
}
],
"comedy": [
{
name: "The Hangover",
genre: "comedy"
}
]
}
25. Tapi ada satu hal penting dari project CIN kamu
Di project sebelumnya:
genre: ["action", "sci-fi", "drama"]
Artinya satu movie bisa punya lebih dari satu genre.
Nah, ini penting:
Object.groupBy(
movies,
movie => movie.genre
);
tidak akan langsung memberikan:
action → movie
sci-fi → movie
drama → movie
karena:
movie.genre
adalah Array, bukan satu kategori String.
Contoh:
["action", "sci-fi", "drama"]
Jadi penggunaan groupBy() pada project CIN perlu sedikit pertimbangan jika satu movie boleh berada di banyak genre.
Ini berbeda dengan contoh lecture:
person.city
yang hanya mempunyai satu city.
Untuk sekarang cukup pahami konsep dasarnya dulu:
groupBy()paling sederhana ketika setiap element memiliki satu key/kategori yang jelas.
26. groupBy() adalah “pengelompokan berdasarkan key”
Ini mungkin kalimat paling penting untuk diingat:
Object.groupBy()mengambil sekumpulan data, lalu memasukkan setiap element ke dalam group berdasarkan key yang dikembalikan callback.
Contoh:
Object.groupBy(
people,
person => person.city
);
dibaca:
“Ambil
people, lalu kelompokkan setiap person berdasarkancity-nya.”
27. Bedah syntax dari awal
let peopleByCity = Object.groupBy(
people,
(person) => {
return person.city;
}
);
Object
Object constructor/global object.
.groupBy
Static method untuk grouping.
people
Array yang ingin dikelompokkan.
(person) => { ... }
Callback yang dijalankan untuk setiap person.
person
Element yang sedang diproses.
person.city
Key/kategori.
return
Memberitahu groupBy() ke group mana element tersebut masuk.
peopleByCity
Variable yang menyimpan hasil grouping.
28. Visualisasi lengkap
people
│
├── John
│ city → New York
│
├── Mark
│ city → London
│
├── Steve
│ city → New York
│
├── David
│ city → London
│
└── Peter
city → Paris
↓
Object.groupBy()
↓
┌─────────────────┐
│ Result │
├─────────────────┤
│ New York │
│ ├── John │
│ └── Steve │
│ │
│ London │
│ ├── Mark │
│ └── David │
│ │
│ Paris │
│ └── Peter │
└─────────────────┘
29. Hubungan dengan forEach() yang sudah kamu pelajari
Sebenarnya secara konsep kamu bisa membuat grouping tanpa groupBy():
let peopleByCity = {};
people.forEach((person) => {
let city = person.city;
if (!peopleByCity[city]) {
peopleByCity[city] = [];
}
peopleByCity[city].push(person);
});
Hasilnya juga mirip:
{
"New York": [John, Steve],
"London": [Mark, David],
"Paris": [Peter]
}
Jadi groupBy() memberikan cara yang lebih langsung untuk operasi ini.
Mental model:
Cara manual:
forEach()
↓
cek group
↓
buat Array kalau belum ada
↓
push()
Object.groupBy()
↓
langsung grouping berdasarkan key
30. Kenapa fitur seperti ini disebut fitur JavaScript modern?
Karena JavaScript terus berkembang.
Kamu sebelumnya belajar:
ES2015
↓
let
const
arrow function
template literal
...
Sekarang:
ES2024
↓
Object.groupBy()
Jadi jangan berpikir:
“JavaScript selesai dipelajari setelah tahu
let,const, function, array.”
JavaScript terus mendapatkan fitur baru.
31. Catatan penting: jangan salah mengira groupBy() sebagai Array method
Ini kemungkinan salah satu poin yang ingin ditekankan instructor.
Salah:
people.groupBy(...)
Untuk fitur yang sedang diajarkan:
Object.groupBy(...)
Benar.
Bandingkan:
people.map(...)
people.filter(...)
people.find(...)
people.forEach(...)
dengan:
Object.groupBy(people, ...)
32. Perbandingan semua method yang sudah kamu pelajari
Sekarang kamu sudah punya banyak Array method. Coba lihat berdasarkan pertanyaannya.
| Method | Pertanyaan |
|---|---|
forEach() | “Lakukan sesuatu untuk setiap element.” |
map() | “Ubah setiap element menjadi sesuatu yang baru.” |
filter() | “Element mana yang memenuhi syarat?” |
find() | “Element pertama yang cocok yang mana?” |
findIndex() | “Posisi element pertama yang cocok di mana?” |
sort() | “Bagaimana mengurutkan element?” |
splice() | “Bagaimana menghapus/mengubah isi Array?” |
includes() | “Apakah nilai ini ada?” |
groupBy() | “Element-element ini masuk kategori apa?” |
Ini adalah mental model yang sangat berguna.
33. Contoh satu dataset diproses dengan beberapa method
Misalnya:
let people = [
{ name: "John", age: 20, city: "London" },
{ name: "Mark", age: 30, city: "Paris" },
{ name: "Steve", age: 25, city: "London" }
];
filter()
Cari yang tinggal London:
people.filter(person => person.city === "London");
Hasil:
[John, Steve]
map()
Ambil nama:
people.map(person => person.name);
Hasil:
["John", "Mark", "Steve"]
sort()
Urutkan umur:
people.sort((a, b) => a.age - b.age);
groupBy()
Kelompokkan berdasarkan kota:
Object.groupBy(
people,
person => person.city
);
Hasil:
{
London: [John, Steve],
Paris: [Mark]
}
34. Ada satu konsep baru: iterable
Lecture mengatakan argument pertama adalah iterable.
Untuk pemahaman awal, kamu bisa menganggap:
Iterable adalah sesuatu yang bisa “dilewati” satu per satu.
Contohnya:
Array
Set
Map
Array yang paling sering kamu gunakan:
Object.groupBy(
people,
...
);
Karena:
people
adalah Array dan bisa di-iterasi element demi element.
Untuk level sekarang, cukup ingat:
iterable
↓
bisa diproses element demi element
Tidak perlu terlalu dalam dulu tentang protokol iterable.
35. Hal yang perlu diperhatikan tentang lecture
Ada sedikit bagian caption yang terdengar tidak konsisten ketika menjelaskan hasil groupBy()—sempat disebut seperti “array”, padahal hasil Object.groupBy() adalah Object dengan property/key yang masing-masing berisi Array.
Jadi bentuk yang benar secara konsep:
{
"London": [person1, person2],
"New York": [person3, person4],
"Paris": [person5]
}
Bukan:
[
...
]
Ini penting supaya kamu tidak bingung ketika melihat Console.
36. Mental model terbaik untuk groupBy()
Bayangkan:
Object.groupBy(data, callback)
sebagai:
“Ambil setiap element → tanyakan callback ‘kamu masuk kelompok mana?’ → masukkan element ke kelompok tersebut.”
Visual:
DATA
│
↓
┌──────────────┐
│ Element │
└──────────────┘
│
↓
callback
│
↓
KEY
│
┌───────┼───────┐
↓ ↓ ↓
group A group B group C
│ │ │
↓ ↓ ↓
[data] [data] [data]
37. Hubungkan dengan project CIN/Cinix
Kamu sebelumnya sudah membuat:
movies
↓
filter
↓
sort
↓
find
↓
render
Dengan groupBy(), suatu saat kita bisa punya konsep seperti:
movies
↓
groupBy kategori
↓
{
action: [...],
comedy: [...],
drama: [...],
sci-fi: [...]
}
Kemudian UI bisa menggunakan hasil tersebut untuk menampilkan movie berdasarkan kategori.
Namun, karena movie di project kamu bisa memiliki multiple genres, grouping berdasarkan genre memerlukan pendekatan khusus. Jadi jangan langsung menganggap:
movie.genre
bisa dipakai begitu saja sebagai key kalau genre berupa Array.
38. Ringkasan super singkat
Kalau nanti kamu lupa groupBy(), ingat ini:
Object.groupBy(data, callback)
data
Data yang mau dikelompokkan.
callback
Menentukan kelompok.
return
Menghasilkan key/group.
Hasil
Object berisi Array untuk setiap group.
Contoh:
let numbers = [1, 2, 3, 4, 5, 6];
let grouped = Object.groupBy(
numbers,
num => {
return num % 2 === 0
? "even"
: "odd";
}
);
Hasil:
{
even: [2, 4, 6],
odd: [1, 3, 5]
}
🧠 Cheat sheet terakhir
filter()
→ PILIH data
map()
→ UBAH data
find()
→ CARI SATU data
findIndex()
→ CARI POSISI data
sort()
→ URUTKAN data
splice()
→ HAPUS/UBAH data dalam Array
forEach()
→ PROSES setiap data
includes()
→ CEK apakah ada
Object.groupBy()
→ KELOMPOKKAN data
Dan untuk groupBy():
Object.groupBy(
↓
DATA
+
CALLBACK
↓
callback menentukan KEY
↓
element dimasukkan ke group
↓
OBJECT
{
key1: [data, data],
key2: [data],
key3: [data, data]
}
Kalimat yang paling penting untuk dihafal:
filter()memilih siapa yang masuk, sedangkangroupBy()menentukan masing-masing masuk kelompok mana.