Dalam tutorial ini, Anda akan belajar tentang JavaScript ES6 dengan bantuan contoh.
JavaScript ES6 (juga dikenal sebagai ECMAScript 2015 atau ECMAScript 6 ) adalah versi JavaScript terbaru yang diperkenalkan pada 2015.
ECMAScript adalah standar yang digunakan bahasa pemrograman JavaScript. ECMAScript memberikan spesifikasi tentang cara kerja bahasa pemrograman JavaScript.
Tutorial ini memberikan ringkasan singkat tentang fitur ES6 yang umum digunakan sehingga Anda dapat memulai dengan cepat di ES6.
JavaScript biarkan
JavaScript letdigunakan untuk mendeklarasikan variabel. Sebelumnya, variabel dideklarasikan menggunakan varkata kunci.
Untuk mempelajari lebih lanjut tentang perbedaan antara letdan var, kunjungi JavaScript let vs var.
Variabel dideklarasikan menggunakan letadalah blok-scoped . Ini berarti mereka hanya dapat diakses dalam blok tertentu. Sebagai contoh,
// variable declared using let let name = 'Sara'; ( // can be accessed only inside let name = 'Peter'; console.log(name); // Peter ) console.log(name); // Sara
Const. JavaScript
The constpernyataan digunakan untuk menyatakan konstanta dalam JavaScript. Sebagai contoh,
// name declared with const cannot be changed const name = 'Sara';
Setelah dideklarasikan, Anda tidak dapat mengubah nilai constvariabel.
Fungsi Panah JavaScript
Dalam versi ES6 , Anda dapat menggunakan fungsi panah untuk membuat ekspresi fungsi. Misalnya,
fungsi ini
// function expression let x = function(x, y) ( return x * y; )
dapat ditulis sebagai
// function expression using arrow function let x = (x, y) => x * y;
Untuk mempelajari lebih lanjut tentang fungsi panah, kunjungi Fungsi Panah JavaScript.
Kelas JavaScript
Kelas JavaScript digunakan untuk membuat objek. Kelas mirip dengan fungsi konstruktor. Sebagai contoh,
class Person ( constructor(name) ( this.name = name; ) )
Kata kunci classdigunakan untuk membuat kelas. Properti ditugaskan dalam fungsi konstruktor.
Sekarang Anda dapat membuat objek. Sebagai contoh,
class Person ( constructor(name) ( this.name = name; ) ) const person1 = new Person('John'); console.log(person1.name); // John
Untuk mempelajari lebih lanjut tentang kelas, kunjungi Kelas JavaScript.
Nilai Parameter Default
Dalam versi ES6, Anda dapat meneruskan nilai default di parameter fungsi. Sebagai contoh,
function sum(x, y = 5) ( // take sum // the value of y is 5 if not passed console.log(x + y); ) sum(5); // 10 sum(5, 15); // 20
Dalam contoh di atas, jika Anda tidak meneruskan parameter untuk y, ini akan mengambil 5 secara default.
Untuk mempelajari lebih lanjut tentang parameter default, kunjungi Parameter Default Fungsi JavaScript.
Literal Template JavaScript
Literal template membuatnya lebih mudah untuk menyertakan variabel di dalam string. Misalnya, sebelumnya Anda harus melakukan:
const first_name = "Jack"; const last_name = "Sparrow"; console.log('Hello ' + first_name + ' ' + last_name);
Ini dapat dicapai dengan menggunakan template literal dengan:
const first_name = "Jack"; const last_name = "Sparrow"; console.log(`Hello $(first_name) $(last_name)`);
Untuk mempelajari lebih lanjut tentang template literal, kunjungi JavaScript Template Literal.
Perusakan JavaScript
Sintaks perusak membuatnya lebih mudah untuk menetapkan nilai ke variabel baru. Sebagai contoh,
// before you would do something like this const person = ( name: 'Sara', age: 25, gender: 'female' ) let name = person.name; let age = person.age; let gender = person.gender; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Menggunakan sintaks Destructuring ES6 , kode di atas dapat ditulis sebagai:
const person = ( name: 'Sara', age: 25, gender: 'female' ) let ( name, age, gender ) = person; console.log(name); // Sara console.log(age); // 25 console.log(gender); // female
Untuk mempelajari lebih lanjut tentang penghancuran, kunjungi Perusakan JavaScript.
Impor dan ekspor JavaScript
Anda dapat mengekspor fungsi atau program dan menggunakannya di program lain dengan mengimpornya. Ini membantu membuat komponen yang dapat digunakan kembali. Misalnya, jika Anda memiliki dua file JavaScript bernama contact.js dan home.js.
Dalam file contact.js, Anda dapat mengekspor yang contact()fungsi:
// export export default function contact(name, age) ( console.log(`The name is $(name). And age is $(age).`); )
Kemudian saat Anda ingin menggunakan contact()fungsi tersebut di file lain, Anda cukup mengimpor fungsi tersebut. Misalnya, di file home.js:
import contact from './contact.js'; contact('Sara', 25); // The name is Sara. And age is 25
Janji JavaScript
Janji digunakan untuk menangani tugas asinkron. Sebagai contoh,
// returns a promise let countValue = new Promise(function (resolve, reject) ( reject('Promise rejected'); )); // executes when promise is resolved successfully countValue.then( function successValue(result) ( console.log(result); // Promise resolved ), )
Untuk mempelajari lebih lanjut tentang promise, kunjungi JavaScript Promises.
Parameter Istirahat JavaScript dan Operator Spread
Anda dapat menggunakan parameter rest untuk merepresentasikan jumlah argumen yang tidak terbatas sebagai array. Sebagai contoh,
function show(a, b,… args) ( console.log(a); // one console.log(b); // two console.log(args); // ("three", "four", "five", "six") ) show('one', 'two', 'three', 'four', 'five', 'six')
Anda meneruskan argumen yang tersisa menggunakan … sintaks. Oleh karena itu, parameter name rest .
Anda menggunakan sintaks sebaran … untuk menyalin item ke dalam satu larik. Sebagai contoh,
let arr1 = ('one', 'two'); let arr2 = (… arr1, 'three', 'four', 'five'); console.log(arr2); // ("one", "two", "three", "four", "five")
Baik parameter lainnya maupun operator penyebaran menggunakan sintaks yang sama. Namun, operator penyebaran digunakan dengan array (nilai yang dapat diulang).
Untuk mempelajari lebih lanjut tentang operator penyebaran, kunjungi JavaScript Spread Operator.
