Penulisan Kode ES6 dan Pengenalan Fitur

ECMAScript 2015, atau dikenal sebagai ES6, memperkenalkan banyak perubahan pada JavaScript. Berikut adalah gambaran dari beberapa fitur yang paling umum dan perbedaan pada penulisannya dengan membandingkan dengan penulisan ES5.

Daftar Isi

  • Deklarasi Variabel
  • Deklarasi Konstanta
  • Penulisan Arrow function
  • Template literals
  • Penulisan singkat Key/property
  • Penulisan singkat definisi Method
  • Destructuring (object matching)
  • Array iteration (looping)
  • Paramenter Default
  • Penulisan Spread
  • Classes/constructor functions
  • Inheritance
  • Modules - export/import
  • Promises/callbacks

Variables dan constant perbandingan fitur

Saya menjelaskan konsep, ruang lingkup dan perbedaan antara let,var, dan const dari artikel Understanding Variables, Scope, and Hoisting in JavaScript sumber dari DigitalOcean

Keyword Scope Hoisting Can Be Reassigned Can Be Redeclared
var Function scope Yes Yes Yes
let Block scope No Yes No
const Block scope No No No

Deklarasi Variabel

ES6 memperkenalkan let, yang memungkinkan untuk variabel block-scoped yang tidak dapat dideklarasikan ulang.

ES5
var x = 0
ES6
let x = 0

Deklarasi Konstanta

ES6 memperkenalkan const, yang tidak dapat dideklarasikan ulang atau assign ulang.

ES6
const CONST_IDENTIFIER = 0 

Arrow functions

Penulisan pada Arrow Function adalah cara yang lebih pendek untuk membuat fungsi expression. Arrow Function tidak memiliki this, tidak memiliki prototypes, tidak dapat digunakan untuk konstruktor, dan tidak boleh digunakan sebagai metode objek.

ES5
function func(a, b, c) {} // function declaration
var func = function(a, b, c) {} // function expression
ES6
let func = a => {} 
let func = (a, b, c) => {}

Template literals

Concatenation/string interpolation

Ekspresi dapat tambahkan dalam string template literal.

ES5
var str = 'Tanggal: ' + date
ES6
let str = `Tanggal: ${date}`

Multi-line strings

Menggunakan template literal, string pada JavaScript dapat menjangkau beberapa baris kode tanpa perlu penggabungan.

ES5
var str = 'ini text ' + 
            'dalam ' + 
            'multiple line'
ES6
let str = `ini text
            dalam
            multiple line`

Penulisan singkat Key/property

ES6 memperkenalkan notasi yang lebih pendek untuk menempatkan properti ke variabel nama yang sama.

ES5
var obj = {
  a: a,
  b: b,
}
ES6
let obj = {
  a,
  b,
}

Penulisan singkat definisi Method

Keyword function dapat dihilangkan saat menulis method pada suatu object.

ES5
var obj = {
  a: function(c, d) {},
  b: function(e, f) {},
}
ES6
let obj = {
  a(c, d) {},
  b(e, f) {},
}
obj.a() // call method a

Destructuring (object matching)

Gunakan curly bracket untuk menulis properti suatu object ke variabel itu sendiri.

var obj = {a: 1, b: 2, c: 3}
ES5
var a = obj.a
var b = obj.b
var c = obj.c
ES6
let {a, b, c} = obj

Array iteration (looping)

Penulisan yang lebih singkat telah kenalkan untuk iterasi melalui array.

var arr = ['a', 'b', 'c']
ES5
for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}
ES6
for (let i of arr) {
  console.log(i)
}

Paramenter Default

Function dapat diinisialisasi dengan parameter default, yang hanya akan digunakan jika argumen tidak dipanggil melalui function.

ES5
var func = function(a, b) {
  b = b === undefined ? 2 : b
  return a + b
}
ES6
let func = (a, b = 2) => {
  return a + b
}
func(10) // return 12
func(10, 5) // return 15

Penulisan Spread

Penulisan spread dapat digunakan untuk memperluas/pengembangkan array.

ES6
let arr1 = [1, 2, 3]
let arr2 = ['a', 'b', 'c']
let arr3 = [...arr1, ...arr2]

console.log(arr3) // [1, 2, 3, "a", "b", "c"]

Penulisan spread dapat digunakan untuk fungsi argumen.

ES6
let arr1 = [1, 2, 3]
let func = (a, b, c) => a + b + c

console.log(func(...arr1)) // 6

Classes/constructor functions

ES6 memperkenalkan penulisan class di atas konstruktor berbasis prototype fungsi.

ES5
function Func(a, b) {
  this.a = a
  this.b = b
}

Func.prototype.getSum = function() {
  return this.a + this.b
}

var x = new Func(3, 4)
ES6
class Func {
  constructor(a, b) {
    this.a = a
    this.b = b
  }

  getSum() {
    return this.a + this.b
  }
}

let x = new Func(3, 4)
x.getSum() // return 7

Inheritance

Keyword extends dapat membuat subclass.

ES5
function Inheritance(a, b, c) {
  Func.call(this, a, b)

  this.c = c
}

Inheritance.prototype = Object.create(Func.prototype)
Inheritance.prototype.getProduct = function() {
  return this.a * this.b * this.c
}

var y = new Inheritance(3, 4, 5)
ES6
class Inheritance extends Func {
  constructor(a, b, c) {
    super(a, b)

    this.c = c
  }

  getProduct() {
    return this.a * this.b * this.c
  }
}

let y = new Inheritance(3, 4, 5)
y.getProduct() // 60

Modules - export/import

Modules dapat dibuat untuk mengekspor dan mengimpor kode antar file.

index.html
<script src="export.js"></script>
<script type="module" src="import.js"></script>

export.js

let func = a => a + a
let obj = {}
let x = 0

export {func, obj, x}
import.js
import {func, obj, x} from './export.js'

console.log(func(3), obj, x)

Promises/Callbacks

Promise mewakili penyelesaian fungsi asynchronous. Bisa juga digunakan sebagai alternatif fungsi chaining.

ES5 callback
function doSecond() {
  console.log('Do second.')
}

function doFirst(callback) {
  setTimeout(function() {
    console.log('Do first.')

    callback()
  }, 500)
}

doFirst(doSecond)
ES6 Promise
let doSecond = () => {
  console.log('Do second.')
}

let doFirst = new Promise((resolve, reject) => {
  setTimeout(() => {
    console.log('Do first.')

    resolve()
  }, 500)
})

doFirst.then(doSecond)

Contoh di bawah ini menggunakan XMLHttpRequest, hanya untuk demo (Fetch API).

ES5 callback
function makeRequest(method, url, callback) {
  var request = new XMLHttpRequest()

  request.open(method, url)
  request.onload = function() {
    callback(null, request.response)
  }
  request.onerror = function() {
    callback(request.response)
  }
  request.send()
}

makeRequest('GET', 'https://url.json', function(err, data) {
  if (err) {
    throw new Error(err)
  } else {
    console.log(data)
  }
})
ES6 Promise
function makeRequest(method, url) {
  return new Promise((resolve, reject) => {
    let request = new XMLHttpRequest()

    request.open(method, url)
    request.onload = resolve
    request.onerror = reject
    request.send()
  })
}

makeRequest('GET', 'https://url.json')
  .then(event => {
    console.log(event.target.response)
  })
  .catch(err => {
    throw new Error(err)
  })

Jika ini bermanfaat, silahkan share 😃

Share on Twitter