Memahami ES6: Fitur Baru dalam JavaScript

JavaScript adalah bahasa pemrograman yang sangat populer yang digunakan secara luas di seluruh dunia. JavaScript benar-benar berubah dengan diperkenalkannya ECMA Script 2015, yang sekarang dikenal sebagai ES6. Ada beberapa pembaruan yang diumumkan sejak saat itu hingga versi empat pada tahun 2021. Artikel ini memberikan wawasan tentang bagaimana beberapa fitur baru yang paling revolusioner di ES6 telah mengubah cara kita menulis JavaScript.

Let dan Const: Deklarasi yang Dilingkupi Blok

Sebelum munculnya ES6, pengembang JavaScript harus menggunakan kata kunci var secara eksklusif untuk deklarasi variabel. Tetapi var memiliki beberapa keistimewaan, khususnya pelingkupan fungsi dan pengangkatan, yang menyebabkan bug pada beberapa situasi.

Blok cakupan: ES6 menambahkan let dan const - yang memiliki cakupan blok, sehingga hanya tersedia di dalam blok tempat mereka didefinisikan.

let: Gunakan let ketika sebuah variabel perlu ditugaskan ulang selama siklus hidupnya.
const: Untuk nilai yang akan tetap konstan setelah ditetapkan

sumber: safarseptyadi.com

Ini membuat kode lebih mudah diprediksi dan menghilangkan seluruh kelas potensi bug yang berhubungan dengan ruang lingkup.

let count = 0;

const max = 10;

if (count < max) {

let message = "Keep going!";

console.log(message);

}

// console.log(message); // ReferenceError

Fungsi Panah

Fungsi panah memungkinkan sintaks yang lebih pendek jika dibandingkan dengan membuat ekspresi fungsi tradisional. Fungsi panah juga secara leksikal mengikat konteks ini, yang berarti fungsi ini ideal untuk digunakan dalam pemanggilan kembali dan metode.

// Traditional function

const numbers = [1, 2, 3];

const squares = numbers.map(function(num) {

return num * num;

});

// Arrow function

const squaresES6 = numbers.map(num => num * num);

Fungsi panah membantu meningkatkan keterbacaan dan secara umum mengurangi boilerplate, terutama untuk satu baris sederhana.

Template Literal

Template literal membuat bekerja dengan string menjadi lebih mudah. Fungsi ini menggunakan tanda kutip () sebagai pengganti tanda kutip dan memungkinkan interpolasi menggunakan sintaks ${}`.

const name = "Alice";

const greeting = `Hello, ${name}!`;

console.log(greeting); // Hello, Alice!

Template literal juga menyediakan string multi-baris tanpa karakter escape.

const multiline = `This is a

multi-line string.`;

console.log(multiline);

Parameter Default

Di ES6, fungsi sekarang dapat memiliki nilai parameter default, membuat kode tidak terlalu bertele-tele karena Anda tidak perlu khawatir tentang argumen yang tidak terdefinisi dan menulis logika boilerplate untuk menanganinya.

function greet(name = "Guest") {

console.log(`Hello, ${name}!`);

}

greet(); // Hello, Guest!

greet("Alice"); // Hello, Alice!

Penugasan Destrukturisasi

Destrukturisasi adalah metode yang digunakan untuk mengekstrak nilai dari larik atau objek dan menetapkannya ke variabel dalam satu pernyataan.

// Array destructuring

const [a, b] = [1, 2];

console.log(a, b); // 1 2

// Object destructuring

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

const { name, age } = user;

console.log(name, age); // Alice 25

Hal ini membuat kode menjadi lebih bersih dan tidak terlalu banyak pengulangan.

Modul

Sebelum ES6, JavaScript tidak memiliki sistem modul standar, sehingga para pengembang menggunakan pustaka seperti CommonJS atau AMD. Dengan ES6, muncul modul asli melalui kata kunci impor dan ekspor, yang memungkinkan kode modular dan dapat digunakan kembali.

// math.js

export function add(a, b) {

return a + b;

}

// main.js

import { add } from "./math.js";

console.log(add(2, 3)); // 5

Promises

Landing Promise menyederhanakan pemrograman asinkron ketika Anda ingin menjalankan operasi asinkron, menyimpan ke DB, memanggil API, Promise memberikan cara yang lebih bersih untuk menangani jenis operasi ini yang mengembalikan hasil yang diharapkan di masa depan.

fetch("https://api.example.com/data")

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

Pola berbasis callback digantikan dengan promise yang membuat kode lebih mudah dibaca dan membantu Anda menghindari “neraka callback”.

Kesimpulan

Semua info yang akan Anda lihat diatas ini hanya berlaku sampai ES6 diperkenalkan. Fitur-fitur baru seperti let dan const, fungsi panah, template literal, destrukturisasi, dan modul telah membuat JavaScript menjadi bahasa yang lebih modern dan ekspresif serta ramah bagi para pengembang. Pengetahuan tentang fitur-fitur ini sangat penting untuk menulis JavaScript yang efisien dan juga mudah dipelihara, baik Anda seorang pemula atau pengembang kode yang berpengalaman dalam ekosistem saat ini.