Mencoba ECMAScript 6 Harmony Di Firefox


Apa itu ECMAScript? Tidak lain adalah JavaScript! Lalu kenapa disebut ECMAScript? Berdasarkan riwayat di http://en.wikipedia.org/wiki/ECMAScript, Netscape adalah yang pertama kali memasarkan bahasa scripting bernama JavaScript pada browser Netscape Navigator (cikal bakal Firefox). Karena JavaScript sangat sukses, Microsoft kemudian mengembangkan bahasa serupa yang diberi nama JScript untuk dipakai di Internet Explorer. Microsoft kemudian melakukan standarisasi JScript melalui badan standarisasi Ecma International. Setelah berbagai perlawanan antar Netscape (kini menjadi Mozilla Organization) dan Microsoft, akhirnya bahasa yang telah di-standarisasi tersebut, ECMAScript, disepakati menjadi milik bersama. Jadi, JavaScript dan JScript disepakati sebagai implementasi dari bahasa ECMAScript.

Mungkin saja bagi pihak Mozilla, JScript seharusnya adalah implementasi dari JavaScript dan ECMAScript tidak perlu ada, karena mereka yang terlebih dahulu menciptakan JavaScript🙂 Browser Internet Explorer sebenarnya memakai JScript (http://en.wikipedia.org/wiki/JScript) bukan JavaScript. Microsoft juga membuat varian JScript yang disebut JScript .NET. Tapi bagi sebagian besar developer web, JScript di Internet Explorer dianggap sama seperti JavaScript. Dan yang lebih membingungkan lagi, Microsoft merombak implementasi ECMAScript 5 di Windows 8 dan kini menyebutnya sebagai JavaScript.

Versi paling baru ECMAScript adalah versi 6 yang disebut juga ES6 Harmony. ES6 saat ini belum final, tapi beberapa browser termasuk Firefox sudah mengimplementasikan beberapa bagian dari proposalnya. Seperti apa bahasa pemograman JavaScript generasi terbaru nanti? Saya akan mencoba beberapa fitur yang sudah diimplementasikan oleh Firefox.

ES6 mendukung spread operator. Pada Groovy, ini dilakukan dengan menggunakan operator bintang. Pada ES6, spreading dilakukan dengan menggunakan tiga titik (…) seperti pada contoh berikut ini:

function tambah(a,b) {
    return a + b;
}
var angka = [10, 20];
console.log(tambah(...angka)); // output: 30
// setera dengan:
console.log(tambah(angka[0], angka[1]));  // output: 30

Pada contoh di atas, setiap elemen dari array akan diterjemahkan menjadi argumen.

Saya dapat membuat sebuah variabel menjadi konstan (tidak dapat diubah nilainya) dengan menggunakan const seperti berikut ini:

const JUMLAH_KOLOM = 5;  // variabel ini tidak boleh diubah

ES6 juga memiliki arrow function untuk mendeklarasikan anonymous function secara lebih singkat lagi, seperti pada contoh berikut ini:

tombol.onclick = (e) => { alert('test'); }
// setara dengan:
tombol.onclick = function(e) { alert('test'); }

ES6 juga membolehkan definisi nilai default untuk parameter pada sebuah function seperti pada contoh berikut ini:

function cetak(pesan = '') {
    console.log(pesan + '<br>');
}
cetak(); // output: <br>

Bandingkan hasilnya dengan tanpa nilai default seperti:

function cetak(pesan) {
    console.log(pesan + '<br>');
}
cetak(); // output: undefined<br>

ES6 juga memiliki struktur data baru seperti Map, WeakMap dan Set. Sebagai contoh, kode program berikut ini memakai Map:

var daftarNilai = new Map();
daftarNilai.set('Solid Snake', 60);
daftarNilai.set('Liquid Snake', 70);
for (var[nama, nilai] of daftarNilai) {
    console.log(nama + ' memiliki nilai ' + nilai);
}

// Output:
// Solid Snake memiliki nilai 60
// Liquid Snake memiliki nilai 70

ES6 juga memiliki banyak fitur lainnya yang menarik namun belum di-implementasi-kan oleh Firefox. Salah satunya adalah adanya class. Dengan adanya class, maka OOP di JavaScript bisa lebih mudah lagi dibandingkan dengan saat ini yang berbasis prototype. Selain itu, ES6 juga akan mendukung module sehingga nantinya akan ada keyword import.

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: