JavaScript Fundamental: Objects & Properties - Eps 6

Halo guys! Setelah kita bahas array di episode sebelumnya, sekarang saatnya kenalan sama konsep yang gak kalah penting: Object. Kalau array itu kayak deretan kotak dengan nomor urut, Object ini lebih kayak lemari dengan laci yang punya label nama.

Di episode ini kita bakal kupas tuntas Object dan property-nya. Setelah paham konsep ini, coding kamu bakal naik level dan lebih terstruktur. Yuk langsung mulai!

Apa Itu Object?

Bayangin kamu lagi bikin aplikasi untuk kelola data mahasiswa. Satu mahasiswa punya banyak informasi: nama, umur, jurusan, NIM, alamat. Kalau semua data ini disimpen pake variabel terpisah, bakal ribet banget.

Misalnya kayak gini:

const studentName = "Budi Santoso";
const studentAge = 21;
const studentMajor = "Informatika";
const studentNIM = "2021001";
const studentCity = "Jakarta";

Kebayang kan kalau ada 100 mahasiswa? Kamu bakal bikin 500 variabel! Makanya JavaScript punya solusi: Object. Dengan Object, kamu bisa kumpulin semua data yang berhubungan dalam satu tempat.

Object adalah struktur data yang memungkinkan kita simpan banyak nilai dalam satu variabel. Bedanya dengan array, kalau array pake nomor urut (0, 1, 2), Object pake nama atau key untuk akses datanya.

Kenapa Pakai Object?

Ada beberapa alasan kenapa Object itu penting:

Pertama, Object bikin code lebih rapi. Semua data yang berhubungan jadi satu grup. Lihat contoh data mahasiswa tadi kalau dikumpulin:

const student = {
  name: "Budi Santoso",
  age: 21,
  major: "Informatika",
  nim: "2021001",
  city: "Jakarta"
};

Jauh lebih rapi kan? Semua info tentang satu mahasiswa ada dalam satu variabel.

Kedua, Object bisa simpen data sekaligus fungsi. Dalam satu Object, kamu bisa punya data dan method untuk olah data itu. Ini yang bikin Object sangat fleksibel.

Ketiga, Object lebih jelas maksudnya. Waktu akses data, nama property-nya langsung nunjukin isi datanya. Misalnya student.name jelas artinya nama dari student, dibanding student[0] yang kurang jelas.

Struktur Object: Key-Value Pair

Struktur dasar Object adalah key-value pair. Setiap data dalam Object punya dua komponen:

1. Key (nama property): label atau nama dari data
2. Value (nilai): isi atau nilai dari data tersebut

Format dasarnya:

const namaObject = {
  key1: value1,
  key2: value2,
  key3: value3
};

Contoh nyata:

const product = {
  name: "Laptop Gaming",
  price: 15000000,
  brand: "ASUS",
  isAvailable: true
};

Di sini kita punya:

• Key name dengan value "Laptop Gaming"
• Key price dengan value 15000000
• Key brand dengan value "ASUS"
• Key isAvailable dengan value true

Value dalam Object bisa tipe data apa aja: string, number, boolean, bahkan object lain atau array.

Perbedaan Object dengan Array

Banyak pemula bingung kapan pake Object dan kapan pake array. Ini bedanya:

Array cocok untuk:

• Data yang punya urutan penting
• Akses data berdasarkan posisi
• Kumpulan item sejenis yang banyak
• Data yang mau di-loop

Contoh:

const colors = ["merah", "biru", "hijau", "kuning"];
const scores = [85, 90, 78, 95, 88];

Object cocok untuk:

• Data dengan karakteristik berbeda-beda
• Urutan data gak terlalu penting
• Akses data pake nama yang jelas
• Grup data dan fungsi dalam satu tempat

Contoh:

const user = {
  username: "john_doe",
  email: "[email protected]",
  age: 28,
  isActive: true
};

Perbedaan paling jelas adalah cara aksesnya:

// Array: pake nomor urut
const fruits = ["apple", "banana", "orange"];
console.log(fruits[0]); // "apple"

// Object: pake nama key
const car = {
  brand: "Toyota",
  model: "Avanza",
  year: 2023
};
console.log(car.brand); // "Toyota"

Array itu berurutan, Object tidak. Di array, urutan element dijamin. Element pertama selalu di posisi 0, kedua di posisi 1. Di object, urutan property gak dijamin. Object itu kumpulan nilai dengan nama, bukan daftar berurutan.

Kapan Pakai Object vs Array?

Aturan sederhananya:

Pakai Object kalau mau deskripsiin satu entitas dengan berbagai karakteristik:

• Profil user (nama, email, umur, alamat)
• Detail produk (nama, harga, kategori, stok)
• Pengaturan aplikasi (tema, bahasa, notifikasi)

Pakai Array kalau punya banyak item sejenis:

• Daftar users
• Item dalam keranjang belanja
• Daftar tugas

Dalam aplikasi nyata, sering kombinasi keduanya. Contoh: array berisi objects.

const students = [
  {
    name: "Budi",
    age: 21,
    major: "Informatika"
  },
  {
    name: "Siti",
    age: 20,
    major: "Sistem Informasi"
  },
  {
    name: "Andi",
    age: 22,
    major: "Teknik Komputer"
  }
];

Array untuk kelola daftar mahasiswa, Object untuk deskripsiin tiap mahasiswa. Kombinasi sempurna!

Object dalam Contoh Nyata

Supaya makin paham, lihat contoh penggunaan Object dalam skenario nyata:

E-commerce Product:

const product = {
  id: "PRD001",
  name: "Sepatu Sneakers Nike",
  price: 1250000,
  discount: 15,
  category: "Fashion",
  stock: 45,
  rating: 4.5,
  isNewArrival: true
};

Blog Post:

const blogPost = {
  title: "Belajar JavaScript untuk Pemula",
  author: "BuildWithAngga",
  publishDate: "2024-01-15",
  content: "Lorem ipsum dolor sit amet...",
  tags: ["javascript", "tutorial", "programming"],
  views: 1523,
  likes: 87
};

API Response:

const apiResponse = {
  status: "success",
  code: 200,
  message: "Data berhasil diambil",
  data: {
    userId: 12345,
    username: "angga_risky"
  },
  timestamp: "2024-01-15T10:30:00Z"
};

Object ada dimana-mana dalam programming! Dari data sederhana sampai struktur kompleks.

Mulai Berpikir dengan Object

Dengan memahami Object, kamu sebenarnya udah mulai masuk ke pemrograman berorientasi objek. Walaupun belum bahas mendalam, tapi konsep Object ini adalah fondasinya.

Mulai sekarang, biasakan berpikir dalam bentuk Objects. Waktu design fitur atau aplikasi, mikir: "Data apa aja yang dibutuhin? Gimana cara grup data ini supaya logis?"

Misalnya mau bikin fitur keranjang belanja:

const shoppingCart = {
  items: [],
  totalPrice: 0,
  totalItems: 0,
  discountCode: null,
  shippingAddress: {
    street: "",
    city: "",
    postalCode: ""
  }
};

Dengan struktur ini, semua yang berhubungan sama keranjang belanja ada dalam satu tempat. Rapi dan mudah dikelola.

Nah sekarang setelah paham konsep dasar Object, pertanyaan selanjutnya adalah: gimana sih cara bikin Object ini? Ada beberapa cara yang bisa kamu pake, dan masing-masing punya use case-nya sendiri. Yuk kita explore satu-satu!

Cara Membuat Object: Literal Syntax

Sekarang kita masuk ke praktek! Cara paling umum dan direkomendasikan untuk bikin Object adalah dengan object literal syntax. Ini cara yang paling sederhana dan efisien.

Sintaksnya gampang:

const namaVariable = {
  property1: value1,
  property2: value2,
  property3: value3
};

Contoh nyata:

const user = {
  name: 'John',
  age: 25
};

Simpel kan? Dengan dua baris code, kamu udah bikin Object yang berisi info user.

Anatomi Object Literal

Sekarang kita bedah komponen-komponen dalam object literal:

1. Kurung Kurawal { }

Ini pembungkus atau container dari Object. Semua property dan value harus berada di antara kurung kurawal ini.

const emptyObject = {};  // Object kosong
const filledObject = { name: 'Budi' };  // Object dengan isi

2. Property Name (Key)

Ini nama atau label dari data kamu. Dalam contoh name: 'John', kata name adalah property name. Property name bisa berupa:

• String tanpa quote (paling umum): name, age, email
• String dengan quote (ada karakter spesial): 'first-name', 'user email'
• Number (akan jadi string): 1, 2, 100

const product = {
  name: 'Laptop',           // string tanpa quote
  'product-id': 'LP001',    // string dengan quote
  price: 15000000,
  1: 'first item'           // number sebagai key
};

3. Titik Dua :

Pemisah antara property name dengan value. Setiap property pasti punya titik dua.

4. Property Value

Nilai atau isi dari property. Value bisa tipe data apapun:

const mixedObject = {
  stringValue: 'Hello',
  numberValue: 100,
  booleanValue: true,
  arrayValue: [1, 2, 3],
  objectValue: { nested: 'object' },
  functionValue: function() { return 'Hi'; }
};

5. Koma ,

Koma memisahkan satu property dengan property lain. Koma terakhir itu opsional, tapi praktek terbaik sekarang adalah selalu tambahin koma di akhir (trailing comma). Kenapa? Biar gampang waktu nambahin property baru.

// Tanpa trailing comma
const user1 = {
  name: 'John',
  age: 25
};

// Dengan trailing comma (lebih baik)
const user2 = {
  name: 'John',
  age: 25,  // <- ada koma
};

Contoh Object Literal

User Profile:

const userProfile = {
  username: 'angga_risky',
  email: '[email protected]',
  age: 28,
  isActive: true,
  registeredDate: '2024-01-01',
};

Product Item:

const product = {
  id: 'PRD001',
  name: 'MacBook Pro M3',
  price: 35000000,
  category: 'Electronics',
  inStock: true,
  specs: ['16GB RAM', '512GB SSD', '14 inch Display'],
  rating: 4.8,
};

Configuration:

const config = {
  apiUrl: '<https://api.buildwithangga.com>',
  timeout: 5000,
  retryAttempts: 3,
  enableLogging: true,
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
};

Nested Object

Object bisa simpen Object lain. Konsepnya kurung kurawal di dalam kurung kurawal.

const user = {
  name: 'Budi Santoso',
  age: 25,
  address: {
    street: 'Jl. Sudirman No. 123',
    city: 'Jakarta',
    postalCode: '12190'
  }
};

Property address punya value berupa Object lain dengan property street, city, dan postalCode.

Nested bisa lebih dalam:

const company = {
  name: 'BuildWithAngga',
  founded: 2019,
  headquarters: {
    country: 'Indonesia',
    city: 'Jakarta',
    office: {
      building: 'Menara BCA',
      floor: 15,
      room: 'A-101'
    }
  },
  employees: 50
};

Tapi jangan terlalu dalam. Maksimal 3 level nested object untuk readability yang baik.

Property Shorthand

Fitur modern JavaScript: kalau punya variabel dan mau jadiin property dengan nama sama, bisa tulis sekali aja:

const name = 'John';
const age = 25;
const city = 'Jakarta';

// Cara lama
const user1 = {
  name: name,
  age: age,
  city: city
};

// Cara modern (property shorthand)
const user2 = {
  name,
  age,
  city
};

Keduanya sama persis. Shorthand bikin code lebih ringkas.

Constructor Syntax: new Object()

Ada cara lain: constructor new Object():

const user = new Object();
user.name = 'John';
user.age = 25;

Atau:

const user = new Object({
  name: 'John',
  age: 25
});

Tapi tunggu! Praktek terbaiknya adalah hindari new Object(). Kenapa?

1. Kurang readable

Constructor lebih panjang:

// Constructor - lebih panjang
const user1 = new Object();
user1.name = 'John';
user1.age = 25;

// Literal - lebih simpel
const user2 = {
  name: 'John',
  age: 25
};

2. Performance

Object literal lebih cepat karena langsung create object.

3. Less error-prone

Dengan constructor, bisa accidentally override Object:

// Jangan pernah lakuin ini!
const Object = function() { };
const user = new Object(); // Error!

4. Konsistensi

Semua dokumentasi dan code base modern prefer object literal.

Best Practice

Untuk 99% kasus, gunakan object literal { }:

// DO: Gunakan ini
const user = {
  name: 'John',
  age: 25
};

// DON'T: Hindari ini
const user = new Object();
user.name = 'John';
user.age = 25;

Tips Bikin Object yang Rapi

1. Naming convention konsisten

Gunakan camelCase:

// Good
const user = {
  firstName: 'John',
  lastName: 'Doe',
  emailAddress: '[email protected]'
};

// Avoid
const user = {
  first_name: 'John',      // snake_case
  LastName: 'Doe',         // PascalCase
  'email-address': '[email protected]'  // kebab-case
};

2. Grup property yang berhubungan

const product = {
  // Basic info
  id: 'PRD001',
  name: 'Laptop',

  // Pricing
  price: 15000000,
  discount: 10,

  // Stock info
  stock: 50,
  isAvailable: true
};

3. Gunakan trailing comma

const user = {
  name: 'John',
  age: 25,  // <- trailing comma
};

4. Satu property per baris

// Good
const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Acceptable untuk simple object
const point = { x: 10, y: 20 };

// Avoid - susah dibaca
const user = { name: 'John', age: 25, city: 'Jakarta', email: '[email protected]' };

Nah sekarang kamu udah paham cara bikin Object dengan berbagai cara. Di section berikutnya, kita bakal belajar gimana cara akses property dari Object yang udah kita buat. Ada dua cara utama: dot notation dan bracket notation. Yuk lanjut!

Akses Property dengan Dot Notation

Sekarang Object udah jadi. Pertanyaan selanjutnya: gimana cara ambil atau baca data dari Object? Ada dua cara utama. Yang pertama dan paling umum adalah dot notation.

Dot notation simpel banget. Tulis nama object, tambahin titik, lalu nama property yang mau diakses.

Sintaksnya:

object.propertyName

Prakteknya:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

console.log(user.name);  // Output: 'John'
console.log(user.age);   // Output: 25
console.log(user.city);  // Output: 'Jakarta'

Sesimpel itu! Dengan user.name, kamu langsung dapet value dari property name.

Kenapa Disebut Dot Notation?

Namanya dot notation karena pake titik untuk hubungkan object dengan property-nya. Titik kayak jembatan yang menghubungkan kamu ke data yang dibutuhin.

Bayangin: kamu punya lemari (object), di lemari ada laci dengan label (property). Dot notation itu kayak kamu nunjuk lemari terus bilang "gue mau ambil yang ada di laci 'name'". Dengan user.name, kamu bilang "dari object user, ambil property name".

Dot Notation untuk Read Property

Penggunaan paling umum dot notation adalah untuk ambil value dari property:

const product = {
  name: 'Laptop ASUS',
  price: 15000000,
  stock: 10,
  isAvailable: true
};

// Read dan display
console.log(product.name);  // 'Laptop ASUS'

// Gunakan dalam operasi
const totalPrice = product.price * 2;
console.log(totalPrice);  // 30000000

// Gunakan dalam conditional
if (product.isAvailable) {
  console.log('Produk tersedia!');
}

// Assign ke variabel lain
const productName = product.name;
console.log(productName);  // 'Laptop ASUS'

Value dari property bisa langsung dipake untuk apapun.

Akses Nested Property

Dot notation juga bisa untuk akses property dalam nested object. Caranya chain dot-nya:

const user = {
  name: 'Budi',
  age: 28,
  address: {
    street: 'Jl. Sudirman',
    city: 'Jakarta',
    postalCode: '12190'
  }
};

// Akses property level pertama
console.log(user.name);  // 'Budi'

// Akses nested property
console.log(user.address.city);  // 'Jakarta'
console.log(user.address.street);  // 'Jl. Sudirman'
console.log(user.address.postalCode);  // '12190'

Untuk akses city yang ada di dalam address, tulis user.address.city. Titik pertama masuk ke address, titik kedua masuk ke city.

Bisa chain lebih dalam kalau nested object-nya kompleks:

const company = {
  name: 'BuildWithAngga',
  location: {
    country: 'Indonesia',
    office: {
      city: 'Jakarta',
      building: {
        name: 'Menara BCA',
        floor: 15
      }
    }
  }
};

// Akses nested yang dalam
console.log(company.location.office.building.name);  // 'Menara BCA'
console.log(company.location.office.building.floor);  // 15

Tapi ingat, jangan bikin nested terlalu dalam karena susah dibaca.

Kapan Harus Pakai Dot Notation?

Dot notation adalah pilihan pertama untuk akses property. Pake dot notation kalau:

1. Property name udah diketahui

Maksudnya, waktu nulis code kamu udah tau persis nama property yang mau diakses:

const student = {
  name: 'Siti',
  nim: '2021001',
  major: 'Informatika'
};

// Property name udah pasti: 'name', 'nim', 'major'
console.log(student.name);
console.log(student.nim);
console.log(student.major);

2. Property name adalah valid identifier

Valid identifier artinya nama property ikutin aturan penamaan variabel:

• Dimulai dengan huruf, underscore, atau dollar sign
• Tidak ada spasi atau karakter khusus (kecuali _ dan $)
• Bukan reserved keyword JavaScript

const data = {
  firstName: 'John',      // valid identifier
  last_name: 'Doe',       // valid identifier
  $price: 100,            // valid identifier
  _internal: 'test'       // valid identifier
};

// Semua bisa diakses dengan dot notation
console.log(data.firstName);
console.log(data.last_name);
console.log(data.$price);
console.log(data._internal);

3. Mau code yang rapi dan mudah dibaca

Dot notation paling bersih:

// Rapi dan mudah dibaca
user.email
product.price
order.status

// vs bracket notation (bakal dibahas nanti)
user['email']
product['price']
order['status']

Keuntungan Dot Notation

1. Readability

Code dengan dot notation lebih mudah dibaca:

// Mudah dibaca
const userName = user.name;
const userAge = user.age;
const userCity = user.address.city;

// Lebih susah dibaca
const userName = user['name'];
const userAge = user['age'];
const userCity = user['address']['city'];

2. Less typing

Dot notation lebih singkat:

user.name        // 9 karakter
user['name']     // 12 karakter

3. Auto-completion di editor

Editor kayak VS Code punya auto-completion bagus untuk dot notation. Waktu ketik user. langsung muncul list property.

4. Less error-prone

Dengan dot notation, editor bisa deteksi typo:

// Typo di dot notation - editor kasih warning
user.naem  // Warning: Property 'naem' does not exist

// Typo di bracket notation - gak ada warning
user['naem']  // Gak error, cuma return undefined

Contoh Penggunaan Nyata

Display User Info:

const currentUser = {
  username: 'angga_risky',
  fullName: 'Angga Risky',
  email: '[email protected]',
  role: 'instructor',
  isVerified: true
};

// Display user info
console.log('Welcome, ' + currentUser.fullName);
console.log('Role: ' + currentUser.role);

if (currentUser.isVerified) {
  console.log('Account is verified');
}

Calculate Total Price:

const shoppingCart = {
  items: 5,
  subtotal: 500000,
  tax: 50000,
  shipping: 25000,
  discount: 75000
};

const totalPrice = shoppingCart.subtotal +
                   shoppingCart.tax +
                   shoppingCart.shipping -
                   shoppingCart.discount;

console.log('Total: Rp ' + totalPrice);  // Total: Rp 500000

Validate Form:

const formData = {
  username: 'john_doe',
  email: '[email protected]',
  password: 'secret123',
  confirmPassword: 'secret123',
  agreeToTerms: true
};

// Validation
if (formData.username.length < 3) {
  console.log('Username terlalu pendek');
}

if (formData.password !== formData.confirmPassword) {
  console.log('Password tidak cocok');
}

if (!formData.agreeToTerms) {
  console.log('Harus setuju terms & conditions');
}

Tips Menggunakan Dot Notation

1. Naming konsisten

Pastikan nama property konsisten dan deskriptif:

// Good
const user = {
  firstName: 'John',
  lastName: 'Doe',
  emailAddress: '[email protected]'
};

console.log(user.firstName);
console.log(user.lastName);

// Avoid - inkonsisten
const user = {
  first_name: 'John',
  LastName: 'Doe',
  'email-address': '[email protected]'  // gak bisa pake dot notation!
};

2. Hindari nested terlalu dalam

Terlalu banyak chaining bikin susah dibaca:

// Terlalu dalam
user.profile.settings.privacy.notifications.email.frequency

// Lebih baik - use intermediate variables
const emailSettings = user.profile.settings.privacy.notifications.email;
console.log(emailSettings.frequency);

3. Check property existence

Sebelum akses nested property, pastikan parent property ada:

const user = {
  name: 'John'
  // address tidak ada
};

// Bahaya - bisa error
console.log(user.address.city);  // Error!

// Aman - check dulu
if (user.address) {
  console.log(user.address.city);
}

// Atau pake optional chaining
console.log(user.address?.city);  // undefined

Batasan Dot Notation

Ada situasi di mana kamu gak bisa pake dot notation:

1. Property name ada spasi atau karakter khusus

const data = {
  'first name': 'John',
  'user-age': 25,
  'email@address': 'test'
};

// Gak bisa pake dot notation!
// console.log(data.first name);  // Syntax error

// Harus pake bracket notation (next topic)
console.log(data['first name']);

2. Property name dimulai dengan angka

const obj = {
  '1st': 'first',
  '2nd': 'second'
};

// Gak bisa pake dot notation
// console.log(obj.1st);  // Syntax error

// Harus pake bracket notation
console.log(obj['1st']);

Untuk kasus seperti ini, kamu perlu pake bracket notation yang bakal kita bahas di section berikutnya. Bracket notation lebih fleksibel tapi kurang rapi. Makanya selalu prefer dot notation kalau bisa.

Nah itu dia pembahasan lengkap tentang dot notation! Ini cara paling umum untuk akses property dalam Object. Rapi, sederhana, dan mudah dibaca. Di section berikutnya, kita bakal bahas alternatifnya: bracket notation yang punya use case spesifik. Let's continue!

Akses Property dengan Bracket Notation

Setelah bahas dot notation, sekarang kenalan sama cara kedua: bracket notation. Kalau dot notation pake titik, bracket notation pake kurung siku.

Sintaksnya:

object['propertyName']

Property name ditulis sebagai string di dalam quotes. Contoh:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

console.log(user['name']);  // Output: 'John'
console.log(user['age']);   // Output: 25
console.log(user['city']);  // Output: 'Jakarta'

Hasilnya sama dengan dot notation. user['name'] return value yang sama dengan user.name. Jadi kenapa butuh dua cara? Ternyata bracket notation punya kemampuan yang gak dimiliki dot notation!

Kenapa Disebut Bracket Notation?

Namanya bracket notation karena pake square brackets [ ] untuk akses property. Di dalam bracket, kamu masukin property name sebagai string. JavaScript akan cari property yang namanya sesuai dengan string tersebut.

Bracket Notation untuk Property Name Khusus

Ini salah satu kekuatan utama bracket notation. Ingat dot notation gak bisa untuk property name dengan spasi atau karakter khusus? Bracket notation adalah solusinya!

Property dengan spasi:

const person = {
  'first name': 'John',
  'last name': 'Doe',
  'home address': 'Jl. Sudirman No. 123'
};

// Gak bisa pake dot notation
// console.log(person.first name);  // Syntax error!

// Harus pake bracket notation
console.log(person['first name']);   // 'John'
console.log(person['last name']);    // 'Doe'
console.log(person['home address']); // 'Jl. Sudirman No. 123'

Property dengan hyphen:

const product = {
  'product-id': 'PRD001',
  'product-name': 'Laptop',
  'product-price': 15000000
};

// Bracket notation required
console.log(product['product-id']);    // 'PRD001'
console.log(product['product-name']);  // 'Laptop'
console.log(product['product-price']); // 15000000

Property dengan karakter khusus:

const data = {
  'user@email': '[email protected]',
  'price$': 100,
  'item#1': 'First item',
  'key.name': 'value'
};

console.log(data['user@email']); // '[email protected]'
console.log(data['price$']);     // 100
console.log(data['item#1']);     // 'First item'
console.log(data['key.name']);   // 'value'

Tapi praktek terbaiknya adalah hindari property name dengan karakter khusus. Gunakan camelCase yang lebih standar.

Dynamic Property Access

Ini fitur paling powerful dari bracket notation. Dengan bracket notation, kamu bisa akses property secara dynamic pake variabel!

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta',
  email: '[email protected]'
};

// Property name disimpen dalam variabel
const propertyName = 'name';

// Akses property pake variabel
console.log(user[propertyName]);  // 'John'

// Ganti value variabel
propertyName = 'age';
console.log(user[propertyName]);  // 25

Di dalam bracket, kamu gak pake quotes karena propertyName adalah variabel. JavaScript ambil value dari variabel, terus pake value itu sebagai property name.

Ini beda dengan dot notation yang property name-nya harus fixed:

// Dot notation - property name fixed
user.name  // ✓ Works

// Gak bisa pake variabel dengan dot notation
user.propertyName  // ✗ Cari property 'propertyName', bukan value dari variabel

Use Case: Loop Through Properties

Salah satu use case paling umum dari dynamic property access adalah waktu loop multiple properties:

const student = {
  name: 'Budi',
  nim: '2021001',
  major: 'Informatika',
  gpa: 3.75
};

const properties = ['name', 'nim', 'major', 'gpa'];

// Loop dan display semua property
for (let i = 0; i < properties.length; i++) {
  const prop = properties[i];
  console.log(prop + ': ' + student[prop]);
}

// Output:
// name: Budi
// nim: 2021001
// major: Informatika
// gpa: 3.75

Dengan dot notation, kamu gak bisa achieve ini karena property name-nya harus static.

Use Case: User Input

Contoh lain adalah akses property berdasarkan user input:

const productInfo = {
  name: 'Laptop ASUS',
  price: 15000000,
  stock: 50,
  category: 'Electronics',
  warranty: '2 years'
};

// Misalkan user input dari form
const userInput = 'price';

// Akses property berdasarkan input
console.log(productInfo[userInput]);  // 15000000

// Input berbeda, hasil berbeda
userInput = 'warranty';
console.log(productInfo[userInput]);  // '2 years'

Berguna untuk bikin dynamic interface atau interactive applications.

Use Case: Computed Property Names

Kadang perlu construct property name dari beberapa bagian:

const translations = {
  'greeting_en': 'Hello',
  'greeting_id': 'Halo',
  'greeting_jp': 'Konnichiwa',
  'farewell_en': 'Goodbye',
  'farewell_id': 'Sampai jumpa',
  'farewell_jp': 'Sayonara'
};

const messageType = 'greeting';
const language = 'id';

// Construct property name
const key = messageType + '_' + language;
console.log(translations[key]);  // 'Halo'

// Atau langsung
console.log(translations[messageType + '_' + language]);  // 'Halo'

Super flexible!

Use Case: Working with API Data

Dalam development nyata, sering deal dengan API yang return data dengan struktur varied. Bracket notation jadi essential:

const apiResponse = {
  'user-id': 123,
  'user-name': 'John Doe',
  'user-email': '[email protected]',
  'account-status': 'active'
};

// API menggunakan hyphenated keys
const fields = ['user-id', 'user-name', 'user-email', 'account-status'];

fields.forEach(field => {
  console.log(field + ': ' + apiResponse[field]);
});

Property Name dari Number

Bracket notation bisa akses property yang namanya number:

const data = {
  1: 'first',
  2: 'second',
  3: 'third',
  100: 'hundredth'
};

console.log(data[1]);    // 'first'
console.log(data[2]);    // 'second'
console.log(data[100]);  // 'hundredth'

// Atau pake string juga works
console.log(data['1']);   // 'first'
console.log(data['100']); // 'hundredth'

Number sebagai property name automatically jadi string.

Expressions di Dalam Bracket

Di dalam bracket kamu bisa masukin expression apapun yang hasilnya string:

const settings = {
  darkMode: true,
  fontSize: 16,
  language: 'id'
};

// Expression dengan ternary
const mode = true;
console.log(settings[mode ? 'darkMode' : 'lightMode']);  // true

// Expression dengan function call
function getSettingKey() {
  return 'language';
}
console.log(settings[getSettingKey()]);  // 'id'

// Expression dengan concatenation
const prefix = 'font';
const suffix = 'Size';
console.log(settings[prefix + suffix]);  // 16

Akses Nested Property

Sama seperti dot notation, kamu bisa chain bracket notation:

const user = {
  name: 'John',
  contact: {
    email: '[email protected]',
    phone: '08123456789',
    address: {
      city: 'Jakarta',
      country: 'Indonesia'
    }
  }
};

// Chain bracket notation
console.log(user['contact']['email']);           // '[email protected]'
console.log(user['contact']['address']['city']); // 'Jakarta'

// Mix dot dan bracket
console.log(user.contact['email']);              // '[email protected]'
console.log(user['contact'].address.city);       // 'Jakarta'

Bebas mix sesuai kebutuhan. Gunakan dot untuk property static, bracket untuk yang dynamic atau punya karakter khusus.

Contoh Nyata: Form Validation

const formData = {
  username: 'john_doe',
  email: '[email protected]',
  password: 'secret123',
  confirmPassword: 'secret123'
};

const validationRules = {
  username: 'Username minimal 3 karakter',
  email: 'Email harus valid',
  password: 'Password minimal 6 karakter',
  confirmPassword: 'Password harus sama'
};

// Validate specific field
function validateField(fieldName) {
  const value = formData[fieldName];
  const rule = validationRules[fieldName];

  console.log('Validating ' + fieldName);
  console.log('Value: ' + value);
  console.log('Rule: ' + rule);
}

// Dynamic validation
const fieldToValidate = 'email';
validateField(fieldToValidate);

Contoh Nyata: Multi-language Support

const translations = {
  en: {
    greeting: 'Hello',
    farewell: 'Goodbye',
    thanks: 'Thank you'
  },
  id: {
    greeting: 'Halo',
    farewell: 'Sampai jumpa',
    thanks: 'Terima kasih'
  }
};

// Get translation dynamically
const currentLanguage = 'id';
const messageKey = 'greeting';

const message = translations[currentLanguage][messageKey];
console.log(message);  // 'Halo'

// Function untuk get translation
function t(key) {
  return translations[currentLanguage][key];
}

console.log(t('thanks'));  // 'Terima kasih'

Performance Considerations

Bracket notation sedikit lebih lambat dari dot notation karena JavaScript harus evaluate expression di dalam bracket dulu.

Tapi perbedaan performance-nya negligible untuk mayoritas use cases. Focus on readability dan correctness dulu.

// Sedikit lebih cepat
const name = user.name;

// Sedikit lebih lambat (negligible)
const name = user['name'];

Tips Menggunakan Bracket Notation

1. Gunakan untuk dynamic access

// Good use
const key = getUserSelectedField();
const value = data[key];

// Unnecessary - prefer dot notation
const value = data['name'];  // Better: data.name

2. Combine dengan dot notation

// Readable combination
const userCity = userData.address['home-city'];
const userEmail = userData['contact-info'].email;

3. Validate dynamic keys

const allowedFields = ['name', 'email', 'age'];
const requestedField = getUserInput();

if (allowedFields.includes(requestedField)) {
  console.log(user[requestedField]);
} else {
  console.log('Invalid field');
}

4. Use constants untuk keys

const FIELD_EMAIL = 'user-email';
const FIELD_NAME = 'user-name';

const userData = {
  'user-email': '[email protected]',
  'user-name': 'John Doe'
};

console.log(userData[FIELD_EMAIL]);
console.log(userData[FIELD_NAME]);

Nah sekarang kamu udah paham dua cara akses property: dot notation dan bracket notation. Masing-masing punya use case dan keunggulannya. Di section berikutnya, kita bakal compare keduanya dan bahas kapan harus pake yang mana. Let's continue!

Dot vs Bracket: Kapan Pakai Yang Mana?

Sekarang kamu udah paham dua cara akses property: dot notation dan bracket notation. Pertanyaan besarnya: kapan harus pake yang mana? Keduanya bisa kasih hasil sama, jadi gimana cara putusinnya?

Di section ini kita bakal breakdown kriteria dan praktek terbaik untuk milih antara dot dan bracket notation.

Perbedaan Utama: Static vs Dynamic

Perbedaan paling mendasar adalah tentang kapan property name-nya diketahui.

Dot Notation: Property Statis

Dot notation untuk property yang namanya udah diketahui waktu nulis code. Property-nya fix dan gak berubah.

const user = {
  name: 'John',
  email: '[email protected]',
  age: 25
};

// Property name 'name' udah diketahui waktu nulis code
console.log(user.name);  // Akses statis

// Property name 'email' udah pasti
console.log(user.email);  // Akses statis

Waktu nulis user.name, kamu udah tau pasti mau akses property name. Gak ada perhitungan, gak ada kondisi.

Bracket Notation: Property Dinamis

Bracket notation untuk property yang namanya baru diketahui waktu program jalan. Property name bisa berubah tergantung kondisi, user input, atau hasil operasi.

const user = {
  name: 'John',
  email: '[email protected]',
  age: 25
};

// Property name dalam variabel
const fieldName = 'name';  // Bisa berubah
console.log(user[fieldName]);  // Akses dinamis

// Property name dari user input
const userChoice = getUserInput();
console.log(user[userChoice]);  // Akses dinamis

Property yang diakses bisa berbeda setiap kali code jalan.

Alur Keputusan Sederhana

Ini alur keputusan sederhana yang bisa kamu pake:

Pertanyaan 1: Apakah nama property-nya pasti dan gak berubah?

• Ya → Lanjut ke pertanyaan 2
• Tidak (dari variabel/perhitungan) → Pake bracket notation

Pertanyaan 2: Apakah nama property ada karakter khusus (spasi, hyphen)?

• Ya → Pake bracket notation
• Tidak → Pake dot notation

Sesimpel itu!

Perbandingan Berbagai Skenario

Skenario 1: Nama Property Sudah Pasti

const product = {
  name: 'Laptop',
  price: 15000000,
  stock: 50
};

// Lebih baik dot notation
console.log(product.name);   // ✓ Bagus
console.log(product.price);  // ✓ Bagus

// Bracket works, tapi gak perlu
console.log(product['name']);   // ✓ Jalan, tapi kurang rapi
console.log(product['price']);  // ✓ Jalan, tapi prefer dot

Kesimpulan: Pake dot notation.

Skenario 2: Property dari Variabel

const user = {
  name: 'John',
  email: '[email protected]',
  role: 'admin'
};

const fieldToDisplay = 'email';  // Bisa berubah

// Harus pake bracket notation
console.log(user[fieldToDisplay]);  // ✓ Benar

// Dot notation salah
console.log(user.fieldToDisplay);  // ✗ Salah! Cari property 'fieldToDisplay'

Kesimpulan: Pake bracket notation.

Skenario 3: Loop Property

const student = {
  name: 'Budi',
  nim: '2021001',
  gpa: 3.75
};

const fields = ['name', 'nim', 'gpa'];

// Harus pake bracket notation
for (let i = 0; i < fields.length; i++) {
  console.log(fields[i] + ': ' + student[fields[i]]);  // ✓ Benar
}

Kesimpulan: Pake bracket notation.

Skenario 4: Property dengan Karakter Khusus

const config = {
  'api-url': '<https://api.example.com>',
  'max-retry': 3,
  'enable-cache': true
};

// Harus pake bracket notation
console.log(config['api-url']);      // ✓ Benar
console.log(config['max-retry']);    // ✓ Benar

// Dot notation gak bisa
console.log(config.api-url);  // ✗ Syntax error!

Kesimpulan: Pake bracket notation.

Skenario 5: Nama Property dari Perhitungan

const translations = {
  greeting_en: 'Hello',
  greeting_id: 'Halo',
  farewell_en: 'Goodbye',
  farewell_id: 'Sampai jumpa'
};

const messageType = 'greeting';
const lang = 'id';

// Harus pake bracket notation
const key = messageType + '_' + lang;
console.log(translations[key]);  // ✓ Benar - 'Halo'

// Dot notation gak bisa
console.log(translations.messageType_lang);  // ✗ Salah!

Kesimpulan: Pake bracket notation.

Aturan Emas: Utamakan Dot, Gunakan Bracket Kalau Perlu

Aturan utamanya:

Selalu utamakan dot notation, gunakan bracket notation cuma kalau diperlukan.

Kenapa utamakan dot notation?

1. Lebih Mudah Dibaca

Lebih bersih dan jelas:

// Bersih
user.name
product.price
order.status

// Kurang rapi
user['name']
product['price']
order['status']

2. Lebih Singkat

Hemat pengetikan:

user.email         // 10 karakter
user['email']      // 13 karakter

3. Dukungan Editor Lebih Baik

Editor kayak VS Code punya auto-completion yang lebih bagus untuk dot notation. Waktu ketik user. langsung muncul list property.

4. Maksud Lebih Jelas

Dot notation langsung jelas. Kalau orang lihat bracket notation, mereka expect ada sesuatu yang dinamis atau khusus.

Kapan Harus Pakai Bracket Notation

Bracket notation cuma dipake kalau memang perlu:

1. Akses property dinamis

const field = getFieldFromUser();
const value = data[field];  // Property name gak diketahui waktu coding

2. Nama property dengan karakter khusus

const api = {
  'base-url': '<https://api.com>',
  'api-key': 'secret123'
};

console.log(api['base-url']);

3. Nama property dari variabel/expression

const lang = 'en';
const message = messages['greeting_' + lang];

4. Iterasi property

for (let key in object) {
  console.log(object[key]);  // Key dari loop
}

Gabungan Dot dan Bracket

Dalam code nyata, sering gabungin keduanya. Gak masalah! Gunakan yang paling sesuai:

const config = {
  server: {
    'api-url': '<https://api.example.com>',
    port: 3000,
    settings: {
      timeout: 5000,
      'max-connections': 100
    }
  }
};

// Gabungan sesuai kebutuhan
console.log(config.server['api-url']);                    // Bracket untuk hyphen
console.log(config.server.port);                          // Dot untuk normal
console.log(config.server.settings.timeout);              // Dot untuk nested normal
console.log(config.server.settings['max-connections']);   // Bracket untuk hyphen

Pake dot untuk property sederhana dan statis, bracket untuk yang khusus.

Kesalahan Yang Sering Terjadi

Kesalahan 1: Bracket untuk property statis

const user = {
  name: 'John',
  age: 25
};

// Gak perlu pake bracket
console.log(user['name']);  // Jalan, tapi prefer dot
console.log(user['age']);   // Jalan, tapi prefer dot

// Lebih baik
console.log(user.name);  // ✓
console.log(user.age);   // ✓

Kesalahan 2: Lupa quotes di bracket

const key = 'name';

console.log(user[name]);   // ✗ Error! 'name' is undefined
console.log(user['name']); // ✓ Benar untuk literal 'name'
console.log(user[key]);    // ✓ Benar untuk variabel key

Kesalahan 3: Dot notation untuk property dinamis

const fieldName = 'email';

console.log(user.fieldName);  // ✗ Salah! Cari property 'fieldName'
console.log(user[fieldName]); // ✓ Benar! Cari property 'email'

Kesalahan 4: Bingung nama property dengan value

const user = {
  name: 'John',
  favoriteColor: 'blue'
};

const prop = 'name';

console.log(user.prop);      // ✗ undefined (cari property 'prop')
console.log(user[prop]);     // ✓ 'John' (cari property 'name')
console.log(user['prop']);   // ✗ undefined (cari property 'prop')
console.log(user['name']);   // ✓ 'John' (cari property 'name')

Pertimbangan Performa

Dot notation sedikit lebih cepat dari bracket notation karena JavaScript gak perlu evaluate expression.

Tapi perbedaan performa-nya sangat kecil. Fokus ke kejelasan code dulu.

// Sedikit lebih cepat (perbedaan minimal)
const name = user.name;

// Sedikit lebih lambat (perbedaan minimal)
const name = user['name'];

Contoh Aplikasi Nyata

const appConfig = {
  environment: 'production',
  server: {
    host: 'localhost',
    port: 3000,
    'api-version': 'v2',
    'max-connections': 1000
  },
  database: {
    host: 'db.example.com',
    port: 5432,
    name: 'myapp_db'
  },
  features: {
    authentication: true,
    'rate-limiting': true,
    caching: false
  }
};

// Gabungan yang tepat
console.log(appConfig.environment);                          // Dot - statis
console.log(appConfig.server.host);                          // Dot - statis
console.log(appConfig.server['api-version']);                // Bracket - hyphen
console.log(appConfig.database.name);                        // Dot - statis
console.log(appConfig.features['rate-limiting']);            // Bracket - hyphen

// Akses dinamis
const featureName = 'authentication';
console.log(appConfig.features[featureName]);                // Bracket - dinamis

// Fungsi untuk ambil config
function getConfig(path) {
  const parts = path.split('.');
  let value = appConfig;

  for (let part of parts) {
    value = value[part];  // Bracket - navigasi dinamis
  }

  return value;
}

console.log(getConfig('server.port'));      // 3000
console.log(getConfig('database.name'));    // 'myapp_db'

Panduan Ringkas

Gunakan Dot Notation:

• Nama property statis dan sudah diketahui
• Nama property valid identifier
• Mau code bersih dan mudah dibaca
• 99% kebutuhan coding sehari-hari

Gunakan Bracket Notation:

• Nama property dalam variabel
• Nama property hasil perhitungan
• Nama property ada spasi atau karakter khusus
• Iterasi through properties
• Nama property dari user input

Contoh Keputusan:

// Property statis → Dot
user.name

// Property dari variabel → Bracket
user[variableName]

// Property dengan hyphen → Bracket
config['api-key']

// Nested property statis → Dot
user.address.city

// Nested dinamis → Gabungan
user[section].preferences[setting]

Nah sekarang kamu punya kejelasan lengkap kapan harus pake dot notation dan kapan harus pake bracket notation. Aturannya simpel: default ke dot notation, ganti ke bracket notation kalau ada alasan bagus. Di section berikutnya, kita bakal belajar cara menambah dan mengubah property dalam Object. Let's continue!

Menambah Property Baru

Salah satu kelebihan Object dalam JavaScript adalah fleksibilitasnya. Kamu bisa menambah property baru kapan aja, bahkan setelah Object dibuat. Gak perlu define semua property di awal.

Caranya gampang banget. Tinggal assign value ke property name yang belum ada:

const user = {
  name: 'John',
  age: 25
};

// Tambah property baru
user.email = '[email protected]';
user.city = 'Jakarta';

console.log(user);
// Output:
// {
//   name: 'John',
//   age: 25,
//   email: '[email protected]',
//   city: 'Jakarta'
// }

Lihat? Property email dan city gak ada waktu Object dibuat, tapi bisa ditambahin kapan aja. JavaScript otomatis bikin property baru kalau kamu assign value ke property yang belum exist.

Menambah dengan Bracket Notation

Selain dot notation, kamu juga bisa pake bracket notation untuk tambah property:

const product = {
  name: 'Laptop',
  price: 15000000
};

// Tambah property dengan bracket notation
product['brand'] = 'ASUS';
product['stock'] = 50;

console.log(product);
// Output:
// {
//   name: 'Laptop',
//   price: 15000000,
//   brand: 'ASUS',
//   stock: 50
// }

Kedua cara (dot dan bracket) hasilnya sama. Pilih yang paling sesuai dengan situasi. Kalau property name-nya simple dan static, pake dot. Kalau dynamic atau ada karakter khusus, pake bracket.

Menambah Property Secara Dynamic

Dengan bracket notation, kamu bisa tambah property dengan nama yang dynamic:

const settings = {
  theme: 'dark',
  fontSize: 16
};

// Property name dari variabel
const newSetting = 'language';
settings[newSetting] = 'id';

// Property name dari user input
const userPref = getUserPreference(); // misal return 'notifications'
settings[userPref] = true;

console.log(settings);
// {
//   theme: 'dark',
//   fontSize: 16,
//   language: 'id',
//   notifications: true
// }

Ini berguna banget waktu kamu gak tau property name-nya di awal.

Mengubah Property Yang Sudah Ada

Selain nambah property baru, kamu juga bisa ubah value dari property yang udah ada. Caranya sama persis:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Ubah value property
user.age = 26;
user.city = 'Bandung';

console.log(user);
// Output:
// {
//   name: 'John',
//   age: 26,
//   city: 'Bandung'
// }

Property age berubah dari 25 jadi 26, dan city berubah dari Jakarta jadi Bandung.

Mengubah dengan Bracket Notation

Sama kayak nambah property, mengubah juga bisa pake bracket notation:

const product = {
  name: 'Laptop',
  price: 15000000,
  stock: 50
};

// Ubah dengan bracket notation
product['price'] = 14000000;
product['stock'] = 45;

console.log(product);
// {
//   name: 'Laptop',
//   price: 14000000,
//   stock: 45
// }

Perbedaan Menambah vs Mengubah

Sebenarnya dari sisi syntax, gak ada bedanya. JavaScript gak peduli apakah property itu udah ada atau belum:

• Kalau property belum ada → JavaScript bikin property baru
• Kalau property udah ada → JavaScript update value-nya

const user = {
  name: 'John'
};

// Property 'age' belum ada → ditambahin
user.age = 25;

// Property 'age' udah ada → di-update
user.age = 26;

// Property 'email' belum ada → ditambahin
user.email = '[email protected]';

Jadi kamu gak perlu mikir "ini nambah atau ngubah?" Tinggal assign aja.

Object Itu Mutable

Ini konsep penting yang harus dipahami: Object dalam JavaScript itu mutable. Artinya isi Object bisa diubah, bahkan kalau Object-nya dideklarasiin dengan const.

Wait, apa? const tapi bisa diubah? Iya, ini sering bikin bingung pemula. Let me explain:

const user = {
  name: 'John',
  age: 25
};

// Ini BISA dilakukan
user.age = 26;              // ✓ Mengubah property
user.email = '[email protected]'; // ✓ Menambah property

console.log(user);
// {
//   name: 'John',
//   age: 26,
//   email: '[email protected]'
// }

Kenapa bisa? Karena const cuma prevent reassignment, bukan prevent mutation.

Const: Prevent Reassignment

const artinya kamu gak bisa assign ulang variabel tersebut ke value yang beda:

const user = {
  name: 'John',
  age: 25
};

// Ini TIDAK BISA dilakukan
user = {
  name: 'Jane',
  age: 30
}; // ✗ Error! Assignment to constant variable

Kamu gak bisa ganti keseluruhan Object. Tapi kamu bisa ubah isi di dalamnya.

Analogi: Kotak vs Isi Kotak

Bayangin const itu kayak kotak yang dikunci. Kamu gak bisa ganti kotak dengan kotak lain (reassignment). Tapi kamu masih bisa ubah isi dalam kotak tersebut (mutation).

const user = { name: 'John' }; // Kotak terkunci

// Ubah isi kotak → BISA
user.name = 'Jane';  // ✓
user.age = 25;       // ✓

// Ganti kotak → TIDAK BISA
user = { name: 'Jane' }; // ✗

Const vs Let untuk Object

Meskipun const tidak prevent mutation, tetap gunakan const untuk Object. Kenapa?

1. Intent lebih jelas

Dengan const, kamu kasih sinyal ke programmer lain: "Object ini gak bakal di-reassign". Ini bikin code lebih predictable.

// Clear intent: object ini fixed reference
const userSettings = {
  theme: 'dark'
};

// Kurang clear: bisa di-reassign atau tidak?
let userSettings = {
  theme: 'dark'
};

2. Prevent accidental reassignment

const config = {
  apiUrl: '<https://api.example.com>'
};

// Error caught immediately
config = { apiUrl: '<https://api2.example.com>' }; // ✗ Error

// Kalau pake let, ini gak error tapi mungkin gak disengaja
let config = {
  apiUrl: '<https://api.example.com>'
};
config = { apiUrl: '<https://api2.example.com>' }; // ✓ No error

Best practice: Default ke const untuk Object. Ganti ke let cuma kalau emang perlu reassign.

Contoh: Update User Profile

const userProfile = {
  username: 'john_doe',
  email: '[email protected]',
  bio: ''
};

// User update profile mereka
userProfile.bio = 'Web developer from Jakarta';
userProfile.website = '<https://johndoe.com>';
userProfile.twitter = '@johndoe';

console.log(userProfile);
// {
//   username: 'john_doe',
//   email: '[email protected]',
//   bio: 'Web developer from Jakarta',
//   website: '<https://johndoe.com>',
//   twitter: '@johndoe'
// }

Contoh: Shopping Cart

const cart = {
  items: [],
  totalPrice: 0
};

// Tambah item ke cart
cart.items.push({ name: 'Laptop', price: 15000000 });
cart.totalPrice += 15000000;

// Tambah item lagi
cart.items.push({ name: 'Mouse', price: 250000 });
cart.totalPrice += 250000;

// Update discount
cart.discount = 500000;
cart.totalPrice -= cart.discount;

console.log(cart);
// {
//   items: [
//     { name: 'Laptop', price: 15000000 },
//     { name: 'Mouse', price: 250000 }
//   ],
//   totalPrice: 14750000,
//   discount: 500000
// }

Contoh: Dynamic Form Data

const formData = {};

// User isi form
formData.firstName = 'John';
formData.lastName = 'Doe';
formData.email = '[email protected]';

// Conditional field
if (isBusinessUser) {
  formData.companyName = 'Acme Corp';
  formData.taxId = '123456789';
}

// Dynamic field dari loop
const additionalFields = ['phone', 'address', 'city'];
additionalFields.forEach(field => {
  formData[field] = getUserInput(field);
});

console.log(formData);

Mengubah Nested Property

Kamu juga bisa ubah property dalam nested object:

const user = {
  name: 'John',
  address: {
    street: 'Jl. Sudirman',
    city: 'Jakarta',
    postalCode: '12190'
  }
};

// Ubah nested property
user.address.city = 'Bandung';
user.address.postalCode = '40100';

// Tambah nested property
user.address.country = 'Indonesia';

console.log(user);
// {
//   name: 'John',
//   address: {
//     street: 'Jl. Sudirman',
//     city: 'Bandung',
//     postalCode: '40100',
//     country: 'Indonesia'
//   }
// }

Menambah Property dengan Kondisi

Sering kali kamu mau tambah property berdasarkan kondisi tertentu:

const product = {
  name: 'Laptop',
  price: 15000000
};

// Tambah property berdasarkan kondisi
if (isOnSale) {
  product.discount = 10;
  product.salePrice = product.price * 0.9;
}

if (hasWarranty) {
  product.warrantyPeriod = '2 years';
}

if (inStock > 0) {
  product.stock = inStock;
  product.isAvailable = true;
} else {
  product.isAvailable = false;
}

Update Multiple Properties Sekaligus

Kalau mau update banyak property sekaligus, ada beberapa cara:

Cara 1: Satu-satu

const user = {
  name: 'John',
  age: 25
};

user.age = 26;
user.city = 'Jakarta';
user.job = 'Developer';

Cara 2: Object.assign()

const user = {
  name: 'John',
  age: 25
};

Object.assign(user, {
  age: 26,
  city: 'Jakarta',
  job: 'Developer'
});

console.log(user);
// {
//   name: 'John',
//   age: 26,
//   city: 'Jakarta',
//   job: 'Developer'
// }

Cara 3: Spread operator (lebih modern)

const user = {
  name: 'John',
  age: 25
};

const updatedUser = {
  ...user,
  age: 26,
  city: 'Jakarta',
  job: 'Developer'
};

console.log(updatedUser);
// {
//   name: 'John',
//   age: 26,
//   city: 'Jakarta',
//   job: 'Developer'
// }

Note: Spread operator creates new object, bukan modify yang existing. Kita bakal bahas lebih detail di episode selanjutnya.

Validasi Sebelum Mengubah

Dalam aplikasi nyata, biasanya kamu perlu validasi sebelum ubah property:

const user = {
  name: 'John',
  age: 25,
  email: '[email protected]'
};

// Fungsi untuk update dengan validasi
function updateUser(updates) {
  // Validasi age
  if (updates.age !== undefined) {
    if (updates.age < 0 || updates.age > 150) {
      console.log('Invalid age');
      return;
    }
    user.age = updates.age;
  }

  // Validasi email
  if (updates.email !== undefined) {
    if (!updates.email.includes('@')) {
      console.log('Invalid email');
      return;
    }
    user.email = updates.email;
  }

  // Update property lain
  if (updates.name !== undefined) {
    user.name = updates.name;
  }
}

// Penggunaan
updateUser({ age: 26, email: '[email protected]' });
console.log(user);

Common Pitfalls

Pitfall 1: Typo property name

const user = {
  name: 'John',
  age: 25
};

// Typo - JavaScript gak error, tapi bikin property baru
user.agee = 26; // Seharusnya 'age'

console.log(user);
// {
//   name: 'John',
//   age: 25,    // Masih 25!
//   agee: 26    // Property baru yang salah
// }

Pitfall 2: Lupa cek property exist

const user = {
  name: 'John'
};

// Langsung akses nested tanpa cek
user.address.city = 'Jakarta'; // ✗ Error! address undefined

// Better: check dulu
if (!user.address) {
  user.address = {};
}
user.address.city = 'Jakarta'; // ✓ Works

Pitfall 3: Modify object dalam function

function updateAge(userObj) {
  userObj.age = 30;
  // Ini modify original object!
}

const user = { name: 'John', age: 25 };
updateAge(user);
console.log(user.age); // 30 - original object berubah!

Kalau gak mau modify original, buat copy dulu:

function updateAge(userObj) {
  const newUser = { ...userObj };
  newUser.age = 30;
  return newUser;
}

const user = { name: 'John', age: 25 };
const updated = updateAge(user);
console.log(user.age); // 25 - original tetap
console.log(updated.age); // 30 - copy yang berubah

Best Practices

1. Naming konsisten

// Good
user.firstName = 'John';
user.lastName = 'Doe';

// Avoid - inkonsisten
user.firstName = 'John';
user.last_name = 'Doe';

2. Gunakan const untuk Object

// Good
const config = { theme: 'dark' };
config.theme = 'light'; // ✓

// Avoid
let config = { theme: 'dark' };
config.theme = 'light';

3. Validasi input

// Good
if (typeof age === 'number' && age > 0) {
  user.age = age;
}

// Avoid - langsung assign tanpa validasi
user.age = age;

4. Clear property names

// Good
user.isActive = true;
user.emailVerified = true;

// Avoid - ambiguous
user.status = true;
user.verified = true;

Nah sekarang kamu udah paham cara menambah dan mengubah property dalam Object. Object itu mutable, jadi isi-nya bisa diubah kapan aja. const cuma prevent reassignment, bukan mutation. Di section berikutnya, kita bakal belajar cara menghapus property dari Object. Let's continue!

Menghapus Property dengan Delete Operator

Setelah belajar cara menambah dan mengubah property, sekarang kita bahas cara menghapus property dari Object. Kadang kamu butuh hapus property yang gak diperlukan lagi. Di JavaScript, caranya pake operator delete.

Sintaksnya gampang:

delete object.propertyName

Atau dengan bracket notation:

delete object['propertyName']

Contoh penggunaan:

const user = {
  name: 'John',
  age: 25,
  email: '[email protected]',
  tempData: 'temporary'
};

