JavaScript telah banyak berubah sejak pertama kali dirilis dan salah satu pembaruan terbesar yang disebut ECMAScript 2015 atau disingkat ES6 telah mengubah wajah JavaScript selamanya. Rilis ini, bersama dengan pembaruan di masa mendatang, menambahkan banyak sekali peningkatan, membuat bahasa ini lebih mudah digunakan, berkinerja baik, dan mudah dibaca. Di bawah ini, kita akan membahas fitur-fitur ES6+ yang wajib diketahui oleh para pemula agar mereka dapat membangun pijakan sebagai programmer JavaScript modern.
1. Let dan Const
Sebelumnya (sebelum ES6), var terutama digunakan untuk mendeklarasikan variabel. Namun, hal ini memiliki beberapa masalah seperti cakupan fungsi dan kebiasaan mengangkat. ES6 membawa let dan const yang memiliki cakupan blok dan lebih mudah dibaca:
- let: Memungkinkan penugasan ulang variabel.
- const: Digunakan untuk variabel yang tidak boleh berubah.
2. Fungsi Panah
Data ke fungsi panah yang menyediakan gaya penulisan fungsi yang sangat mengkilap. Selain itu, fungsi-fungsi ini tidak kehilangan konteks dari lingkup induknya, sehingga sangat berguna dalam fungsi pemanggilan kembali.
// Traditional function
function add(a, b) {
return a + b;
}
// Arrow function
const add = (a, b) => a + b;
3. Template Literal
Jadi, apa pun bisa ditambahkan menggunakan template literal menggunakan backticks(`). Hal ini sangat menyederhanakan interpolasi string dan string multi-baris.
const name = "Alice";
const greeting = `Hello, ${name}! Welcome to ES6.`;
console.log(greeting);
4. Destrukturisasi
Destrukturisasi memungkinkan Anda untuk menarik nilai dari array atau objek ke dalam variabel yang terpisah, yang membuat kode Anda tidak terlalu rumit ketika berurusan dengan struktur data yang kompleks.
// Array destructuring
const [x, y] = [10, 20];
console.log(x, y); // 10, 20
// Object destructuring
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name, age); // Alice, 25
5. Parameter Default
ES6 memungkinkan Anda untuk menggunakan nilai default untuk parameter fungsi yang lebih bersih daripada menggunakan logika fallback.
function greet(name = "Guest") {
return `Hello, ${name}!`;
}
console.log(greet()); // Hello, Guest!
6. Operator Sebar dan Operator Istirahat
Operator spread (...) memperluas elemen-elemen larik atau objek, sedangkan operator rest mengelompokkan beberapa elemen dalam larik.
// Spread operator
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
// Rest operator
function sum(...numbers) {
return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3)); // 6
7. Modul
Dengan ES6, dukungan asli modul diperkenalkan yang memungkinkan pengembang untuk membagi kode menjadi file yang dapat digunakan kembali dan dipelihara.
// Exporting a function
export function sayHello() {
console.log("Hello, World!");
}
// Importing the function
import { sayHello } from "./module.js";
sayHello();
8. Janji dan Asinkronisasi/Tunggu
Menggunakan promises dan async/wait menyederhanakan pemrograman asinkron sehingga lebih bersih untuk menangani fitur asinkron seperti panggilan API atau membaca file.
// Using Promises
fetch("https://api.example.com")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));
// Using async/await
async function fetchData() {
try {
const response = await fetch("https://api.example.com");
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
fetchData();
9. Kelas-kelas
Mari kita mulai dengan yang dari ES6, yang memperkenalkan sintaksis kelas, membuat konsep pemrograman berorientasi objek menjadi lebih nyaman untuk digunakan dalam JS.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
}
}
const person = new Person("Alice", 25);
person.greet();
Kesimpulan
Jika Anda memulai perjalanan Anda dengan JavaScript, maka sangat penting untuk mengetahui tentang fitur-fitur ES6+. Beberapa fitur (misalnya, let dan const, fungsi panah, template literal, destrukturisasi, dan modul) akan secara drastis meningkatkan kinerja penulisan dan pembacaan kode Anda. Ketika Anda merasa nyaman, menyelami wilayah yang lebih maju akan benar-benar memantapkan keterampilan Anda dan membuat Anda lebih mampu menulis aplikasi web modern.
Kembali ke>>> Memulai dengan JavaScript: Dasar-dasarnya