Bab 11: Tips dan trik avanset dalam menggunakan JavaScript

Berikut ini adalah beberapa tips dan trik yang dapat membantu Anda dalam menggunakan JavaScript dengan lebih avanset:

1. Gunakan fitur destructuring assignment untuk memudahkan akses dan pemakaian nilai dari objek atau array. Contoh:

const user = { name: 'John', age: 30 };
const { name, age } = user;
console.log(name); // 'John'
console.log(age); // 30

Gunakan fitur spread operator untuk menyalin atau menggabungkan objek atau array. Contoh:

const user1 = { name: 'John', age: 30 };
const user2 = { ...user1, email: '[e-mail]' };
console.log(user2); // { name: 'John', age: 30, email: '[e-mail]' }

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

Gunakan fitur template literal untuk mempermudah penulisan string yang terdapat variabel atau expresi. Contoh:

const name = 'John';
console.log(`Hello, ${name}!`); // 'Hello, John!'


const a = 10;
const b = 20;
console.log(`The sum is ${a + b}`); // 'The sum is 30'

Gunakan fitur arrow function untuk mempermudah penulisan function dengan sintaks yang lebih singkat. Contoh:

const greet = name => `Hello, ${name}!`;
console.log(greet('John')); // 'Hello, John!'


const sum = (a, b) => a + b;
console.log(sum(10, 20)); // 30

Gunakan fitur async/await untuk mempermudah pemakaian promise dalam proses asynchronus. Contoh:

async function getUser() {
  const res = await fetch('https://api.example.com/users/1');
  const user = await res.json();
  console.log(user);
}
getUser();

1. Penggunaan regular expression untuk memvalidasi input atau mencari pola dalam string

Regular expression (regex) adalah sekumpulan karakter yang digunakan untuk mencari pola atau padanan dalam string. Di JavaScript, Anda dapat menggunakan regex dengan menggunakan objek RegExp atau dengan menggunakan literal regex yang ditulis dengan tanda / (slash).

Berikut ini adalah beberapa contoh penggunaan regex di JavaScript:

Validasi input:

function isEmail(str) {
  const regex = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
  return regex.test(str);
}


console.log(isEmail('[e-mail]')); // true
console.log(isEmail('john.doe@example')); // false


Mencari pola dalam string:
const str = 'The quick brown fox';
const regex = /brown/;
console.log(regex.exec(str)); // ['brown']


const regex2 = /\bfox\b/;
console.log(regex2.exec(str)); // ['fox']

Untuk mempelajari lebih lanjut tentang penggunaan regex di JavaScript, Anda dapat membaca dokumentasi di https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions atau mencari tutorial online

1. Penggunaan closure dan higher-order function untuk menulis kode yang lebih efisien

Closure adalah sebuah function yang dapat mengakses dan memanipulasi variabel yang didefinisikan di luar function tersebut. Closure memungkinkan Anda untuk menulis kode yang lebih modular dan terstruktur, karena memungkinkan Anda untuk memisahkan logika yang berbeda ke dalam function yang terpisah.

Higher-order function adalah function yang mengambil function lain sebagai parameter atau mengembalikan function sebagai hasilnya. Higher-order function memungkinkan Anda untuk menulis kode yang lebih fleksibel dan dapat digunakan ulang, karena memungkinkan Anda untuk membuat function yang dapat dikonfigurasi sesuai dengan kebutuhan.

Berikut ini adalah contoh penggunaan closure dan higher-order function di JavaScript:

Closure:

function createCounter(initial) {
  let count = initial;
  return function() {
    return count++;
  };
}


const counter = createCounter(10);
console.log(counter()); // 10
console.log(counter()); // 11
console.log(counter()); // 12

Higher-order function:

function map(array, fn) {
  const result = [];
  for (const value of array) {
    result.push(fn(value));
  }

1. Penggunaan async/await untuk menangani operasi yang memakan waktu lama dengan cara yang lebih mudah dibaca

Async/await adalah fitur JavaScript yang memungkinkan Anda menulis kode asynchronus dengan sintaks yang lebih mudah dibaca, seolah-olah kode tersebut adalah kode sinkron. Async/await menggunakan promis (promise) sebagai dasar implementasinya, sehingga Anda dapat menggunakan async/await untuk menangani operasi yang memakan waktu lama dengan cara yang lebih terstruktur.

Berikut ini adalah contoh penggunaan async/await untuk mengambil data dari server dan menampilkannya di halaman web:

async function getData() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  console.log(data);
}


getData();

Di sini, kode di atas akan mengirim request ke server menggunakan fungsi fetch, kemudian menunggu responsenya dengan menggunakan await. Setelah respons terima, data akan diparsing ke dalam format JSON dan ditampilkan di console.

Untuk menggunakan async/await, Anda perlu menggunakan keyword async pada function yang akan mengandung operasi asynchronus, dan menggunakan keyword await pada setiap operasi yang ingin Anda tunggu hasilnya sebelum melanjutkan eksekusi.