Serial ES6 – Symbol

Symbol, ketika kita membuat aplikasi dengan javascript, data yang kita gunakan akan mengerucut ke tipe-tipe data berikut ini:

• Undefined
• Null
• Boolean
• String
• Integer
• Object

Sekompleks apapun aplikasi kita dan alur yang kita buat, jika kita rinci, maka datanya kembali ke tipe-tipe di atas. Nah symbol merupakan jenis baru yang bukan termasuk 1 dari tipe yang saya sebutkan di atas. symbol tersedia di ES6 dan belum tersedia di versi javascript sebelumnya. Oleh karenanya kamu harus menggunakan transpiler untuk bisa menggunakan symbol.

Apakah symbol sama dengan variable?

Tidak, symbol bukan variabel. Tapi kita bisa menggasign symbol ke dalam sebuah variabel seperti halnya tipe data lainnya. Symbol juga bukan seperti simbol dalam chatting, yak, seperti emoticon. Bukan! Lalu apa sebenarnya symbol? Sebelum menjelaskan symbol, mungkin saya perlu menjelaskan terlebih dahulu permasalahan yang sering dihadapi sebelum adanya symbol ini.

Begini, misalnya kita mau membuat sebuah script untuk memanipulasi DOM. Script ini akan menghasilkan efek seperti accordion. Caranya adalah kita menambahkan sebuah property pada element DOM yang dipilih. property tersebut kita beri nama isHidden

Cara script kita adalah dengan mengecek property tersebut. Lihat contoh kode di bawah ini:

let selectedElement = document.getElementById('accordion-wraper')

selectedElement.isHidden = true // <--- property buatan kita.

Lihat, kita menambahkan 1 property baru dengan nama isHidden . Ada masalah dengan cara ini, apa itu?

1. Misal ada script lain yang memanipulasi element itu, maka dia akan menjumpai property tambahan yang kita buat itu.
2. Jika ternyata kita pake library semisal bootstrap, dan library tersebut menambahkan property yang sama, yaitu isHidden. Maka conflict akan terjadi
3. Jika misalnya tiba2 ada HTML6, memang bawaan element memiliki property isHidden tamatlah script kita.

Intinya adalah banyak kemungkinan konflik yang terjadi dengan script lainnya. Nah, dengan symbol ES6 berusaha menawarkan solusi atas permasalah di atas.

Symbol jika dipakai dijamin tidak akan konflik meskipun dengan nama yang sama. Contoh

var isHidden = Symbol();

Kita baru saja membuat symbol yang dijamin tidak akan konflik dengan nilai lain. Sehingga kita bisa menggunakannya sebagai property object dengan lebih aman. Misal

var Element = {}
Element[isHidden] = true

• Element[isHidden] disebut property dengan symbol, karena symbol bukan string maka tidak akan konflik dengan property lainnya misal bernama sama isHidden
• Property yang dibuat dengan symbol tidak bisa diakses dengan cara [dot] seperti property biasa, misal Property.isHidden, tidak bisa, tetapi harus menggunakan array accessor seperti Element[namaSymbol]
• Kita bisa melakukan operasi yang biasa kita lakukan pada property seperti misal if (isHidden in Element) . atau bahkan delete Element[isHidden]

Debugging

Untuk tujuan debugging kita bisa memberikan deskripsi pada symbol yang kita buat. Caranya adalah seperti ini:

var isHidden = Symbol('isHidden');

Dengan begitu bila kita melakukan console.log(isHidden) hasilnya adalah “isHidden”

Symbol bukan string

Ini harus saya tegaskan agar kita tidak terjebak ke dalam error saat menggabungkan string dengan symbol.

Misal kita melakukan

console.log("Element menggunakan property " + isHidden)

Hal ini akan menyebabkan TypeError: Can’t convert symbol to string. Agar terhindar dari error ini, kita bisa gunakan method isHidden.toString() atau menuliskan String(isHidden)

Demikian penjelasan tentang ES6 Symbol, artikel lainnya tentang ES6 bisa kamu baca di Apa itu ES6. Dan juga ada di ebook saya berjudul “7 Jurus Baru Javascript”