Pengenalan Javascript ES6

Dalam beberapa tahun ini javascript telah mengalami perkembangan dari segi syntax dan teknologi, mulai dari package manager (npm) hingga bahasa itu sendiri. javascript merupakan bahasa yang sangat populer untuk meng-handle front-end dengan melakukan manipulasi DOM (Document Object Model) yang sangat berguna agar website yang dibuat menjadi lebih interaktif.

kali ini, saya pribadi akan memberikan dokumentasi terkait fitur-fitur dari Javascript ES6 yang saya ketahui, mulai dari pendaklarasian variabel, constanta, arrow function, hingga filter dan manipulasi object. tulisan yang saya buat mengacu pada referensi website W3Schools

Javascript let vs var

seperti yang kalian ketahui, dalam mendeklarasikan variabel pada javascript umumnya menggunakan var. namun apakan kalian tau perbedaan penggunaan var dan let ? jawabannya ada pada block-scope jika var yang kalian gunakan, maka variabel yang di definisikan akan dapat diakses oleh seluruh dokumen javascript tanpa memperdulikan variabel tersebut dipanggil didalam function ataupun diluar function. contoh :

var nama = "";

nama = "Angga";

function setNama() {
  var nama = "NIX";
  console.log(nama);
}

setNama();

var nama = "Eko";

console.log(nama);

perhatikan potongan kode di atas, menurut kalian apa yang akan keluar pada console ? seharusnya yang keluar pada console adalah

NIX // Terpanggil karena fungsi setNama()
Eko // Terpanggil karena deklarasi ulang variabel nama setelah pemanggilan fungsi setNama()

var akan membuat global variabel yang tidak akan memperdulikan dimana variabel tersebut dipanggil, dan lagi var membolehkan redeclare pada document javascript.

Sekarang kita lihat code Javascript ES6 dalam mendeklarasikan variabel dengan keyword let

let nama = "";

nama = "Angga";

function setNama() {
  let nama = "NIX";
  console.log(nama);
}

setNama();

let nama = "Eko";

console.log(nama);

console akan mengeluarkan error

Uncaught SyntaxError: Identifier 'nama' has already been declared

let tidak membolehkan adanya redeclare dalam satu block document, dan variabel let di dalam scope tidak dapat dipanggil di luar scope. hal ini dapat membantu developer dalam menjaga variabel-variabel yang vital terhadap perubahan yang bersifat global sehingga tidak perlu khawatir dalam melakukan track atau debug error pada variabel yang telah di deklarasikan.

Javascript Konstanta dengan const

keyword const membolehkan kalian untuk membuat konstanta yang mana nilai asli nya tidak dapat diubah. contoh:

const nama = "Angga";
nama = "NIX"; 

code di atas akan menghasilkan error karena konstanta tidak dapat mengubah nilai asli yang telah di set. const tidak sepenuhnya tidak dapat diubah ada kondisi tertentu yang dapat membolehkan mengubah. const mengubah value object dalam const misalnya. contoh:

const biodata = {nama: 'Angga', email: 'angganix@gmail.com'};

biodata.nama = 'Eko Pratama';
biodata.email = 'aieang.dokter@gmail.com';

console.log(biodata); 

// Menghasilkan VM9201:7 {nama: "Eko Pratama", email: "aieang.dokter@gmail.com"}

perlu diingat bahwa object yang dideklarasikan const hanya dapat diubah value nya saja tidak dapat di re-assign object nya. contoh:

const biodata = {nama: 'Angga', email: 'angganix@gmail.com'};

biodata = {nama: 'Eko Pratama', email: 'aieang.dokter@gmail.com'};

console.log(biodata);

// Akan menghasilkan error Uncaught TypeError: Assignment to constant variable.

Javascript Arrow Function () =>

Jika pada umumnya saya menggunakan function(){ untuk membuat sebuah fungsi maka pada Javascript ES6 memperkenalkan cara baru dalam menuliskan sebuah fungsi, lebih ringkas dan terkesan shorthand. contoh:

setNama = (nama) => {
  console.log(nama)
}

setNama('Angga');

arrow function juga dapat mereturn nilai tanpa menuliskan keyword return. contoh:

penjumlahan = (x, y) => x + y;

penjumlahan(5, 5);
10

luar biasa hebat! hanya dengan satu baris, sudah dapat membuat fungsi dan me-return nilai yang diberikan tanpa membuat baris baru :).

