Objek JavaScript. Bagian 8 Kursus JavaScript dari Pemula hingga Mahir dalam 10 posting blog

Ini adalah bagian 8 dari seri pos blog JavaScript yang akan membawa Anda dari pemula hingga mahir. Jika Anda belum membaca pos blog sebelumnya tentang fungsi JavaScript, Anda dapat memeriksanya di sini. Pada akhir seri ini, Anda akan mengetahui semua dasar yang perlu Anda ketahui untuk mulai coding di JavaScript. Tanpa basa-basi lagi, mari kita mulai dengan tutorial kedelapan.

Objek JavaScript – daftar isi:

1. Objek JavaScript
2. Fungsi konstruktor objek

Objek JavaScript

Objek JavaScript memegang peran penting. Meskipun ini adalah topik yang relatif besar, juga bisa relatif mudah untuk mengembangkan pemahaman tentangnya. Salah satu cara paling umum untuk memahami objek adalah dengan memikirkan bahwa Anda sedang membuat ulang sebuah mobil dalam kode. Kita akan memiliki dua konsep utama saat berurusan dengan objek. Mereka akan memiliki properti dan metode. Properti adalah hal-hal yang dimiliki objek JavaScript dan metode adalah hal-hal yang dapat dilakukan objek. Mari kita lihat itu dengan beberapa contoh.

// mari kita definisikan beberapa objek untuk mendapatkan pemahaman yang lebih baik
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "Pesawat mulai lepas landas..."},
    land: function(){return "Pesawat mulai mendarat..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "Mobil bergerak maju..."},
    smartSummon: function(){return "Mobil mulai mengemudi sendiri ke arah Anda..."}
}

// kita dapat mengakses dan mencetak properti yang mereka miliki:
console.log("Properti untuk pesawat:");
console.log("Dapat terbang: " + plane.canFly);
console.log("Total jumlah sayap: " + plane.numberOfWings);
// kita juga dapat membuat pesawat melakukan tindakan
console.log(plane.takeOff());
console.log(plane.land());
// jika Anda melihat lebih dekat, Anda dapat melihat bahwa 
// kita tidak langsung mencetak tindakan di dalam metode
// sebaliknya kita mengembalikannya dari fungsi
// dan dalam hal ini kita mencetaknya
// dengan cara ini jika kita mau kita juga bisa memberi tahu pengguna dengan alert
// yang memberi tahu pesawat sedang lepas landas
alert(plane.takeOff());
// kita juga dapat mempelajari tentang properti yang dimiliki mobil 
// dan mencetaknya juga untuk latihan tambahan
console.log("Apakah ini mobil listrik? " + car.isElectric);
console.log("Apa merek mobilnya: " + car.brand);
console.log("Berapa banyak pintu yang dimilikinya? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Ketika kita menjalankan kode di atas, kita seharusnya mendapatkan output berikut:

Kita baru saja melihat dua contoh utama objek JavaScript: satu dengan pesawat dan satu dengan mobil. Sama seperti pesawat dan mobil memiliki properti yang berbeda dan hal-hal berbeda yang dapat mereka lakukan, objek berbeda yang kita buat dapat melakukan hal-hal berbeda dan memiliki properti yang berbeda. Jika Anda melihat lebih dekat, Anda dapat mulai melihat pola dalam cara kita mendefinisikan objek, properti, dan metode.

Kita mulai mendefinisikan objek sama seperti kita mendefinisikan variabel atau konstanta, dalam hal ini, biasanya cukup menggunakan konstanta saat mendefinisikan objek JavaScript. Tetapi daripada hanya menetapkan konstanta itu ke sebuah nilai, sama seperti yang kita lakukan dengan konstanta biasa, sekarang kita membuka dan menutup sekumpulan kurung kurawal dan pada dasarnya memberikan data dalam pasangan kunci-nilai. Perhatikan bahwa mendefinisikan properti dan metode cukup mirip. Perbedaan utamanya adalah bahwa saat mendefinisikan properti, kita menetapkan nama ke sebuah nilai yang akan kita ambil nanti. Namun, ketika kita mendefinisikan metode, kita harus menyediakan sebuah fungsi yang akan kita jalankan nanti. Perbedaan ini juga tercermin dalam cara kita memanggilnya nanti. Misalnya:

// ketika kita mengambil properti kita tidak menggunakan tanda kurung di akhir
console.log("Dapat terbang: " + plane.canFly);
// ketika kita mengambil metode, 
// kita juga menjalankannya dengan menambahkan tanda kurung setelahnya
// metode di sini pada dasarnya adalah fungsi yang 
// milik objek tertentu
console.log(plane.takeOff());

Penting untuk menambahkan tanda kurung setelah metode, sama seperti yang kita lakukan dengan fungsi biasa. Jika tidak, kita hanya akan mendapatkan fungsi itu sendiri daripada mengeksekusi fungsi tersebut.

// untuk mengeksekusi metode objek kita harus
// menambahkan tanda kurung tepat setelah nama metode
// jika tidak kita akan mendapatkan definisi metode 
// seperti dalam contoh ini
alert(plane.takeOff);

Hasil yang ditampilkan adalah persis seperti yang kita definisikan saat membuat metode. Anda juga dapat melihat bahwa kita mendefinisikan fungsi secara langsung. Dalam hal ini kita mendefinisikan fungsi tanpa nama, yang memungkinkan dalam JavaScript. Ini tidak selalu disukai, karena memberi nama pada fungsi membuatnya lebih jelas ketika kita melihatnya ditampilkan. Namun, dalam hal ini, kita tidak menggunakan fungsi di tempat lain di luar definisi objek, kita tidak perlu langsung memberi nama fungsi tersebut. Sebagai gantinya, kita dapat merujuk ke fungsi dari dalam objek dengan nama metode yang kita berikan padanya.

Hal lain yang perlu Anda ketahui tentang mengambil properti atau metode dari objek adalah bahwa ada lebih dari satu cara untuk mencapainya. Kita menggunakan salah satu praktik paling umum dalam contoh di atas, yaitu menggunakan notasi titik. Tetapi ada juga cara lain yang umum digunakan untuk mencapai hasil yang sama yang perlu Anda ketahui. Notasi kedua ini menggunakan tanda kurung siku dan tanda kutip.

// keduanya sama-sama valid dan 
// memberi kita hasil yang sama
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// periksa konsol JavaScript untuk hasilnya

Bagus bahwa kita dapat menyimpan banyak properti dan tindakan terperinci yang dapat kita lakukan menggunakan objek, tetapi bagaimana jika kita perlu menggunakan objek, tidak hanya untuk 1 mobil, tetapi katakanlah untuk 20 mobil, 100 mobil, atau bahkan 1.000.000 mobil masing-masing dengan ID unik dan nilai properti yang bervariasi. Apakah kita harus mengetik seluruh kode itu dari awal untuk setiap mobil? Jawabannya tidak. Sebagai gantinya, kita dapat memanfaatkan sesuatu yang disebut fungsi konstruktor objek.

Fungsi konstruktor objek

Konstruktor objek dapat mempercepat proses pengkodean Anda secara besar-besaran dan dapat secara signifikan membuat kode Anda lebih DRY. Dengan fungsi konstruktor objek, kita pada dasarnya mendefinisikan cetak biru untuk objek. Setelah kita memiliki cetak biru untuk objek, kita dapat membuat sebanyak mungkin instance objek tersebut dengan cara yang jauh lebih jelas, dengan jauh lebih sedikit pengulangan. Mari kita lihat itu dengan beberapa contoh.

// inilah cara kita mendefinisikan cetak biru untuk objek
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// inilah cara kita dapat menginstansiasi 
// objek JavaScript yang ingin kita buat dari 
// cetak biru yang kita definisikan di atas
// dalam hal ini kita membuat 3 objek mobil 
// dengan nilai yang berbeda untuk propertinya
const car1 = new Car(1, "putih", true, 4);
const car2 = new Car(2, "hitam", true, 2);
const car3 = new Car(3, "merah", false, 4);
// kita dapat mengakses properti objek sama seperti yang kita lakukan sebelumnya
console.log("Warna mobil pertama adalah: " + car1.color);
console.log("Warna mobil kedua adalah: " + car2.color);
console.log("Warna mobil ketiga adalah: " + car3.color);

Menjalankan kode di atas akan memberi kita output kode berikut:

Seperti yang Anda lihat dari kode di atas, setelah kita memiliki cetak biru, kita dapat dengan mudah memberikan nilai yang berbeda untuk membuat objek JavaScript yang berbeda dari cetak biru awal. Satu hal yang mungkin Anda perhatikan adalah bahwa konvensi penamaan untuk konstruktor objek adalah dengan huruf pertama yang dikapitalisasi. Dalam hal ini, daripada mendefinisikannya sebagai “car”, kita menamakannya “Car”. Jika kita ingin membuat kelas pesawat, kita akan menamakannya “Plane”.

Ketika kita ingin membuat objek dari cetak biru yang telah kita definisikan, kita menggunakan kata kunci “new” dan kemudian menulis nama fungsi konstruktor objek yang ingin kita gunakan. Setelah nama, kita membuka dan menutup sekumpulan tanda kurung dan memberikan argumen yang ingin kita gunakan untuk membuat objek kita. Perhatikan bahwa kita tidak mengulangi nama parameter, kita hanya memberikan nilai dalam urutan yang sama dengan parameter. Anda mungkin juga memperhatikan bahwa saat membuat cetak biru kita menggunakan kata kunci yang disebut “this”. Untuk saat ini, yang perlu Anda ketahui adalah bahwa kata kunci “this” memungkinkan merujuk pada objek itu sendiri, dan itu adalah bagian dari kode boilerplate yang harus kita tulis saat kita membuat cetak biru untuk objek.

Ketika Anda belajar coding, Anda mungkin mendengar istilah “kode boilerplate”, ini sebenarnya cukup umum, terutama dalam pengembangan web. Ini pada dasarnya berarti bahwa ada bagian-bagian kode yang kita tulis untuk menyiapkan pengaturan tertentu. Meskipun tidak ada solusi unik yang kita berikan dengan kode, kita harus menulis bagian-bagian tersebut untuk memiliki kode yang berfungsi. Tergantung pada kode boilerplate, beberapa IDE bahkan menyediakan pintasan untuk menyediakan kode boilerplate tersebut.

Objek JavaScript yang baru saja kita pelajari adalah topik yang besar dan memiliki banyak detail saat kita menyelami lebih dalam. Tetapi pada tingkat dasar, Anda harus tahu bahwa kita dapat meniru objek kehidupan nyata dengan kode menggunakan objek. Objek JavaScript tersebut dapat memiliki properti dan metode yang berbeda yang dapat kita akses dan lakukan.

Dalam tutorial berikutnya kita akan menemukan lebih banyak topik dan konsep yang cukup penting dan umum digunakan dalam JavaScript.