// Hapus property
delete user.tempData;
delete user.email;

console.log(user);
// Output:
// {
//   name: 'John',
//   age: 25
// }

Property tempData dan email hilang sepenuhnya dari Object. Bukan cuma value-nya yang dihapus, tapi property-nya sendiri juga gak ada lagi.

Delete vs Set ke Undefined

Penting untuk paham bedanya delete property dengan set property ke undefined:

const user = {
  name: 'John',
  age: 25,
  email: '[email protected]'
};

// Set ke undefined
user.email = undefined;
console.log(user);
// {
//   name: 'John',
//   age: 25,
//   email: undefined  // Property masih ada
// }

// Delete property
delete user.email;
console.log(user);
// {
//   name: 'John',
//   age: 25
// }  // Property hilang sepenuhnya

Dengan set ke undefined, property-nya masih exist tapi value-nya undefined. Dengan delete, property-nya benar-benar hilang dari Object.

Cek Property Setelah Delete

Kalau kamu cek property yang udah dihapus, hasilnya undefined:

const product = {
  name: 'Laptop',
  price: 15000000,
  discount: 10
};

delete product.discount;

console.log(product.discount);  // undefined
console.log('discount' in product);  // false

Operator in return false karena property discount udah gak ada lagi.

Return Value dari Delete

Operator delete return boolean value:

• true kalau berhasil menghapus property
• true kalau property gak exist (gak ada yang perlu dihapus)
• false kalau gagal menghapus (jarang terjadi)

const user = {
  name: 'John',
  age: 25
};

const result1 = delete user.age;
console.log(result1);  // true - berhasil hapus

const result2 = delete user.email;
console.log(result2);  // true - property gak ada

console.log(user);
// {
//   name: 'John'
// }

Meskipun property email gak ada, delete tetap return true. Jadi kamu gak perlu cek apakah property exist sebelum delete.

Menghapus Property dengan Bracket Notation

Sama kayak akses property, kamu bisa pake bracket notation untuk delete:

const config = {
  'api-url': '<https://api.example.com>',
  'api-key': 'secret123',
  timeout: 5000
};

// Hapus property dengan hyphen
delete config['api-key'];

console.log(config);
// {
//   'api-url': '<https://api.example.com>',
//   timeout: 5000
// }

Ini berguna kalau property name-nya ada karakter khusus.

Delete Property Secara Dynamic

Dengan bracket notation, kamu bisa hapus property secara dinamis:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta',
  tempToken: 'abc123'
};

// Property yang mau dihapus disimpen dalam variabel
const fieldToRemove = 'tempToken';
delete user[fieldToRemove];

// Atau dari array
const fieldsToRemove = ['city', 'age'];
fieldsToRemove.forEach(field => {
  delete user[field];
});

console.log(user);
// {
//   name: 'John'
// }

Ini berguna waktu kamu mau cleanup multiple properties berdasarkan kondisi tertentu.

Use Case: Cleanup Temporary Data

Salah satu use case paling umum adalah cleanup data sementara:

const formData = {
  username: 'john_doe',
  email: '[email protected]',
  password: 'secret123',
  confirmPassword: 'secret123',
  csrfToken: 'xyz789',
  timestamp: 1234567890
};

// Setelah validasi, hapus data yang gak perlu dikirim
delete formData.confirmPassword;
delete formData.csrfToken;
delete formData.timestamp;

// Kirim ke server
sendToServer(formData);
// {
//   username: 'john_doe',
//   email: '[email protected]',
//   password: 'secret123'
// }

Use Case: Remove Unwanted Data dari API Response

Kadang API return data yang gak diperlukan. Kamu bisa hapus sebelum pake:

const apiResponse = {
  id: 123,
  name: 'John Doe',
  email: '[email protected]',
  password_hash: 'hashed_password',
  internal_id: 'xyz789',
  created_at: '2024-01-01',
  updated_at: '2024-01-15'
};

// Hapus data sensitif/internal
delete apiResponse.password_hash;
delete apiResponse.internal_id;

// Sekarang aman untuk ditampilin ke user
displayUserData(apiResponse);

Use Case: Privacy dan Data Sanitization

Menghapus data pribadi sebelum logging atau analytics:

const userActivity = {
  userId: 123,
  action: 'purchase',
  productId: 456,
  email: '[email protected]',
  creditCard: '1234-5678-9012-3456',
  amount: 100000
};

// Hapus data sensitif sebelum log
delete userActivity.email;
delete userActivity.creditCard;

// Safe untuk di-log
console.log('User activity:', userActivity);
// {
//   userId: 123,
//   action: 'purchase',
//   productId: 456,
//   amount: 100000
// }

Use Case: Conditional Property Removal

Hapus property berdasarkan kondisi:

const product = {
  name: 'Laptop',
  price: 15000000,
  discount: 0,
  promoCode: '',
  warranty: null,
  description: 'Gaming laptop'
};

// Hapus property dengan nilai kosong/null
if (product.discount === 0) {
  delete product.discount;
}

if (!product.promoCode) {
  delete product.promoCode;
}

if (product.warranty === null) {
  delete product.warranty;
}

console.log(product);
// {
//   name: 'Laptop',
//   price: 15000000,
//   description: 'Gaming laptop'
// }

Fungsi Helper untuk Cleanup Object

Kamu bisa bikin fungsi reusable untuk cleanup:

function removeEmptyProperties(obj) {
  for (let key in obj) {
    const value = obj[key];

    // Hapus kalau null, undefined, atau string kosong
    if (value === null || value === undefined || value === '') {
      delete obj[key];
    }
  }

  return obj;
}

const data = {
  name: 'John',
  email: '',
  age: null,
  city: 'Jakarta',
  phone: undefined
};

removeEmptyProperties(data);

console.log(data);
// {
//   name: 'John',
//   city: 'Jakarta'
// }

Fungsi untuk Remove Multiple Properties

function removeProperties(obj, propsToRemove) {
  propsToRemove.forEach(prop => {
    delete obj[prop];
  });

  return obj;
}

const user = {
  id: 123,
  name: 'John',
  email: '[email protected]',
  password: 'secret',
  token: 'abc123',
  sessionId: 'xyz789'
};

// Hapus properties yang gak aman
removeProperties(user, ['password', 'token', 'sessionId']);

console.log(user);
// {
//   id: 123,
//   name: 'John',
//   email: '[email protected]'
// }

Menghapus Nested Property

Kamu juga bisa hapus property dalam nested object:

const user = {
  name: 'John',
  contact: {
    email: '[email protected]',
    phone: '08123456789',
    tempPhone: '08987654321'
  },
  settings: {
    theme: 'dark',
    debugMode: true
  }
};

// Hapus nested property
delete user.contact.tempPhone;
delete user.settings.debugMode;

console.log(user);
// {
//   name: 'John',
//   contact: {
//     email: '[email protected]',
//     phone: '08123456789'
//   },
//   settings: {
//     theme: 'dark'
//   }
// }

Delete Gak Bisa Hapus Property dari Prototype

Operator delete cuma bisa hapus property dari object itu sendiri, bukan dari prototype:

const obj = {
  name: 'John'
};

// Property dari prototype
console.log(obj.toString);  // function toString() {...}

// Coba hapus
delete obj.toString;

// Masih ada karena dari prototype
console.log(obj.toString);  // function toString() {...}

Tapi ini jarang jadi masalah dalam penggunaan sehari-hari.

Performance Consideration

Operator delete bisa slow untuk object yang besar karena JavaScript harus reorganize internal structure. Kalau kamu sering delete properties dalam loop besar, consider alternative approach:

Alternatif 1: Set ke undefined (lebih cepat)

// Slower
delete user.email;

// Faster
user.email = undefined;

Tapi ingat, ini beda secara semantic. Property masih exist.

Alternatif 2: Create new object tanpa property tertentu

const user = {
  name: 'John',
  age: 25,
  tempData: 'temp'
};

// Buat object baru tanpa tempData
const { tempData, ...cleanUser } = user;

console.log(cleanUser);
// {
//   name: 'John',
//   age: 25
// }

Cara ini lebih modern dan performant untuk multiple deletions.

Common Pitfalls

Pitfall 1: Delete property yang gak ada

const user = {
  name: 'John'
};

delete user.email;  // true - gak error, tapi gak ngaruh
console.log(user);  // { name: 'John' }

Gak error, tapi gak ada yang berubah.

Pitfall 2: Lupa cek property exist dalam nested object

const user = {
  name: 'John'
  // address gak ada
};

// Ini error!
delete user.address.city;  // Error: Cannot read property 'city' of undefined

// Better: cek dulu
if (user.address) {
  delete user.address.city;
}

Pitfall 3: Delete dalam loop bisa bikin masalah

const obj = {
  a: 1,
  b: 2,
  c: 3
};

// Bisa unpredictable kalau delete dalam for...in loop
for (let key in obj) {
  delete obj[key];  // Might skip some properties
}

Lebih aman collect keys dulu, baru delete:

const keys = Object.keys(obj);
keys.forEach(key => {
  delete obj[key];
});

Best Practices

1. Cek property exist untuk nested objects

// Good
if (user.settings && user.settings.debugMode) {
  delete user.settings.debugMode;
}

// Or dengan optional chaining
delete user.settings?.debugMode;

2. Document kenapa property dihapus

// Good - jelas maksudnya
// Remove sensitive data before sending to client
delete user.password;
delete user.ssn;

// Avoid - gak jelas kenapa
delete user.password;

3. Consider immutability untuk production code

// Mutable - modify original
delete user.email;

// Immutable - create new object
const { email, ...cleanUser } = user;

4. Validate before delete dalam function

function removeUserData(user, field) {
  if (!user || typeof user !== 'object') {
    console.log('Invalid user object');
    return false;
  }

  if (!(field in user)) {
    console.log('Field not found');
    return false;
  }

  delete user[field];
  return true;
}

Kapan Pakai Delete vs Alternatif

Gunakan delete kalau:

• Perlu hapus property sepenuhnya
• Object-nya kecil
• Performance bukan concern utama
• Mau modify object existing

Gunakan alternatif (destructuring/new object) kalau:

• Performance critical
• Prefer immutability
• Perlu remove multiple properties sekaligus
• Working dengan state management (React, Vue, dll)

// delete - mutable, slower
delete user.tempData;

// destructuring - immutable, faster untuk multiple removals
const { tempData, sessionId, ...cleanUser } = user;

Nah sekarang kamu udah paham cara menghapus property dari Object pake operator delete. Operator ini hapus property sepenuhnya, bukan cuma set ke undefined. Di section berikutnya, kita bakal belajar cara cek apakah property ada dalam Object. Let's continue!

Mengapa Perlu Cek Property Exist?

Sebelum kamu akses atau manipulasi property dalam Object, kadang kamu perlu cek dulu apakah property tersebut ada atau tidak. Kenapa ini penting?

Bayangin kamu punya code kayak gini:

const user = {
  name: 'John',
  age: 25
};

console.log(user.email.toLowerCase());  // Error!

Code ini bakal error karena user.email itu undefined, dan kamu gak bisa panggil method .toLowerCase() pada undefined. Makanya penting untuk cek property exist sebelum dipake.

Di JavaScript, ada beberapa cara untuk cek apakah property ada dalam Object. Kita bakal bahas dua cara paling umum: operator in dan check undefined.

Cara 1: Operator In

Cara paling reliable dan jelas untuk cek property adalah pake operator in. Sintaksnya gampang:

'propertyName' in object

Operator ini return true kalau property ada, false kalau tidak ada:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

console.log('name' in user);    // true
console.log('age' in user);     // true
console.log('email' in user);   // false
console.log('address' in user); // false

Simple dan straightforward. Property name dan age ada, jadi return true. Property email dan address gak ada, jadi return false.

In Operator dengan Variabel

Kamu juga bisa pake variabel sebagai property name:

const user = {
  name: 'John',
  age: 25
};

const fieldToCheck = 'name';
console.log(fieldToCheck in user);  // true

const anotherField = 'email';
console.log(anotherField in user);  // false

Ini berguna waktu kamu perlu cek property secara dinamis.

In Operator untuk Validasi

Salah satu use case paling umum adalah validasi sebelum akses property:

const user = {
  name: 'John',
  age: 25
};

// Cek dulu sebelum akses
if ('email' in user) {
  console.log(user.email.toLowerCase());
} else {
  console.log('Email not found');
}

// Output: Email not found

Dengan check ini, kamu hindari error waktu akses property yang gak ada.

In Operator untuk Nested Property

Untuk nested property, kamu perlu cek tiap level:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    postalCode: '12190'
  }
};

// Cek nested property
if ('address' in user && 'city' in user.address) {
  console.log(user.address.city);  // 'Jakarta'
}

// Cek property yang gak ada
if ('address' in user && 'street' in user.address) {
  console.log(user.address.street);
} else {
  console.log('Street not found');
}

Penting untuk cek parent property dulu sebelum cek child property.

Cara 2: Check Undefined dengan Dot Notation

Cara kedua adalah akses property terus cek apakah hasilnya undefined:

const user = {
  name: 'John',
  age: 25
};

console.log(user.email === undefined);    // true - property gak ada
console.log(user.name === undefined);     // false - property ada

Kalau property gak ada, JavaScript return undefined. Jadi kamu bisa compare dengan undefined untuk cek.

Check Undefined untuk Conditional

Kamu bisa pake check ini dalam conditional:

const user = {
  name: 'John',
  age: 25
};

// Check dengan undefined
if (user.email === undefined) {
  console.log('Email not set');
} else {
  console.log(user.email);
}

// Atau pake negation
if (user.email !== undefined) {
  console.log(user.email.toLowerCase());
}

Perbedaan In Operator vs Check Undefined

Kedua cara ini punya perbedaan penting yang perlu dipahami:

Perbedaan 1: Property dengan Value Undefined

const user = {
  name: 'John',
  email: undefined  // Property ada, tapi value-nya undefined
};

// in operator - cek apakah property exist
console.log('email' in user);           // true - property ada

// check undefined - cek apakah value undefined
console.log(user.email === undefined);  // true - value undefined

Operator in cek apakah property exist, terlepas dari value-nya. Check undefined cek apakah value-nya undefined.

Perbedaan 2: Property yang Gak Ada

const user = {
  name: 'John'
  // email gak ada sama sekali
};

// in operator
console.log('email' in user);           // false - property gak ada

// check undefined
console.log(user.email === undefined);  // true - akses property yang gak ada return undefined

Keduanya bisa dipake untuk cek property yang gak ada, tapi semantic-nya beda.

Kapan Hasil Keduanya Beda?

Ada satu case spesifik di mana hasil keduanya beda:

const user = {
  name: 'John',
  email: undefined  // Explicitly set ke undefined
};

console.log('email' in user);           // true
console.log(user.email === undefined);  // true

delete user.email;  // Hapus property

console.log('email' in user);           // false
console.log(user.email === undefined);  // true

Setelah delete, operator in return false karena property bener-bener gak ada. Tapi check undefined tetap return true karena akses property yang gak ada emang return undefined.

Best Practice: Gunakan In Operator

Untuk kejelasan dan akurasi, best practice-nya adalah gunakan operator in untuk cek property existence:

// Good - jelas maksudnya cek property exist
if ('email' in user) {
  console.log(user.email);
}

// Less clear - bisa berarti cek exist atau cek value
if (user.email !== undefined) {
  console.log(user.email);
}

Operator in lebih eksplisit tentang intention-nya: kamu mau cek apakah property ada atau tidak.

Kapan Check Undefined Berguna?

Check undefined tetap berguna dalam situasi tertentu:

1. Cek apakah property ada DAN punya value

const config = {
  timeout: 5000,
  retries: 0,
  debug: false
};

// in operator - semua property ada
console.log('timeout' in config);  // true
console.log('retries' in config);  // true

// Tapi untuk business logic, mungkin kamu mau cek value-nya
if (config.retries) {
  // Ini gak jalan karena 0 is falsy
}

if (config.retries !== undefined) {
  // Ini jalan karena property ada, value-nya 0
}

2. Distinguish antara "not set" vs "set to undefined"

Dalam beberapa case, perbedaan antara property yang gak ada vs property dengan value undefined itu penting.

Short-circuit dengan Logical OR

Ada cara lain yang sering dipake untuk provide default value:

const user = {
  name: 'John'
  // email gak ada
};

// Gunakan OR operator untuk default value
const email = user.email || '[email protected]';
console.log(email);  // '[email protected]'

const name = user.name || 'Anonymous';
console.log(name);  // 'John'

Tapi hati-hati, ini gak akurat kalau value-nya falsy tapi valid:

const settings = {
  volume: 0,
  enabled: false
};

const volume = settings.volume || 50;  // 50, bukan 0!
console.log(volume);  // Salah! Seharusnya 0

Untuk case ini, lebih baik pake nullish coalescing:

const volume = settings.volume ?? 50;  // 0
console.log(volume);  // Benar! Tetap 0

Contoh: Form Validation

const formData = {
  username: 'john_doe',
  email: '[email protected]',
  password: 'secret123'
};

const requiredFields = ['username', 'email', 'password', 'confirmPassword'];

// Cek apakah semua field required ada
const missingFields = [];

requiredFields.forEach(field => {
  if (!(field in formData)) {
    missingFields.push(field);
  }
});

if (missingFields.length > 0) {
  console.log('Missing fields:', missingFields.join(', '));
  // Output: Missing fields: confirmPassword
} else {
  console.log('All required fields present');
}

Contoh: Safe Property Access

const user = {
  name: 'John',
  preferences: {
    theme: 'dark'
  }
};

// Unsafe - bisa error
// console.log(user.settings.notifications);  // Error!

// Safe dengan in operator
if ('settings' in user && 'notifications' in user.settings) {
  console.log(user.settings.notifications);
} else {
  console.log('Settings not configured');
}

// Atau pake optional chaining (modern)
console.log(user.settings?.notifications);  // undefined, gak error

Contoh: Dynamic Property Check

const user = {
  name: 'John',
  age: 25,
  email: '[email protected]'
};

function hasProperty(obj, prop) {
  return prop in obj;
}

// Check multiple properties
const propertiesToCheck = ['name', 'age', 'phone', 'address'];

propertiesToCheck.forEach(prop => {
  if (hasProperty(user, prop)) {
    console.log(`${prop}: ${user[prop]}`);
  } else {
    console.log(`${prop}: not found`);
  }
});

// Output:
// name: John
// age: 25
// phone: not found
// address: not found

Advanced: HasOwnProperty Method

Ada satu method lagi yang perlu kamu tau namanya: hasOwnProperty(). Method ini mirip operator in, tapi lebih spesifik. Kita skip detail-nya untuk sekarang karena untuk pemula operator in udah cukup. Nanti di level yang lebih advanced, kamu bakal belajar perbedaan antara own property vs inherited property.

Yang penting sekarang: operator in udah cukup untuk 99% kebutuhan kamu.

Common Pitfalls

Pitfall 1: Lupa quote di in operator

const user = {
  name: 'John'
};

// Wrong - 'name' sebagai variabel
console.log(name in user);  // Error! name is not defined

// Correct - 'name' sebagai string
console.log('name' in user);  // true

Pitfall 2: Check undefined dengan loose equality

const user = {
  name: 'John',
  age: null
};

// Loose equality - null == undefined
console.log(user.age == undefined);   // true (misleading!)

// Strict equality - lebih akurat
console.log(user.age === undefined);  // false (correct!)
console.log(user.age === null);       // true (correct!)

Selalu pake strict equality (===) untuk check undefined.

Pitfall 3: Gak cek nested property dengan benar

const user = {
  name: 'John'
};

// Wrong - bisa error
if ('address' in user && user.address.city) {
  // Error jika address undefined
}

// Correct
if ('address' in user && 'city' in user.address) {
  console.log(user.address.city);
}

Best Practices Summary

1. Default ke in operator untuk clarity

// Prefer this
if ('email' in user) {
  sendEmail(user.email);
}

// Over this
if (user.email !== undefined) {
  sendEmail(user.email);
}

2. Check undefined kalau mau distinguish undefined vs not exist

// When distinction matters
if (user.status === undefined) {
  // Status belum di-set
} else {
  // Status udah di-set (bisa null atau value lain)
}

3. Pake strict equality untuk check undefined

// Good
if (user.email === undefined) { }

// Avoid
if (user.email == undefined) { }

4. Consider optional chaining untuk nested access

// Modern approach
const city = user.address?.city;

// Traditional approach
const city = ('address' in user && 'city' in user.address)
  ? user.address.city
  : undefined;

Nah sekarang kamu udah paham berbagai cara untuk cek apakah property ada dalam Object. Operator in adalah cara paling jelas dan reliable. Di section berikutnya, kita bakal belajar tentang method dalam Object - cara simpen fungsi sebagai property. Let's continue!

Function Sebagai Property

Sampai sekarang, kita udah bahas Object yang berisi data kayak string, number, boolean, bahkan array. Tapi ada satu hal menarik lagi: Object juga bisa simpen function! Function yang disimpen sebagai property dalam Object disebut method.

Method ini yang bikin Object jadi lebih powerful. Gak cuma simpen data, tapi juga bisa simpen behavior atau functionality. Bayangin Object kayak mini-application yang punya data dan juga punya aksi yang bisa dilakukan.

Contoh sederhana:

const user = {
  name: 'John',
  age: 25,
  greet: function() {
    console.log('Hello!');
  }
};

Di sini, greet adalah method - function yang jadi property dari Object user.

Apa Itu Method?

Method itu sebenernya function biasa, cuma lokasinya ada di dalam Object sebagai property. Bedanya dengan function biasa:

• Regular function: berdiri sendiri
• Method: jadi bagian dari Object

// Regular function
function sayHello() {
  console.log('Hello!');
}

// Method dalam Object
const user = {
  name: 'John',
  sayHello: function() {
    console.log('Hello!');
  }
};

Fungsinya sama, tapi method lebih terorganisir karena jadi bagian dari Object.

Sintaks Method: Cara Lengkap

Cara paling eksplisit untuk define method adalah dengan keyword function:

const calculator = {
  add: function(a, b) {
    return a + b;
  },
  subtract: function(a, b) {
    return a - b;
  },
  multiply: function(a, b) {
    return a * b;
  }
};

Formatnya sama kayak define property biasa, cuma value-nya adalah function.

Sintaks Method: Shorthand (Modern)

JavaScript modern punya cara yang lebih ringkas. Kamu bisa skip keyword function:

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  },
  multiply(a, b) {
    return a * b;
  }
};

Lihat? Gak ada keyword function, langsung nama method terus parameter. Hasilnya sama persis, cuma lebih bersih dan modern.

Perbandingan Sintaks

Mari kita lihat side-by-side:

// Cara lama (verbose)
const user = {
  name: 'John',
  greet: function() {
    console.log('Hello!');
  },
  introduce: function() {
    console.log('My name is John');
  }
};

// Cara modern (shorthand)
const user = {
  name: 'John',
  greet() {
    console.log('Hello!');
  },
  introduce() {
    console.log('My name is John');
  }
};

Kedua cara ini sama persis dalam fungsionalitas. Tapi cara modern lebih direkomendasikan karena:

1. Lebih singkat
2. Lebih mudah dibaca
3. Konsisten dengan class syntax (bakal dipelajari nanti)

Memanggil Method

Untuk manggil method, pake nama Object, titik, nama method, terus parentheses:

const user = {
  name: 'John',
  greet() {
    console.log('Hello!');
  }
};

// Panggil method
user.greet();  // Output: Hello!

Penting: Harus pake parentheses () untuk execute method. Kalau gak pake parentheses, kamu cuma akses function object-nya, bukan execute-nya.

const user = {
  greet() {
    console.log('Hello!');
  }
};

// Dengan parentheses - execute function
user.greet();  // Output: Hello!

// Tanpa parentheses - akses function object
console.log(user.greet);  // Output: [Function: greet]

Method dengan Parameter

Method bisa terima parameter kayak function biasa:

const calculator = {
  add(a, b) {
    return a + b;
  },
  subtract(a, b) {
    return a - b;
  }
};

// Panggil dengan argument
const sum = calculator.add(5, 3);
console.log(sum);  // 8

const difference = calculator.subtract(10, 4);
console.log(difference);  // 6

Method dengan Return Value

Method juga bisa return value:

const math = {
  square(num) {
    return num * num;
  },
  cube(num) {
    return num * num * num;
  },
  isEven(num) {
    return num % 2 === 0;
  }
};

console.log(math.square(5));   // 25
console.log(math.cube(3));     // 27
console.log(math.isEven(10));  // true
console.log(math.isEven(7));   // false

Contoh: User Object dengan Methods

const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 25,

  getFullName() {
    return this.firstName + ' ' + this.lastName;
  },

  isAdult() {
    return this.age >= 18;
  },

  celebrateBirthday() {
    this.age++;
    console.log('Happy birthday! Now ' + this.age + ' years old');
  }
};

console.log(user.getFullName());  // 'John Doe'
console.log(user.isAdult());      // true
user.celebrateBirthday();         // 'Happy birthday! Now 26 years old'

Note: Ada keyword this di sini. Kita bakal bahas detail tentang this di section berikutnya. Untuk sekarang, tau aja kalau this refer ke Object itu sendiri.

Contoh: Product Object

const product = {
  name: 'Laptop',
  price: 15000000,
  stock: 10,

  getInfo() {
    return `${this.name} - Rp ${this.price}`;
  },

  isAvailable() {
    return this.stock > 0;
  },

  purchase(quantity) {
    if (quantity > this.stock) {
      console.log('Not enough stock');
      return false;
    }

    this.stock -= quantity;
    console.log(`Purchased ${quantity} items. Stock remaining: ${this.stock}`);
    return true;
  },

  restock(quantity) {
    this.stock += quantity;
    console.log(`Restocked ${quantity} items. Total stock: ${this.stock}`);
  }
};

console.log(product.getInfo());     // 'Laptop - Rp 15000000'
console.log(product.isAvailable()); // true
product.purchase(3);                // 'Purchased 3 items. Stock remaining: 7'
product.restock(5);                 // 'Restocked 5 items. Total stock: 12'

Contoh: Shopping Cart

const shoppingCart = {
  items: [],

  addItem(item) {
    this.items.push(item);
    console.log(`Added ${item.name} to cart`);
  },

  removeItem(itemName) {
    const index = this.items.findIndex(item => item.name === itemName);
    if (index !== -1) {
      this.items.splice(index, 1);
      console.log(`Removed ${itemName} from cart`);
    }
  },

  getTotalPrice() {
    return this.items.reduce((total, item) => total + item.price, 0);
  },

  checkout() {
    const total = this.getTotalPrice();
    console.log(`Total: Rp ${total}`);
    this.items = [];
    console.log('Cart cleared');
  }
};

// Penggunaan
shoppingCart.addItem({ name: 'Laptop', price: 15000000 });
shoppingCart.addItem({ name: 'Mouse', price: 250000 });
console.log('Total:', shoppingCart.getTotalPrice()); // 15250000
shoppingCart.checkout();

Method Bisa Panggil Method Lain

Dalam satu Object, method bisa panggil method lain:

const calculator = {
  add(a, b) {
    return a + b;
  },

  subtract(a, b) {
    return a - b;
  },

  addThenDouble(a, b) {
    const sum = this.add(a, b);  // Panggil method lain
    return sum * 2;
  },

  calculate(a, b, operation) {
    if (operation === 'add') {
      return this.add(a, b);
    } else if (operation === 'subtract') {
      return this.subtract(a, b);
    }
  }
};

console.log(calculator.addThenDouble(5, 3));      // 16
console.log(calculator.calculate(10, 3, 'add')); // 13

Mix Data dan Method

Kelebihan Object adalah kamu bisa combine data dengan method yang manipulate data tersebut:

const counter = {
  count: 0,

  increment() {
    this.count++;
    console.log('Count:', this.count);
  },

  decrement() {
    this.count--;
    console.log('Count:', this.count);
  },

  reset() {
    this.count = 0;
    console.log('Counter reset');
  },

  getValue() {
    return this.count;
  }
};

counter.increment();  // Count: 1
counter.increment();  // Count: 2
counter.increment();  // Count: 3
counter.decrement();  // Count: 2
console.log(counter.getValue()); // 2
counter.reset();      // Counter reset

Semua yang berhubungan dengan counter ada dalam satu tempat: data (count) dan behavior (method-method).

Arrow Function sebagai Method?

Kamu mungkin mikir: "Bisa gak pake arrow function untuk method?" Secara teknis bisa, tapi gak direkomendasikan:

// Avoid - arrow function sebagai method
const user = {
  name: 'John',
  greet: () => {
    console.log('Hello');
  }
};

Kenapa gak direkomendasikan? Karena arrow function punya behavior berbeda untuk keyword this (bakal kita bahas di section berikutnya). Untuk sekarang, ingat aja: gunakan regular function untuk method, bukan arrow function.

Method dengan Conditional Logic

Method bisa punya logic yang kompleks:

const account = {
  balance: 100000,

  deposit(amount) {
    if (amount <= 0) {
      console.log('Invalid amount');
      return false;
    }

    this.balance += amount;
    console.log(`Deposited Rp ${amount}. New balance: Rp ${this.balance}`);
    return true;
  },

  withdraw(amount) {
    if (amount <= 0) {
      console.log('Invalid amount');
      return false;
    }

    if (amount > this.balance) {
      console.log('Insufficient balance');
      return false;
    }

    this.balance -= amount;
    console.log(`Withdrew Rp ${amount}. New balance: Rp ${this.balance}`);
    return true;
  },

  getBalance() {
    return this.balance;
  }
};

account.deposit(50000);   // 'Deposited Rp 50000. New balance: Rp 150000'
account.withdraw(30000);  // 'Withdrew Rp 30000. New balance: Rp 120000'
account.withdraw(200000); // 'Insufficient balance'

Naming Convention untuk Method

Best practice untuk naming method:

1. Gunakan verb (kata kerja)

Method itu aksi, jadi nama-nya harus verb:

const user = {
  // Good - verb
  greet() { },
  calculateAge() { },
  sendEmail() { },

  // Avoid - noun
  greeting() { },
  age() { },
  email() { }
};

2. Deskriptif dan jelas

// Good - jelas apa yang dilakukan
getUserInfo() { }
validateEmail() { }
saveToDatabase() { }

// Avoid - terlalu generic
get() { }
check() { }
save() { }

3. camelCase

// Good
calculateTotalPrice() { }
getUserFullName() { }

// Avoid
calculate_total_price() { }
GetUserFullName() { }

Method Sebagai Helper Function

Method bisa jadi helper untuk logic yang lebih complex:

const validator = {
  isEmail(str) {
    return str.includes('@');
  },

  isValidPassword(password) {
    return password.length >= 6;
  },

  isValidUsername(username) {
    return username.length >= 3 && username.length <= 20;
  },

  validateUser(userData) {
    const errors = [];

    if (!this.isValidUsername(userData.username)) {
      errors.push('Invalid username');
    }

    if (!this.isEmail(userData.email)) {
      errors.push('Invalid email');
    }

    if (!this.isValidPassword(userData.password)) {
      errors.push('Invalid password');
    }

    return {
      isValid: errors.length === 0,
      errors: errors
    };
  }
};

const result = validator.validateUser({
  username: 'jo',
  email: 'invalid',
  password: '123'
});

console.log(result);
// {
//   isValid: false,
//   errors: ['Invalid username', 'Invalid email', 'Invalid password']
// }

Kenapa Pakai Method?

Beberapa keuntungan pake method dalam Object:

1. Organization

Semua yang related ada dalam satu tempat:

// Good - organized
const user = {
  name: 'John',
  greet() { },
  introduce() { }
};

// vs scattered functions
const userName = 'John';
function greetUser() { }
function introduceUser() { }

2. Encapsulation

Data dan behavior jadi satu kesatuan:

const bankAccount = {
  balance: 0,
  deposit(amount) {
    this.balance += amount;
  },
  withdraw(amount) {
    this.balance -= amount;
  }
};

3. Reusability

Bisa dipake berkali-kali dengan mudah:

const calculator = {
  add(a, b) {
    return a + b;
  }
};

console.log(calculator.add(5, 3));
console.log(calculator.add(10, 20));
console.log(calculator.add(100, 50));

Common Mistakes

Mistake 1: Lupa parentheses waktu panggil method

const user = {
  greet() {
    console.log('Hello!');
  }
};

user.greet;   // ✗ Gak execute, cuma akses function
user.greet(); // ✓ Execute function

Mistake 2: Pake arrow function untuk method

// Avoid
const user = {
  name: 'John',
  greet: () => {  // Arrow function problematic untuk method
    console.log(this.name);  // this gak work as expected
  }
};

// Better
const user = {
  name: 'John',
  greet() {  // Regular function
    console.log(this.name);  // this works correctly
  }
};

Mistake 3: Typo dalam nama method

const user = {
  greet() {
    console.log('Hello!');
  }
};

user.greeet();  // ✗ Error! Method 'greeet' doesn't exist
user.greet();   // ✓ Correct

Best Practices

1. Method untuk aksi, property untuk data

// Good
const user = {
  name: 'John',        // Data
  age: 25,             // Data
  greet() { }          // Aksi
  calculateAge() { }   // Aksi
};

2. Keep method simple dan focused

// Good - satu method satu purpose
const user = {
  getFullName() {
    return `${this.firstName} ${this.lastName}`;
  },

  getAge() {
    return this.age;
  }
};

// Avoid - method terlalu kompleks
const user = {
  getAllInfo() {
    // Terlalu banyak responsibility
  }
};

3. Return value yang meaningful

// Good - return value yang berguna
isValid() {
  return this.email.includes('@');
}

calculate() {
  return this.price * this.quantity;
}

Nah sekarang kamu udah paham cara bikin dan pake method dalam Object! Method adalah function yang jadi property dari Object. Kamu bisa define pake cara lengkap dengan keyword function, atau pake shorthand yang lebih modern. Di section berikutnya, kita bakal bahas tentang keyword this yang sering muncul dalam method. Let's continue!

Apa Itu Keyword This?

Di section sebelumnya, kamu udah lihat keyword this muncul beberapa kali dalam contoh method. Sekarang saatnya kita bahas tuntas apa itu this dan kenapa penting banget dalam method.

Singkatnya: this adalah referensi ke Object itu sendiri. Waktu kamu pake this dalam method, kamu basically bilang "Object yang sekarang lagi pake method ini".

Bayangin kayak gini: kamu lagi ngobrol sama temen, terus kamu bilang "Gue suka kopi". Kata "gue" di sini refer ke diri kamu sendiri. Nah, this itu kayak kata "gue" tapi dalam konteks Object.

This Merujuk ke Object

Mari kita lihat contoh sederhana:

const user = {
  name: 'John',
  age: 25,
  greet() {
    console.log(this);
  }
};

user.greet();
// Output: { name: 'John', age: 25, greet: [Function: greet] }

Waktu kamu panggil user.greet(), this di dalam method tersebut refer ke Object user itu sendiri. Jadi this = user.

Mengakses Property dengan This

Kegunaan utama this adalah untuk akses property lain dalam Object yang sama:

const user = {
  name: 'John',
  age: 25,
  greet() {
    return 'Hello, my name is ' + this.name;
  }
};

console.log(user.greet());  // 'Hello, my name is John'

Di dalam method greet(), this.name artinya "ambil property name dari Object ini". Karena method dipanggil dari user, maka this.name = user.name = 'John'.

Kenapa Pakai This?

Pertanyaan bagus! Kenapa gak langsung pake nama Object-nya aja?

// Tanpa this
const user = {
  name: 'John',
  greet() {
    return 'Hello, my name is ' + user.name;  // Langsung pake 'user'
  }
};

Ini bisa jalan, tapi ada masalahnya. Kalau kamu copy Object ke variabel lain:

const user = {
  name: 'John',
  greet() {
    return 'Hello, my name is ' + user.name;
  }
};

const anotherUser = user;
anotherUser.name = 'Jane';

console.log(anotherUser.greet());  // 'Hello, my name is John' ???

Hasilnya salah karena method masih nunjuk ke user.name yang asli. Dengan this, problem ini gak terjadi:

const user = {
  name: 'John',
  greet() {
    return 'Hello, my name is ' + this.name;  // Pake this
  }
};

const anotherUser = user;
anotherUser.name = 'Jane';

console.log(anotherUser.greet());  // 'Hello, my name is Jane' ✓

Dengan this, method selalu refer ke Object yang lagi manggil method tersebut.

Contoh: Akses Multiple Properties

this berguna waktu method butuh akses banyak property:

const user = {
  firstName: 'John',
  lastName: 'Doe',
  age: 25,
  city: 'Jakarta',

  getFullInfo() {
    return `${this.firstName} ${this.lastName}, ${this.age} years old, from ${this.city}`;
  }
};

console.log(user.getFullInfo());
// 'John Doe, 25 years old, from Jakarta'

Bayangin kalau harus tulis user.firstName, user.lastName, dll. Dengan this, lebih singkat dan lebih flexible.

Contoh: Method yang Modify Property

this juga dipake waktu method modify property:

const counter = {
  count: 0,

  increment() {
    this.count++;  // Ubah property count
  },

  decrement() {
    this.count--;
  },

  reset() {
    this.count = 0;
  },

  getValue() {
    return this.count;
  }
};

counter.increment();
counter.increment();
console.log(counter.getValue());  // 2

counter.reset();
console.log(counter.getValue());  // 0

Tanpa this, method gak bisa akses atau modify property dalam Object yang sama.

Contoh: Calculator dengan This

const calculator = {
  result: 0,

  add(num) {
    this.result += num;
    return this;  // Return this untuk chaining
  },

  subtract(num) {
    this.result -= num;
    return this;
  },

  multiply(num) {
    this.result *= num;
    return this;
  },

  getResult() {
    return this.result;
  }
};

// Bisa chain method calls
calculator.add(10).multiply(2).subtract(5);
console.log(calculator.getResult());  // 15

Contoh: Product dengan Discount

const product = {
  name: 'Laptop',
  price: 15000000,
  discount: 0,

  setDiscount(percentage) {
    this.discount = percentage;
  },

  getFinalPrice() {
    const discountAmount = this.price * (this.discount / 100);
    return this.price - discountAmount;
  },

  getInfo() {
    return `${this.name} - Original: Rp ${this.price}, Final: Rp ${this.getFinalPrice()}`;
  }
};

product.setDiscount(10);
console.log(product.getInfo());
// 'Laptop - Original: Rp 15000000, Final: Rp 13500000'

Lihat? Method bisa panggil method lain pake this.methodName().

This dalam Nested Method Call

Method bisa panggil method lain dalam Object yang sama:

const user = {
  firstName: 'John',
  lastName: 'Doe',

  getFirstName() {
    return this.firstName;
  },

  getLastName() {
    return this.lastName;
  },

  getFullName() {
    return this.getFirstName() + ' ' + this.getLastName();
  }
};

console.log(user.getFullName());  // 'John Doe'

getFullName() manggil this.getFirstName() dan this.getLastName(), yang mana keduanya juga method dalam Object yang sama.

Use Case: Bank Account

Contoh real-world yang lebih kompleks:

const bankAccount = {
  owner: 'John Doe',
  balance: 1000000,
  transactions: [],

  deposit(amount) {
    this.balance += amount;
    this.transactions.push({
      type: 'deposit',
      amount: amount,
      date: new Date()
    });
    this.logTransaction('Deposit', amount);
  },

  withdraw(amount) {
    if (amount > this.balance) {
      console.log('Insufficient balance');
      return false;
    }

    this.balance -= amount;
    this.transactions.push({
      type: 'withdraw',
      amount: amount,
      date: new Date()
    });
    this.logTransaction('Withdraw', amount);
    return true;
  },

  getBalance() {
    return this.balance;
  },

  logTransaction(type, amount) {
    console.log(`${type}: Rp ${amount}. New balance: Rp ${this.balance}`);
  },

  getStatement() {
    console.log(`Account owner: ${this.owner}`);
    console.log(`Current balance: Rp ${this.balance}`);
    console.log(`Total transactions: ${this.transactions.length}`);
  }
};

bankAccount.deposit(500000);
// 'Deposit: Rp 500000. New balance: Rp 1500000'

bankAccount.withdraw(200000);
// 'Withdraw: Rp 200000. New balance: Rp 1300000'

bankAccount.getStatement();
// Account owner: John Doe
// Current balance: Rp 1300000
// Total transactions: 2

Semua method bisa saling akses property dan method lain pake this.

This Sebagai Context

this itu sebenernya adalah execution context - konteks di mana method dipanggil. Dalam kebanyakan kasus, execution context-nya adalah Object yang punya method tersebut.

const obj1 = {
  name: 'Object 1',
  getName() {
    return this.name;
  }
};

const obj2 = {
  name: 'Object 2',
  getName() {
    return this.name;
  }
};

console.log(obj1.getName());  // 'Object 1'
console.log(obj2.getName());  // 'Object 2'

Method yang sama (getName) return value berbeda tergantung Object mana yang manggil.

Warning: Arrow Function dan This

Ini bagian advanced yang perlu kamu tau. Arrow function punya behavior berbeda untuk this:

const user = {
  name: 'John',

  // Regular function - this works correctly
  greet() {
    console.log('Hello ' + this.name);
  },

  // Arrow function - this DOESN'T work as expected
  greetArrow: () => {
    console.log('Hello ' + this.name);  // this is undefined!
  }
};

user.greet();       // 'Hello John' ✓
user.greetArrow();  // 'Hello undefined' ✗

Dalam arrow function, this gak refer ke Object. Makanya untuk method, selalu gunakan regular function, bukan arrow function.

Kamu gak perlu paham detail kenapa sekarang. Yang penting ingat: method = regular function, bukan arrow function.

Common Mistakes

Mistake 1: Lupa pake this

const user = {
  name: 'John',
  greet() {
    return 'Hello ' + name;  // ✗ Error! name is not defined
  }
};

// Correct
const user = {
  name: 'John',
  greet() {
    return 'Hello ' + this.name;  // ✓
  }
};

Mistake 2: Pake arrow function untuk method

// Wrong
const user = {
  name: 'John',
  greet: () => {
    return 'Hello ' + this.name;  // this doesn't work!
  }
};

// Correct
const user = {
  name: 'John',
  greet() {
    return 'Hello ' + this.name;  // this works!
  }
};

Mistake 3: Typo nama property

const user = {
  name: 'John',
  greet() {
    return 'Hello ' + this.nama;  // ✗ Typo! Seharusnya this.name
  }
};

console.log(user.greet());  // 'Hello undefined'

Best Practices

1. Selalu pake this untuk akses property dalam method

// Good
const user = {
  name: 'John',
  greet() {
    return 'Hello ' + this.name;
  }
};

// Avoid
const user = {
  name: 'John',
  greet() {
    return 'Hello ' + user.name;  // Hardcoded object name
  }
};

2. Gunakan regular function untuk method

// Good
const obj = {
  method() { }
};

// Avoid
const obj = {
  method: () => { }
};

3. Konsisten dengan naming

// Good - jelas property mana yang diakses
const user = {
  firstName: 'John',
  lastName: 'Doe',
  getFullName() {
    return this.firstName + ' ' + this.lastName;
  }
};

Visualisasi This

Untuk lebih jelas, bayangin kayak gini:

const user = {
  name: 'John',
  greet() {
    // this = user (Object yang manggil method ini)
    // this.name = user.name = 'John'
    return 'Hello ' + this.name;
  }
};

user.greet();  // this dalam greet() = user

Setiap kali method dipanggil, this automatically di-set ke Object yang manggil method tersebut.

This Makes Object Powerful

Dengan this, Object jadi self-contained unit:

const player = {
  name: 'Player 1',
  health: 100,
  score: 0,

  takeDamage(damage) {
    this.health -= damage;
    console.log(`${this.name} took ${damage} damage. Health: ${this.health}`);

    if (this.health <= 0) {
      this.die();
    }
  },

  heal(amount) {
    this.health += amount;
    console.log(`${this.name} healed ${amount}. Health: ${this.health}`);
  },

  addScore(points) {
    this.score += points;
    console.log(`${this.name} scored ${points} points. Total: ${this.score}`);
  },

  die() {
    console.log(`${this.name} has died!`);
    this.health = 0;
  }
};

player.takeDamage(30);  // 'Player 1 took 30 damage. Health: 70'
player.heal(20);        // 'Player 1 healed 20. Health: 90'
player.addScore(100);   // 'Player 1 scored 100 points. Total: 100'

Semua data dan behavior player ada dalam satu Object, dan semua method bisa saling akses pake this.

Kapan This Paling Berguna?

this paling berguna waktu:

1. Method butuh akses property lain dalam Object yang sama
2. Method butuh modify property
3. Method butuh panggil method lain
4. Kamu mau Object yang reusable dan flexible

Tanpa this, Object cuma container data biasa. Dengan this, Object jadi powerful unit yang punya data dan behavior.

Advanced Note: This Binding

Ini topik advanced yang bakal dipelajari nanti. Untuk sekarang, tau aja bahwa:

• this dalam regular function = Object yang manggil
• this dalam arrow function = berbeda (gak reliable)
• this bisa berubah tergantung gimana function dipanggil

Tapi untuk Object method sederhana kayak yang kita bahas, this selalu refer ke Object itu sendiri.

Nah sekarang kamu udah paham keyword this! Ini adalah cara bagi method untuk refer ke Object itu sendiri, supaya bisa akses property dan method lain. Ingat: selalu gunakan regular function untuk method, bukan arrow function. Di section berikutnya, kita bakal belajar tentang nested object dan cara kerjanya. Let's continue!

Apa Itu Nested Object?

Sampai sekarang kita udah bahas Object yang propertynya berisi data sederhana kayak string, number, atau boolean. Tapi Object bisa lebih kompleks dari itu. Kamu bisa simpen Object di dalam Object! Ini yang disebut nested object atau object bersarang.

Bayangin kayak kotak di dalam kotak. Object luar adalah container besar, dan di dalamnya ada container-container kecil lagi yang masing-masing punya isi sendiri.

Contoh sederhana:

const user = {
  name: 'John',
  age: 25,
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

Di sini, property address bukan string atau number, tapi Object lain yang punya property city dan zip.

Kenapa Pakai Nested Object?

Nested object berguna untuk grup data yang berhubungan. Daripada property-property terpisah, lebih baik kelompokin yang related.

Tanpa nested object:

const user = {
  name: 'John',
  age: 25,
  addressCity: 'Jakarta',
  addressZip: '12000',
  addressStreet: 'Jl. Sudirman',
  addressCountry: 'Indonesia'
};

Kurang rapi kan? Dengan nested object:

const user = {
  name: 'John',
  age: 25,
  address: {
    city: 'Jakarta',
    zip: '12000',
    street: 'Jl. Sudirman',
    country: 'Indonesia'
  }
};

Lebih terstruktur! Semua yang berhubungan dengan alamat ada dalam satu grup.

Mengakses Nested Property

Untuk akses property dalam nested object, tinggal chain dot notation-nya:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

console.log(user.address.city);  // 'Jakarta'
console.log(user.address.zip);   // '12000'

user.address kasih kamu Object address, terus .city kasih kamu property city dari Object tersebut.

Nested Object Lebih Dalam

Kamu bisa bikin nested object yang lebih dalam lagi:

const company = {
  name: 'BuildWithAngga',
  founded: 2019,
  headquarters: {
    country: 'Indonesia',
    city: 'Jakarta',
    office: {
      building: 'Menara BCA',
      floor: 15,
      room: 'A-101'
    }
  }
};

// Akses nested yang dalam
console.log(company.headquarters.office.building);  // 'Menara BCA'
console.log(company.headquarters.office.floor);     // 15

Tapi jangan terlalu dalam. Maksimal 3-4 level biar gak susah dibaca dan di-maintain.

Contoh: User Profile Lengkap

const userProfile = {
  // Basic info
  id: 123,
  username: 'john_doe',
  email: '[email protected]',

  // Personal data
  personal: {
    firstName: 'John',
    lastName: 'Doe',
    age: 25,
    gender: 'male'
  },

  // Contact info
  contact: {
    phone: '08123456789',
    address: {
      street: 'Jl. Sudirman No. 123',
      city: 'Jakarta',
      province: 'DKI Jakarta',
      zip: '12190',
      country: 'Indonesia'
    }
  },

  // Preferences
  preferences: {
    theme: 'dark',
    language: 'id',
    notifications: {
      email: true,
      push: true,
      sms: false
    }
  }
};

// Akses nested properties
console.log(userProfile.personal.firstName);               // 'John'
console.log(userProfile.contact.address.city);             // 'Jakarta'
console.log(userProfile.preferences.notifications.email);  // true

Lihat betapa terorganisirnya? Semua info terkait dikelompokkan dengan rapi.

Contoh: E-commerce Product

const product = {
  id: 'PRD001',
  name: 'Laptop ASUS ROG',

  pricing: {
    original: 25000000,
    discount: 10,
    final: 22500000,
    currency: 'IDR'
  },

  specs: {
    processor: 'Intel Core i7',
    ram: '16GB',
    storage: '512GB SSD',
    display: {
      size: '15.6 inch',
      resolution: '1920x1080',
      refreshRate: '144Hz'
    }
  },

  inventory: {
    stock: 15,
    warehouse: 'Jakarta',
    supplier: {
      name: 'PT Tech Indonesia',
      contact: '021-12345678'
    }
  }
};

console.log(product.pricing.final);                    // 22500000
console.log(product.specs.display.refreshRate);        // '144Hz'
console.log(product.inventory.supplier.name);          // 'PT Tech Indonesia'

Mengubah Nested Property

Kamu bisa ubah nested property sama kayak property biasa:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

// Ubah nested property
user.address.city = 'Bandung';
user.address.zip = '40100';

console.log(user.address);
// {
//   city: 'Bandung',
//   zip: '40100'
// }

Menambah Property ke Nested Object

Bisa juga tambah property baru ke nested object:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta'
  }
};

// Tambah property baru
user.address.zip = '12000';
user.address.street = 'Jl. Sudirman';

console.log(user.address);
// {
//   city: 'Jakarta',
//   zip: '12000',
//   street: 'Jl. Sudirman'
// }

Menghapus Nested Property

Sama kayak property biasa, bisa pake operator delete:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000',
    tempData: 'temporary'
  }
};

// Hapus nested property
delete user.address.tempData;

console.log(user.address);
// {
//   city: 'Jakarta',
//   zip: '12000'
// }

Cek Nested Property Exist

Untuk cek nested property, harus cek tiap level:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta'
  }
};

// Cek nested property
if ('address' in user && 'city' in user.address) {
  console.log(user.address.city);  // 'Jakarta'
}

// Atau pake optional chaining (modern)
console.log(user.address?.city);              // 'Jakarta'
console.log(user.address?.zip);               // undefined
console.log(user.contact?.phone);             // undefined (contact gak ada)

Optional chaining (?.) lebih aman karena gak error kalau property gak ada.

Nested Object dalam Method

Method bisa akses nested property pake this:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    country: 'Indonesia'
  },

  getLocation() {
    return `${this.address.city}, ${this.address.country}`;
  },

  updateCity(newCity) {
    this.address.city = newCity;
  }
};

console.log(user.getLocation());  // 'Jakarta, Indonesia'

user.updateCity('Bandung');
console.log(user.getLocation());  // 'Bandung, Indonesia'

Array dalam Nested Object

Nested object juga bisa berisi array:

const student = {
  name: 'Budi',
  nim: '2021001',
  courses: [
    {
      code: 'CS101',
      name: 'Programming',
      credits: 3,
      grade: 'A'
    },
    {
      code: 'CS102',
      name: 'Data Structures',
      credits: 4,
      grade: 'A-'
    }
  ],
  contact: {
    email: '[email protected]',
    phone: '08123456789'
  }
};

// Akses array dalam nested object
console.log(student.courses[0].name);   // 'Programming'
console.log(student.courses[1].grade);  // 'A-'

// Loop courses
student.courses.forEach(course => {
  console.log(`${course.code}: ${course.name} - Grade: ${course.grade}`);
});

Contoh: Shopping Cart

const shoppingCart = {
  user: {
    id: 123,
    name: 'John Doe',
    email: '[email protected]'
  },

  items: [
    {
      id: 'PRD001',
      name: 'Laptop',
      price: 15000000,
      quantity: 1
    },
    {
      id: 'PRD002',
      name: 'Mouse',
      price: 250000,
      quantity: 2
    }
  ],

  shipping: {
    address: {
      street: 'Jl. Sudirman',
      city: 'Jakarta',
      zip: '12190'
    },
    method: 'express',
    cost: 50000
  },

  getTotalItems() {
    return this.items.reduce((total, item) => total + item.quantity, 0);
  },

  getTotalPrice() {
    const itemsTotal = this.items.reduce((total, item) => {
      return total + (item.price * item.quantity);
    }, 0);

    return itemsTotal + this.shipping.cost;
  },

  getShippingAddress() {
    const addr = this.shipping.address;
    return `${addr.street}, ${addr.city} ${addr.zip}`;
  }
};

console.log('Total items:', shoppingCart.getTotalItems());      // 3
console.log('Total price:', shoppingCart.getTotalPrice());      // 15550000
console.log('Ship to:', shoppingCart.getShippingAddress());
// 'Jl. Sudirman, Jakarta 12190'

Nested Object dengan Destructuring

Kamu bisa extract nested property dengan destructuring (topik advanced):

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

// Nested destructuring
const { address: { city, zip } } = user;

console.log(city);  // 'Jakarta'
console.log(zip);   // '12000'

Tapi untuk pemula, akses biasa dengan dot notation lebih jelas.

Best Practices untuk Nested Object

1. Jangan terlalu dalam

// Avoid - terlalu banyak level
user.data.profile.settings.privacy.notifications.email.frequency

// Better - maksimal 3-4 level
user.settings.notifications.email

2. Group data yang logis

// Good - grup yang logis
const user = {
  personal: { name, age },
  contact: { email, phone },
  preferences: { theme, language }
};

// Avoid - campur-campur
const user = {
  name, email, theme, age, phone, language
};

3. Consistent naming

// Good - naming konsisten
const product = {
  pricing: { original, discount, final },
  shipping: { weight, dimensions }
};

// Avoid - inkonsisten
const product = {
  price_info: { original, discount },
  ShippingData: { weight }
};

4. Validate sebelum akses nested yang dalam

// Good - aman
if (user.address && user.address.coordinates) {
  const lat = user.address.coordinates.lat;
}

// Better - pake optional chaining
const lat = user.address?.coordinates?.lat;

// Avoid - bisa error
const lat = user.address.coordinates.lat;  // Error jika address undefined

Use Case: Configuration Object

const appConfig = {
  app: {
    name: 'MyApp',
    version: '1.0.0',
    environment: 'production'
  },

  server: {
    host: 'localhost',
    port: 3000,
    ssl: {
      enabled: true,
      cert: '/path/to/cert',
      key: '/path/to/key'
    }
  },

  database: {
    connection: {
      host: 'db.example.com',
      port: 5432,
      name: 'myapp_db'
    },
    pool: {
      min: 2,
      max: 10
    }
  },

  features: {
    authentication: true,
    analytics: {
      enabled: true,
      provider: 'google',
      trackingId: 'UA-123456'
    }
  }
};

// Akses config
console.log(appConfig.server.ssl.enabled);           // true
console.log(appConfig.database.pool.max);            // 10
console.log(appConfig.features.analytics.provider);  // 'google'

Use Case: API Response

const apiResponse = {
  status: 'success',
  code: 200,
  data: {
    user: {
      id: 123,
      username: 'john_doe',
      profile: {
        name: 'John Doe',
        avatar: '<https://example.com/avatar.jpg>',
        bio: 'Web developer'
      },
      stats: {
        followers: 150,
        following: 200,
        posts: 45
      }
    },
    token: 'abc123xyz',
    permissions: ['read', 'write', 'delete']
  },
  meta: {
    timestamp: '2024-01-15T10:30:00Z',
    requestId: 'req_xyz789'
  }
};

// Extract data
const userId = apiResponse.data.user.id;
const userName = apiResponse.data.user.profile.name;
const followers = apiResponse.data.user.stats.followers;

console.log(`User: ${userName} (ID: ${userId})`);
console.log(`Followers: ${followers}`);

Common Pitfalls

Pitfall 1: Akses nested tanpa cek exist

const user = {
  name: 'John'
  // address gak ada
};

// Error!
console.log(user.address.city);  // Cannot read property 'city' of undefined

// Safe
if (user.address) {
  console.log(user.address.city);
}

// Atau pake optional chaining
console.log(user.address?.city);  // undefined, gak error

Pitfall 2: Nested terlalu dalam

// Susah dibaca dan di-maintain
user.data.profile.settings.privacy.notifications.email.preferences.frequency

Pitfall 3: Inconsistent structure

// Avoid - struktur gak konsisten
const user1 = {
  address: 'Jakarta'  // String
};

const user2 = {
  address: {          // Object
    city: 'Jakarta'
  }
};

Kapan Pakai Nested Object?

Gunakan nested object kalau:

1. Ada grup data yang jelas berhubungan
   • User → personal info, contact, preferences
   • Product → pricing, specs, inventory
2. Mau organisasi yang lebih baik
   • Daripada userCity, userZip, lebih baik user.address.city
3. Data punya hierarki natural
   • Company → departments → teams → members
4. API response kompleks
   • Struktur data dari backend biasanya nested

Jangan pake nested object kalau:

• Data simpel dan gak ada grup yang jelas
• Nested-nya jadi terlalu dalam (>4 level)
• Bikin code susah dibaca

Nah sekarang kamu udah paham nested object! Object bisa berisi object lain, yang berguna untuk grup data yang berhubungan. Akses-nya tinggal chain dot notation, dan jangan lupa cek property exist sebelum akses yang terlalu dalam. Di section berikutnya, kita bakal belajar Object methods yang built-in di JavaScript. Let's continue!

Pengenalan Object Methods Bawaan

Sampai sekarang kita udah belajar cara bikin, akses, dan manipulasi Object secara manual. Tapi JavaScript punya built-in methods yang bikin kerja kita lebih gampang. Ada tiga method yang paling sering dipake:

1. Object.keys() - ambil semua key
2. Object.values() - ambil semua value
3. Object.entries() - ambil pasangan key-value

Ketiga method ini return array, yang lebih gampang untuk di-loop atau di-manipulate.

Object.keys() - Ambil Semua Key

Method Object.keys() return array berisi semua property names dari sebuah Object:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta',
  email: '[email protected]'
};

const keys = Object.keys(user);
console.log(keys);
// ['name', 'age', 'city', 'email']

Use case umum:

// Loop semua property
Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

// Cek jumlah property
console.log('Total properties:', Object.keys(user).length);
// Total properties: 4

Object.values() - Ambil Semua Value

Method Object.values() return array berisi semua values:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta',
  email: '[email protected]'
};

const values = Object.values(user);
console.log(values);
// ['John', 25, 'Jakarta', '[email protected]']

Use case umum:

const prices = {
  laptop: 15000000,
  mouse: 250000,
  keyboard: 500000
};

// Calculate total
const total = Object.values(prices)
  .reduce((sum, price) => sum + price, 0);

console.log(`Total: Rp ${total}`);
// Total: Rp 15750000

Object.entries() - Ambil Key-Value Pairs

Method Object.entries() return array of arrays, setiap sub-array berisi [key, value]:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

const entries = Object.entries(user);
console.log(entries);
// [
//   ['name', 'John'],
//   ['age', 25],
//   ['city', 'Jakarta']
// ]

Use case umum:

// Loop dengan key dan value sekaligus
Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

// Filter dan transform
const scores = {
  math: 85,
  english: 92,
  science: 78
};

const highScores = Object.entries(scores)
  .filter(([subject, score]) => score >= 85);

console.log(highScores);
// [['math', 85], ['english', 92]]

Perbandingan Ketiga Method

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

console.log(Object.keys(user));
// ['name', 'age', 'city']

console.log(Object.values(user));
// ['John', 25, 'Jakarta']

console.log(Object.entries(user));
// [['name', 'John'], ['age', 25], ['city', 'Jakarta']]

• Object.keys() → cuma key
• Object.values() → cuma value
• Object.entries() → key dan value

Kapan Pakai Method Mana?

Pakai Object.keys() kalau:

• Perlu list semua property names
• Mau cek jumlah property
• Iterate untuk akses value dengan bracket notation

Pakai Object.values() kalau:

• Cuma perlu values
• Mau calculate total/average
• Cek apakah value tertentu exists

Pakai Object.entries() kalau:

• Perlu key dan value sekaligus
• Mau transform atau filter Object
• Perlu akses keduanya dalam loop

Bonus: Object.fromEntries()

Method ini kebalikan dari Object.entries() - convert array kembali jadi Object:

const entries = [
  ['name', 'John'],
  ['age', 25]
];

const obj = Object.fromEntries(entries);
console.log(obj);
// { name: 'John', age: 25 }

Berguna untuk transform Object:

const prices = {
  laptop: 10000000,
  phone: 5000000
};

// Apply 20% discount
const discounted = Object.entries(prices)
  .map(([item, price]) => [item, price * 0.8]);

const newPrices = Object.fromEntries(discounted);
console.log(newPrices);
// { laptop: 8000000, phone: 4000000 }

Hal Penting yang Perlu Diingat

1. Method ini static

// Correct
Object.keys(user);

// Wrong
user.keys();  // Error!

2. Return array, bukan Object

const keys = Object.keys(user);
console.log(keys[0]);  // 'name' ✓
console.log(keys.name);  // undefined ✗

3. Bisa chain dengan array methods

const total = Object.values(prices)
  .filter(price => price > 0)
  .reduce((sum, price) => sum + price, 0);

Nah itu intro singkat tentang Object methods bawaan! Ketiga method ini sangat berguna untuk iterate dan transform Object. Kita bakal explore lebih dalam lagi nanti di topik advanced. Di section berikutnya, kita bakal bahas destructuring dan spread operator. Let's continue!

Apa Itu Destructuring?

Destructuring adalah cara untuk extract nilai dari Object atau array terus assign ke variabel dengan syntax yang lebih ringkas. Daripada ambil property satu-satu, kamu bisa ambil beberapa sekaligus dalam satu baris.

Ini salah satu fitur modern JavaScript yang bikin code lebih clean dan readable.

Object Destructuring Dasar

Cara lama ambil property dari Object:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Cara lama
const name = user.name;
const age = user.age;
const city = user.city;

Dengan destructuring, bisa lebih singkat:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Dengan destructuring
const { name, age, city } = user;

console.log(name);  // 'John'
console.log(age);   // 25
console.log(city);  // 'Jakarta'

Lihat? Satu baris aja, tiga variabel langsung kebuat dengan value dari Object.

Sintaks Destructuring

Format dasarnya:

const { propertyName1, propertyName2 } = namaObject;

Nama variabel harus sama dengan nama property di Object. JavaScript otomatis cari property dengan nama yang sama terus assign value-nya ke variabel.

Extract Property Tertentu

Kamu gak harus ambil semua property. Bisa pilih yang diperlukan aja:

const product = {
  id: 'PRD001',
  name: 'Laptop',
  price: 15000000,
  brand: 'ASUS',
  stock: 10
};

// Ambil cuma yang dibutuhin
const { name, price } = product;

console.log(name);   // 'Laptop'
console.log(price);  // 15000000
// id, brand, stock gak ke-extract

Rename Variable (Aliasing)

Kalau mau nama variabel berbeda dari nama property, bisa pake colon:

const user = {
  name: 'John',
  age: 25
};

// Rename 'name' jadi 'userName'
const { name: userName, age: userAge } = user;

console.log(userName);  // 'John'
console.log(userAge);   // 25

// console.log(name);   // Error! variabel 'name' gak ada

Format: { propertyName: newVariableName }

Berguna kalau nama property bentrok dengan variabel yang udah ada atau mau naming yang lebih jelas:

const response = {
  data: { user: 'John' },
  status: 'success'
};

// Rename untuk clarity
const { data: userData, status: responseStatus } = response;

Default Values

Kalau property gak ada, bisa kasih default value:

const user = {
  name: 'John',
  age: 25
};

// 'city' gak ada, pake default
const { name, age, city = 'Unknown' } = user;

console.log(name);  // 'John'
console.log(age);   // 25
console.log(city);  // 'Unknown'

Destructuring dalam Function Parameter

Destructuring sering dipake dalam function parameter:

// Tanpa destructuring
function greetUser(user) {
  console.log(`Hello ${user.name}, you are ${user.age} years old`);
}

// Dengan destructuring
function greetUser({ name, age }) {
  console.log(`Hello ${name}, you are ${age} years old`);
}

const user = { name: 'John', age: 25 };
greetUser(user);  // 'Hello John, you are 25 years old'

Lebih clean karena langsung extract property yang dibutuhin.

Nested Destructuring (Sekilas)

Bisa juga extract nested property:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

// Nested destructuring
const { name, address: { city } } = user;

console.log(name);  // 'John'
console.log(city);  // 'Jakarta'

Tapi jangan terlalu kompleks karena bisa susah dibaca. Kita bakal bahas lebih detail nanti.

Array Destructuring (Intro)

Destructuring juga bisa untuk array:

const colors = ['red', 'green', 'blue'];

// Array destructuring
const [first, second, third] = colors;

console.log(first);   // 'red'
console.log(second);  // 'green'
console.log(third);   // 'blue'

Bedanya dengan Object destructuring: array pake square brackets [] dan urutan penting.

Skip element dengan koma:

const numbers = [1, 2, 3, 4, 5];

// Ambil first dan third aja
const [first, , third] = numbers;

console.log(first);  // 1
console.log(third);  // 3

Kapan Pakai Destructuring?

Destructuring berguna kalau:

1. Extract multiple properties sekaligus

const { name, email, age } = user;

1. Function dengan banyak parameter

function createUser({ name, email, age, city }) {
  // Lebih jelas daripada createUser(name, email, age, city)
}

1. Working dengan API response

const { data, status, message } = apiResponse;

1. Swap variables

let a = 1, b = 2;
[a, b] = [b, a];  // Swap!
console.log(a);  // 2
console.log(b);  // 1

Destructuring vs Cara Biasa

const user = {
  name: 'John',
  email: '[email protected]',
  age: 25
};

// Cara biasa - lebih verbose
const name = user.name;
const email = user.email;
const age = user.age;

// Destructuring - lebih ringkas
const { name, email, age } = user;

Keduanya sama secara fungsional, tapi destructuring lebih clean untuk multiple properties.

Common Mistakes

Mistake 1: Lupa kurung kurawal

const user = { name: 'John', age: 25 };

// Wrong
const name, age = user;  // Syntax error!

// Correct
const { name, age } = user;

Mistake 2: Nama variabel beda dari property

const user = { name: 'John' };

// Wrong - 'username' property gak ada
const { username } = user;
console.log(username);  // undefined

// Correct - pake rename
const { name: username } = user;
console.log(username);  // 'John'

Mistake 3: Destructure undefined/null

const user = null;

// Error!
const { name } = user;  // Cannot destructure property 'name' of null

// Safe
const { name } = user || {};
console.log(name);  // undefined

Best Practices

1. Destructure di awal function

// Good
function processUser(user) {
  const { name, email, age } = user;
  // Use name, email, age
}

// Less clear
function processUser(user) {
  console.log(user.name);
  console.log(user.email);
  console.log(user.age);
}

2. Jangan over-destructure

// Good - cuma yang dipake
const { name, email } = user;

// Avoid - destructure yang gak dipake
const { name, email, age, city, phone, address } = user;
// Kalau cuma pake name dan email

3. Use default values untuk optional properties

const { name, role = 'user' } = userData;

Preview: Deep Dive Nanti

Destructuring punya fitur lebih advanced yang bakal kita bahas detail nanti:

• Rest operator dalam destructuring
• Nested destructuring yang kompleks
• Destructuring dengan computed property names
• Kombinasi dengan spread operator

Untuk sekarang, pahami dulu konsep dasar: destructuring adalah cara extract property jadi variabel dengan syntax yang lebih ringkas.

Nah itu intro singkat tentang destructuring! Fitur ini bikin code lebih clean, terutama waktu deal dengan Object yang punya banyak property. Kita bakal explore lebih dalam di topik advanced nanti. Di section berikutnya, kita bakal bahas spread operator yang juga powerful untuk work dengan Object. Let's continue!

Apa Itu Spread Operator?

Spread operator (...) adalah fitur JavaScript yang memungkinkan kamu "spread" atau sebar semua property dari satu Object ke Object lain. Bayangin kayak kamu buka kotak terus tuang semua isinya ke kotak baru.

Ini salah satu fitur modern yang bikin copy dan merge Object jadi lebih gampang.

Sintaks Spread Operator

Format dasarnya simpel:

const newObject = { ...existingObject };

Tiga titik (...) sebelum nama Object artinya "ambil semua property dari Object ini".

Copy Object dengan Spread

Cara lama copy Object:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Cara lama - manual satu-satu
const newUser = {
  name: user.name,
  age: user.age,
  city: user.city
};

Dengan spread operator:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Dengan spread - satu baris!
const newUser = { ...user };

console.log(newUser);
// { name: 'John', age: 25, city: 'Jakarta' }

Jauh lebih ringkas kan? Semua property langsung ke-copy.

Override Property

Kamu bisa override property waktu spread:

const user = {
  name: 'John',
  age: 25,
  city: 'Jakarta'
};

// Copy semua, tapi ubah age
const newUser = {
  ...user,
  age: 26
};

console.log(newUser);
// { name: 'John', age: 26, city: 'Jakarta' }

Property yang ditulis setelah spread akan override value dari Object yang di-spread.

Urutan penting:

// Override age
const user1 = { ...user, age: 26 };  // age jadi 26

// age dari spread yang dipake
const user2 = { age: 26, ...user };  // age tetap 25

Property yang ditulis terakhir yang menang.

Menambah Property Baru

Bisa juga tambah property baru sekalian:

const user = {
  name: 'John',
  age: 25
};

// Copy + tambah property baru
const extendedUser = {
  ...user,
  email: '[email protected]',
  city: 'Jakarta'
};

console.log(extendedUser);
// {
//   name: 'John',
//   age: 25,
//   email: '[email protected]',
//   city: 'Jakarta'
// }

Merge Multiple Objects

Spread bisa merge beberapa Object:

const personal = {
  name: 'John',
  age: 25
};

const contact = {
  email: '[email protected]',
  phone: '08123456789'
};

// Merge dua object
const user = {
  ...personal,
  ...contact
};

console.log(user);
// {
//   name: 'John',
//   age: 25,
//   email: '[email protected]',
//   phone: '08123456789'
// }

Kalau ada property yang sama, yang terakhir yang menang:

const obj1 = { name: 'John', age: 25 };
const obj2 = { age: 30, city: 'Jakarta' };

const merged = { ...obj1, ...obj2 };

console.log(merged);
// { name: 'John', age: 30, city: 'Jakarta' }
// age dari obj2 (30) yang dipake

Use Case: Update Object

Spread sering dipake untuk update Object tanpa modify yang original:

const product = {
  name: 'Laptop',
  price: 15000000,
  stock: 10
};

// Update stock tanpa modify original
const updatedProduct = {
  ...product,
  stock: 8
};

console.log(product.stock);        // 10 (original gak berubah)
console.log(updatedProduct.stock); // 8 (copy yang berubah)

Ini penting dalam React atau state management di mana immutability itu penting.

Use Case: Default Values

Spread bisa provide default values:

const defaultSettings = {
  theme: 'light',
  language: 'en',
  notifications: true
};

const userSettings = {
  theme: 'dark'
};

// Merge dengan defaults di awal
const finalSettings = {
  ...defaultSettings,
  ...userSettings
};

console.log(finalSettings);
// {
//   theme: 'dark',        // dari userSettings
//   language: 'en',       // dari defaultSettings
//   notifications: true   // dari defaultSettings
// }

Penting: Shallow Copy Only

Ini yang perlu diperhatiin banget. Spread operator cuma copy property di level pertama (shallow copy). Kalau ada nested Object, yang di-copy adalah referensi-nya, bukan Object baru.

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

const copiedUser = { ...user };

// Ubah nested object
copiedUser.address.city = 'Bandung';

console.log(user.address.city);       // 'Bandung' (!!)
console.log(copiedUser.address.city); // 'Bandung'

Lihat? Padahal kita modify copiedUser, tapi user yang original juga berubah! Ini karena address adalah referensi yang sama.

Property level pertama: copy beneran (independent) Nested object: copy referensi (shared)

const user = {
  name: 'John',      // Shallow - copy beneran
  address: {         // Deep - copy referensi aja
    city: 'Jakarta'
  }
};

const copied = { ...user };

// Ubah shallow property - aman
copied.name = 'Jane';
console.log(user.name);    // 'John' (gak berubah)

// Ubah nested property - bahaya!
copied.address.city = 'Bandung';
console.log(user.address.city);  // 'Bandung' (ikut berubah!)

Untuk deep copy, butuh cara lain yang bakal kita bahas nanti.

Spread vs Assignment

const user = { name: 'John', age: 25 };

// Direct assignment - reference sama
const user2 = user;
user2.age = 30;
console.log(user.age);  // 30 (original ikut berubah)

// Spread - shallow copy
const user3 = { ...user };
user3.age = 30;
console.log(user.age);  // 25 (original gak berubah)

Dengan spread, property level pertama jadi independent copy.

Common Mistakes

Mistake 1: Lupa kurung kurawal

const user = { name: 'John' };

// Wrong
const copied = ...user;  // Syntax error!

// Correct
const copied = { ...user };

Mistake 2: Expect deep copy

const user = {
  name: 'John',
  settings: { theme: 'dark' }
};

