Di lecture ini kita mulai masuk ke salah satu konsep paling penting dalam JavaScript, yaitu Object.

Kalau sebelumnya kita belajar tentang primitive seperti String, Number, Boolean, null, dan undefined, sekarang kita mulai belajar cara menggabungkan beberapa data yang saling berhubungan ke dalam satu wadah bernama object.

1. Apa itu Object?

Secara sederhana:

Object adalah kumpulan data yang memiliki nama/label.

Misalnya kita ingin menyimpan informasi tentang seorang user:

Name   → John
Age    → 28
Gender → Male

Daripada membuat variabel terpisah:

let name = "John";
let age = 28;
let gender = "Male";

kita bisa menggabungkannya menjadi satu object:

let user = {
    name: "John",
    age: 28,
    gender: "Male"
};

Sekarang semua informasi tersebut berada di dalam satu object bernama user.

2. Analogi Object di kehidupan nyata

Bayangkan kamu punya KTP.

Di dalam KTP ada beberapa informasi:

Nama       → Budi
Umur       → 25
Alamat     → Surabaya
Pekerjaan  → Programmer

KTP-nya adalah satu benda/object.

Sedangkan:

• nama
• umur
• alamat
• pekerjaan

adalah informasi yang dimiliki oleh object tersebut.

Dalam JavaScript:

let user = {
    name: "Budi",
    age: 25,
    address: "Surabaya",
    job: "Programmer"
};

Jadi secara mental kamu bisa membayangkan:

user
 │
 ├── name    → "Budi"
 ├── age     → 25
 ├── address → "Surabaya"
 └── job     → "Programmer"

3. Object terdiri dari Properties

Data yang ada di dalam object disebut property.

Contoh:

let user = {
    name: "John",
    age: 28
};

Object tersebut memiliki dua property:

name → "John"
age  → 28

Jadi:

name

adalah nama property.

Sedangkan:

"John"

adalah value dari property tersebut.

Begitu juga:

age

adalah property.

28

adalah value-nya.

4. Object adalah salah satu bagian penting JavaScript

Di awal course kamu sudah belajar bahwa JavaScript mempunyai 7 primitive data types:

1. Number
2. BigInt
3. String
4. Boolean
5. undefined
6. null
7. Symbol

Selain primitive tersebut, JavaScript juga memiliki object.

Contohnya:

let user = {
    name: "John",
    age: 28
};

user adalah object.

Ada hal penting yang perlu kamu ingat dari lecture ini:

Function dan Array juga merupakan object dalam JavaScript.

Misalnya:

function hello() {
    console.log("Hello");
}

Function adalah sebuah value yang nantinya akan kita bahas lebih jauh sebagai object.

Begitu juga:

let numbers = [10, 20, 30];

Array secara internal juga merupakan object.

Jadi jangan berpikir bahwa object hanya berarti syntax:

{}

Konsep object jauh lebih luas daripada itu.

5. Cara membuat Object

Ada dua cara yang dibahas di lecture.

Cara 1 — new Object()

Kita bisa menggunakan new dan Object:

let user = new Object();

Ini akan membuat sebuah object baru.

Setelah object dibuat, kita bisa menambahkan property:

user.name = "John";
user.age = 28;

Sekarang object kita menjadi:

user
 │
 ├── name → "John"
 └── age  → 28

Kalau kita:

console.log(user);

hasilnya kurang lebih:

{
    name: "John",
    age: 28
}

6. Cara kedua: Object Literal

Cara yang jauh lebih sering digunakan adalah object literal.

Syntax-nya:

let user = {
    name: "John",
    age: 28
};

Bagian:

{
    name: "John",
    age: 28
}

adalah object literal.

Ini jauh lebih pendek daripada:

let user = new Object();

user.name = "John";
user.age = 28;

Karena itu, dalam praktik JavaScript modern, kamu akan jauh lebih sering melihat:

let user = {
    name: "John",
    age: 28
};

daripada:

let user = new Object();

7. Kenapa disebut Object Literal?

Karena kita langsung menuliskan bentuk object beserta datanya.

Contoh:

let user = {
    name: "John",
    age: 28
};

Kita secara literal mengatakan:

“Buatkan saya sebuah object yang mempunyai property name dan age.”

Struktur sederhananya:

let user = {
    property: value,
    property: value
};

Misalnya:

let product = {
    name: "Laptop",
    price: 1000,
    stock: 5
};

Maka:

product
 │
 ├── name  → "Laptop"
 ├── price → 1000
 └── stock → 5

8. Key dan Value

Di dalam object kita menggunakan pasangan:

key: value

Contoh:

let user = {
    name: "John",
    age: 28
};

Di sini:

name : "John"
 ↑        ↑
key    value

dan:

age : 28
 ↑     ↑
key  value

Istilah key dan property name sering digunakan untuk hal yang sama dalam konteks ini.

Jadi kamu akan sering mendengar:

Object memiliki properties berupa key-value pairs.

9. Property dipisahkan dengan koma

Kalau object memiliki beberapa property:

let user = {
    name: "John",
    age: 28,
    gender: "Male"
};

Perhatikan:

name: "John",
age: 28,
gender: "Male"

Antara property satu dengan property berikutnya dipisahkan menggunakan:

,

bukan titik koma ;.

Jadi:

❌ Salah:

let user = {
    name: "John";
    age: 28;
};

✅ Benar:

let user = {
    name: "John",
    age: 28
};

Ini salah satu kesalahan yang cukup umum bagi pemula.

10. Mengakses Property dengan Dot Notation

Setelah membuat object, tentu kita ingin mengambil data dari dalamnya.

Misalnya:

let user = {
    name: "John",
    age: 28
};

Kita ingin mengambil age.

Caranya:

user.age

Disebut dot notation.

Strukturnya:

object.property

Jadi:

user.age

artinya:

“Ambil property age dari object user.”

Contoh:

console.log(user.age);

Output:

28

Untuk name:

console.log(user.name);

Output:

John

11. Cara membaca Dot Notation

Kalau melihat:

user.age

bacanya bisa kamu bayangkan:

“Dari user, ambil age.”

Kalau:

product.price

artinya:

“Dari product, ambil price.”

Kalau:

car.brand

artinya:

“Dari car, ambil brand.”

Jadi:

object.property
   ↓       ↓
  siapa?  apa yang mau diambil?

12. Square Bracket Notation

Selain dot notation, kita juga bisa menggunakan square bracket notation.

Contoh:

let user = {
    name: "John",
    age: 28
};

Untuk mengambil age:

user["age"]

Hasilnya:

28

Untuk name:

user["name"]

Hasilnya:

John

Jadi dua cara ini menghasilkan hal yang sama:

user.age

dan:

user["age"]

13. Dot Notation vs Bracket Notation

Untuk property normal, biasanya kita menggunakan dot notation:

user.name

Tapi ada kondisi tertentu di mana kita harus menggunakan bracket notation.

14. Property Name tidak boleh sembarangan

Property name memiliki aturan yang mirip dengan variable name.

Misalnya:

let user = {
    name: "John",
    age: 28
};

Property:

name

dan:

age

aman.

Property name juga case-sensitive.

Jadi:

user.name

berbeda dengan:

user.Name

Misalnya:

let user = {
    name: "John"
};

Maka:

user.name

→ "John"

Tetapi:

user.Name

→ undefined

karena Name dan name dianggap berbeda.

15. Bagaimana dengan Property yang memiliki spasi?

Misalnya kamu ingin membuat:

full name

Kalau ditulis seperti ini:

let user = {
    full name: "John Smith"
};

❌ Ini tidak valid.

Kenapa?

Karena JavaScript menganggap spasi sebagai pemisah, bukan bagian dari nama identifier biasa.

Tetapi kita bisa menggunakan quote:

