Belajar ES6 – Perubahan Object Literal

Salah satu fitur lagi pada ES6 yang banyak digunakan oleh beberapa framework seperti ReactJS, Angular dan VueJS adalah perubahan pada Object Literal. Pertama kali saya ketika melihat tutorial dari VueJS ataupun ReactJS agak bingung. Kok itu membuat fungsi di objectnya lain yaa…kok itu passing variable ke object beda ya..garuk2 gak ngerti..Ternyata itu fitur dari ES6 yaitu Object Literal.

Mungkin beberapa kawan biasa menggunakan object seperti kode berikut.

adiputra@linux:~$ node
> let name="adiputra"
undefined
> let email="tuts.adiputra@gmail.com"
undefined
> var personObject = {
... name: name,
... email: email,
... }
undefined
> personObject.name
'adiputra'
> personObject.email
'tuts.adiputra@gmail.com'

Kita buat beberapa data seperti name dan email. Lalu kedua variable itu kita bungkus dalam object dan akses tiap data tersebut. Terlihat kita menuliskan name: name, email: email secara berulang ya. Ini agak aneh juga sih, tapi karena kita sudah terbiasa menggunakan javascript jadi gak aneh. Nah pada ES6, kita bisa menyederhanakan method tersebut menjadi kode seperti dibawah ini.

adiputra@linux:~$ node
> let name="adiputra"
undefined
> let email="tuts.adiputra@gmail.com"
undefined
> personObject = { name, email };
{ name: 'adiputra', email: 'tuts.adiputra@gmail.com' }
> personObject.name
'adiputra'
> personObject.email;
'tuts.adiputra@gmail.com'

Jadi terlihat pendek ya 🙂

Fungsi di Object

Nah selain itu, di ES6 ini saya lihat ada perubahan dalam membuat fungsi pada object. Kita biasa menggunakan atau membuat fungsi pada object seperti ini.

adiputra@linux:~$ node
> personObject = {
... sayHello: function()
... {
..... console.log("Hello");
..... }
... }
{ sayHello: [Function: sayHello] }
> personObject.sayHello()
Hello
undefined
> 

Nah dengan ES6, kita bisa menyederhanakan seperti kode dibawah ini.

adiputra@linux:~$ node
> personObject = {
... sayHello(){
..... console.log('Hello');
..... }
... }
{ sayHello: [Function: sayHello] }
> personObject.sayHello()
Hello
undefined

Terlihat lebih pendek ya, kita hilangkan “function” dan tinggal pass parameter.

Selamat mencoba 🙂

Artikel lainnya

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: