JavaScript ES6 (còn được gọi là ECMAScript 2015 hoặc ECMAScript 6) là phiên bản JavaScript mới hơn được giới thiệu vào năm 2015.

ECMAScript là tiêu chuẩn mà ngôn ngữ lập trình JavaScript sử dụng. ECMAScript cung cấp đặc điểm kỹ thuật về cách thức hoạt động của ngôn ngữ lập trình JavaScript. Ở bài dưới đây, chúng ta sẽ cùng tìm hiểu một số khái niệm tổng quan về ES6.

Khai báo biến

Từ khóa let

JavaScript let được sử dụng để khai báo các biến. Trước đây, các biến được khai báo bằng câu lệnh var.

Các biến được khai báo bằng let là block-scoped. Có nghĩa là phạm vi biến chỉ có thể truy cập được trong một khối cụ thể. Ví dụ:

// variable declared using let
let name = 'Hello';
{
    // can be accessed only inside
    let name = 'Toanngo';

    console.log(name); // Toanngo
}
console.log(name); // Hello

Khai báo hằng số

Từ khóa const

Câu lệnh const được sử dụng để khai báo hằng số trong JavaScript.

Ví dụ:

// name declared with const cannot be changed 
const name = 'This is a constanct';

Sau khi khai báo, bạn không thể thay đổi giá trị của biến const. Ngoài ra const có thể sử dụng để khai báo hàm, được thẻ hiện ở các đoạn sau.

Định nghĩa hàm (Arrow function)

Trong ES6, có thể sử dụng các Arrow Function (hàm mũi tên) để tạo biểu thức hàm. Ví dụ:

// old version
function function_name (param){
   // todo
}

// using const

const function_name1 = function(param){
    // todo
}

// ES6

const function_name2 = (param) =>{
 // todo
}

Định nghĩa Lớp (Class)

Để khởi tạo lớp trong Javascript, sử dụng từ khóa Class. Với việc khởi tạo biến, sử dụng từ khóa new

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

let myCar1 = new Car('Hyundai I10');
let myCar2 = new Car('Toyota vios');

console.log(myCar1.name); // Hyundai I10

Tham số mặc định (Default Parameter)

Trong phiên bản ES6, bạn có thể truyền các giá trị mặc định trong đối số của hàm, sau khi định nghĩa, khi gọi hàm nếu lập trình viên không truyền tham số, javascript tự hiểu sẽ sử dụng giá trị được gán mặc định cho biến khi định nghĩa. Ví dụ:

//define function
const sum = (x, y = 5) => {

    // take sum
    // the value of y is 5 if not passed
    console.log(x + y);
}
// call function
sum(5); // 10
sum(5, 15); // 20

Khuôn mẫu chữ (Template Literals)

Template Literals (khuôn mẫu chữ) hay còn gọi là Template Strings là một cú pháp mới để khai báo String trong JavaScript được giới thiệu trong ES2015/ES6. Nó cho phép chúng ta sử dụng multi-line string, biến, biểu thức, hàm bên trong String mà không phải thông qua phép nối chuỗi.

Ví dụ phong cách cũ:

let first_name = "Hello";
let last_name = "World";

console.log('This is ' + first_name + ' ' + last_name);

Phong cách ES6:

let first_name = "Jack";
let last_name = "Sparrow";

console.log(`Hello ${first_name} ${last_name}`);

Lưu ý code khi sử dụng phong cách cũ vẫn chạy bình thường.

Hủy cấu trúc (Destructuring)

Destructuring là một cú pháp cho phép chúng ta phân tách nhanh các thuộc tính của một Object hoặc một Array vào danh sách biến hoặc cấu trúc khác theo mong muốn, giúp tiết kiệm thời gian viết mã.

Ví dụ phong cách cũ:

// 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

Ví dụ phong cách ES6:

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

Từ khóa import và export

Trong ES6, chúng ta có thể export (xuất) một hàm, lớp từ một tệp và sử dụng nó trong một tệp khác bằng cách import (nhập) nó. Điều này giúp tạo ra các thành phần có thể sử dụng lại.

Ví dụ export:

Tạo file test.js

// export
export default function myFeature(name, age) {
    console.log(`The name is ${name}. And age is ${age}.`);
}

Ví dụ import:

import contact from './test.js';

contact('Hello', 10);
// The name is Hello. And age is 10

Từ khóa Promise (lời hứa)

Từ khóa promise sử dụng để xử lý bất đồng bộ trong ứng dụng Javascript. Cách hiểu đơn giản giống như khi thực hiện một công việc xong sau đó sẽ làm gì tiếp theo. Ví dụ:

// 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
    },
 )

Các tham số còn lại (Rest Parameter) và toán tử trải rộng (Spread Operator)

Rest Parameter

ES6 cung cấp khái niệm Rest Parameter để biểu diễn số lượng đối số không xác định dưới dạng một mảng. Ví dụ:

// define function
const show = (a, b, ...args) => {
  console.log(a); // one
  console.log(b); // two
  console.log(args); // ["three", "four", "five", "six"]
}
// call function
show('one', 'two', 'three', 'four', 'five', 'six')

Spread Operator

let arr1 = ['one', 'two'];
let arr2 = [...arr1, 'three', 'four', 'five'];
console.log(arr2); // ["one", "two", "three", "four", "five"]

Rest Parameter và Spread Operator có cú pháp hơi tương đồng nhau. Tham số còn lại (Rest Parameter) ngược lại với toán tử trải rộng (Spread Operator). trong khi toán tử trải rộng Spread Operator mở rộng các phần tử của một iterable, toán tử còn lại sẽ nén chúng lại. Trong các hàm khi chúng ta yêu cầu truyền đối số nhưng không chắc mình phải truyền bao nhiêu đối số, tham số còn lại sẽ giúp việc này dễ dàng hơn.