Improvisasi Kode dengan ECMAScript 2015 - Gimana Caranya?

Improvisasi Kode dengan ECMAScript 2015 – Gimana Caranya?

Hallo developer, hallo semuanya!

Sebenarnya pembahasan kali ini agak sedikit usang. Tapi karena Dicoding jarang nge-post artikel teknologi web serta bahasa pemrogramannya, makannya saya agak tertarik memperbanyak tulisan mengangkat topik tersebut.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Apa itu ES6 atau ECMAScript 2015?

ECMAScript unofficial logo from https://github.com/wingsuitist/ecmascript-logo

Belajar Javascript saja sudah bikin kita bingung karena kondisi tertentu. Nah, jangan sampai penamaan versinya juga buat kalian bingung ya. ES6, ES2015 dan ECMAScript 2015 itu sama. ES6 merupakan format penamaan yang digunakan pada versi sebelumnya yaitu ES5 yang dirilis pada Desember 2009, Yup 10 tahun silam! Lalu, Juni 2015 barulah ES6 ini muncul diikuti dengan ketetapan baru untuk penamaan versinya, yang akhirnya menggunakan tahun sebagai format penamaanya. Jadi mau kalian sebut ES6, ES2015 ataupun ECMAScript 2015 itu merujuk ke hal yang sama.

Jika kalian masih dibuat pusing penamaannya? Ada artikel singkat yang membahas hal ini. https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c

ECMAScript 2015: Syntax Improvement

ECMAScript 2015 membawa banyak sekali perubahan, karena gap atau jarak waktu dari versi sebelumnya memang relatif jauh, sehingga ada yang bilang juga sebagai bahasa JavaScript modern. Untuk syntax-nya sendiri banyak yang di improvisasi, Oke mari kita bahas satu persatu

Let dan Const

Sekarang terdapat cara baru untuk mendeklarasikan sebuah variabel, bisa menggunakan let dan const. Sebelum ECMAScript 2015, hanya terdapat satu cara yaitu dengan menggunakan var. Cara ini memang sangat simple tetapi beberapa kasus penggunaanya membuat kita bingung.

Bingung#1 – Hoisting

Apa itu hoisting? Yups, sesuai artinya “Mengangkat” variabel yang dideklarasikan menggunakan var ini dapat diinisialisasi terlebih dahulu sebelum dideklarasikan, Contoh

x = 100

var x

console.log(x) /* output -> 100 */

Ayo, bingung kan kenapa gak error? Ini dikarenakan proses Hoisting, sebenarnya di belakang layar deklarasi variabel x diangkat ke atas sehingga kode yang tampak seperti ini

var x

x = 100

console.log(x) /* output -> 100 */

Nah masalah ini sudah terselesaikan jika kalian menggunakan let.

x = 100

let x

console.log(x) /* output -> ReferenceError: x is not defined */

Bingung#2 – Redeclare

Variabel yang dideklarasikan dengan var dapat dideklarasikan lagi dengan penamaan yang sama. Contoh

var greet = "Hallo"

var greet = "World!"

console.log(greet) /* output -> "World!" */

Sedangkan jika menggunakan let sudah sangat jelas hal ini tidak dapat dilakukan

let greet = "Hallo"

let greet = "World!"

console.log(greet) /* SyntaxError: Identifier 'greet' has already been declared */

Selain kedua kasus tersebut, var juga dapat membuat bingung dalam scopingnya. Sehingga penggunaan var sudah tak lagi disarankan.

Kemudian const digunakan untuk mendeklarasikan sebuah variabel yang sifatnya immutable atau tidak perlu diinisialisasi kembali. Jika kalian menginisialisasi nilai variabel dengan menggunakan const, maka akan mendapati eror “TypeError: Assignment to constant variable.”

const wajahmu = "GANTENG POOL!"

wajahmu = "JADI JELEK!"

console.log(wajahmu) /* TypeError: Assignment to constant variable. */

Template Literals

Sebelum ECMAScript 2015 proses penggabungan nilai string (concatenating) dilakukan dengan menggunakan operator (+).

let user = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

console.log("Nama: " + user.firstName + " " + user.lastName + ", Umur: " + user.age); /* output-> Nama: Dimas Saputra, Umur: 18 */

Mungkin hal tersebut tidak terlalu repot, tapi jika dalam proses penggabungan tersebut terdapat garis baru, ini jadi sangat merepotkan.

let user = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

let admin = {

name: "Jane",

position: "Marketing"

}

let message = "Dear, " + user.firstName + " " + user.lastName + "\n\n" +

"Selamat ulang tahun yang ke-" + user.age + " semoga selalu diberikan kesehatan." + "\n\n" +

"Best Regards,\n" +

admin.name + "\n" +

admin.position;

console.log(message);

/* output ->

Dear, Dimas Saputra

Selamat ulang tahun yang ke-18 semoga selalu diberikan kesehatan.

Best Regards,

Jane

Marketing

kalian bisa lihat betapa repotnya membuat pesan tersebut. Entah berapa banyak operator (+) yang perlu kita gunakan. Dengan template literals proses tersebut dapat kita sederhanakan.

Untuk menggunakan template literals, kita gunakan tanda backticks menggantikan tanda single quotes (‘) atau double quotes (“) yang digunakan sebelumnya. Kemudian untuk menggabungkan nilai string, kita dapat gunakan tanda ${ } di dalam tanda backticks tersebut.

let user = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

console.log(`Nama: ${user.firstName} ${user.lastName}, Umur: ${user.age}`);

Template literals juga dapat membaca karakter line space secara langsung tanpa harus menggunakan escape character.

let user = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

let admin = {

name: "Jane",

position: "Marketing"

}

let message = `Dear, ${user.firstName} ${user.lastName}

Selamat ulang tahun yang ke-${user.age} semoga selalu diberikan kesehatan.

Best Regards,

${admin.name}

${admin.position}`;

console.log(message);

Dear, Dimas Saputra

Selamat ulang tahun yang ke-18 semoga selalu diberikan kesehatan.

Best Regards,

Jane

Marketing

Destructuring Array dan Object

Apa sih destructuring itu? Destructuring pada JavaScript merupakan syntax yang dapat mengeluarkan nilai dari array atau properties dari sebuah object ke dalam satuan variabel yang berbeda. Mendestruksikan sebuah array atau object sebelum ECMAScript 2015 dilakukan dengan cara klasik seperti ini

// ES5

const foods = ['Pie', 'Cake', 'Honey']

const myFood = foods[0]

const yourFood = foods[1]

const ourFood = foods[2]

console.log(myFood, yourFood, ourFood) /* output-> Pie Cake Honey */

Begitu juga dengan object

// ES5

const profile = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

const firstName = profile.firstName

const lastName = profile.lastName

const age = profile.age

console.log(firstName, lastName, age) /* output -> Dimas Saputra 18 */

Setelah ECMAScript 2015, mendesktrukturkan sebuah nilai array dan object akan lebih mudah.

// ES6

const foods = ['Pie', 'Cake', 'Honey']

const [myFood, yourFood, ourFood] = foods

console.log(myFood, yourFood, ourFood) /* output-> Pie Cake Honey */

//ES6

const profile = {

firstName: "Dimas",

lastName: "Saputra",

age: 18

}

const {firstName, lastName, age} = profile

console.log(firstName, lastName, age) /* output -> Dimas Saputra 18 */

Untuk array, kalian juga bisa memilih nilai mana saja yang ingin kita ambil, Contohnya

// ES6

const numbers = [1,2,3,4,5,6,7,8]

const [first, second , , , fifth] = numbers

console.log(first, second, fifth) /* output -> 1 2 5 */

Bagaimana? Sangat mudah bukan? Atau kalian lebih suka cara klasik?

Object Literals

Object Literals merupakan shorthand atau cara cepat dalam menginisialisasikan sebuah properti dalam object. Biasanya ketika membuat sebuah object kita membutuhkan sebuah key: kemudian nilai nya.

// ES5