Javascript Filter

untuk fitur ini saya pribadi baru belajar dan entah sudah ada di javascript sebelumnya atau memang fitur baru dari Javascript ES6 namun kegunaan dari filter sendiri merupakan mekanisme untuk memilah atau memilih array atau array object dengan kondisi tertentu. hal ini sangat berguna jika kita tidak ingin membebani server dengan query dan server side processing. contoh:

const data_anak = [
    {
      id: 1,
      nama: 'Angga',
      usia: 25
    },
    {
      id: 2,
      nama: 'Eko',
      usia: 20
    },
    {
      id: 3,
      nama: 'Pratama',
      usia: 17
    },
    {
      id: 4,
      nama: 'NIX',
      usia: 16
    },
];

let umur_diatas_20 = data_anak.filter(item => item.usia > 20)

console.log(umur_diatas_20)

// Akan me-return hasil dari filter pada variabel umur_diatas_20 
// Hasil output : [{"id":1,"nama":"Angga","usia":25}]

Javascript REST Parameter

ada kasus di mana dalam membuat function javascript akan melibatkan parameter. ya kalau parameternya hanya sebatas 1 – 5 saja sih tidak masalah. tapi bayangkan jika kalian dipaksa untuk memanggil fungsi dengan melakukan set parameter sejumlah puluhan. pasti akan sangat kerepotan, ya sih bisa di akali dengan assign array atau object pada parameternya, namun di Javascript ES6 hal ini lebih elegan dengan adanya REST Parameter. contoh pemanggilan fungsi tanpa REST Parameter:

setBiodata = (nama, email, no_hp, tempat_lahir, tanggal_lahir, alamat, hobi, jenis_kelamin, status_menikah, tagihan_indiehome) => {
   // ....
}

panjang kayak kereta ya, coba bandingan dengan menggunakan REST Parameter.

setBiodata = (...data) => {
   console.log(data)
};

setBiodata("Angga", "angganix@gmail.com", "08595121xxx", "Jakarta", "14/09/1995", "Jakarta", "Mancing Keributan", "Laki-laki", "Sudah punya anak", "????");

dengan REST Parameter fungsi yang memanfaatkan parameter dapat ditulis dengan ringkas.

Bonus Javascript

jika kalian para pengguna jQuery pasti kalian pernah menggunakan metode $.each() untuk melakukan mapping object atau array dan mengolahnya dalam looping pada javascript sendiri memiliki metode map yang dapat berjalan seperti $.each() pada jQuery. contoh:

const data_anak = [
    {
      id: 1,
      nama: 'Angga',
      usia: 25
    },
   {
      id: 2,
      nama: 'Eko',
      usia: 20
    },
   {
      id: 3,
      nama: 'Pratama',
      usia: 17
    },
   {
      id: 4,
      nama: 'NIX',
      usia: 16
    },
];

data_anak.map((item, index) => {
  console.log("Nama : " + item.nama+", Usia " + item.usia +" tahun");  
})

Nama : Angga, Usia 25 tahun
Nama : Eko, Usia 20 tahun
Nama : Pratama, Usia 17 tahun

dengan melakukan map pada array atau array object makan perulangan dapat dilakukan dengan memanfaatkan item yang di set, parameter index hanyalah tambah, bisa juga hanya menuliksan parameter item saja tanpa index, namun biasanya index digunakan untuk bantuan dalam kasus tertentu. masih banyak alternatif metode selain map ini, seperti forEach .some dll.

mungkin cukup sekian untuk Pengenalan Javascript ES6, apa yang saya tuliskan hanyalah sebagian kecil dari banyaknya fitur yang disediakan oleh javascript. untuk itu kalian dapat belajar membaca dokumentasi resmi atau melalui website W3Schools sebagai referensi belajar. tetap semangat jangan menyerah untuk belajar. keep develop!…

Terima Kasih.

Leave a Reply