React ES6

Assalamualaikum Wr. Wb.

Pada kesempatan kali ini, kita akan membahas React ES6.

Apa itu ES6?

ES6 adalah singkatan dari ECMAScript 6.

ECMAScript dibuat untuk membuat standar JavaScript, dan ES6 adalah versi ke-6 dari ECMAScript, diterbitkan pada 2015, dan juga dikenal sebagai ECMAScript 2015.

Mengapa harus belajar ES6?

React menggunakan ES6, dan Kamu terbiasa dengan beberapa fitur baru seperti:

  • Classes
  • Fungsi Arrow
  • Variabel (let, const, var)

Class

ES6 menunjukkan classes.

Class adalah jenis fungsi, tetapi untukmenggunakan kata kunci function untuk mulai, kita menggunakan kata kunci class, dan properti digunakan di dalam suatu metode constructor().

Contoh

Konstruktor class sederhana:

class Car {
  constructor(name) {
    this.brand = name;
  } 
}

Sekarang Kamu dapat membuat objek menggunakan class Mobil:

Contoh

Buat objek yang disebut “mycar” berdasarkan class Mobil:

class Car {
  constructor(name) {
    this.brand = name;
  } 
}
  
mycar = new Car("Ford");

Catatan: Fungsi konstruktor dipanggil secara otomatis ketika objek diinisialisasi.

Metode dalam Classes

Kamu dapat menambahkan metode Kamu sendiri di class:

Contoh

Buat metode bernama “sekarang”:

class Car { 
  constructor(name) {
    this.brand = name;
  }         
    
  present() {
    return 'I have a ' + this.brand;
  }
}
  
mycar = new Car("Ford");
mycar.present();

Seperti yang Kamu lihat dalam contoh di atas, Kamu memanggil metode dengan merujuk ke nama metode objek diikuti oleh tanda kurung (parameter akan masuk ke dalam tanda kurung).

Turunan Classes

Untuk membuat turunan class, gunakan kata kunci extends .

Class yang dibuat dengan turunan class akan menerima semua metode dari class lain:

Contoh

Buat kelas bernama “Model” yang akan menerima metode dari kelas “Mobil”:

class Car {
  constructor(name) {
    this.brand = name;
  }
  
  present() {
    return 'I have a ' + this.brand;
  }
}
  
class Model extends Car {
  constructor(name, mod) {
    super(name);
    this.model = mod;
  }  
  show() {
      return this.present() + ', it is a ' + this.model
  }
}   
mycar = new Model("Ford", "Mustang");
mycar.show();

metode super() mengacu pada kelas induk.

Dengan memanggil metode super() dalam metode konstruktor, kami memanggil metode konstruktor induk dan mendapatkan akses ke properti dan metode induk.

Fungsi Arrow

Fungsi arrow ditampilkan di ES6.

Fungsi arrow memungkinkan kita untuk menulis fungsi sintaks yang lebih pendek:

Sebelum:

hello = function() {
  return "Hello World!";
}

Dengan Fungsi Arrow:

Semakin pendek kan.. Jika fungsi hanya memiliki satu pernyataan, dan pernyataan mengembalikan nilai, Kamu dapat menghapus tanda kurung dankata kunci return:

Fungsi Arrow Mengembalikan Nilai secara Default:

hello = () => "Hello World!";

Catatan: Ini hanya berfungsi jika fungsi hanya memiliki satu pernyataan.

Jika Kamu memiliki parameter, Kamu kasih dalam tanda kurung:

Fungsi Panah Dengan Parameter:

hello = (val) => "Hello " + val;

Bahkan, jika Kamu hanya memiliki satu parameter, Kamu dapat melewati tanda kurung juga:

Fungsi Panah Tanpa Tanda Kurung:

hello = val => "Hello " + val;

Apa Yang Dimaksud Dengan this ?

Penggunaan  this juga berbeda dalam fungsi arrow dibandingkan dengan fungsi biasa.

Singkatnya, dengan fungsi arrow  tidak ada penggabungan this.

Dalam fungsi biasa, kata kunci this mewakili objek yang disebut fungsi, yang bisa berupa jendela, dokumen, tombol, atau apa pun.

Dengan fungsi arrow, kata kunci  this selalu mewakili objek yang menentukan fungsi arrow.

Mari kita lihat dua contoh untuk memahami perbedaannya.

Kedua contoh memanggil metode dua kali, pertama ketika halaman dimuat, dan sekali lagi ketika pengguna mengklik tombol.

Contoh pertama menggunakan fungsi biasa, dan contoh kedua menggunakan fungsi arrow.

Hasilnya menunjukkan bahwa contoh pertama mengembalikan dua objek yang berbeda (jendela dan tombol), dan contoh kedua mengembalikan objek Header dua kali.

Contoh

Dengan fungsi reguler, this mewakili objek yang disebut fungsi:

class Header {
  constructor() {
    this.color = "Red";
  }
  
//Regular function:
  changeColor = function() {
    document.getElementById("demo").innerHTML += this;
  }
}
  
myheader = new Header();
  
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
  
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor)

Contoh

Dengan fungsi arrow, this mewakili objek Header tidak peduli siapa yang memanggil fungsi:

class Header {
  constructor() {
    this.color = "Red";
  }
  
//Arrow function:
  changeColor = () => {
    document.getElementById("demo").innerHTML += this;
  }
}
  
myheader = new Header();
  
  
//The window object calls the function:
window.addEventListener("load", myheader.changeColor);
  
//A button object calls the function:
document.getElementById("btn").addEventListener("click", myheader.changeColor);

Ingatlah perbedaan-perbedaan ini ketika Kamu bekerja dengan fungsi. Terkadang perilaku fungsi biasa adalah yang Kamu inginkan, jika tidak, gunakan fungsi panah.

Variabel

Sebelum ES6, hanya ada satu cara untuk mendefinisikan variabel Kamu: dengan kata kunci var. Jika Kamu tidak mendefinisikannya, mereka akan ditugaskan ke objek global. Kecuali jika Kamu berada dalam mode ketat, maka Kamu akan mendapatkan kesalahan jika variabel Kamu tidak terdefinisi.

Sekarang, dengan ES6, ada tiga cara untuk mendefinisikan variabel Kamu: varlet, dan const.

var

varx=5.6;

Jika Kamu menggunakan di var luar fungsi, itu milik lingkup global.

Jika Kamu menggunakan var di dalam suatu fungsi, itu milik fungsi itu.

Jika Kamu menggunakan var di dalam blok, yaitu untuk loop, variabel masih tersedia di luar blok itu.

Var memiliki ruang lingkup fungsi , bukan ruang lingkup blok .

let

let x = 5.6;

let memiliki ruang lingkup blok .

let adalah versi scoped blok var, dan terbatas pada blok (atau ekspresi) di mana ia didefinisikan.

Jika Kamu menggunakan let di dalam blok, yaitu untuk loop, variabel hanya tersedia di dalam loop itu.

const

constx=5.6;

const adalah variabel yang setelah dibuat, nilainya tidak akan pernah bisa berubah.

Const memiliki ruang lingkup blok .

Demikianlah share ilmu pada artikel kali ini

semoga bermanfaat, ya

Wassalamualaikum Wr. Wb

Sumber : https://www.webhozz.com/code/react-es6/