Mengenal Fitur pada ES6 - JavaScript
Tidak bisa dipungkiri JavaScript merupakan bahasa pemrograman yang popular. Menurut Stack Overflow Developer Survey 2020 javascript menempati Ranking 1 tentang bahasa pemrograman yang paling banyak digunakan, kamu bisa mengaksesnya disini. ECMAScript atau biasa disingkat ES adalah standar sederhana untuk JavaScript dan menambahkan fitur baru ke JavaScript. ECMAScript adalah bagian dari JavaScript dan JavaScript pada dasarnya adalah ECMAScript, tetapi dibangun diatasnya. ES6 sendiri diterbitkan pada tahun 2015. Ada beberapa fitur yang menurut saya penting untuk diketahui pada ES6 untuk mempermudah pekerjaan kita.
Arrow Functions
Arrow functions adalah sintak penulisan fungsi yang bisa dibilang lebih singkat, menggunakan token baru yaitu “ =>”, fungsi yang dideklarasikan menggunakan panah ini bersifat anonim. Dengan Arrow functions kita menulis fungsi tanpa menggunakan kata kunci “function”, “return”, dan kurung kurawal.
//JavaScript function syntax
function foo() {
return "hello world"
}//Arrow function syntax
const foo = () => {
return "hello world"
}
sebenarnya masih banyak yang perlu kita ketahui tentang Arrow function, Insyaalloh kapan waktu dibahas secara khusus di story lain.
Destructuring Array & Object
Merupakan syntax yang dapat mengeluarkan nilai dari array atau properties dari sebuah object ke dalam satuan variabel yang berbeda.
//Array Destructuring
[a, b] = [11, 12];
console.log(a); //11
console.log(b); //12//Object Destructuring
{c, d] = { c:11, d:12 };
console.log(c);
console.log(d);
Spread Operator
Digunakan untuk pelebur array menjadi multiple element yang berbeda.
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a) //1
console.log(b) //2
console.log(rest) = //[3, 4, 5]function sum(a, b, c) {
return (a+b+c)
}
const numbers = [1+2+3];
result = sum(...numbers);
console.log(result);
Rest Parameters
Kebalikan dari spread operator, rest parameter digunakan untuk menggabungkan beberapa elemen menjadi satu array.
//Rest parameter
function foo(x, y, ...rest) {
return rest
}console.log(foo(1,2,3,4,5,6)) //[3, 4, 5, 6]
For-of Loops
Kita biasanya menggunakan for untuk looping pada sebuah array. Dengan menggunakan for kita harus membuat sebuah variabel iterator yang berberapan sebagai index yang biasanya digunakan untuk mendapatkan nilai posisi ketika proses loop berjalan. Dengan ES6 ada cara yang lebih mudah yaitu menggunakan for..of.
const fruits = ["banana", "apple", "orange"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i])
}
//banana
//apple
//orange//with for..of
const fruits = ["banana", "apple", "orange"];
for(let food of foods) {
console.log(food)
}
//banana
//apple
//orange
Dynamic Object Property Names
Sebelum ES6 untuk membuat object literal berdasarkan variabel yang sudah dideklarasikan kita perlu melakukan 2 langkah yaitu, membuat object literal itu sendiri dan menggunakan bracket notation. pada ES6 kita bisa langsung menambahkan sebuah variabel yang digunakan sebagai property key kedalam object literal.
const property = "name";//Old way requires 2 steps
const obj = {
foo: "bar"
};
obj[property] = "diki";
console.log(obj)
//{ foo: "bar", name: "diki" }//with Dynamic Object Property Name
const obj = {
foo: "bar",
[property]: "Diki Arif Wibowo"
}
console.log(obj)
//{ foo: "bar", name: "Diki Arif Wibowo" }
Template Literals/String Interpolation
Sebelum ES6 proses penggabungan nilai string (concatenating) dilakukan dengan menggunakan operator (+). Hal itu tentu sangat merepotkan, apalagi jika ada new line. Dengan menggunakan ES6 akan jauh lebih mudah. Kita bisa menggunakan single qoute atau double qoute, kemudian untuk menggabungkan string kita dapat menggunakan ${}
let user = {
name: "Diki Arif Wibowo",
age: 24
}let message = "Dear, "+ user.name+ " "+"\n\n"+ "Selamat ulang tahun yang ke-"+user.age+" semoga selalu diberi kesehatan."
console.log(message);
//Dear, Diki Arif Wibowo
//
//
//Selamat ulang tahun yang ke-24 semoga selalu diberi kesehatan.//with template literals or string interpolation.
let message = `Dear, ${user.name} Selamat ulang tahun yang ke-${user.age} semoga selalu diberi kesehatan`
console.log(message);
//Dear, Diki Arif Wibowo
//
//
//Selamat ulang tahun yang ke-24 semoga selalu diberi kesehatan.
Sebenarnya masih banyak yang perlu kita bahas pada ES6 diantaranya adalah method properties, Object properties shorthand, let & const, Object literal dll. kamu bisa membaca dokumentasinya disini
