Select Page

Setiap programmer web pasti pernah mendengar bahasa Javascript (JS).
Ini adalah bahasa yang ada di setiap browser.
Bahasa yang menjadi komunikasi antara programmer dengan browser.
Bahasa yang kita gunakan jika kita mau berinteraksi dengan browser.

Browser pertama yang muncul adalah Netscape.
Dan JS diciptakan oleh Brendan Eich untuk ditanamkan di browser tersebut supaya halaman web bisa tampil lebih dinamis.

Setelah Netscape populer, maka browser-browser lainnya pun bermunculan.
Dan JS juga ditanamkan ke dalam browser-browser tersebut oleh vendor-vendor browser tersebut.

Lalu masalah muncul karena setiap vendor browser meng-implementasi JS sesuai dengan standard mereka saja. Sehingga kode-kode JS berjalan tidak konsisten bila dijalankan di browser yang berbeda. JS code yang jalan di Netscape belum tentu berjalan baik di IE begitu pula sebaliknya.

0_1481949607370_upload-7a7cf94d-a07b-4014-9516-c0f03fde22d3

Sehingga pada tahun 2008-2009 para vendor browser berkumpul untuk menyelesaikan masalah ini. Dan terbentuklah sebuah committee yang diberi nama Ecma TC39 yang salah satu anggotanya adalah (tentu saja) sang kreator JS Brendan Eich.

0_1481951297395_tc39.jpg

Committee ini bertugas untuk mendiskusikan fitur-fitur apa yang akan ditambahkan ke JS. Dan setelah resmi direlease maka para vendor browser akan menambahkan fitur-fitur itu kedalam browser mereka (mengkuti standard yang sudah ditetapkan). Sehingga JS bisa berjalan konsisten lintas browser.

Oleh karena itu bisa dikatakan JS yang sekarang ini sebenarnya adalah implementasi dari suatu standard. Dan standard tsb dikenal dengan sebutan EcmaScript (ES).
Sekali lagi supaya jelas bisa dikatakan bahwa EcmaScript adalah suatu standard/spesifikasi dari suatu bahasa.
Dan Javascript adalah implementasi dari standard/spesifikasi itu.
Wujud kongkrit dari EcmaScript adalah sebuah dokumentasi yang bisa dilihat di sini.

0_1481949732900_upload-d143cf31-28cd-4fbf-977b-7d52fe589954

Ketika vendor suatu browser ingin menambahkan fitur baru ke dalam JS, misalnya class. Maka mereka akan melihat spesifikasi yang ada pada EcmaScript ini. Sehingga implementasi class tsb bisa jalan consistent lintas browser.

Contohnya, standard mengatakan bahwa class sebenarnya adalah function dan function memiliki prototype, maka class juga harus memiliki prototype. Yang artinya ketika browser tersebut telah mematuhi standard itu maka code berikut akan output true lintas browser.

class Foo {};
console.log(Foo.prototype !== undefined) //true

Jadi kalau Chrome telah mengikuti standard yang ada pada EcmaScript, maka code diatas juga berjalan consistent ketika dijalankan dari Firefox.

Setiap tahun fitur-fitur baru untuk JS didiskusikan dan direlease oleh Ecma TC39.

Beberapa standard yang dikembangkan oleh Ecma TC39 diantaranya:
– ES5, direlease tahun 2009
– ES6 atau biasa juga disebut ES2015, direlease juni 2015
– ES7 atau biasa juga disebut ES2016, direlease juni 2016

Dan standard yang sedang dikerjakan disebut ESNext. Jadi kalau kita mau tau fitur-fitur apa yang akan ditambahkan ke browser pada masa yang akan datang, maka kita bisa melihat draft dari ESNext ini disini: https://github.com/tc39/proposals.

ES5

Spesifikasi resmi: http://ecma-international.org/ecma-262/5.1

ES5 adalah standard pertama yang direlease oleh Ecma TC39.
JS yang banyak dikenal orang sekarang adalah implementasi dari standard ini.
Dan bisa dipastikan hampir semua browser sudah mengimplementasi standard ini. Sehingga fitur-fitur yang ada pada ES5 bisa berjalan konsisten diantara browser-browser yang ada sekarang.

