Fitur Javascript ES6 yang Asix

Fitur Javascript ES6 yang Asix

Bima IndraMay 2019

Perkembangan dunia teknologi saat ini sangatlah pesat. Terutama di dalam dunia programming. Di dalam rentan waktu tertentu, pasti akan ada sebuah framework baru atau apapun itu. Hal ini saya sadari setelah saya mulai terjun ke dunia Front End Development kurang lebih 5 tahun terakhir.

Kali ini saya akan membahas sedikit tentang beberapa fitur Javascript ES6 yang memudahkan dalam melakukan pekerjaan pembuatan website.

1. Arrow Function

Arrow function merupakan salah satu fitur terbaru dari JavascriptES6 dan juga sebagai alternatif ringkas penulisan sebuah function di dalam Javascript.

Berikut sebagai contoh perbedaan mendasar antara normal function dengan arrow function :

// Normal Function
function a (a) {
  return a + 100;
}

// Arrow Function
let a = a => a + 100;
// Normal Function
function tambah (angka1, angka2) {
  return angka1 + angka2;
}

// Arrow Function
let tambah = (angka1, angka2) => angka1 + angka2;

Seperti yang terlihat beberapa contoh di atas, ada beberapa perbedaan dalam hal penulisan sebuah function.

Tidak semua function yang akan kita buat diharuskan menggunakan arrow function. Karena ada keterbatasan yang harus diketahui juga dalam penggunaan arrow function. Berdasarkan situs MDN, beberapa keterbatasan tersebut adalah :

  • this adalah global object
  • Tidak boleh digunakan sebagai method function
  • Tidak mempunyai arguments atau new.target keywords
  • Tidak cocok untuk method call, apply, dan bind

Nah, saya akan sedikit menjelaskan untuk poin ke 1, yakni permasalahan this dalam arrow function.

Perlu diketahui, bahwa arrow function tidak memiliki konsep this.

// Normal Function
const phoneOld = {
  name: 'Iphone7',
  year: '2015',
  checkSpec: function() {
    console.log(this.name) // Iphone7
    console.log(this.year) // 2015
  }
}
phoneOld.checkSpec();


// Arrow Function
const phoneES6 = {
  name: 'Iphone7',
  year: '2015',
  checkSpec: () => {
    console.log(this.name) // undefined
    console.log(this.year) // undefined
  }
}
phoneES6.checkSpec();

Contoh di atas adalah contoh simpel perbedaan konsep this di dalam normal function dan arrow function.

Normal function secara default akan memerintahkan this untuk mencari ke lexical scopenya. Atau lebih mudahnya mencari parent dari scope this tersebut. Maka, jika dilihat dari contoh di atas this tersebut akan menuju ke Object phoneOld. Sedangkan, seperti diketahui bahwa arrow function tidak mengenal konsep this maka dia tidak akan mencari ke lexical scopenya atau parentnya. Jika di console log, maka this di dalam arrow function akan merujuk ke Object Window.

Namun, penggunaan this dalam arrow function masih bisa digunakan, yaitu dengan cara merubah function nya menjadi function Constructor. Karena function constructor memiliki this di dalamnya.

Oleh karena itu, tidak semua function diharuskan menggunakan arrow function. Perlu diperhatikan juga kebutuhan juga. Namun selain itu, menggunakan arrow function akan membuat struktur codingan jauh lebih ringkas dan simple.

2. Blocked Scope Variables (const vs let)

const dan let adalah cara baru dari ES6 untuk pembuatan/pendeklarasian variabel. Sebelumnya kita mengenal var untuk membuat/mendeklarasikan variabel. Namun ada beberapa hal yang perlu diperhatikan jika kita terus-menerus menggunakan var.

var

const

let

Redeclare

Yes

No

No

Hoisting

Yes

No

No

Block Scope

No

Yes

Yes

Create Global props

Yes

No

No

Dari tabel di atas, terlihat perbedaan penggunaan antara var / const / let. Perbedaan yang paling mendasar adalah var akan terbaca secara global dan akan riskan jika digunakan karena berpotensi menimbulkan beberapa masalah seperti duplikasi nama variabel, hoisting, block scope.

Redecalre

// var
var x = 10;
var x = 20;
console.log(x) // 10

// const
const x = 10;
const x = 20;
console.log(x) // Uncaught SyntaxError: Identifier 'x' has already been declared

