Objek JavaScript: Pengertian dan Contoh Penggunaan

Created at by Aris Munandar

Objek (object) adalah salah satu konsep paling penting dalam JavaScript. Jika diibaratkan dalam kehidupan nyata, objek adalah sebuah “benda” yang memiliki ciri-ciri (property) dan kemampuan (method). Dalam pemrograman, konsep ini membuat JavaScript lebih fleksibel, mudah dibaca, dan sangat kuat digunakan di berbagai kebutuhan, mulai dari membuat aplikasi web, menyimpan data, hingga membangun struktur program yang kompleks.

Baca juga: Tutorial Array JavaScript Lengkap Dengan Contoh

Pengantar & Dasar-Dasar Objek JavaScript

Di bagian ini, kita akan membahas fondasi dari objek JavaScript, sehingga pemula dapat memahami apa itu objek, bagaimana cara membuatnya, dan bagaimana menggunakannya dengan benar.

1. Pengertian Objek JavaScript

Objek JavaScript adalah struktur data yang digunakan untuk menyimpan berbagai pasangan key: value. Value tersebut bisa berupa tipe data apa pun: string, number, boolean, function, array, atau bahkan objek lainnya.

Contoh pengertian sederhana:

  • Objek = kumpulan data
  • Property = data
  • Method = fungsi yang berada dalam objek

Contoh singkat:

const mobil = {
    merk: "Toyota",
    warna: "Putih",
    nyalakan: function () {
        console.log("Mobil dinyalakan");
    }
};Code language: JavaScript (javascript)

2. Kenapa Objek Penting dalam JavaScript

Objek menjadi dasar dari hampir semua hal dalam JavaScript. Bahkan array dan function pun sebenarnya adalah objek. Beberapa alasan objek sangat penting:

  • Memudahkan menyimpan data kompleks
  • Bisa menampung banyak tipe data
  • Menghubungkan data dan fungsi dalam satu tempat
  • Dasar dari konsep OOP (Object-Oriented Programming)
  • Banyak fitur bawaan JavaScript menggunakan objek (DOM, console, Math, dll)
  • Dengan memahami objek, kamu otomatis akan lebih mudah mempelajari topik lain di JavaScript.

3. Perbedaan Objek vs Tipe Data Primitif

Tipe data primitif bersifat immutable (tidak dapat diubah langsung) dan disimpan berdasarkan nilai.

Sedangkan objek bersifat mutable (bisa diubah) dan disimpan berdasarkan reference.

Tipe Data PrimitifObjek
String, number, boolean, null, undefined, symbol, bigintSemua bentuk struktur data kompleks
ImmutableMutable
Disimpan sebagai nilaiDisimpan sebagai referensi memori
Tidak memiliki propertyMemiliki property & method

Contoh primitif:

let nama = "Budi";
nama.toUpperCase(); // tidak mengubah variabel asli
console.log(nama); // tetap "Budi"Code language: JavaScript (javascript)

Contoh objek:

let orang = { nama: "Budi" };
orang.nama = "Andi"; // property bisa diubah
console.log(orang.nama); // "Andi"Code language: JavaScript (javascript)

4. Struktur Dasar Object JavaScript

Struktur dasar objek menggunakan pasangan key: value di dalam kurung kurawal { }.

const objectName = {
    key1: value1,
    key2: value2,
    key3: value3
};Code language: JavaScript (javascript)
  • Key → nama property
  • Value → isi property (string, number, function, array, dll)

5. Property dan Method

Property adalah data dalam objek.

Method adalah fungsi yang berada di dalam objek.

Contoh:

const mobil = {
    merk: "Toyota",
    warna: "Putih",
    nyalakan: function () {
        console.log("Mobil dinyalakan");
    }
};Code language: JavaScript (javascript)
  • merk → property
  • warna → property
  • nyalakan → method

Cara memanggil method:

mobil.nyalakan();Code language: CSS (css)

6. Cara Kerja Objek dan Reference

Ketika objek disimpan dalam variabel, yang disimpan sebenarnya hanya referensi, bukan isinya.

Contoh:

const a = { nama: "Siti" };
const b = a;

b.nama = "Rani";

console.log(a.nama); // "Rani"Code language: JavaScript (javascript)

Karena a dan b menunjuk ke referensi yang sama.

7. Dasar Object Literal JavaScript

Object literal adalah cara paling umum membuat objek dengan menuliskan kurung kurawal langsung.

const user = {
    nama: "Dewi",
    umur: 25,
    aktif: true
};Code language: JavaScript (javascript)

Object literal ini memiliki tiga property: nama, umur, dan aktif.

Ini adalah cara paling mudah dan paling sering digunakan oleh developer.

8. Contoh Objek JavaScript Sederhana

const buku = {
    judul: "Belajar JavaScript",
    penulis: "Aris Munandar",
    tahun: 2024,
    deskripsi: function () {
        console.log(`Buku ${this.judul} ditulis oleh ${this.penulis}`);
    }
};

buku.deskripsi();Code language: JavaScript (javascript)

Output:

Buku Belajar JavaScript ditulis oleh Aris Munandar

9. Mengakses Property (Dot & Bracket Notation)

Dot Notation

Yang paling umum:

console.log(buku.judul);Code language: CSS (css)

Bracket Notation

Biasanya digunakan ketika key berupa string dinamis:

console.log(buku["penulis"]);Code language: CSS (css)

Contoh menggunakan variabel sebagai key:

const key = "tahun";
console.log(buku[key]);Code language: JavaScript (javascript)

10. Mengubah dan Menghapus Property

Mengubah Property

buku.judul = "Belajar JavaScript Modern";Code language: JavaScript (javascript)

Menambah Property

buku.kategori = "Programming";Code language: JavaScript (javascript)

Menghapus Property

delete buku.tahun;Code language: JavaScript (javascript)

Cara Membuat Objek JavaScript dan Teknik Dasar Penggunaan

Pada bagian ini, kita akan masuk ke inti utama cara membuat objek dalam JavaScript dan teknik dasar penggunaannya. Semua konsep di bagian ini sangat penting karena inilah pondasi pembuatan struktur data dan pemrograman berbasis objek (OOP) di JavaScript.

Kita akan membahas banyak hal, dari yang paling sederhana sampai yang mulai masuk ke level menengah: object literal, constructor, nested object, destructuring, hingga fitur keamanan seperti Object.freeze.

1. Object Literal

Object literal adalah cara paling mudah dan paling umum untuk membuat objek dalam JavaScript.

Caranya cukup menggunakan kurung kurawal { } dan mengisi property di dalamnya.

Contoh:

const user = {
    nama: "Dina",
    umur: 21,
    aktif: true
};Code language: JavaScript (javascript)

Keuntungan object literal:

  • Simple & cepat dibuat
  • Cocok untuk objek yang tidak terlalu rumit
  • Mudah dibaca dan digunakan

2. Object Constructor

Cara lain membuat objek adalah dengan menggunakan constructor bawaan new Object().

const produk = new Object();
produk.nama = "Laptop";
produk.harga = 15000000;
produk.stok = 10;Code language: JavaScript (javascript)

Namun, cara ini kurang populer, karena object literal jauh lebih mudah dan bersih. Tetapi tetap penting untuk dikenali.

3. Constructor Function (Cara Lama Membuat Class)

Sebelum JavaScript memiliki sintaks class modern, developer menggunakan constructor function.

Contoh:

function Mahasiswa(nama, jurusan) {
    this.nama = nama;
    this.jurusan = jurusan;
    this.perkenalan = function () {
        console.log(`Halo, saya ${this.nama} dari jurusan ${this.jurusan}`);
    };
}

const mhs1 = new Mahasiswa("Rina", "Informatika");
mhs1.perkenalan();Code language: JavaScript (javascript)

Output:

Halo, saya Rina dari jurusan Informatika

Keuntungan constructor function:

  • Bisa menciptakan banyak objek dengan struktur yang sama
  • Mendukung konsep OOP
  • Mendukung prototype
  • Ini adalah pondasi sebelum ES6 memperkenalkan class.

