ES6 adalah singkatan dari ECMAScript 6. ECMAScript 6 sendiri digunakan untuk memperkuat JavaScript dan ES6 adalah versi-6 ECMAScript yang diterbitkan pada tahun 2015, dan juga dikenal sebagai ECMAScript 2015.
Kenapa kita harus belajar ES6 ? Karena di React menggunakan ES6 dan juga sangat berhubungan dengan beberapa fitur sebagai berikut :
- Classes
- Arrow Function
- Variables (let, cons, var)
Berikut merupakan penjelasan dan contoh dari fitur-fitur di atas
Section Artikel
CLASSES
ES6 memperkenalkan fitur yaitu Classes.
Classes adalah jenis fungsi, tetapi alih-alih menggunakan function kata kunci untuk memulainya, kami menggunakan class kata kunci, dan properti ditetapkan di dalam metode constructor().
Contoh Syntax simpel dari constructor :
class Car {
constructor(name) {
this.brand = name;
}
}
Sekarang anda dapat membuat objek menggunakan class car :
Contoh :
<!DOCTYPE html> <html> <body> <script> class Car { constructor(name) { this.brand = name; } } mycar = new Car("Ford"); document.write(mycar.brand); </script> </body> </html>
Dan hasilnya adalah menampilkan sebuah tulisan “Ford” yang ada di dalam subjek “mycar”
METHOD PADA CLASSES
Anda dapat menambahkan metode sendiri di dalam class anda :
Contoh :
<!DOCTYPE html>
<html>
<body>
<script>
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
mycar = new Car("Ford");
document.write(mycar.present());
</script>
</body>
</html>
Dan hasilnya adalah sebuah tulisan berisi ” I have a Ford”. Seperti yang Anda lihat pada contoh di atas, Anda memanggil metode dengan mengacu pada nama metode objek diikuti dengan tanda kurung (parameter akan masuk ke dalam tanda kurung).
CLASS INHERITANCE
Untuk membuat class inheritance, gunakan kata kunci extends.
Kelas yang dibuat dengan class inheritance mewarisi semua metode dari class lain:
Contoh :
<!DOCTYPE html>
<html>
<body>
<script>
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");
document.write(mycar.show());
</script>
</body>
</html>
Dan hasilnya adalah sebuah tulisan berisi “I have a Ford, it is a Mustang”. Metode super () mengacu pada kelas induk. Dengan memanggil metode super () dalam metode konstruktor, kita memanggil metode konstruktor induk dan mendapatkan akses ke properti dan metode induk.
ARROW FUNCTION
Arrow Function diperkenalkan di ES6.
Arrow Function memungkinkan kita untuk menulis sintaks fungsi yang lebih pendek:
Sebelum :
<!DOCTYPE html>
<html>
<body>
<h1>Function</h1>
<p>This demonstrates a regular function, NOT an arrow function.</p>
<p id="demo"></p>
<script>
hello = function() {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Dan hasilnya sebagai berikut :
Sesudah menambahkan Arrow Function
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>A demonstration of a simple arrow function.</p>
<p id="demo"></p>
<script>
hello = () => {
return "Hello World!";
}
document.getElementById("demo").innerHTML = hello();
</script>
</body>
</html>
Dan hasilnya sebagai berikut :
Ini semakin pendek! Jika fungsi hanya memiliki satu pernyataan, dan pernyataan tersebut mengembalikan nilai, Anda dapat menghapus tanda kurung dan kata kunci return:
<!DOCTYPE html> <html> <body> <h1>Arrow Function</h1> <h2>Implicit Return</h2> <p>The arrow function expects a return value, and returns the value by default, without the <strong>return</strong> keyword.</p> <p id="demo"></p> <script> hello = () => "Hello World!"; document.getElementById("demo").innerHTML = hello(); </script> </body> </html>
Dan hasilnya adalah sebagai berikut :
Jika Anda memiliki parameter, Anda bisa meneruskannya di dalam tanda kurung.
Contoh Arrow Function dengan parameter :
<!DOCTYPE html>
<html>
<body>
<h1>Arrow Function</h1>
<p>Demonstrasi Arrow Function dalam satu baris, dengan parameter.</p>
<p id="demo"></p>
<script>
hello = (val) => "Hello " + val;
document.getElementById("demo").innerHTML = hello("World");
</script>
</body>
</html>
Dan hasilnya adalah sebagai berikut :
VARIABLES
Sebelum ES6, hanya ada satu cara untuk mendefinisikan variabel Anda yaitu dengan kata kunci var. Jika Anda tidak mendefinisikannya, mereka akan ditugaskan ke objek global. Kecuali Anda dalam mode ketat, Anda akan mendapatkan kesalahan jika anda belum menentukan variabel nya.
Sekarang, dengan ES6, ada tiga cara untuk mendefinisikan variabel Anda: var, let, dan const.
Syntax var :
var x = 5.6;
Jika Anda menggunakan var di luar suatu fungsi, itu termasuk dalam cakupan global.
Jika Anda menggunakan var di dalam suatu fungsi, itu milik fungsi itu.
Jika Anda menggunakan var di dalam blok, yaitu perulangan for, variabel masih tersedia di luar blok itu.
Syntax let :
let x = 5.6;
let adalah versi cakupan blok dari var, dan terbatas pada blok (atau ekspresi) tempat ia didefinisikan.
Jika Anda menggunakan let inside of a block, yaitu for loop, variabel hanya tersedia di dalam loop itu.
Syntax cons :
const x = 5.6;
