Fitur-Fitur ES6 yang Perlu Diketahui
ES6 adalah versi JavaScript yang lebih baru yang dirilis pada tahun 2015. ES6 juga dikenal sebagai ECMAScript 2015.
Pada ES6 terdapat perubahan-perubahan yang cukup signifikan untuk bahasa JavaScript. ES6 menawarkan fitur-fitur baru, yang menjadikan kode lebih simple & readable. ES6 juga digunakan pada library atau framework JavaScript yang modern, seperti React.js dan Vue.js. Maka dari itu, penting untuk mengetahui fitur-fitur ES6.
Berikut ini fitur-fitur ES6 yang perlu diketahui.
- let & const
- Template Literals
- Arrow Function
- Extended Parameter Handling
- Default Parameter
- Rest Parameter
- Spread Operator
- Enhanced Object Properties
- Shorthand Property Names
- Computed Property Names
- Method Properties
- Destructuring
- ESModules
- Export
- Import
- Array Element Finding
- find()
- findIndex()
- String Searching
- includes()
- startsWith()
- endsWith()
- Classes
- Promises
let & const
Keyword let
dipakai untuk mendeklarasikan suatu variable dengan cakupan blok (block-scope).
Kode yang berada dalam cakupan blok itu maksudnya segala kode yang berada di antara tanda kurung kurawal ({}
).
Jadi, variable yang dideklarasikan dalam suatu blok kode dengan keyword let
hanya akan tersedia di dalam cakupan blok kode tersebut saja.
var x = 5;
if (x === 5) {
let x = 100;
console.log(x); // Output: 100
}
console.log(x); // Output: 5
var x = 5;
if (x === 5) {
var x = 100;
console.log(x); // Output: 100
}
console.log(x); // Output: 100
Sama seperti keyword let
, keyword const
juga dipakai untuk mendeklarasikan suatu variable dengan cakupan blok (block-scope), hanya saja value-nya konstan.
Variable yang dideklarasikan dengan keyword const
tidak dapat dideklarasikan ulang atau dilakukan reassignment.
var x = 5;
if (x === 5) {
const x = 100;
console.log(x); // Output: 100
}
console.log(x); // Output: 5
const firstName = 'John';
firstName = 'Richard'; // throws error as const variable can't be reassigned
const user = { firstName: 'John', lastName: 'Mayer' };
user = { name: 'John Mayer' }; // throws error as const variable can't be reassigned
// Isi object user dapat diubah namun tidak dapat dilakukan reassignment
user.firstName = 'Richard';
console.log(user); // Output: {firstName: 'Richard', lastName: 'Mayer'}
Template Literals
Template literals adalah string yang bisa disisipkan suatu expression dan bisa juga dijadikan multi-line. String diapit oleh backtick (`) untuk membuat template literals.
const message = `Hi, Nadia!`;
console.log(message);
/*
Output:
Hi, Nadia!
*/
/*** String Interpolation ***/
const greeting = 'Hi';
const name = 'Nadia';
console.log(`${greeting}, ${name}!`);
// The code above is the same as:
console.log(greeting + ', ' + name + '!');
/*
Output:
Hi, Nadia!
*/
/*** Multi-line String ***/
const text = `Welcome!
Please choose your role and
click the button to register.
`;
console.log(text);
/*
Output:
Welcome!
Please choose your role and
click the button to register.
*/
Arrow Function
Arrow function adalah cara lain untuk menulis fungsi. Dengan arrow function, kita bisa menulis fungsi dengan lebih ringkas dan dapat menerapkan implicit return. Arrow function harus didefinisikan sebelum digunakan.
Dengan arrow function, tidak ada pengikatan (binding) keyword this
. Oleh karena itu, arrow function tidak cocok untuk mendefinisikan method suatu object.
/*** Arrow Function ***/
const sum = (num1, num2) => {
return num1 + num2;
};
/*** Arrow Function (Implicit Return) ***/
const sum = (num1, num2) => num1 + num2;
// The code above is the same as:
function sum(num1, num2) {
return num1 + num2;
}
sum(6, 4); // returns 10
sum(30); // returns NaN
Extended Parameter Handling
Default Parameter
Pada JavaScript, nilai default suatu parameter fungsi adalah undefined
. Jika ingin mengatur nilai default-nya jadi selain undefined
, fitur ini bisa jadi solusi.
Assign suatu parameter dengan nilai seperti di bawah ini.
const sum = (num1, num2 = 0) => {
return num1 + num2;
};
// The code above is the same as:
function sum(num1, num2) {
num2 = num2 === undefined ? 0 : num2;
return num1 + num2;
}
sum(6, 4); // returns 10
sum(30); // returns 30
Rest Parameter
Operator rest yang menggunakan tiga titik (…
) menyimpan banyak elemen terpisah menjadi satu kesatuan dalam bentuk array.
const userDetails = (firstName, lastName, ...otherInfo) => {
return otherInfo;
};
// The code above is the same as:
function userDetails() {
return Array.from(arguments).slice(2);
}
userDetails('John', 'Mayer', 'Musician', 'Male', 'johnmayer@gmail.com');
// returns ['Musician', 'Male', 'johnmayer@gmail.com']
Spread Operator
Operator spread yang menggunakan tiga titik (…
) membuat suatu koleksi elemen menjadi elemen-elemen yang terpisah.
Operator spread bisa diterapkan untuk array maupun object.
/*** Spread an Array ***/
const unfinishedTasks = ['Learn functional programming', 'Read a book'];
const finishedTasks = ['Make a blog', 'Do homework', 'Attend virtual event'];
console.log([...unfinishedTasks, ...finishedTasks]);
// The code above is the same as:
console.log(unfinishedTasks.concat(finishedTasks));
/*
Output:
['Learn functional programming', 'Read a book', 'Make a blog', 'Do homework', 'Attend virtual event']
*/
/*** Spread an Object ***/
const name = { firstName: 'John', lastName: 'Mayer' };
const userDetails = { ...name, job: 'Musician' };
// The code above is the same as:
const userDetails = Object.assign({}, name, { job: 'Musician' });
console.log(userDetails);
/*
Output:
{firstName: 'John', lastName: 'Mayer', job: 'Musician'}
*/
const name = { firstName: 'John', lastName: 'Mayer' };
const userDetails = { ...name, job: 'Musician', firstName: 'Richard' };
// The code above is the same as:
const userDetails = Object.assign({}, name, {
job: 'Musician',
firstName: 'Richard',
});
console.log(userDetails);
/*
Output:
{firstName: 'Richard', lastName: 'Mayer', job: 'Musician'}
*/
Operator spread bisa juga digunakan untuk menyebarkan elemen array ke seluruh parameter saat memanggil suatu fungsi.
const bio = (firstName, lastName, job) => {
return `${firstName} ${lastName} is a ${job}.`;
};
const userDetails = ['John', 'Mayer', 'Musician'];
bio(...userDetails); // returns 'John Mayer is a Musician.'
// The code above is the same as:
bio.apply(null, userDetails); // returns 'John Mayer is a Musician.'
const names = ['John', 'Clayton', 'Mayer'];
console.log(...names);
// The code above is the same as:
console.log.apply(null, names);
/*
Output:
John Clayton Mayer
*/
Enhanced Object Properties
Shorthand Property Names
Ketika membuat object, jika ada variable yang namanya sama dengan nama property object, maka cukup tulis sekali sesuai nama variable-nya untuk mendefinisikan property & value suatu object.
const firstName = 'John';
const lastName = 'Mayer';
console.log({ firstName, lastName });
// The code above is the same as:
console.log({ firstName: firstName, lastName: lastName });
/*
Output:
{firstName: 'John', lastName: 'Mayer'}
*/
Computed Property Names
Dengan fitur ES6 ini, nama property suatu object literal dapat ditentukan secara dinamis.
const propertyName = 'lastName';
const user = {
firstName: 'John',
[propertyName]: 'Mayer',
};
// The code above is the same as:
const user = { firstName: 'John' };
user[propertyName] = 'Mayer';
console.log(user);
/*
Output:
{firstName: 'John', lastName: 'Mayer'}
*/
Method Properties
Pada JavaScript, property object yang berupa fungsi disebut method. Dengan ES6, keyword function
pada method jadi dapat dihilangkan seperti berikut.
const player = {
move(direction) {
return `Move ${direction}`;
},
};
// The code above is the same as:
const player = {
move: function (direction) {
return 'Move ' + direction;
},
};
player.move('up'); // returns 'Move up'
Destructuring
Destructuring adalah suatu cara untuk mengakses elemen-elemen dari array atau atribut-atribut dari object yang dimasukkan ke dalam variable-variable.
/*** Destructuring an Array ***/
const userDetails = ['John', 'Mayer', 'Musician'];
const [firstName, lastName, job] = userDetails;
// The code above is the same as:
const firstName = userDetails[0];
const lastName = userDetails[1];
const job = userDetails[2];
console.log(`First Name: ${firstName}, Last Name: ${lastName}, Job: ${job}`);
/*
Output:
First Name: John, Last Name: Mayer, Job: Musician
*/
const userDetails = ['John', 'Mayer', 'Musician'];
const [firstName, , job] = userDetails;
// The code above is the same as:
const firstName = userDetails[0];
const job = userDetails[2];
console.log(`First Name: ${firstName}, Job: ${job}`);
/*
Output:
First Name: John, Job: Musician
*/
/*** Destructuring an Object ***/
const userDetails = { firstName: 'John', lastName: 'Mayer', job: 'Musician' };
const { firstName, lastName, job } = userDetails;
// The code above is the same as:
const firstName = userDetails.firstName;
const lastName = userDetails.lastName;
const job = userDetails.job;
console.log(`First Name: ${firstName}, Last Name: ${lastName}, Job: ${job}`);
/*
Output:
First Name: John, Last Name: Mayer, Job: Musician
*/
const greet = ({ firstName }) => {
return `Hi, ${firstName}!`;
};
// The code above is the same as:
function greet(username) {
const firstName = username.firstName;
return `Hi, ${firstName}!`;
}
const name = { firstName: 'John', lastName: 'Mayer' };
greet(name); // returns 'Hi, John!'
Operator rest (…
) juga bisa digunakan saat melakukan destructuring. Dengan operator rest, sisa elemen-elemen array atau atribut-atribut object dapat disimpan ke dalam array atau object baru.
const [firstName, ...others] = ['John', 'Clayton', 'Mayer'];
// The code above is the same as:
const others = Array.from(['John', 'Clayton', 'Mayer']).slice(1);
console.log(others);
/*
Output:
['Clayton', 'Mayer']
*/
const { firstName, ...others } = {
firstName: 'John',
middleName: 'Clayton',
lastName: 'Mayer',
};
console.log(others);
/*
Output:
{middleName: 'Clayton', lastName: 'Mayer'}
*/
ESModules
Terdapat mekanisme untuk memisahkan program JavaScript menjadi modul-modul yang terpisah, sehingga lebih mudah di-maintain. Hal itu dikarenakan saat ini aplikasi yang dibuat dengan JavaScript bisa semakin besar dan kompleks.
Export
/*** Named Exports ***/
/* math.js */
// Export satu per satu
export const pi = 3.141593;
export const sum = (num1, num2) => num1 + num2;
// Atau,
// Export semua sekaligus
const pi = 3.141593;
const sum = (num1, num2) => num1 + num2;
export { pi, sum };
/*** Default Exports ***/
/* sum.js */
export default function sum(num1, num2) {
return num1 + num2;
}
// Atau,
const sum = (num1, num2) => num1 + num2;
export default sum;
Import
/*** Import from Named Exports ***/
/* main.js */
import { pi, sum } from './math';
console.log(pi);
console.log(sum(5, 2));
/*
Output:
3.141593
7
*/
// Atau,
import * as math from './math';
console.log(math.pi);
console.log(math.sum(5, 2));
/*
Output:
3.141593
7
*/
/*** Import from Default Exports ***/
/* main.js */
import sum from './sum';
console.log(sum(5, 2));
/*
Output:
7
*/
/*** Dynamic Imports ***/
/* main.js */
import('./a-module').then((module) => {
// Do something with the module
});
Array Element Finding
ES6 menyediakan cara baru untuk menemukan elemen suatu array.
find()
Metode find()
me-return elemen suatu array yang pertama ditemukan sesuai dengan kondisi yang ditentukan (bernilai true
).
const numbers = [4, 7, 2, 10, 8, 24];
numbers.find((number) => number > 7); // returns 10
// The code above is the same as:
numbers.filter((number) => number > 7)[0]; // returns 10
findIndex()
Metode findIndex()
me-return indeks dari elemen suatu array yang pertama ditemukan sesuai dengan kondisi yang ditentukan (bernilai true
).
const numbers = [4, 7, 2, 10, 8, 24];
numbers.findIndex((number) => number > 7); // returns 3
String Searching
ES6 menyediakan cara untuk mencari suatu string.
includes()
Metode includes()
me-return true
jika ditemukan nilai string yang ingin dicari dalam suatu string, jika tidak ditemukan maka akan me-return false
.
Tentukan substring yang ingin dicari dengan menuliskannya sebagai argumen dari method.
Secara opsional, kita juga bisa memberikan posisi indeks dimulainya pencarian (default value-nya adalah 0).
// str.includes(substring, startPosition);
'John Mayer'.includes('Jo'); // returns true
'John Mayer'.includes('Jo', 2); // returns false
'John Mayer'.includes('Mayer', 2); // returns true
startsWith()
Metode startsWith()
me-return true
jika nilai string yang ditentukan merupakan awal dari suatu string.
Jika bukan, maka akan me-return false
. Tentukan substring yang ingin dicari dengan menuliskannya sebagai argumen dari method.
Secara opsional, kita juga bisa memberikan posisi indeks dimulainya pencarian (default value-nya adalah 0).
// str.startsWith(substring, startPosition);
'John Mayer'.startsWith('Jo'); // returns true
'John Mayer'.startsWith('ohn', 1); // returns true
'John Mayer'.startsWith('Mayer', 1); // returns false
endsWith()
Metode endsWith()
me-return true
jika nilai string yang ditentukan merupakan akhir dari suatu string.
Jika bukan, maka akan me-return false
. Tentukan substring yang ingin dicari dengan menuliskannya sebagai argumen dari method.
Secara opsional, kita juga bisa menentukan posisi akhir untuk substring bisa ditemukan (default value-nya adalah panjang dari string atau str.length
).
// str.endsWith(substring, endPosition);
'John Mayer'.endsWith('Mayer'); // returns true
'John Mayer'.endsWith('Mayer', 4); // returns false
'John Mayer'.endsWith('John', 4); // returns true
Classes
Class adalah template untuk membuat object. Di dalam class, kita bisa mendeklarasikan property & method.
Jika ingin menginisialisasi property object, maka dapat menyertakan suatu special method, yaitu constructor()
method.
constructor()
method dieksekusi saat pertama kali object dibuat.
class User {
constructor(firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
getAge() {
return this.age;
}
}
// Use the class to create objects
const user1 = new User('John', 'Mayer', 44);
const user2 = new User('Freddie', 'Mercury', 76);
console.log(user1.getAge()); // Output: 44
console.log(user2.getAge()); // Output: 76
Promises
Promise
adalah adalah object yang menghasilkan value jika aksi asynchronous berhasil dilakukan, atau menghasilkan error jika tidak berhasil dilakukan.
Ketika aksi asynchronous telah menghasilkan sesuatu, maka setelahnya dijalankan salah satu antara callback resolve
(jika berhasil) atau callback reject
(jika ditolak).
Object Promise
memiliki state dan hasil. Ketika object Promise
state-nya "pending", maka hasilnya undefined
.
Jika object Promise
state-nya "fulfilled", maka hasilnya adalah suatu value, dan jika object Promise
state-nya "rejected", maka hasilnya adalah error.
// Create a promise using the promise constructor
/*
const promise = new Promise((resolve, reject) => {
// Make an asynchronous call
});
*/
function timeout(duration, shouldReject = false) {
return new Promise((resolve, reject) => {
setTimeout(() => {
if (shouldReject) {
reject(`rejected after ${duration}ms`);
} else {
resolve(`resolved after ${duration}ms`);
}
}, duration);
});
}
// Use a promise
timeout(4000)
.then((value) => console.log(`value: ${value}`))
.catch((error) => console.log(`error: ${error}`));
timeout(4000, true)
.then((value) => console.log(`value: ${value}`))
.catch((error) => console.log(`error: ${error}`));
/*
Output:
value: resolved after 4000ms
error: rejected after 4000ms
*/