4. Keyword this pada Objek

this merujuk pada objek yang sedang dipanggil, bukan objek yang membuatnya.

Contoh dasar:

const siswa = {
    nama: "Rudi",
    salam: function () {
        console.log(`Halo, nama saya ${this.nama}`);
    }
};

siswa.salam();Code language: JavaScript (javascript)

Output:

Halo, nama saya Rudi

Penjelasan:

  • this.nama mengacu ke siswa.nama

Keuntungan this:

  • Membuat kode lebih dinamis
  • Membuat kode lebih mudah dipahami
  • Membuat kode lebih mudah di-maintain

5. Nested Object (Objek di dalam Objek)

Nested object adalah objek yang memiliki objek lain sebagai property-nya.

Contoh:

const toko = {
    nama: "Toko Makmur",
    alamat: {
        jalan: "Jl. Kenanga No. 10",
        kota: "Bandung",
        kodePos: 40123
    }
};

console.log(toko.alamat.kota);Code language: JavaScript (javascript)

Output:

Bandung

Nested object umum digunakan untuk struktur data lebih kompleks, seperti data user, produk, dan konfigurasi aplikasi.

6. Cara Menambah Property ke Objek

Anda bisa menambah property kapan pun, karena objek bersifat dinamis.

const hewan = {
    jenis: "Kucing"
};

hewan.nama = "Miko";       // menambah property
hewan.umur = 2;

console.log(hewan);Code language: JavaScript (javascript)

Output:

{ jenis: 'Kucing', nama: 'Miko', umur: 2 }Code language: CSS (css)

Bahkan kita bisa menambah property menggunakan bracket:

hewan["warna"] = "Putih";Code language: JavaScript (javascript)

Output:

{ jenis: 'Kucing', nama: 'Miko', umur: 2, warna: 'Putih' }Code language: CSS (css)

7. Cara Membuat Method dalam Objek

Method adalah fungsi yang ada di dalam objek.

Contoh:

const kalkulator = {
    tambah: function (a, b) {
        return a + b;
    },
    kali: function (a, b) {
        return a * b;
    }
};

console.log(kalkulator.tambah(5, 2));
console.log(kalkulator.kali(4, 3));Code language: JavaScript (javascript)

Output:

7
12

Method memungkinkan objek memiliki “kemampuan”.

8. Object.freeze dan Object.seal

Fitur ini digunakan untuk mengatur keamanan objek dan mencegah perubahan yang tidak diinginkan.

Object.freeze()

Membuat objek tidak bisa ditambah, diubah, dan dihapus.

const config = {
    tema: "dark",
    bahasa: "id"
};

Object.freeze(config);
config.tema = "light"; // tidak berubahCode language: JavaScript (javascript)

Object.seal()

Objek masih bisa diubah, tetapi tidak bisa ditambah atau dihapus.

const profil = {
    nama: "Rani",
    umur: 20
};

Object.seal(profil);
profil.umur = 21; // bisa diubah
profil.alamat = "Jakarta"; // gagal ditambah

console.log(profil);Code language: JavaScript (javascript)

Output:

{ nama: 'Rani', umur: 21 }Code language: CSS (css)

9. Destructuring Object

Destructuring adalah cara cepat untuk mengambil property dari objek.

Contoh:

const film = {
    judul: "Naruto",
    genre: "Action",
    tahun: 2002
};

const { judul, genre } = film;

console.log(judul);
console.log(genre);Code language: JavaScript (javascript)

Output:

Naruto
Action

Bahkan nested object bisa di-destructure:

const user = {
    nama: "Dika",
    kontak: {
        email: "dika@example.com",
        hp: "08123456789"
    }
};

const { kontak: { email } } = user;

console.log(email);Code language: JavaScript (javascript)

Output:

dika@example.comCode language: CSS (css)

10. Contoh Penggunaan Object JavaScript dalam Program

Contoh mini program: data produk sederhana

const produk = {
    nama: "Kopi Hitam",
    harga: 15000,
    stok: 30,
    beli: function (jumlah) {
        if (jumlah > this.stok) {
            console.log("Stok tidak mencukupi!");
        } else {
            this.stok -= jumlah;
            console.log(`Anda membeli ${jumlah} kopi. Sisa stok: ${this.stok}`);
        }
    }
};

produk.beli(3);Code language: JavaScript (javascript)

Output:

Anda membeli 3 kopi. Sisa stok: 27

Contoh di atas menunjukkan bagaimana objek:

  • Menyimpan data
  • Mengelola state (stok)
  • Memiliki method (beli)
  • Mengubah data secara dinamis

Demikian tutorial mengenai object di JavaScript. Object adalah bagian yang sangat penting karena sifatnya yang fleksibel dan dinamis, dapat melakukan pertukaran data dalam jumlah yang besar dan kompleks.

Method Bawaan Object & Manipulasi Lanjutan

Pada bagian ini, kita masuk ke level yang jauh lebih dalam mengenai objek dalam JavaScript. Di sini kamu akan belajar berbagai built-in methods yang sangat sering dipakai untuk memanipulasi objek, mengubahnya menjadi array, melakukan cloning, bahkan memahami konsep dasar prototype dan inheritance, yang merupakan fondasi dari OOP (Object-Oriented Programming) di JavaScript.

1. Object.assign()

Object.assign() digunakan untuk:

  • Menggabungkan beberapa objek
  • Menyalin (clone) objek
  • Membuat salinan shallow copy

Cara penggunaan dasar:

const user = { nama: "Rudi" };
const info = { umur: 20 };

const hasil = Object.assign({}, user, info);

console.log(hasil);Code language: JavaScript (javascript)

Output:

{ nama: 'Rudi', umur: 20 }Code language: CSS (css)

Kenapa pakai objek {} kosong?

Karena:

  • Jika tidak, objek pertama akan tertimpa (mutasi).
  • {} membuat hasil menjadi salinan baru, bukan memodifikasi objek asli.

2. Object.keys()

Object.keys() mengembalikan array berisi semua nama property dalam objek.

const produk = {
    nama: "Keyboard",
    harga: 300000,
    stok: 12
};

console.log(Object.keys(produk));Code language: JavaScript (javascript)

Output:

[ 'nama', 'harga', 'stok' ]Code language: JSON / JSON with Comments (json)

Ini sering digunakan untuk looping objek.

3. Object.values()

Mengembalikan semua nilai dari property objek dalam bentuk array.

console.log(Object.values(produk));Code language: JavaScript (javascript)

Output:

[ 'Keyboard', 300000, 12 ]Code language: JSON / JSON with Comments (json)

Ketika hanya butuh nilainya, gunakan ini.

4. Object.entries()

Menghasilkan array dua dimensi:

[ [key, value], [key, value], ... ]Code language: JSON / JSON with Comments (json)
console.log(Object.entries(produk));Code language: JavaScript (javascript)

Output:

[
    ["nama", "Keyboard"],
    ["harga", 300000],
    ["stok", 12]
]Code language: JSON / JSON with Comments (json)

Cocok untuk:

  • Konversi ke Map
  • Iterasi lebih fleksibel

5. Mengubah Objek Menjadi Array

Ada beberapa cara, di antaranya:

1. Dengan Object.keys()

const keys = Object.keys(produk);Code language: JavaScript (javascript)

Output:

[ 'nama', 'harga', 'stok' ]Code language: JSON / JSON with Comments (json)

2. Dengan Object.values()

const values = Object.values(produk);Code language: JavaScript (javascript)

Output:

[ 'Keyboard', 300000, 12 ]Code language: JSON / JSON with Comments (json)

3. Dengan Object.entries()

const entries = Object.entries(produk);Code language: JavaScript (javascript)

Output:

[
    [ 'nama', 'Keyboard' ],
    [ 'harga', 300000 ],
    [ 'stok', 12 ]
]Code language: JSON / JSON with Comments (json)

4. Dengan spread operator

Spread (...) hanya bekerja pada iterable, tetapi objek bukan iterable, sehingga perlu mengubahnya dulu.

Misalnya:

const arr = [...Object.entries(produk)];Code language: JavaScript (javascript)

Output:

[
    [ 'nama', 'Keyboard' ],
    [ 'harga', 300000 ],
    [ 'stok', 12 ]
]Code language: JSON / JSON with Comments (json)

Ini mengubah objek menjadi array pasangan key-value.

6. Spread Operator untuk Object

Spread syntax (...) dapat:

  • Menggabungkan objek
  • Menambah property baru
  • Membuat salinan objek

Contoh:

const user = {
    nama: "Sari",
    umur: 22
};

const userBaru = {
    ...user,
    pekerjaan: "Designer"
};

console.log(userBaru);Code language: JavaScript (javascript)

Output:

{
    nama: "Sari",
    umur: 22,
    pekerjaan: "Designer"
}Code language: CSS (css)

Spread operator > Object.assign > Lebih modern & lebih singkat.

7. Prototype JavaScript (Penjelasan Mudah untuk Pemula)

JavaScript menggunakan sistem prototype-based. Artinya, setiap objek memiliki “cetakan” atau template yang disebut:

  • prototype

Ketika objek tidak menemukan suatu property, JavaScript akan mencarinya di prototype chain.

Contoh mudah:

function Orang(nama) {
    this.nama = nama;
}

Orang.prototype.sapa = function () {
    console.log(`Halo, saya ${this.nama}`);
};

const orang1 = new Orang("Budi");

orang1.sapa();Code language: JavaScript (javascript)

Output:

Halo, saya Budi

Penjelasan:

  • sapa() tidak ada dalam objek orang1
  • JavaScript mencari di Orang.prototype
  • Ditemukan → method bisa dipakai
  • Inilah yang disebut prototype inheritance

8. Inheritance Dasar Menggunakan Prototype

Inheritance memungkinkan objek “mewarisi” property dan method dari objek lain.

Contoh inheritance sederhana:

function Hewan(nama) {
    this.nama = nama;
}

Hewan.prototype.suara = function () {
    console.log(`${this.nama} mengeluarkan suara.`);
};

function Kucing(nama, warna) {
    Hewan.call(this, nama); // mewarisi property
    this.warna = warna;
}

Kucing.prototype = Object.create(Hewan.prototype); // mewarisi method
Kucing.prototype.constructor = Kucing;

Kucing.prototype.mengeong = function () {
    console.log(`${this.nama} mengeong.`);
};

const kucing1 = new Kucing("Mimi", "Putih");
kucing1.suara();
kucing1.mengeong();Code language: JavaScript (javascript)

Penjelasan:

  1. Hewan memiliki method suara().
  2. Kucing menggunakan Hewan.call() untuk mewarisi property…
  3. dan Object.create() untuk mewarisi method.
  4. Kucing.prototype.constructor = Kucing mengembalikan referensi constructor.
  5. kucing1 kini memiliki:
    • method dari Hewan
    • method dari Kucing

Inilah konsep dasar OOP versi JavaScript (tanpa class).

Studi Kasus Besar & Implementasi dalam Program

Pada bagian ini, kita akan masuk ke tahap paling praktis dalam tutorial objek JavaScript untuk pemula: bagaimana objek digunakan dalam program nyata. Kamu akan melihat bagaimana array of objects, looping objek, penggunaan Object methods, serta simulasi modul data digunakan dalam sebuah mini-project sederhana.

Bagian ini sangat penting karena inilah cara objek bekerja di dunia nyata—bukan hanya konsep, tapi penggunaannya saat membangun fitur aplikasi web.

1. Objek dalam Program Nyata

Dalam pemrograman JavaScript, objek adalah salah satu struktur data paling fundamental. Hampir semua fitur kompleks—mulai dari data pengguna, barang, pengaturan aplikasi, hingga komunikasi API—menggunakan objek sebagai media penyimpanan informasinya.

Contoh umum objek dalam program nyata:

  • Data User Login
  • Product / Produk e-commerce
  • Konfigurasi aplikasi
  • Pengaturan tampilan UI
  • Data API (JSON)

Contoh objek program:

let user = {
    id: 1,
    name: "Aris Munandar",
    email: "admin@bahasaweb.com",
    isVerified: true
};Code language: JavaScript (javascript)

Objek seperti ini sangat sering muncul dalam aplikasi modern.

2. Array of Objects

Salah satu struktur data paling populer adalah array of objects.

Struktur ini biasanya digunakan untuk:

  • daftar produk
  • daftar pengguna
  • daftar postingan
  • daftar transaksi
  • daftar menu aplikasi

Contoh array of objects:

let products = [
    {
        id: 1,
        name: "Laptop",
        price: 12000000,
        stock: 5
    },
    {
        id: 2,
        name: "Mouse Gaming",
        price: 250000,
        stock: 20
    },
    {
        id: 3,
        name: "Keyboard Mechanical",
        price: 750000,
        stock: 12
    }
];Code language: JavaScript (javascript)

3. Looping Objek: for…in, Object Method, dan Iterasi Array

Ada beberapa cara untuk melakukan looping pada objek atau array of objects.

Looping Property Object – for…in

for (let key in obj) {
    console.log(key, obj[key]);
}Code language: JavaScript (javascript)

Contohnya:

let user = {
    name: "Aris",
    age: 25,
    job: "Developer"
};

for (let key in user) {
    console.log(key + " = " + user[key]);
}Code language: JavaScript (javascript)

Output:

name = Aris
age = 25
job = Developer

Looping Array of Objects – forEach

products.forEach(product => {
    console.log(product.name);
});Code language: JavaScript (javascript)

Output:

Laptop
Mouse Gaming
Keyboard Mechanical

Looping dengan Object.keys / Object.values / Object.entries

Object.keys

console.log(Object.keys(user));Code language: JavaScript (javascript)

Object.values

console.log(Object.values(user));Code language: JavaScript (javascript)

Object.entries

Object.entries(user).forEach(([key, value]) => {
    console.log(key, value);
});Code language: JavaScript (javascript)

4. Membuat Modul Data Menggunakan Objek

Dalam aplikasi nyata, data biasanya dikelola menggunakan modul.

Contoh modul sederhana:

let UserModule = {
    data: [],

    addUser(user) {
        this.data.push(user);
    },

    findUserByEmail(email) {
        return this.data.find(u => u.email === email);
    },

    getAllUsers() {
        return this.data;
    }
};Code language: JavaScript (javascript)

Cara menggunakan modul:

UserModule.addUser({
    id: 1,
    name: "Aris",
    email: "admin@bahasaweb.com",
    isVerified: true
});

console.log(UserModule.getAllUsers());Code language: CSS (css)

Output:

[
    {
        id: 1,
        name: "Aris",
        email: "admin@bahasaweb.com",
        isVerified: true
    }
]Code language: JavaScript (javascript)

5. Simulasi Struktur Data di Dunia Nyata

Berikut ini adalah simulasi untuk dapat di jadikan contoh studi kasus yang dapat kamu kembangkan dalam berbagai data dan struktur yang berbeda sebagai bahan pembelajaran objek dalam JavaScript.

Struktur Data Produk

let Product = {
    id: 101,
    title: "Headset Wireless",
    price: 650000,
    category: "Elektronik",
    specs: {
        color: "Black",
        battery: "40 Hours",
        warranty: "1 Tahun"
    }
};Code language: JavaScript (javascript)

Struktur Data User

let User = {
    id: 99,
    name: "Aris",
    email: "aris@mail.com",
    preferences: {
        theme: "dark",
        language: "id",
    }
};Code language: JavaScript (javascript)

Struktur Data Settings Aplikasi

let AppSettings = {
    version: "1.0.0",
    maintenance: false,
    theme: {
        primaryColor: "#3498db",
        darkMode: true
    }
};Code language: JavaScript (javascript)

6. Mini Project: Sistem Data Sederhana Menggunakan Object

Kita akan membuat sistem kecil untuk mengelola data produk.

Mini project ini meliputi:

  • Tambah produk
  • Tampilkan semua produk
  • Cari produk berdasarkan ID
  • Update produk
  • Hapus produk

Membuat Modul Produk

let ProductModule = {
    products: [],

    addProduct(product) {
        this.products.push(product);
    },

    getAll() {
        return this.products;
    },

    findById(id) {
        return this.products.find(p => p.id === id);
    },

    updateProduct(id, newData) {
        let index = this.products.findIndex(p => p.id === id);
        if (index !== -1) {
            this.products[index] = { 
                ...this.products[index], 
                ...newData 
            };
        }
    },

    deleteProduct(id) {
        this.products = this.products.filter(p => p.id !== id);
    }
};Code language: JavaScript (javascript)

Menambahkan Produk

ProductModule.addProduct({
    id: 102,
    title: "Keyboard Mechanical",
    price: 750000,
    category: "Elektronik",
    specs: {
        color: "Black",
        warranty: "1 Tahun"
    }
});Code language: CSS (css)

Menampilkan Semua Produk

console.log(ProductModule.getAll());Code language: CSS (css)

Output:

[
    {
        id: 102,
        title: "Keyboard Mechanical",
        price: 750000,
        category: "Elektronik",
        specs: {
            color: "Black",
            warranty: "1 Tahun"
        }
    }
]Code language: JavaScript (javascript)

Mencari Produk Berdasarkan ID

console.log(ProductModule.findById(102));Code language: CSS (css)

Output:

{
    id: 102,
    title: "Keyboard Mechanical",
    price: 750000,
    category: "Elektronik",
    specs: {
        color: "Black",
        warranty: "1 Tahun"
    }
}Code language: CSS (css)

Mengupdate Produk

ProductModule.updateProduct(102, {
    price: 800000
});Code language: CSS (css)

Output:

{
    id: 102,
    title: "Keyboard Mechanical",
    price: 800000,
    category: "Elektronik",
    specs: {
        color: "Black",
        warranty: "1 Tahun"
    }
}Code language: CSS (css)

Menghapus Produk

ProductModule.deleteProduct(102);Code language: CSS (css)

Output:

[
    {
        id: 102,
        title: "Keyboard Mechanical",
        price: 800000,
        category: "Elektronik",
        specs: {
            color: "Black",
            warranty: "1 Tahun"
        }
    }
]Code language: JavaScript (javascript)

Objek adalah dasar dari pemrograman JavaScript modern. Dengan menguasai objek, kamu sudah berada di jalur yang benar untuk memahami konsep yang lebih kompleks seperti OOP, Class, Prototype, hingga Framework JavaScript modern.

Kesimpulan

Objek JavaScript merupakan salah satu fondasi utama dalam pemrograman JavaScript. Dengan memahami apa itu objek, bagaimana cara kerjanya, apa fungsi objek dalam JavaScript, serta bagaimana property dan method bekerja, seorang pemula dapat menguasai struktur data yang digunakan di hampir seluruh aplikasi web modern.

Dalam artikel ini kamu telah mempelajari:

  • Pengertian objek JavaScript
  • Perbedaan objek dengan tipe data primitif
  • Struktur dasar object literal
  • Cara membuat dan memanipulasi property
  • Penggunaan constructor function dan keyword this
  • Konsep nested object
  • Fitur penting seperti Object.assign, Object.keys, Object.values, Object.entries, dan spread operator
  • Dasar prototype & inheritance
  • Cara menggunakan objek dalam program nyata
  • Studi kasus array of objects dan mini project sistem data

Dengan memahami semua konsep ini, kamu kini berada di tahap yang sangat kuat untuk melanjutkan ke topik berikutnya: OOP JavaScript, Class ES6, dan pola desain JavaScript modern.

Semakin sering kamu berlatih menggunakan objek dalam proyek kecil, semakin mudah pula memahami struktur aplikasi web yang lebih kompleks.

2 JavaScript Menengah

3 JavaScript Lanjutan

4 JavaScript Mahir

5 JavaScript Ahli

Comments

Congrats, you have the opportunity to be the first commenter on this article. Have questions or suggestions? Please leave a comment to start discussion.

Leave comment

Alamat email Anda tidak akan dipublikasikan. Required fields are marked *