penulisan-es6-dan-pengenalan-fitur.md

Penulisan Kode ES6 & 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

• MDN Referensi: let

Deklarasi Konstanta

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

ES6

const CONST_IDENTIFIER = 0

• MDN Referensi: const

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) => {}

• MDN Referensi: Arrow functions

Template literals

Concatenation/string interpolation

Ekspresi dapat tambahkan dalam string template literal.

ES5

var str = 'Tanggal: ' + date

ES6

let str = `Tanggal: ${date}`

• MDN Referensi: Expression interpolation

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`

• MDN Referensi: Multi-line strings

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,
}

• MDN Referensi: Property definitions

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

• MDN Referensi: Method definitions

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

• MDN Referensi: Object initializer

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)
}

• MDN Referensi: for...of

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

• MDN Referensi: Default paramters

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

• MDN Referensi: Spread syntax

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

• MDN Referensi: Classes

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

• MDN Referensi: Subclassing with extends

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)

• MDN Referensi: export
• MDN Referensi: import

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)
  })

• MDN Referensi

Jika ini bermanfaat, silahkan share 😃