// let
let x = 10;
let x = 20;
console.log(x) // Uncaught SyntaxError: Identifier 'x' has already been declared

Hoisting

// var
x = 10;
var x;
console.log(x) // 10

// const
x = 10;
const x;
console.log(x) // Uncaught SyntaxError: Missing initializer in const declaration

// let
x = 10;
let x;
console.log(x) // Uncaught ReferenceError: Cannot access 'x' before initialization

Block Scoped

// var
var x = 'Hello';
if (true) {
  var x = 'Goodbye';
}
console.log(x); // Goodbye

// const
const y = 'Hello';
if (true) {
  const y = 'Goodbye';
}
console.log(y); // Hello

// let
let z = 'Hello';
if (true) {
  let z = 'Goodbye';
}
console.log(z); // Hello

Berdasarkan contoh di atas dapat ditarik kesimpulan untuk sebisa mungkin hindari penggunaan var. Hal itu dikarenakan var akan dibaca secara global. Bahkan, jika kita lupa mendeklarasisan variable pun akan dianggap sebagai global variabel (var). Ini akan membuat kebingungan teman kolaborasi anda dalam membaca coding.

Contoh variabel tanpa deklarasi

function a() {
  x = 10;
};
console.log(x) // 10

Perlu diketahui juga bahwa const dan let mempunyai sedikit perbedaan walaupun kedunya memiliki fungsi yang sama jika dilihat dari table di atas.

const tidak bisa diisi ulang / tidak bisa diubah (immutable).
let bisa diisi ulang / bisa diubah (mutable).

3. Template String / Template Literals

ES6 mempunyai fitur Template String / Template Literals. Kegunaan dari fitur tersebut yaitu untuk mempermudah pembuatan sebuah string yang mengandung data dinamis dengan hanya menggunakan backtick “ dan ${}. Atau dalam arti lain concatenate string.

// Old
let yourname = 'Indra';
let yourage = 26;
console.log('Halo, nama saya ' + yourname + '.' + ' Saya umur' + yourage + 'tahun.') // Halo, nama saya Indra. Saya umur26tahun.

// ES6
let nama = 'Bima'
let umur = 26;
console.log(`Halo, nama saya ${nama}. Saya umur ${umur} tahun.`); // Halo, nama saya Bima. Saya umur 26 tahun.

Dari contoh di atas, terlihat perbedaan penulisan sebuah string dimana jika menggunakan cara lama yaitu harus memperhatikan petik string (“”) dan penghubung string dg variabel (+). Terkadang jika yang di print terlalu panjang dan banyak kita akan kebingunan untuk memisah-misahkan antara string dan data dinamis.

Namun dengan hadirnya Template String / Template Literals kita cukup mengubah petik string menjadi petik terbalik / backtick (“) dan apabila memanggil data dinamis tinggal menggunakan ${nama_parameter}. Lebih mudah dan simple.

4. Default Parameter

Default Parameter di dalam JavascriptES6 digunakan untuk memberikan default value di dalam parameter sebuah function.

const tambah = (a = 10, b = 20) =>  a + b ;
console.log(tambah()) // 30

const tambah = (a = 10, b = 20) =>  a + b ;
console.log(tambah(5)) // 25

Dari contoh di atas, terlihat bahwa parameter a memiliki default value 10 dan parameter b memiliki default value 20. Jika kita memanggil function tambah tanpa memasukkan parameter maka secara otomatis akan memakai value default dari function tersebut.

5. Spread operator (…)

Spread operator secara definisi dari MDN adalah sebuah operator yang memecah (expand / unpack) sebuah iterables menjadi single element.

Beberapa kegunaan Spread Operator ini antara lain menggabungkan Array dan mengcopy Array.

// Old - Concate 2 Array atau lebih
const buah1 = ['Apel', 'Jeruk'];
const buah2 = ['Rambutan', 'Salak'];
const gabung = buah1.concat(buah2);
console.log(gabung); // "Apel", "Jeruk", "Kelengkeng", "Rambutan", "Salak"]