function getTriangle(base, height) {

return {

base: base,

height: height

}

Dengan object literals ini kita dapat langsung menginisialisasikan sebuah properti melalui variabel tanpa harus menggunakan key. Sebagai gantinya, nama dari variabel tersebut akan menjadi key. Tentunya hal ini dapat meminimalkan redundansi dalam penulisan sebuah kode.

// ES6

function getTriangle(base, height) {

return {

base,

height,

}

Begitu juga dengan penulisan sebuah method dalam object.

// ES5

function getTriangle(base, height) {

return {

base: base,

height: height,

area: function() {

return (base * height) / 2

}

console.log(getTriangle(3,5).area()) /* output -> 7.5 */

kita tidak memerlukan lagi keyword function untuk membuatnya.

// ES6

function getTriangle(base, height) {

return {

base,

height,

area() {

return (base * height) / 2

}

console.log(getTriangle(3,5).area()) /* output -> 7.5 */

For..of

Untuk melakukan looping pada sebuah array, selama ini kita gunakan for loop. Untuk menggunakannya, biasanya kita membuat sebuah variabel iterator yang berperan sebagai index atau mendapatkan nilai posisi ketika proses loop berjalan.

const foods = ["Cake", "Pie", "Donut", "Pizza"]

for(let i = 0; i < foods.length; i++) {

console.log(foods[i])

}

/* output

Cake

Pie

Donut

Pizza

Cara tersebut sudah lama digunakan oleh banyak programmer, termasuk kalian bukan? Nah, for..of loop ini dapat membuat proses looping pada sebuah object iterable (generalisasi array) menjadi mudah dan lebih dimengerti.

const foods = ["Cake", "Pie", "Donut", "Pizza"]

for(let food of foods) {

console.log(food)

}

/* output

Cake

Pie

Donut

Pizza

Pada for..of kita tidak lagi membutuhkan counter logic (i++) dan sebuah exit condition (i < foods.length). Proses loop akan berjalan sesuai panjang nilai iterator (foods), dan nilai dalam setiap indexnya pada proses loop akan disimpan pada variabel (food).

Spread operator

Masih tentang iterator nih! Sesuai namanya “Spread” yang berarti membentangkan, operator ini digunakan untuk membentangkan nilai array menjadi beberapa elements. Untuk melakukannya kita gunakan three consecutive dot (…) pada sebuah array. Look at this code baby!

1 2	const foods = ["Cake", "Pie", "Donut", "Pizza"] console.log(foods) /* output -> [ 'Cake', 'Pie', 'Donut', 'Pizza' ] */

Pada kode tersebut hasil yang dicetak adalah sebuah array, karena kita mencetak nilai foods itu sendiri. Nah, dengan menggunakan spread operator kita dapat membentangkan nilai – nilai dalam array tersebut.

1 2	const foods = ["Cake", "Pie", "Donut", "Pizza"] console.log(...foods) /* output -> Cake Pie Donut Pizza */

Terlihat kan perbedaanya? Contoh kasus kapan kita harus menggunakan spread operator adalah ketika kita hendak menggabungkan dua buah array dalam object array baru. Jika tidak menggunakan spread operator ini maka hasilnya seperti ini:

const foods = ["Cake", "Pie", "Donut", "Pizza"]

const drinks = ["Lime", "Tea", "Cola", "Redbull"]

const favorites = [foods, drinks]

console.log(favorites) /* output -> [Array(4), Array(4)] */

Whoops! Nilai array tidak tergabung. Lantas dengan menggunakan spread operator maka hasilnya akan seperti ini:

const foods = ["Cake", "Pie", "Donut", "Pizza"]

const drinks = ["Lime", "Tea", "Cola", "Redbull"]

const favorites = [...foods, ...drinks]

console.log(...favorites) /* output -> Cake Pie Donut Pizza Lime Tea Cola Redbull */

Mantap kan?

Rest parameters

Jika Spread operator adalah pelebur array menjadi multiple element yang berbeda, nah rest parameter ini adalah kebalikan dari fungsi tersebut. Kita dapat menggabungkan beberapa elemen menjadi satu array. Teknik ini sangat bermanfaat ketika kita hendak membuat sebuah variadic function yaitu fungsi yang dapat menyediakan argument tidak terbatas. Contohnya ketika membuat fungsi sum() seperti ini:

function sum(...numbers) {

var result = 0;

for(let number of numbers) {

result += number

}

return result;

}

Kesimpulan

Well, biar gak terlalu panjang, cukup sampai sini dulu pembahasan kali ini. Dengan ini saya harap kalian tahu cara mengimprovisasi kode dengan ECMAScript 2015. Make your code fun, clean and shorter tentunya!

Sebenarnya masih ada improvisasi lain contohnya dalam penulisan fungsi, tapi nanti akan dibahas pada artikel selanjutnya, jadi tunggu saja ya. COMING SOON!

Improvisasi Kode dengan ECMAScript 2015 – Gimana Caranya? – end

Suka dengan Materi Ini?

Mungkin ini saatnya buatmu coba kelas Membangun Progressive Web Apps di Dicoding Academy