Inti materi ini adalah beberapa penyederhanaan syntax object literal di ES6 (ES2015). Saya jelaskan dari konsep paling dasar dulu, lalu kita lihat perubahan sebelum ES6 vs setelah ES6.

1. Apa itu Object Literal?

Di JavaScript, salah satu cara paling umum untuk membuat object adalah menggunakan object literal.

Contohnya:

const user = {
    name: "Budi",
    age: 25,
    gender: "male"
};

Bagian:

{
    name: "Budi",
    age: 25,
    gender: "male"
}

disebut object literal syntax.

Object tersebut memiliki beberapa property:

• name → "Budi"
• age → 25
• gender → "male"

2. Enhancement pertama: Property Shorthand

Ini adalah salah satu fitur ES6 yang paling sering digunakan.

Misalnya kita punya beberapa variable:

const address = ["London", "New York"];
const contact = {
    email: "budi@gmail.com",
    phone: "123456"
};

const isMarried = true;

Kemudian kita ingin memasukkan semua variable tersebut ke dalam object user.

Sebelum ES6

Kita harus menulis seperti ini:

const user = {
    name: "Budi",
    age: 25,
    gender: "male",
    address: address,
    contact: contact,
    isMarried: isMarried
};

Perhatikan:

address: address

Ada dua address.

Yang sebelah kiri:

address

adalah nama property.

Yang sebelah kanan:

address

adalah nama variable yang nilainya ingin kita masukkan.

Begitu juga:

contact: contact

dan:

isMarried: isMarried

3. Setelah ES6: Bisa Dipersingkat

ES6 mengatakan:

Kalau nama property sama persis dengan nama variable, kita tidak perlu menuliskan property: variable.

Cukup tulis nama variablenya saja.

Jadi:

const user = {
    name: "Budi",
    age: 25,
    gender: "male",
    address,
    contact,
    isMarried
};

JavaScript memahami bahwa:

address

berarti:

address: address

Begitu juga:

contact

berarti:

contact: contact

dan:

isMarried

berarti:

isMarried: isMarried

Jadi secara konsep:

const address = ["London", "New York"];

const user = {
    address
};

sama dengan:

const address = ["London", "New York"];

const user = {
    address: address
};

Ini disebut property shorthand.

4. Kenapa fitur ini berguna?

Karena kode menjadi lebih pendek dan lebih mudah dibaca.

Misalnya kita punya:

const name = "Budi";
const age = 25;
const gender = "male";
const address = "Jakarta";
const email = "budi@gmail.com";

Tanpa shorthand:

const user = {
    name: name,
    age: age,
    gender: gender,
    address: address,
    email: email
};

Dengan ES6:

const user = {
    name,
    age,
    gender,
    address,
    email
};

Jauh lebih bersih.

⚠️ Tapi ada satu hal penting

Shorthand hanya bisa digunakan jika nama property dan variable sama.

Misalnya:

const userName = "Budi";

Kita ingin property-nya bernama name.

Tidak bisa:

const user = {
    name
};

Karena JavaScript akan mencari variable bernama name.

Yang benar:

const user = {
    name: userName
};

Jadi:

property: variable

tetap diperlukan kalau namanya berbeda.

5. Enhancement kedua: Cara membuat Method

Sekarang kita masuk ke fitur kedua.

Apa itu method?

Method adalah function yang berada di dalam object.

Contohnya:

const user = {
    name: "Budi",

    calculateAge: function() {
        console.log("Menghitung umur...");
    }
};

Di sini:

calculateAge

adalah property.

Nilai property tersebut adalah sebuah function:

function() {
    console.log("Menghitung umur...");
}

Karena property tersebut berisi function, kita biasanya menyebutnya method.

Kita bisa menjalankannya:

user.calculateAge();

6. Sebelum ES6

Sebelum ES6, method biasanya ditulis seperti ini:

const user = {
    name: "Budi",

    calculateAge: function(birthYear) {
        return 2026 - birthYear;
    }
};

Perhatikan bagian:

calculateAge: function(birthYear) {
    return 2026 - birthYear;
}

Kita menulis:

nama method : function

7. Setelah ES6: Method Shorthand

ES6 memberikan syntax yang lebih singkat.

Kita tidak perlu menulis : function.

Cukup:

const user = {
    name: "Budi",

    calculateAge(birthYear) {
        return 2026 - birthYear;
    }
};

Bandingkan:

Sebelum ES6

calculateAge: function(birthYear) {
    return 2026 - birthYear;
}

ES6

calculateAge(birthYear) {
    return 2026 - birthYear;
}

Lebih singkat.

Dan cara memanggilnya tetap sama:

user.calculateAge(2000);

8. Method bisa menerima parameter

Contohnya:

const user = {
    name: "Budi",

    calculateAge(birthYear) {
        return 2026 - birthYear;
    }
};

Kita punya parameter:

birthYear

Kemudian:

user.calculateAge(2000);

JavaScript akan memasukkan 2000 ke parameter birthYear.

Sehingga:

2026 - 2000

hasilnya:

26

9. Enhancement ketiga: Computed Property Names

Ini bagian yang sedikit lebih sulit.

Biasanya ketika membuat property, kita menulis nama property secara langsung:

const user = {
    name: "Budi",
    age: 25
};

Nama property:

name
age