ES6 atau ES2015

Spesifikasi resmi: http://ecma-international.org/ecma-262/6.0

Ini adalah standard berikutnya yang direlease oleh Ecma TC39 pada tahun 2015.
Fitur-fitur yang ditambahkan oleh standard ini diantaranya:
– arrows
– classes
– enhanced object literals
– template strings
– destructuring
– default + rest + spread
– let + const
– iterators + for..of
– generators
– unicode
– modules
– module loaders
– map + set + weakmap + weakset
– proxies
– symbols
– subclassable built-ins
– promises
– math + number + string + array + object APIs
– binary and octal literals
– reflect api
– tail calls

ES6 bisa dibilang merupakan tonggak bagi dunia JS. Karena begitu banyak fitur-fitur bagus yang ditambahkan oleh standard ini. Diantaranya adalah class. Sebuah fitur yang dinanti oleh banyak programmer.

[DEMO]
http://jsbin.com/didodu/edit?js

ES7 atau ES2016

Spesifikasi resmi: http://ecma-international.org/ecma-262/7.0

Fitur-fitur yang ditambahkan oleh standard ini diantaranya:
– Array.prototype.includes
– Exponentiation Operator
– Object.values/Object.entries
– String padding
– Object.getOwnPropertyDescriptors
– Trailing commas in function parameter lists and calls
– Async Functions

Salah satu fitur yang cukup keren menurut saya adalah async function. Karena kita bisa menulis async code dengan lebih rapi.

async function getDataFromService1() {
  return new Promise((resolve, reject)
    => ajaxCall(data => resolve(data)))
}

async function getDataFromService2() {
  return new Promise((resolve, reject)
    => ajaxCall(data => resolve(data)))
}

async function processData() {
  const data1 = await getDataFromService1();
  const data2 = await getDataFromService2();
  return dataProcessed(data1, data2)
}

processData().then(data => viewData(data))

ESNext

Standard yang sedang dalam proses pengembangan disebut dengan ESNext. Dan apabila kita ingin tau, fitur-fitur apa saja yang sedang digarap oleh Ecma TC39 sekarang ini, maka kita bisa melihat draft dari standard ini disini: https://github.com/tc39/proposals.

Ada beberapa fitur keren yang lagi digarap di standard ini diantaranya:

  • Object Rest/Spread Properties
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
let n = { x, y, ...z };
  • Decorators
@fozen class Person {
  @someDecorator('foo')
  function someFunction(){}
}

Browser-browser apakah yang mendukung standard-standard ini?

Jadi, kita sudah tau, bahwa JS itu adalah implementasi dari suatu standard yang diberi nama EcmaScript (ES) dan dikeluarkan oleh sebuah committee Ecma TC39.

Dan untuk tau browser-browser apa saja yang mendukung standard tersebut, kita bisa melihat di http://kangax.github.io/compat-table/es6 (terimakasih untuk kangax yang telah membuat table tersebut)

Disitu bisa kita lihat beberapa JS Engine dan seberapa banyak suatu standard didukung oleh JS Engine tsb. Dan untuk ES6 sepertinya sudah cukup banyak yang mengimplementasi standard ini.
Browser-browser yang sudah mendukung ES6 saat tulisan ini dibuat diantaranya adalah:
– iOS 10 dan Safari 10 100% ES6
– Chrome v55 97% ES6
– Microsoft Edge 95% ES6
– dan Firefox v50 92%.ES6

Mungkin saat ini adalah saat yang tepat bagi kita untuk mengadopsi fitur-fitur baru dari JS karena kedepannya akan semakin banyak JS Engine yang mengimplementasi standard-standard tsb.

Mari belajar ESNext 🙂

Di post-post berikutnya saya akan membahas fitur-fitur yang ada di ESNext. Jadi jangan sampai ketinggalan ya.

Jangan lupa berikan comment ya teman-teman 🙂

%d bloggers like this: