30 Hari Belajar JavaScript: Hari ke — 11

6 min readApr 8, 2023

Halo semuanya! Selamat datang kembali di series 30 hari belajar #javascript. Pada hari ke 11 ini kita akan mempelajari beberapa hal menarik berikut.

Getter dan Setter pada JavaScript
Mengapa Var tidak digunakan kembali?
Desctructuring pada JavaScript
Strict Mode pada JavaScript
Spread Operator pada JavaScipt

Tanpa basi-basi lagi, mari kita gas kan 😎

Getter dan Setter pada JavaScript

Getter dan Setter adalah kemampuan untuk membuat function yang berbeda untuk mengambil data (Getter) dan mengubah data (Setter) pada sebuah property di Object. Dengan menggunakan Getter dan Setter, kita bisa melakukan hal apapun dalam function sebelum sebuah property di akses atau diubah, misal menambah validasi dan lain-lain 😉.

 const userProfile = {
       id: 1,
       user: "user007",
       role: "Editor",

       get fullName() {
           return `Id ${this.id} User: ${this.user} Role: ${this.role}`
       }
 }

 document.writeln(userProfile.fullName)

 const userProfile = {
       id: 1,
       user: "user007",
       role: "Editor",

       get fullName() {
           return `Id ${this.id} User: ${this.user} Role: ${this.role}`
       },

       set fullName(value) {
           const array = value.split("");
           this.id = array[0];
           this.user = array[1];
           this.role = array[2]
       }

}

// document.writeln(userProfile.fullName)

// Set
userProfile.fullName = "John WIck"
document.writeln(userProfile.id)
document.writeln(userProfile.user)
document.writeln(userProfile.role)

Mengapa Var tidak digunakan Kembali?

Semenjak JavaScript modern hadir, penggunaan keyword var untuk membuat variabel tidak direkomendasikan kembali, hal ini dikarenakan var tidak memiliki block scope, artinya dia tidak mengikat ke local scope yang sebelumnya sudah kita bahas. Karena masalah ini, var bisa tidak terprediksi 😯.

var number = 20;

for (var number = 20; number <= 30; number++) {
     document.writeln(`<p>Local Scope : ${number}</p>`)
}

document.writeln(`<p>Global Scope : ${number}</p>`)

Sekarang kita bandingkan, jika menggunakan keyword let 😁

 let number = 20;

 for (let number = 20; number <= 30; number++) {
      document.writeln(`<p>Local Scope : ${number}</p>`)
 }

 document.writeln(`<p>Global Scope : ${number}</p>`)

Global scope tetap bernilai 20, karena tidak berada di dalam block local scope

Destructuring pada JavaScript

Dahulu, ketika kita hendak menampilkan data baik dari array (index) atau pun object (properties) kita harus melakukan pemanggilannya satu-persatu. Contoh 😪

const person = {
      id: 1,
      firstName: "Bahrul",
      lastName: "Rozak",
      otherInformation: {
            address: "Indonesia"
      }
}

document.writeln(`<p>${person.id}</p>`)
document.writeln(`<p>${person.firstName}</p>`)
document.writeln(`<p>${person.lastName}</p>`)
document.writeln(`<p>${person.otherInformation.address}</p>`)

Oleh karena itu kita bisa menggunakan fitur destructuring untuk solusi tersebut. Destructuring adalah fitur yang bisa digunakan untuk membongkar value-value di array atau object ke dalam variable-variable. Fitur ini sangat mempermudah kita ketika ingin mengambil data dari array atau object tanpa harus melakukan pengambilan data satu persatu 😎

 const person = {
       id: 1,
       firstName: "Bahrul",
       lastName: "Rozak",
       otherInformation: {
            address: "Indonesia"
       }
  }

const { id, firstName, lastName } = person

document.writeln(`<p>${id}</p>`)
document.writeln(`<p>${firstName}</p>`)
document.writeln(`<p>${lastName}</p>`)

Disini kita menyimpan properties yang hendak kita panggil ke dalam sebuah variabel bernama person. Sehingga variable id akan berisikan person.id, kemudian variable firstName akan berisikan person.firstName dan begitu seterusnya. Mantap 🤣.

Selain itu kita juga bisa melakukan desctructuring bersarang atau nested 😊

 const person = {
       id: 1,
       firstName: "Bahrul",
       lastName: "Rozak",
       otherInformation: {
            address: "Indonesia"
       }
 }

 const { id, firstName, lastName, otherInformation: { address } } = person

 document.writeln(`<p>${id}</p>`)
 document.writeln(`<p>${firstName}</p>`)
 document.writeln(`<p>${lastName}</p>`)
 document.writeln(`<p>${address}</p>`)

Destructuring tidak hanya bisa dilakukan di variable, tapi juga bisa dilakukan di function parameter. Hal ini membuat kita mudah ketika ingin mengambil nested data dalam array atau object dalam function

  function generateUser({ id, user }) {
           document.writeln(id)
           document.writeln(user)
   }

   const user = {
         id: 1,
         user: "Admin"
   }

 generateUser(user)

Yang paling menarik di destructuring adalah, kita bisa menambahkan default value. Jadi misal kita kita melakukan destructuring terhadap array, ternyata tidak ada datanya, maka kita bisa menambahkan default value. Begitu juga pada object, jika ternyata property nya tidak ada, maka kita bisa menambahkan default value.

 const person = {
       firstName: "Bahrul",
       lastName: "Rozak",
 }

 const { firstName, lastName, address = "Indonesia" } = person

 document.writeln(address)

Pada destructuring kita juga bisa menggunakan alias untuk variabel

 const person = {
       firstName: "Bahrul",
       lastName: "Rozak",
 }

 const { firstName: namaDepan, lastName: namaBelakang, address = "Indonesia" } = person

 document.writeln(namaDepan, namaBelakang)

Strict Mode pada JavaScript

Saat kita menjalankan kode program JavaScript, secara default kode program kita berjalan dalam mode tidak strict, atau istilahnya sloppy mode. Pada ECMAScript 5, diperkenalkan mode strict, dimana ketika strict mode dijalankan, maka akan merubah beberapa cara kerja di JavaScript, seperti :

Merubah beberapa JavaScript error dari yang tadinya silent error, menjadi throw error (terlihat)
Memperbaiki beberapa kesalahan engine JavaScript untuk optimisasi
Menolak beberapa kode perintah yang kedepannya akan digunakan di ECMAScript

Untuk menyalakan strict mode, kita bisa menambahkan `use strict` pada baris awal file javascript kita atau bisa juga ditambahkan di awal function kita.

 "use strict";
  const v = "Hi! I'm a strict mode script!";

Spread Operator pada JavaScipt

Masih terkait dengan array, ES6 memiliki fitur menarik untuk membantu pengelolaan array menjadi lebih mudah, yaitu spread operator. Sesuai namanya “spread”, fitur ini digunakan untuk menyebarkan nilai array atau lebih tepatnya iterable object menjadi beberapa elemen. Spread operator dituliskan dengan tiga titik (…). Mari kita lihat contoh kode berikut:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
 
console.log(favorites);

Pada kode tersebut hasil yang dicetak adalah sebuah array (ditunjukkan dengan tanda [ ]), karena memang kita mencetak nilai favorites itu sendiri. Nah, dengan menggunakan spread operator kita dapat menyebarkan nilai-nilai dalam array tersebut.

Spread operator dapat digunakan untuk menggabungkan dua buah array ke dalam array baru. Jika tidak menggunakan spread operator ini maka hasilnya akan seperti ini:

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];

const allFavorites = [favorites, others];

console.log(allFavorites);

Nilai array tidak akan tergabung. Alih-alih menggabungkan nilainya, variabel allFavorites menjadi array baru yang menampung dua array di dalamnya. Nah, lantas bagaimana jika kita mencoba menggunakan spread operator?

const favorites = ["Seafood", "Salad", "Nugget", "Soup"];
const others = ["Cake", "Pie", "Donut"];

const allFavorites = [...favorites, ...others];

console.log(allFavorites);

Halo! Saya Bahrul Rozak, seorang mahasiswa dari Universitas Muhammadiyah Prof. DR. HAMKA. Saya memiliki pengalaman sebagai web developer di sebuah institusi dan telah membuat serta mengembangkan aplikasi internal menggunakan bahasa pemrograman JavasScript dan PHP, serta menggunakan framework PHP seperti Laravel, codeigniter, dan Vue Js. Saya juga pernah memimpin sebuah tim proyek yang terdiri dari divisi Front End dan Back End, di sana saya belajar banyak hal, terutama tentang kolaborasi dalam tim. Selain itu, saya memiliki hobi terkait desain web dan menulis artikel tentang teknologi. Saya sangat suka tantangan yang memacu adrenalin karena saya percaya bahwa more complex more adrenaline. Jika Anda ingin tahu lebih banyak tentang saya atau ingin berkolaborasi, silakan hubungi saya melalui email di bahrulrozak02@gmail.com atau follow media sosial saya di.

Instagram : https://instagram.com/rozak.dexamethasone

Linkedin : https://linkedin.com/in/bahrul-rozak

Stackoverflow : https://stackoverflow.com/users/20835639/bahrul-rozak

Github : https://github.com/Bahrul-Rozak