// Concate 2 Array atau lebih
const buah1 = ['Apel', 'Jeruk'];
const buah2 = ['Rambutan', 'Salak'];
const gabung = [...buah1, 'Kelengkeng', ...buah2];
console.log(gabung); // "Apel", "Jeruk", "Kelengkeng", "Rambutan", "Salak"]
// Old - Copy Array
const pesawat = ['Garuda', 'Lion', 'Sriwijaya']
const newPesawat = pesawat;
newPesawat[0] = 'Garuda Indonesia';
console.log(pesawat) // ['Garuda Indonesia', 'Lion', 'Sriwijaya']
console.log(newPesawat[0]) // Garuda Indonesia

// ES6 - Copy Array
const pesawat = ['Garuda', 'Lion', 'Sriwijaya']
const newPesawat = [...pesawat]
newPesawat[0] = 'Garuda Indonesia';
console.log(pesawat) // ['Garuda', 'Lion', 'Sriwijaya']
console.log(newPesawat[0]) // Garuda Indonesia

Dari contoh di atas, ada beberapa perbedaan dalam mengolah data yang iterables.

Saya akan menjelaskan salah satu contoh saja yaitu Concate Array. Di contoh yang pertama (Concate Array) kita bisa lihat perbedaan cara menggabungkan 2 Array menggunakan cara lama dan cara baru ES6. Di cara lama, kita cukup menggunakan Array method concat untuk menggabungkannya. Namun, cara tersebut terdapat kekurangan, yaitu tidak bisa menyisipkan sebuah Array baru ditengahnya. Jika kita ingin menambahkan array baru akan sedikit rumit. Namun hal tersebut tidak terjadi ketika kita menggunakan fitur ES6 Spread Operator. Kita cukup memasukkan Array baru tersebut di antara 2 Array yang ingin digabungkan. Seperti ini contohnya const gabung = […buah1, ‘Kelengkeng’, …buah2];

Lebih mudah bukan? Jika dilihat, struktur codingan kita bisa lebih rapi dan jauh lebih simple jika menggunakan fitur ES6.

6. Destructuring

Destructuring di dalam ES6 adalah sebuah cara untuk membongkar nilai dari sebuah Array ataupun properti Object menjadi variabel yang berbeda. Atau bisa dikatakan memecah ke dalam element terkecil nya.

// Old
const huruf = ['A', 'B', 'C', 'D', 'E']

const huruf1 = huruf[0];
const huruf2 = huruf[1];
console.log(huruf1); // A
console.log(huruf2); // B


// ES6
const huruf = ['A', 'B', 'C', 'D', 'E']

const [huruf1, huruf2, ...semua] = huruf; // destructuring
console.log(huruf1); // A
console.log(huruf2); // B

Contoh di atas cara simpel bagaimana Destructuring di ES6 diterapkan dalam sebuah Array. Pada contoh tersebut saya mencoba mendapatkan value pertama dan kedua di dalam sebuah Array. Jika kita lihat contoh tersebut terdapat perbedan cara mendapatkan value yang saya inginkan dengan menggunakan Javascript Primitive dan JavascriptES6.

Dengan Javascript Primitive, kita harus memperhatikan urutan dari sebuah element yang akan kita panggil dengan harus mengetahui node barisannya. Contoh : array[0], aray[1]. Namun, dengan cara destructuring, kita bisa membuat nya lebih ringkas. Contoh : const [huruf1, huruf2] = huruf. Kita hanya perlu membuat multiple variabel yang dibungkus kurung siku dengan mengambil Array yang mau kita eksekusi. Urutan dari variabel tersebut yang akan menyimpan value Array berdasarkan urutan Array nya.

Destructuring ini tidak hanya berlaku untuk Array saja, namun bisa digunakan mengolah data Object. Dan cara nya pun tidak jauh berbeda. Hanya perbedaan kurung saja, jika Array menggunakan kurung siku [] sedangkan Object menggunakan kurung kurawal {}.

const Mobil = {
  merk: 'Toyota',
  tahun: '2010',
  warna: 'Hitam',
}

// OLD
const merk = Mobil.merk; // Toyota
const tahun = Mobil.tahun; // 2010
const warna = Mobil.warna; // Hitam


// ES6
const {merk, tahun, warna} = Mobil;
console.log(merk); // Toyota
console.log(tahun); // 2010
console.log(warna); // Hitam

Destructuring juga bisa dikombinasikan dengan Spread Operator.

Demikianlah beberapa fitur dari ES6 yang asix dan sangat powerfull untuk menunjang kebutuhan kita sebagai Developer. Semoga bermanfaat.

Sekian dan terima kasih.

Tags:
#development#javascript#es6