Ecmascript 6

Ecmascript? Mungkin banyak yang baru dengar dengan bahasa yang satu ini. Ya.. karena memang tidak terlalu tenar seperti bahasa lain, tapi saya yakin para developer website udah pasti pernah pake ini bahasa. Ya.. Javascript. Javascript merupakan salah satu bahasa pemrograman yang menggunakan Ecmascript sebagai standard penulisannya. Selain itu, ada juga Actionscript yang juga merupakan implementasi dari Ecmascript.

Sebenarnya Ecmascipt saat ini sudah mencapati versi ke 10 atau ES10 (Ecmascript2019). Eh tapi kok masih bahas ES6 udah ketinggalan jauh dong? Ya.. mungkin sudah jauh tertinggal, tapi perlu difahami ada perbedaan yang sangat signifikan pada es5 dan es6.

Sedikit kita bahas sejarah, Ecmascript 5 terakhir rilis pada Desember 2011 sedangkan Ecmascipt 6 (disingkat, ES6) dirilis pada 2015. Wow.. merekea punya selisih tahun yang cukup jauh. Hal ini secara tidak langsung membuat orang semakin penasaran dengan ES6. Ya, benar saja seperti yang diterangkan tadi ada perbedaan yang signifikan antara es5 dan es6.

Tapi, bagaimana dengan Ecmascript generasi selanjutnya? Untuk generasi selanjutnya dirilis setiap tahunnya, hingga sampai pada generasi ke 10 di tahun 2019 dan tentu perubahan juga ada tapi tidak sesignifikan pada es6.

Semenjak dirilis pada 2015 silam, Es6 berhasil mencuri panggung di dunia programming. Sebagai contoh semakin banyaknya library ataupun tools yang sudah menganut es6 seperti React, Vuejs, NodeJS dan sebagainya.

Apa saja fitur ES6?

Pada artikel ini saya hanya akan membahas fitur secara general, karena untuk membahas secara spesifik fitur-fitur es6 saya rasa bisa di judul tersendiri.

Let dan Const

Let dan const merupakan sintaks untuk mendeklarasikan variabel pada ES6. Dimana di versi sebelumnya kita hanya mengenal var dalam pendeklarasian variabel.

Jadi pada es6 ada tiga cara dalam pendeklarasian variabel, yaitu var, let dan const. Tapi, apa bedanya? Secara mendaras perbedaannya berada pada pendeklarasian. pemberian nilai dan pengsesan masing masing variabel. Lengkapnya akan dibahas pada judul berikutnya..

let a = 1;
var b = 2;
const c = 3;

Arrow Function

Pada saat pertama kali melihat kode es6, saya bingung dengan sintaks baru ini. Ya.. penulisannya agak aneh dan lain, tapi sebenarnya fitur ini disebut arrow function. Arrow function merupakan bentuk penyederhanaan dari penulisan function yang selama ini kita pakai. Tentu bukan hanya penyederhaan masih ada fitur lain yang terpadat pada arrow function yang membuatnya lebih superior seperti kata orang.

Berikut beberapa contoh penulisan arrow function.

// Penulisan bukan sebelum arrow function - (1)
const func1 = function(a, b) {
    return a + b;
}
console.log(func1(2, 5)); // 7

// Penulisan arrow function - (2)
const func2 = (a, b) => {
    return a + b;
}
console.log(func2(2, 5)); // 7

// Penulisan arrow function  - (3)
const func3 = (a, b) => a + b;
console.log(func3(2, 5)); // 7

Jika kita perhatikan beberapa contoh diatas, sebenarnya semua kode menghasilkan nilai 7, karena hasil penjumlahan a + b atau 2 +5 adalah 7.

Tapi kita bahas kodenya, pada contoh (1) kode ditulis masih dengan cara tradisional atau cara lama. Pada cara ini kita masih menuliskan kata function untuk pendeklarasiannya dengan menggunakan parameter a dan b serta mengembalikan nilai a + b melalui return.

Pada contoh (2) penulisan disederhakan, disinilah arrow function dideteksi melalui simbol => untuk cara kerjanya hampir sama dengan contoh 1.

