If you haven’t learned ES6 yet, take a look at this.

Chào các bạn đọc giả thân mến. Trong phạm vi bài viết này, mình sẽ chia sẻ tổng quan những kiến thức, hiểu biết của mình về những tính năng, cú pháp mới trong ES6 hay còn được gọi với một cái tên khác là ES2015.

Trong Javascript có 3 kiểu khai báo biến. Đó là var, let và const. Nhìn chung, các biến được khai báo với từ khóa const không được phép gán lại (reassigned). Trong khi đó, var và let có thể. Ví dụ

const person = "sydinh";
person = "syhiep"; // Error, person trong trường hợp này không thể reassigned

let person = "sydinh";
person = "syhiep";
console.log(person); // "syhiep", person trong trường hợp này có thể được gán lại

Phiên bản Javascript ES6 giới thiệu các hàm mũi tên, đây là một cách khác để khai báo và sử dụng các hàm (functions). Dưới đây là những lợi ích mà nó mang lại:

• Xúc tích, ngắn gọn, rõ ràng (Concise)
• Đối tượng this được pick up từ vùng, bối cảnh xung quanh
• Không còn return

Ví dụ

function foobar(xxx) { return xxx; }; // Cách truyền thống
console.log(foobar('18+')); // 18+

const foobar = xxx => xxx; // Function trên được viết lại với hàm mũi tên
console.log(foobar('18+')); // 18+

Với arrow funciton. Về cơ bản, bạn không cần phải làm những thủ thuật kiểu như that = this (cái đó = cái này) trước khi gọi một function bên trong một function nữa.

Bắt đầu từ Javascript ES6, bạn có thể thiết lập giá trị mặc định cho các tham số của hàm bằng cách sử dụng cú pháp sau:

function foobar(xxx = '18+') { return xxx; };
console.log(foobar()); // 18+, Do không có giá trị được cung cấp, vì vậy xxx nhận vào giá trị mặc định được gán trong foobar function
console.log(foobar('16+')); // 16+,  Giá trị được cung cấp, vì vậy xxx = "16+"
console.log(foobar(undefined)); // 18+,  Trường hợp này xxx sẽ nhận vào giá trị mặc định
console.log(foobar(null)); // null, Nếu chúng ta truyền vào giá trị tham số bằng null, giá trị của tham số mặc định sẽ ko được áp dụng

Destructuring là một cách tạo mới biến bằng cách trích xuất một vài giá trị từ dữ liệu được lưu trữ trong các đối tượng hoặc mảng. Ví dụ Object

const person = {
    firstName: "Sy",
    lastName: "Dinh",
    age: 21,
};

Không sử dụng Destructuring

const first_name = person.firstName;
const last_name = person.lastName;

Trường hợp sử dụng Destructuring

const { firstName: first_name, lastName: last_name } = person;
console.log(first_name); // Sy, một biến mới được tạo và bằng với person.firstName
console.log(last_name); // Dinh, last_name = person.lastName
console.log(firstName); // Undefined, firstName chưa được định nghĩa

Destructuring thường được sử dụng để tái cấu trúc tham số là object trong hàm. Không sử dụng Destructuring

function getFullName(person) {
    const firstName = person.firstName;
    const lastName = person.lastName;
    return firstName + ' ' + lastName;
};
getFullName(person); 
// "Sy Dinh"

Sử dụng Destructuring. Chúng ta có một function ngắn gọn hơn

function getFullName({ firstName, lastName }) {
    return firstName + ' ' + lastName;
};
getFullName(person); 
// "Sy Dinh"

Destructuring kết hợp với hàm mũi tên

const getFullName = ({ firstName, lastName }) => firstName + ' ' + lastName;
getFullName(person); 
// "Sy Dinh"

Destructuring với Array cũng khá tương tự. Các bạn tự tìm hiểu thêm nhé.

• Array.prototype.map() nhận vào một mảng và trả về một mảng mới với các phần tử đã được chuyển đổi.
• Array.prototype.filter() nhận vào một mảng và trả về một mảng mới với các phần tử thỏa mãn điều kiện bên trong hàm.

Ví dụ

const initArray = [0, 1, 2, 3, 4, 5];
const mapArray = initArray.map(n => n * 2); // [0, 2, 4, 6, 8, 10]
const filterArray = initArray.filter(n => n % 2 === 0); // [0, 2, 4]

Ví dụ

const name = "Sy";
`My name is ${name}, I'm ${20 + 1} years old!`;
// "My name is Sy, I'm 21 years old!"

ES2015 giới thiệu rất nhiều khái niệm khác nữa, mình có thể kể đến như:

• Spread operator "..." (Toán tử dấu 3 chấm)
• Imports / Exports
• Class
• ...

Phần vì chưa thật sự hiểu sâu nên trong phạm vi bài viết này mình chỉ có thể chia sẻ đến đây thôi. Hi vọng, phần nào giúp ích được các bạn. Chúc các bạn học tốt!

Tài liệu chính thức có tại: http://es6-features.org

Thân ái,

Sy Dinh