ditulis secara langsung.

Tetapi ES6 memungkinkan kita membuat nama property secara dinamis menggunakan expression.

Caranya menggunakan:

[]

atau square brackets.

10. Contoh sederhana Computed Property

Misalnya:

const user = {
    [2 + 3]: "Lima"
};

Apa yang terjadi?

JavaScript akan mengevaluasi:

2 + 3

hasilnya:

5

Sehingga object tersebut sebenarnya menjadi:

const user = {
    5: "Lima"
};

Kalau kita:

console.log(user);

kita akan melihat property:

5

dengan value:

"Lima"

11. Kenapa disebut “Computed Property”?

Karena nama property tersebut dihitung terlebih dahulu.

Misalnya:

[2 + 3]: "Lima"

JavaScript melakukan:

2 + 3
 ↓
 5

kemudian membuat:

5: "Lima"

Jadi:

const user = {
    [2 + 3]: "Lima"
};

kurang lebih menghasilkan:

const user = {
    5: "Lima"
};

12. Expression-nya tidak harus operasi matematika

Ini yang menarik.

Di dalam [], kita bisa menggunakan JavaScript expression.

Misalnya kita punya:

const address = ["London", "New York", "Tokyo"];

Kita bisa menggunakan:

address[0]

sebagai nama property.

Contoh:

const user = {
    [address[0]]: "Hello"
};

address[0] berarti mengambil element pertama array.

Array:

[
    "London",
    "New York",
    "Tokyo"
]

Index-nya:

0 → London
1 → New York
2 → Tokyo

Jadi:

address[0]

menghasilkan:

"London"

Maka object:

const user = {
    [address[0]]: "Hello"
};

akan menjadi secara efektif:

const user = {
    London: "Hello"
};

13. Bisa menggunakan variable

Misalnya:

const propertyName = "email";

const user = {
    [propertyName]: "budi@gmail.com"
};

JavaScript mengevaluasi:

propertyName

hasilnya:

"email"

Sehingga object menjadi:

{
    email: "budi@gmail.com"
}

Ini sangat berguna ketika kita tidak tahu nama property sejak awal atau nama property ditentukan secara dinamis.

14. Contoh yang lebih realistis

Misalnya kita punya:

const field = "phone";

const user = {
    [field]: "08123456789"
};

Hasilnya:

{
    phone: "08123456789"
}

Kalau:

const field = "email";

const user = {
    [field]: "budi@gmail.com"
};

hasilnya:

{
    email: "budi@gmail.com"
}

Jadi kita bisa mengganti nama property berdasarkan isi variable.

15. Ringkasan 3 fitur utama

Materi tersebut sebenarnya membahas 3 enhancement utama object literal di ES6.

① Property Shorthand

Kalau nama property dan variable sama:

Cara lama

const name = "Budi";

const user = {
    name: name
};

ES6

const name = "Budi";

const user = {
    name
};

② Method Shorthand

Cara lama

const user = {
    calculateAge: function(birthYear) {
        return 2026 - birthYear;
    }
};

ES6

const user = {
    calculateAge(birthYear) {
        return 2026 - birthYear;
    }
};

Tidak perlu:

: function

③ Computed Property Names

Kita bisa membuat nama property berdasarkan expression.

const propertyName = "email";

const user = {
    [propertyName]: "budi@gmail.com"
};

Hasilnya:

{
    email: "budi@gmail.com"
}

16. Ketiga fitur bisa digunakan bersamaan

Misalnya:

const name = "Budi";
const age = 25;
const propertyName = "email";

const user = {
    name,
    age,

    calculateAge(birthYear) {
        return 2026 - birthYear;
    },

    [propertyName]: "budi@gmail.com"
};

Di sini kita menggunakan tiga fitur ES6 sekaligus:

Property shorthand

name,
age

yang sama dengan:

name: name,
age: age

Method shorthand

calculateAge(birthYear) {
    ...
}

Computed property

[propertyName]: "budi@gmail.com"

17. Cara mudah mengingatnya

Bayangkan object seperti sebuah lemari yang memiliki label.

Fitur 1 — Property Shorthand

Kalau nama variable dan label sama:

const name = "Budi";

const user = {
    name
};

JavaScript berkata:

“Oh, property-nya name, ambil value dari variable name.”

Fitur 2 — Method Shorthand

Kalau ingin memasukkan function ke object:

const user = {
    sayHello() {
        console.log("Hello");
    }
};

Tidak perlu lagi:

sayHello: function() {}

Fitur 3 — Computed Property

Kalau nama label ingin ditentukan berdasarkan hasil expression:

const key = "email";

const user = {
    [key]: "budi@gmail.com"
};

JavaScript menghitung dulu:

key
↓
"email"

baru membuat:

email: "budi@gmail.com"

18. Kesimpulan

Jadi, inti lecture ini bukan membuat jenis object baru. Object-nya tetap sama. Yang berubah adalah cara penulisan object literal agar lebih singkat dan fleksibel.

Kalau kamu sedang belajar JavaScript, tiga syntax ini sangat penting untuk dibiasakan, karena akan sering sekali muncul dalam kode JavaScript modern, terutama ketika nanti masuk ke destructuring, modules, React, Node.js, dan framework modern.

I can also create an image/diagram yang menjelaskan ketiga fitur ES6 ini secara visual.