let user = {
    "full name": "John Smith"
};

Sekarang:

"full name"

menjadi nama property yang valid.

16. Property dengan spasi harus menggunakan Bracket Notation

Karena property-nya:

"full name"

mengandung spasi, kita tidak bisa menggunakan:

user.full name

❌ Tidak valid.

Kita harus menggunakan:

user["full name"]

Contoh lengkap:

let user = {
    name: "John",
    age: 28,
    "full name": "John Smith"
};

Ambil name:

console.log(user.name);

Ambil age:

console.log(user.age);

Ambil full name:

console.log(user["full name"]);

Output:

John
28
John Smith

17. Kenapa Bracket Notation berguna?

Bukan cuma untuk property yang memiliki spasi.

Bracket notation juga menjadi sangat berguna ketika nama property disimpan dalam sebuah variable.

Misalnya:

let user = {
    name: "John",
    age: 28
};

let property = "name";

console.log(user[property]);

Output:

John

Ini akan sangat penting ketika nanti kamu belajar bekerja dengan data secara dinamis.

Perhatikan bedanya:

user.property

dengan:

user[property]

Kalau:

let property = "name";

maka:

user.property

mencari property bernama literal:

"property"

sedangkan:

user[property]

mengambil isi variable property, yaitu:

"name"

sehingga yang dicari adalah:

user["name"]

Ini salah satu alasan bracket notation sangat penting.

18. Menambahkan Property setelah Object dibuat

Salah satu hal menarik dari object JavaScript adalah kita bisa menambahkan property setelah object dibuat.

Misalnya awalnya:

let user = {
    name: "John",
    age: 28
};

Object kita hanya punya:

name
age

Kemudian kita ingin menambahkan:

gender

Kita bisa:

user.gender = "Male";

Sekarang object menjadi:

user
 │
 ├── name   → "John"
 ├── age    → 28
 └── gender → "Male"

Kita tidak perlu membuat ulang object.

19. Bisa juga menggunakan Bracket Notation

Hal yang sama bisa dilakukan dengan:

user["gender"] = "Male";

Hasilnya sama dengan:

user.gender = "Male";

Jadi:

user.gender = "Male";

dan:

user["gender"] = "Male";

sama-sama menambahkan property gender.

20. Mengubah Property yang sudah ada

Misalnya object kita:

let user = {
    name: "John",
    age: 28
};

Kemudian umur user berubah menjadi 30.

Kita bisa:

user.age = 30;

Sekarang:

console.log(user.age);

hasilnya:

30

Apa yang terjadi?

Awalnya:

age → 28

kemudian:

user.age = 30;

menjadi:

age → 30

Jadi assignment ke property yang sudah ada akan mengubah value-nya.

21. Bisa menggunakan Bracket Notation juga

Misalnya:

user["age"] = 30;

Ini juga sama:

user.age = 30;

Keduanya mengubah value property age.

22. Menambahkan vs Mengubah Property

Ini penting.

Misalnya:

let user = {
    name: "John",
    age: 28
};

Kalau property belum ada:

user.gender = "Male";

→ menambahkan property baru

Kalau property sudah ada:

user.age = 30;

→ mengubah property yang sudah ada

Jadi JavaScript tidak perlu syntax khusus seperti:

addProperty()

Cukup:

object.property = value;

JavaScript akan menentukan:

“Property ini sudah ada atau belum?”

Kalau belum → buat.

Kalau sudah → ubah.

23. Menghapus Property dengan delete

Sekarang bagaimana kalau kita ingin menghapus property?

Gunakan keyword:

delete

Misalnya:

let user = {
    name: "John",
    age: 28,
    gender: "Male"
};

Kita ingin menghapus age.

Gunakan:

delete user.age;

Sekarang object menjadi:

user
 │
 ├── name   → "John"
 └── gender → "Male"

Property age sudah tidak ada.

24. Menghapus Property dengan Bracket Notation

Kalau nama property normal:

delete user.age;

Kalau property memiliki spasi:

delete user["full name"];

Contoh:

let user = {
    name: "John",
    age: 28,
    "full name": "John Smith"
};

Hapus:

delete user["full name"];

Sekarang property "full name" hilang.

25. Gambaran lengkap operasi Object

Sekarang kita bisa melihat object seperti sebuah lemari.

Misalnya:

let user = {
    name: "John",
    age: 28
};

Membaca

console.log(user.name);

“Ambil data name.”

Menambahkan

user.gender = "Male";

“Tambahkan gender.”

Mengubah

user.age = 30;

“Ubah age.”

Menghapus

delete user.gender;

“Hapus gender.”

Jadi ada empat operasi dasar:

Object
  │
  ├── READ   → ambil property
  ├── CREATE → tambah property
  ├── UPDATE → ubah property
  └── DELETE → hapus property

Ini konsep yang sangat penting dan nantinya akan sering kamu gunakan.

26. Contoh lengkap

Mari kita gabungkan semuanya:

let user = {
    name: "John",
    age: 28
};

Object awal:

name → John
age  → 28

Read

console.log(user.name);

Output:

John

Update

user.age = 30;

Sekarang:

name → John
age  → 30

Create

user.gender = "Male";

Sekarang:

name   → John
age    → 30
gender → Male

Delete

delete user.gender;

Sekarang:

name → John
age  → 30

27. const Object: apakah object-nya tidak bisa berubah?

Ini sedikit tambahan penting karena sebelumnya kita belajar const.

Misalnya:

const user = {
    name: "John",
    age: 28
};

Kamu masih bisa mengubah property:

user.age = 30;

Ini boleh.

Kamu juga bisa:

user.gender = "Male";

Ini juga boleh.

Yang tidak boleh adalah mengganti seluruh object:

user = {
    name: "Mark",
    age: 40
};

❌ Ini error karena user adalah const.

Jadi bedakan:

const user
     ↓
variable/reference tidak boleh diganti ke object lain

tetapi property object masih bisa diubah.

Untuk sekarang cukup ingat:

const user = {
    name: "John"
};

user.name = "Mark"; // ✅ boleh

user = {};          // ❌ tidak boleh

28. Object bisa memiliki berbagai macam tipe value

Property object tidak harus selalu String.

Contoh:

let user = {
    name: "John",       // String
    age: 28,            // Number
    isAdmin: true,      // Boolean
    address: null,      // null
    job: undefined      // undefined
};

Jadi object bisa menggabungkan berbagai tipe data.

Bahkan nantinya property bisa berisi:

• Array
• Function
• Object lain

Misalnya:

let user = {
    name: "John",
    age: 28,
    hobbies: ["Coding", "Gaming"],
    address: {
        city: "Surabaya"
    }
};

Ini yang membuat object sangat powerful.

Tapi bagian nested object dan method akan kita pelajari lebih lanjut nanti.

29. Object vs Variable biasa

Ini juga penting supaya kamu memahami kenapa object diperlukan.

Tanpa object:

let userName = "John";
let userAge = 28;
let userGender = "Male";
let userCity = "Surabaya";

Semua data tersebar.

Dengan object:

let user = {
    name: "John",
    age: 28,
    gender: "Male",
    city: "Surabaya"
};

Sekarang semuanya dikelompokkan:

user
 ├── name
 ├── age
 ├── gender
 └── city

Ini jauh lebih masuk akal karena semua data tersebut memang berkaitan dengan satu user.

30. Kenapa Object sangat penting dalam JavaScript?

Karena aplikasi nyata memiliki banyak entitas.

Misalnya aplikasi toko online.

Kita punya product:

let product = {
    name: "Laptop",
    price: 1000,
    stock: 5
};

User:

let user = {
    name: "John",
    age: 28
};

Order:

let order = {
    id: 123,
    total: 500,
    status: "paid"
};

Semua informasi tersebut secara natural bisa direpresentasikan menggunakan object.