const copied = { ...user };
copied.settings.theme = 'light';

// Wrong assumption
console.log(user.settings.theme);  // 'light' (ikut berubah!)

Mistake 3: Spread bukan Object

const name = 'John';

// Wrong - string bukan Object
const obj = { ...name };
console.log(obj);  // { '0': 'J', '1': 'o', '2': 'h', '3': 'n' }

// Gunakan untuk Object
const user = { name: 'John' };
const copied = { ...user };  // ✓

Best Practices

1. Gunakan untuk copy Object

// Good - immutable update
const updated = { ...original, status: 'active' };

// Avoid - mutate original
original.status = 'active';

2. Hati-hati dengan nested Object

// Shallow copy - bahaya untuk nested
const copied = { ...user };

// Kalau ada nested, copy manual atau pake deep clone
const copied = {
  ...user,
  address: { ...user.address }  // Copy nested juga
};

3. Urutan untuk override

// Defaults dulu, overrides terakhir
const config = {
  ...defaultConfig,
  ...userConfig
};

Kapan Pakai Spread Operator?

Gunakan spread operator kalau:

1. Copy Object

const backup = { ...original };

1. Update Object immutably

const updated = { ...user, age: 26 };

1. Merge Objects

const combined = { ...obj1, ...obj2 };

1. Add properties

const extended = { ...user, newProp: 'value' };

Preview: Deep Dive Nanti

Topik advanced tentang spread yang bakal kita bahas nanti:

• Deep copy untuk nested Objects
• Combine dengan destructuring
• Spread dalam function arguments
• Performance considerations
• Alternative methods (Object.assign, dll)

Untuk sekarang, pahami dulu konsep dasar: spread operator copy semua property dari Object, tapi hati-hati dengan nested Objects karena cuma shallow copy.

Nah itu intro singkat tentang spread operator! Fitur ini super berguna untuk work dengan Object secara immutable. Ingat: spread itu shallow copy, jadi nested Object masih shared reference. Di section berikutnya, kita bakal bahas common mistakes dan best practices dalam bekerja dengan Object. Let's continue!

Kesalahan Umum dalam Bekerja dengan Object

Setelah belajar berbagai konsep tentang Object, sekarang waktunya bahas kesalahan-kesalahan yang sering terjadi. Dengan tau kesalahan umum ini, kamu bisa hindari bug yang bikin frustasi. Yuk kita bahas satu-satu!

Mistake 1: Compare Object dengan ==

Ini salah satu kesalahan paling umum. Banyak pemula kaget kenapa dua Object yang "sama" ternyata gak equal waktu di-compare:

const user1 = {
  name: 'John',
  age: 25
};

const user2 = {
  name: 'John',
  age: 25
};

console.log(user1 == user2);   // false
console.log(user1 === user2);  // false

Lho kok false? Padahal isinya sama persis!

Penjelasan: JavaScript compare Object berdasarkan referensi, bukan isi/value. user1 dan user2 adalah dua Object berbeda di memory, walaupun isinya sama.

Bayangin kayak dua kotak identik. Walaupun isinya sama, tapi mereka tetap dua kotak yang berbeda.

// Ini baru true
const user1 = { name: 'John' };
const user2 = user1;  // Reference sama

console.log(user1 === user2);  // true

Solusi: Kalau mau compare isi Object, compare property-nya satu-satu atau pake library seperti Lodash:

// Manual compare
function compareUsers(user1, user2) {
  return user1.name === user2.name && user1.age === user2.age;
}

// Atau convert ke JSON (untuk simple objects)
JSON.stringify(user1) === JSON.stringify(user2)

Mistake 2: Bingung Mutable vs Reassign

Kesalahan ini udah kita singgung sebelumnya, tapi worth it untuk diulang karena sangat umum:

const user = {
  name: 'John',
  age: 25
};

// Ini BISA - mutation
user.age = 26;        // ✓ Works
user.email = '[email protected]';  // ✓ Works

// Ini TIDAK BISA - reassignment
user = { name: 'Jane' };  // ✗ Error! Assignment to constant

const cegah reassignment (ganti keseluruhan Object), tapi gak cegah mutation (ubah isi Object).

Banyak yang kaget: "Lho kan const, kok bisa diubah?"

Penjelasan: const itu lock variabel-nya, bukan isi Object-nya. Object tetap mutable.

Tips: Kalau bener-bener mau immutable Object, pake Object.freeze():

const user = Object.freeze({
  name: 'John',
  age: 25
});

user.age = 26;  // Gak ngaruh, property gak berubah (silent fail)
console.log(user.age);  // Masih 25

Mistake 3: Typo Property Name

Ini bug yang paling bikin sebel karena gak ada error! JavaScript gak complain kalau kamu typo property name:

const user = {
  name: 'John',
  age: 25
};

// Typo: 'agee' instead of 'age'
user.agee = 26;

console.log(user);
// {
//   name: 'John',
//   age: 25,    // Masih 25!
//   agee: 26    // Property baru yang salah
// }

Kamu mikir udah update age, tapi sebenernya bikin property baru agee. Bug kayak gini susah di-detect!

Solusi:

1. Gunakan TypeScript - langsung error kalau property gak ada
2. Pake linter - tools kayak ESLint bisa detect potential issues
3. Test property exist sebelum akses:

// Check dulu
if ('age' in user) {
  user.age = 26;
} else {
  console.warn('Property age not found!');
}

1. Prefer dot notation - editor auto-complete lebih baik:

// Prefer ini - editor kasih autocomplete
user.age = 26;

// Dibanding ini - prone to typo
user['age'] = 26;

Mistake 4: Nested Object Modification

Ini jebakan yang kita bahas di spread operator. Waktu copy Object dengan spread atau Object.assign(), nested Object tetap shared:

const user = {
  name: 'John',
  address: {
    city: 'Jakarta',
    zip: '12000'
  }
};

// Copy dengan spread
const copiedUser = { ...user };

// Modify nested object
copiedUser.address.city = 'Bandung';

console.log(user.address.city);  // 'Bandung' (original berubah!)

Ini karena spread cuma shallow copy. address di kedua Object menunjuk ke Object yang sama.

Solusi: Copy nested Object juga:

// Deep copy manual untuk nested
const copiedUser = {
  ...user,
  address: { ...user.address }  // Copy nested juga
};

copiedUser.address.city = 'Bandung';
console.log(user.address.city);  // 'Jakarta' (aman!)

Atau pake deep clone:

// Modern way (tapi baru di browser modern)
const copiedUser = structuredClone(user);

// Atau JSON parse/stringify (punya limitasi)
const copiedUser = JSON.parse(JSON.stringify(user));

Mistake 5: Lupa Cek Property Exist

Langsung akses nested property tanpa cek bisa bikin error:

const user = {
  name: 'John'
  // address gak ada
};

// Error!
console.log(user.address.city);
// Cannot read property 'city' of undefined

Solusi: Selalu check atau pake optional chaining:

// Check manual
if (user.address && user.address.city) {
  console.log(user.address.city);
}

// Optional chaining (modern, lebih clean)
console.log(user.address?.city);  // undefined, gak error

Mistake 6: Modify Object dalam Loop

Hati-hati modify Object yang lagi di-loop:

const settings = {
  theme: 'dark',
  language: 'id',
  notifications: true
};

// Bahaya - modify sambil loop
for (let key in settings) {
  delete settings[key];  // Bisa unpredictable
}

Solusi: Collect keys dulu, baru modify:

// Aman
const keys = Object.keys(settings);
keys.forEach(key => {
  delete settings[key];
});

Mistake 7: Expect Property Order

Walaupun modern JavaScript maintain insertion order, jangan rely on urutan property:

const obj = {
  name: 'John',
  age: 25,
  1: 'one',
  2: 'two'
};

// Urutan bisa unexpected, terutama dengan number keys
console.log(Object.keys(obj));
// ['1', '2', 'name', 'age'] - number keys duluan!

Tips: Kalau urutan penting, gunakan array atau Map.

Tips Umum untuk Hindari Mistakes

1. Prefer Dot Notation

// Good - autocomplete works, less typo
user.name = 'John';

// Less preferred - prone to typo
user['name'] = 'John';

2. Always Test Property Exist

// Good
if ('email' in user) {
  sendEmail(user.email);
}

// Risky
sendEmail(user.email);  // Bisa undefined

3. Use Const by Default

// Good - prevent accidental reassign
const user = { name: 'John' };

// Avoid - easy to accidentally reassign
let user = { name: 'John' };

4. Validate Input

function updateUser(updates) {
  // Validate dulu
  if (!updates || typeof updates !== 'object') {
    console.error('Invalid updates');
    return;
  }

  // Safe to proceed
  Object.assign(user, updates);
}

5. Document Your Objects

// Good - jelas struktur-nya
/**
 * User object
 * @property {string} name - User's full name
 * @property {number} age - User's age
 * @property {object} address - User's address
 */
const user = {
  name: 'John',
  age: 25,
  address: {
    city: 'Jakarta'
  }
};

6. Use Destructuring untuk Clarity

// Good - jelas property mana yang dipake
function greetUser({ name, age }) {
  console.log(`Hello ${name}, ${age} years old`);
}

// Less clear
function greetUser(user) {
  console.log(`Hello ${user.name}, ${user.age} years old`);
}

Quick Checklist

Sebelum release code yang pake Object, check ini:

• [ ] Gak compare Object dengan == atau === (kalau mau compare value)
• [ ] Paham bedanya mutable vs reassign
• [ ] Gak ada typo di property names
• [ ] Nested Object di-handle dengan benar (deep copy kalau perlu)
• [ ] Always check property exist sebelum akses (especially nested)
• [ ] Gak modify Object sambil loop through-nya
• [ ] Gak rely on property order

Summary

Kesalahan paling umum:

1. Compare reference bukan value - Object comparison compare memory reference
2. Bingung const - const prevent reassign, bukan mutation
3. Typo property - JavaScript gak error, bikin property baru
4. Nested modification - spread/assign cuma shallow copy
5. Lupa cek exist - akses property undefined bikin error

Ingat tips-tips ini dan code kamu bakal lebih robust dan less buggy!

Nah itu dia berbagai kesalahan umum waktu kerja dengan Object! Dengan tau pitfalls ini, kamu bisa hindari bug yang frustrating. Practice makes perfect - makin sering kamu work dengan Object, makin natural cara handle-nya. Di section berikutnya, kita bakal ada challenge untuk praktek semua yang udah dipelajari. Ready? Let's continue!

Saatnya Praktek!

Setelah belajar banyak konsep tentang Object dan Properties, sekarang waktunya praktek! Challenge ini bakal test pemahaman kamu tentang semua yang udah kita bahas. Jangan worry, gak susah kok. Take your time dan coba solve sendiri dulu sebelum lihat solusinya.

Ready? Let's go!

Challenge: Buat User Management Object

Kamu diminta untuk bikin Object yang represent seorang user dengan berbagai informasi dan functionality. Ini challenge-nya:

Task 1: Buat User Object

Buat Object bernama user dengan property berikut:

• name: string nama lengkap
• email: string alamat email
• birthYear: number tahun lahir (misal: 1998)

Task 2: Tambah Method calculateAge

Tambahkan method calculateAge() yang:

• Hitung umur berdasarkan birthYear
• Return umur dalam tahun
• Gunakan tahun sekarang (2024) untuk perhitungan

Task 3: Akses Property

Setelah Object selesai:

• Akses property name dengan dot notation
• Akses property email dengan bracket notation
• Panggil method calculateAge() dan tampilkan hasilnya

Task 4: Update Property

• Tambah property baru city dengan nilai kota tempat tinggal
• Update property email dengan email baru

Hints

Kalau stuck, ini beberapa hints yang bisa bantu:

Hint 1: Struktur Object

const user = {
  // Properties disini
  propertyName: value,

  // Method disini
  methodName() {
    // Logic disini
  }
};

Hint 2: Calculate Age

// Rumus: current year - birth year
const age = 2024 - this.birthYear;

Hint 3: Access Property

// Dot notation
user.propertyName

// Bracket notation
user['propertyName']

Coba Dulu!

Sebelum scroll ke solusi, coba kerjain challenge-nya dulu. Buka code editor kamu dan praktek! Gak masalah kalau salah, yang penting nyoba dulu.

Udah selesai? Atau udah stuck? Oke, kita lihat solusinya.

Solusi

Ini salah satu solusi yang mungkin:

// Task 1: Buat user object
const user = {
  name: 'Budi Santoso',
  email: '[email protected]',
  birthYear: 1998,

  // Task 2: Tambah method calculateAge
  calculateAge() {
    const currentYear = 2024;
    return currentYear - this.birthYear;
  }
};

// Task 3: Akses property
// Dot notation
console.log('Name:', user.name);
// Output: Name: Budi Santoso

// Bracket notation
console.log('Email:', user['email']);
// Output: Email: [email protected]

// Panggil method
console.log('Age:', user.calculateAge());
// Output: Age: 26

// Task 4: Update property
// Tambah property baru
user.city = 'Jakarta';
console.log('City:', user.city);
// Output: City: Jakarta

// Update email
user.email = '[email protected]';
console.log('Updated email:', user.email);
// Output: Updated email: [email protected]

Penjelasan Solusi

Mari kita breakdown solusinya:

1. Object Creation

const user = {
  name: 'Budi Santoso',
  email: '[email protected]',
  birthYear: 1998,
  // ...
};

Kita bikin Object dengan tiga property dasar. Gunakan const karena gak perlu reassign Object-nya.

2. Method dengan This

calculateAge() {
  const currentYear = 2024;
  return currentYear - this.birthYear;
}

Method ini akses birthYear pake this.birthYear. Keyword this refer ke Object user itu sendiri.

3. Dot vs Bracket Notation

user.name          // Dot - simple dan clean
user['email']      // Bracket - lebih flexible

Keduanya works, tapi untuk property name yang simple, dot notation lebih direkomendasikan.

4. Add & Update Property

user.city = 'Jakarta';           // Tambah property baru
user.email = '[email protected]';    // Update existing property

Syntax yang sama bisa untuk tambah atau update, tergantung apakah property udah ada atau belum.

Bonus Challenge

Kalau udah selesai dengan challenge utama, coba bonus ini:

Bonus 1: Tambah Method Lain

Tambahkan method getInfo() yang return string berisi semua informasi user:

user.getInfo = function() {
  return `${this.name} (${this.calculateAge()} years old) - ${this.email}`;
};

console.log(user.getInfo());
// Output: Budi Santoso (26 years old) - [email protected]

Bonus 2: Nested Object

Tambahkan property address yang berisi nested object:

user.address = {
  street: 'Jl. Sudirman No. 123',
  city: 'Jakarta',
  zip: '12190'
};

console.log(user.address.city);
// Output: Jakarta

Bonus 3: Destructuring

Extract properties dengan destructuring:

const { name, email, birthYear } = user;

console.log(name);       // Budi Santoso
console.log(email);      // [email protected]
console.log(birthYear);  // 1998

Bonus 4: Spread Operator

Buat copy dari user dengan beberapa perubahan:

const updatedUser = {
  ...user,
  email: '[email protected]',
  isActive: true
};

console.log(updatedUser.email);    // [email protected]
console.log(updatedUser.isActive); // true
console.log(user.email);           // [email protected] (original tetap)

Variasi Solusi

Ada banyak cara yang benar untuk solve challenge ini. Ini beberapa variasi:

Variasi 1: Method dengan Arrow Function di Variable

const calculateAge = function() {
  return 2024 - this.birthYear;
};

// Tapi untuk method, lebih baik gunakan regular function

Variasi 2: Dynamic Current Year

calculateAge() {
  const currentYear = new Date().getFullYear();
  return currentYear - this.birthYear;
}

Ini lebih dynamic karena otomatis pake tahun sekarang, bukan hardcode 2024.

Variasi 3: Validation dalam Method

calculateAge() {
  if (!this.birthYear || this.birthYear > 2024) {
    return 'Invalid birth year';
  }

  const currentYear = 2024;
  return currentYear - this.birthYear;
}

Lebih robust dengan validation.

Self Assessment

Cek pemahaman kamu dengan pertanyaan ini:

1. Apakah kamu bisa buat Object dengan properties dan method?
2. Apakah kamu paham perbedaan dot dan bracket notation?
3. Apakah kamu paham cara pake keyword this dalam method?
4. Apakah kamu bisa tambah dan update property?
5. Apakah kamu comfortable dengan nested object?

Kalau semua jawaban yes, congrats! Kamu udah paham dasar-dasar Object.

Kalau masih ada yang kurang jelas, coba review section yang relevan dan praktek lagi.

Tips untuk Practice Lebih Lanjut

1. Buat Object untuk Real-World Scenarios

Coba bikin Object untuk:

• Todo item dengan title, description, isDone, priority
• Product dengan name, price, category, stock
• Student dengan name, nim, courses (array of objects)

2. Combine Multiple Concepts

Practice combine Object dengan:

• Loops untuk iterate properties
• Conditionals untuk validation
• Arrays untuk collection of objects

3. Read Other People's Code

Lihat code di GitHub atau tutorial online. Perhatikan gimana mereka structure Objects.

4. Refactor Your Own Code

Kalau punya code lama dengan banyak variables terpisah, coba refactor pake Objects.

What's Next?

Selamat! Kamu udah menyelesaikan JavaScript Fundamental: Objects & Properties. Kamu udah belajar:

• Apa itu Object dan kenapa penting
• Cara bikin, akses, dan manipulasi Object
• Dot vs bracket notation
• Method dan keyword this
• Nested objects
• Object methods (keys, values, entries)
• Destructuring dan spread operator (intro)
• Common mistakes yang harus dihindari

Di episode berikutnya, kita bakal deep dive ke topik advanced:

• Destructuring - extract properties dengan cara yang lebih powerful
• Spread operator - merge dan copy objects dengan advanced techniques
• Object methods advanced - Object.assign, Object.freeze, dan lainnya
• Object-oriented concepts - prototypes, classes, inheritance

Tapi sebelum lanjut ke advanced, pastikan kamu comfortable dengan fundamentals yang udah kita bahas. Practice, practice, practice!

Penutup

Object adalah salah satu building block paling penting dalam JavaScript. Hampir semua yang kamu kerjain dalam web development bakal involve Objects. API responses? Objects. User data? Objects. Configuration? Objects. Component state? Objects.

Makin kamu comfortable dengan Objects, makin mudah kamu build aplikasi yang kompleks. Jadi take your time, practice regularly, dan jangan takut experiment.

Keep coding, keep learning, dan sampai jumpa di episode berikutnya!

Happy coding!