Pada contoh (3) penulisan lebih disederhanakan, perhatikan lagi dimana kita menghilangkan keyword return pada baris kodenya dan hanya menulis dalam satu baris saja. Nah, bisa disimpulkan apabila espresi kode hanya sebaris saja arrow function mengizinkan untuk meniadakan penulisan return.

Selain itu

// contoh 4
let angka = [1, 2, 3, 4, 5];
const func4 = angka.map(function(a) {
    return a + 10;
}
console.log(func4);

// Contoh 5
const func5 = angka.map(a => a + 10);
console.log(func5);

Nanti saat menulis kode kalian akan sering menjumpai kasus seperti ini, mapping data, looping data dan sebagainyal.

Sebagai contoh kita punya data array angka = [1, 2, 3, 4, 5], pada kedua contoh diatas funsinya sama dimana setiap elemen dari angka ditambahkan dengan 10 dan menjadi nilai kembalian dari fungsi. Untuk perbedaan secara langsung bisa kita lihat pada penulisannya yang lebih menghemat waktu.

Untuk lebih memahami arrow function silahkan cek dokumentasi.

Class

Es6 mulai memperkenalkan Class sebagai salah satu varian barunya di Ecmascript, walau pada versi sebelumnya sudah ada dengan basis prototipe. Dengan salah satu keunggulan kode yang lebih clean, hal ini membuat developer lebih mudah dalam menerapkan OOP (Object-Oriented Programming).

Selain itu terdapat juga fitur constructor, super, set dan get, inheritance atau pewarisan, serta beberapa fitur lainnya sangat membuat es6 tidak kalah dengan bahasa pemrograman lainnya.

Berikut implementasi sederhana kode sebelum dan sesudagh es6

// Sebelum es6
function Produk(nama, harga) {
    this.nama = nama;
    this.harga = harga;
}

var Mobil = new Produk("Ferrari", 1500);

console.log(Mobil.nama);

Dengan es6 class

class Produk {
    constructor(nama, harga) {
        this.nama = nama;
        this.harga = harga;
    }
}

var Mobil2 = new Produk("Agera", 1600);

console.log(Mobil2.harga);

Ya.. mungkin jika masih baru dengan javascript sekilas memang tidak terlihat bedanya, tapi jika ditelisik lebih dalam tentang class es6 akan menemukan perbedaan yang signifikan. Untuk lebih mendalami silahkan cek dokumentasi mozilla.

Template String (Template Literals)

Bagi pengguna javascript zaman old (baca: sebelum es6) mungkin untuk output string biasanya menggunakan tanda “plus” atau (+) untuk penggabungannya. Tentu untuk output tidak hanya string biasa, ada juga variabel javascript disisipkan. Nah, mungkin jika string pendek dan hanya satu atau dua variabel akan mudah mudah saja, tapi saat variabel dan string yang ingin digabungkan sudah mulai banyak, yaa pasti kewalahan. Nah, di ecmascript 6 solusi ini diselesaikan dengan template string atau dikenal juga template literal.

Template string ditandai dengan back tick atau “ ” dan simbol ${variabel} untuk variabel.

// Sebelum es6
var nama = "Samsul";
var umur = 20;

console.log("Nama saya " + nama + " umur " + umur);

// Dengan es6
console.log(`Nama saya ${nama} umur ${umur}`);

Module

Perbedaan signifikan lainnya pada modern javascript es6 adalah penggunaan module. Jika biasanya penulisan javascript yang ribet dalam satu halaman, dengan sifat module yang reuseble membuat code lebih singkat, terpisah dan pembacaan kode lebih mudah.

Module ditandai dengan keyword-keyword baru seperti module.export, export, import pada file .js kalian.

Sebagai contoh kasus berikut.

Siapkan dua file bernama math.js dan index.js

// math.js 
let tambah(a, b) => a + b;

export { tambah }

file index.js

import { tambah } from './math';

console.log(tambah(10, 20)); // 30

Setelah kedua file tersebut dibuat, silahkan load di file index.html dan jalankan di browser dan cek consolenya.

Beberapa fitur diatas hanya dibahas sebagian kecil saja dari pengertian setiap fitur dan sebagian kecil juga dari Ecmascript2015 atau es6. Untuk lebih mendalaminya silahkan cek google, youtube atau dokumentasinya langsung agar lebih akurat..

Terima kasih..

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com