Makanya object merupakan konsep fundamental dalam JavaScript.

31. Satu hal yang perlu diluruskan dari lecture

Lecture mengatakan secara sederhana:

“Any value which does not belong to the seven primitive data types is basically an object.”

Untuk level course ini, cara berpikir tersebut cukup membantu.

Tapi secara teknis, ada sedikit nuansa.

JavaScript memiliki primitive values dan objects, dan function memang merupakan object/callable object. Array juga object.

Jadi untuk pemahaman pemula:

Primitive
├── Number
├── BigInt
├── String
├── Boolean
├── undefined
├── null
└── Symbol

Object
├── ordinary objects
├── arrays
├── functions
├── dates
├── maps
├── sets
└── dll.

Tidak perlu menghafal semua jenis object sekarang.

Yang paling penting:

Object adalah cara utama JavaScript mengorganisasi data yang saling berhubungan.

32. Kesalahan yang sering dilakukan pemula

❌ 1. Menggunakan ; antar property

Salah:

let user = {
    name: "John";
    age: 28;
};

Benar:

let user = {
    name: "John",
    age: 28
};

Gunakan koma antar property.

❌ 2. Salah menggunakan dot notation

Kalau:

let user = {
    "full name": "John Smith"
};

Jangan:

user.full name

Gunakan:

user["full name"]

❌ 3. Lupa bahwa property case-sensitive

user.name

berbeda dengan:

user.Name

❌ 4. Mengira property yang belum ada akan error saat assignment

Ini justru valid:

let user = {};

user.name = "John";

Object awal kosong.

Kemudian property name dibuat.

❌ 5. Bingung antara membaca dan mengubah

user.age

→ membaca.

user.age = 30;

→ mengubah.

Sedangkan:

delete user.age;

→ menghapus.

33. Cheat Sheet Object

Membuat object

let user = {
    name: "John",
    age: 28
};

Membaca property — dot notation

user.name
user.age

Membaca property — bracket notation

user["name"]
user["age"]

Property dengan spasi

let user = {
    "full name": "John Smith"
};

Akses:

user["full name"];

Menambah property

user.gender = "Male";

atau:

user["gender"] = "Male";

Mengubah property

user.age = 30;

atau:

user["age"] = 30;

Menghapus property

delete user.age;

atau:

delete user["age"];

34. Ringkasan paling penting

Kalau harus mengingat inti lecture ini, ingat pola berikut:

let user = {
    name: "John",
    age: 28
};

Object

user

adalah object.

Property

name
age

adalah property.

Value

"John"
28

adalah value.

Read

user.name

atau:

user["name"]

Create

user.gender = "Male";

Update

user.age = 30;

Delete

delete user.age;

🧠 Mental model sederhana

Bayangkan object sebagai lemari dengan laci-laci bernama:

                 OBJECT: user
              ┌───────────────┐
              │ name → John   │
              │ age  → 28     │
              │ gender → Male │
              └───────────────┘

Kalau kamu menulis:

user.name

artinya:

📂 “Buka object user, lalu ambil laci name.”

Kalau:

user.age = 30;

artinya:

✏️ “Buka laci age, lalu ganti isinya menjadi 30.”

Kalau:

user.gender = "Male";

artinya:

➕ “Buat laci baru bernama gender.”

Kalau:

delete user.gender;

artinya:

🗑️ “Hapus laci gender.”

Dan:

user["full name"]

artinya:

📂 “Cari laci yang nama persisnya full name.”

⭐ Inti lecture dalam satu kalimat:

Object adalah kumpulan data yang saling berkaitan, disimpan dalam bentuk pasangan property: value, dan property tersebut bisa kita baca, tambah, ubah, maupun hapus.

Dan ini menjadi fondasi penting untuk lecture berikutnya tentang method pada object, karena nanti kita akan melihat bahwa object bukan hanya bisa menyimpan data, tetapi juga bisa menyimpan function yang melakukan sesuatu.