lifelong learner — urip iku urup, currently working on accenture.

ES6 – introduction

0
Degananda.com -

Ecmascript adalah bahasa yang saat ini digunakan bersaaman dengan html(hypertext markup langauge) yang secara umum digunakan sebagai clinet side scripting(dibrowser). Fungsi utamannya adalah untuk menghandle user interaction dan pengelolaan DOM.

Pada tahun 2015 telah dirilis ecmascript2015 atau yang biasa kita sebagai ES6. Ecmascript adalah bahasa sedangkan javascript adalah suatu “dialect“. Contohnya terdapat bahasa indonesia namun secara dialect bermacam-macam. Dunia pemrograman web terutama javascript saat ini banyak yang menggunakan ES6 seperti angular, react , nodejs dan lain-lain.

Ulasan ini akan membahas fitur-fitur yang dihadirkan oleh ecmascript2015 atau ES6. Namun pembahasan fitur ini hanya bersifat general tidak pada coding. Tujuannya adalah memberikan kita gambaran atau overview mengenai fitur yang berguna pada es6. Dengan mengerti es6 kita akan semakin mudah untuk membangun aplikasi dengan menggunakan javascript mengingat dengna es6 banyak sekali kemudahan yang diberikan

kemudahan apa sajakah itu ? silahkan simak ulasan ini

Fitur ES6

1. Arrow

Dengan menggunakan arrow penulisan syntax seperti forEach ataupun map() akan menjadi semakin mudah dan simpel. Contohnya pada syntax foreach jika tanpa menggunakan kaidah es6 maka penulisannya sebagai berikut ini

var nomor = [1,2,3,4,5];
nomor.forEach(function(res){
    console.log(res);
});

maka setelah menggunakan es6 penulisannya akan menjadi seperti berikut ini

var nomor = [1,2,3,4,5];
nomor.forEach(
    (res) => {
        console.log(res);
    }
);

keduannya memiliki fungsi sama yakni melakukan looping terhadap anggota dari suatu array hanya perbedaan dalam penulisan ini. Bayangkan berapa waktu yang dapat dihemat dengan hanya menggunakan fungsi arrow ini.

2. Classes

Sebelum ES6 kita tentu membuat class dengan menggunakan prototype. Menurut saya pribadi sangat tidak “rapi” dan tidak seperti penulisan class pada bahasa pemrograman lainnya misalnya java atau php. Ini contoh ketika kita membuat class dengan menggunakan javascript.

function Orang(nama, umur){
    this.nama = nama;
    this.umur = umur;
}

var dega = new Orang('Dega', '23');

lalu lihat lah kode dibawah ini bagaimana es6 dapat membuat class yang layaknya kita lakukan pada bahasa pemrograman lainnya seperti java.

class Orang {
    constructor(nama, umur){
        this.nama = nama;
        this.umur = umur;
    }
}

var dega = new Orang('dega', '23');

3. Template string

Output yang akan kita tampilkan terkadang tidak hanya berupa string atau literal biasa. Terkadang kita akan mengkobinasikannya dengan variabel untuk mencapai output tertentu. Biasannya kita akan memanfaatkan “+” untuk menggabungkan antara literal dan juga variabel/object. Contohnya adalah seperti berikut ini

]
var nama = 'dega';
document.write("saya" + nama+" berumur " + 23);

pemisahan menggunakan tanda “+” ini sangat tricky, sekarang lihat contoh dibawah ini kode dengan fungsi yang sama seperti diatas akan ditulis dengan es6 (template string) akan sangat indah dan rapi sekali dan kita tidak akan terjebak pada penggunaan simbol “+” lagi.

var nama = 'dega';
document.write(`saya ${nama} berumur 23`);

4. Interfaces (hanya pada typescript)

interfaces adalah suatu template yang digunakan untuk memandu kita dalam membuat suatu class. Kini interfaces hadir dalam es6 berikut ini adalah contoh implementasi interface

interface Orang {
    nama : String;
    umur : Number;

    getNama() : String{
        return this.nama;
    }

}

5. Module

Modul adalah suatu komponen kecil yang dapat kita buat dalam javascript. Modul ini bersifat reuseable artinnya dapat digunakan di class mana saja.  Dengan menggunakan modul kita dapat memecah fungsionalitas dari aplikasi menjadi bagian-bagian yang kecil. Berikut ini adalah contoh penulisan modul pada es6

export function sayMyName(nama){
    return nama;
}

kesimpulan

Menurut kami , ES6 memberikan banyak sekali fitur yang mendekatkan javascript dengan OOP pada umumnya (penulisan class, penggunaan interfaces, dan lain sebagainnya). Terlepas dari hal tersebut, Itulah lima fitur dari es6 yang sebenarnya terdapat lebih dari itu. Namun ini adalah overview mengenai kemampuan dari es6 yang sangat membantu kita developer javascript. Diulasan – ulasan selanjutnya akan dibahas secara mendalam masing-masing fitur es6. Berikut ini adalah keseluruhan fitur dari es6

  1. arrow
  2. class
  3. enhanced object literals
  4. template string
  5. destructuring
  6. default + res + spread
  7. let + const
  8. iterator + for…of
  9. generators
  10. unicode
  11. module
  12. module loaders
  13. map + set + weakmap +weakset
  14. proxies
  15. symbol
  16. subclass
  17. promise
  18. math
  19. binary + octal literal
  20. reflect api
  21. tail calls

insha allah seluruh fitur tersebut akan dibahas satu persatu mengenai pembahasan pada kategori es6.