Tổng quan về JavaScript ES6

Tổng quan về JavaScript ES6

Anh NguyễnLeave a comment

Giới thiệu

Nếu bạn chưa quen với việc lập trình JavaScript và thấy các thuật ngữ ECMA, ES6 và ES2015 được nhắc đến rồi tự hỏi “Chúng là cái quái gì nhỉ?”.

Thậm chí có thể đã nghi ngờ đây là một lỗi đánh máy bởi vì, bạn đang học JavaScript chứ không phải ES.

Rất tiếc, đây không phải là một lỗi đánh máy – đây là tên gọi của các phiên bản JavaScript.

Tìm hiểu nhanh ES6 qua Tips và Best practice

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. Nó thực sự khá thú vị nếu bạn muốn đọc thêm về nó.

Bài viết này cung cấp cho bạn một bản tóm tắt ngắn gọn về các tính năng thường được sử dụng của ES6 để bạn có thể bắt đầu nhanh chóng trong ES6.

1. 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. Điều này có nghĩa là chúng chỉ có thể truy cập được trong một khối cụ thể. Ví dụ,

// variable declared using let
let name = 'Sara';
{
    // can be accessed only inside
    let name = 'Peter';

    console.log(name); // Peter
}
console.log(name); // Sara 
Code language: JavaScript (javascript)

2. 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 = 'Sara';
Code language: JavaScript (javascript)

Sau khi khai báo, bạn không thể thay đổi giá trị của biến const.

Để tìm hiểu thêm về sự khác biệt giữa var, let và const, hãy truy cập Phân biệt var, let và const trong JavaScript.

3. Arrow Function

Trong phiên bản ES6, bạn 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ụ:

// function expression
let x = function(x, y) {
   return x * y;
}
Code language: JavaScript (javascript)

Viết bằng Arrow Function:

// function expression using arrow function
let x = (x, y) => x * y;
Code language: JavaScript (javascript)

Để tìm hiểu thêm về Arrow Function, hãy truy cập Arrow Function là gì?

4. Classes

Class (lớp) trong JavaScript được sử dụng để tạo một đối tượng. Lớp tương tự như một hàm khởi tạo. Ví dụ:

class Person {
  constructor(name) {
    this.name = name;
  }
}
Code language: JavaScript (javascript)

Từ khóa class được sử dụng để tạo một lớp. Các thuộc tính được gán trong một hàm khởi tạo (constructor).

Bây giờ bạn có thể tạo một đối tượng như sau:

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

let person1 = new Person('John');

console.log(person1.name); // John
Code language: JavaScript (javascript)

Để tìm hiểu thêm về Class, hãy truy cập Class trong JavaScript.

5. Default Parameters

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. Ví dụ,

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
Code language: JavaScript (javascript)

Trong ví dụ trên, nếu bạn không truyền tham số cho y, nó sẽ lấy giá trị 5 theo mặc định.
Để tìm hiểu thêm, hãy truy cập Default Parameters trong JavaScript.

6. Template Literals

Template Literals 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 cộng String.

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

console.log('Hello ' + first_name + ' ' + last_name);
Code language: JavaScript (javascript)

Thay vì như cách trên, bạn có thể sử dụng:

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

console.log(`Hello ${first_name} ${last_name}`);
Code language: JavaScript (javascript)

Để tìm hiểu thêm, hãy truy cập Template Literals trong JavaScript.

7. Destructuring

Destructuring là một cú pháp cho phép bạn gán các thuộc tính của một Object hoặc một Array. Điều này có thể làm giảm đáng kể các dòng mã cần thiết để thao tác dữ liệu trong các cấu trúc này.

// 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
Code language: JavaScript (javascript)

Sử dụng cú pháp Destructuring trong ES6, đoạn mã trên có thể được viết như sau:

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
Code language: JavaScript (javascript)

Để tìm hiểu thêm, hãy truy cập Destructuring trong JavaScript.

8. Import và Export

Bạn có thể export một hàm hoặc một chương trình và sử dụng nó trong một chương trình khác bằng cách import nó. Điều này giúp tạo ra các thành phần có thể tái sử dụng. Ví dụ: nếu bạn có hai tệp JavaScript có tên contact.js và home.js.

Trong tệp contact.js, bạn có thể export hàm contact():

// export
export default function contact(name, age) {
    console.log(`The name is ${name}. And age is ${age}.`);
}
Code language: JavaScript (javascript)

Sau đó, khi bạn muốn sử dụng hàm contact() trong một tệp khác, bạn chỉ cần import hàm. Ví dụ trong tệp home.js:

import contact from './contact.js';

contact('Sara', 25);
// The name is Sara. And age is 25
Code language: JavaScript (javascript)

Để tìm hiểu thêm, truy cập Import và Export trong JavaScript.

9. Promises

Promises thường được sử dụng để xử lý bất đồng bộ. 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
    },
 )
Code language: JavaScript (javascript)

Để tìm hiểu thêm về Promises, hãy truy cập Nguyên tắc đồng bộ và bất đồng bộ trong JavaScript.

10. Rest Parameter và Spread Operator

Bạn có thể sử dụng 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ụ:

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')
Code language: JavaScript (javascript)

Bạn có thể truyền các đối số còn lại bằng cú pháp ... với tham số là args.

Bạn sử dụng Spread Operator ... để sao chép các phần tử vào một mảng duy nhất. Ví dụ:

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

Cả 2 Rest Parameter và Spread Operator đều sử dụng cùng một cú pháp. Tuy nhiên, Spread Operator được sử dụng với mảng (giá trị có thể lặp lại).

Để tìm hiểu thêm về Rest Parameter và Spread Operator, hãy truy cập Rest Parameter trong JavaScript và Spread Operator trong JavaScript.

Tương lai của ES6?

Reflect trong ES6

Rất may, trong những năm kể từ khi phiên bản ES2016 phát hành, cộng đồng dường như đã phần nào ổn định.

Mặc dù bạn vẫn sẽ thấy các tài liệu tham khảo về ES8, ES9 và ES10, nhưng việc gọi chúng là ES2017, ES2018 và ES2019 dường như đã trở thành thông lệ phổ biến hơn.

Vì vậy, hãy chào mừng đến một tương lai ít khó hiểu hơn với ES. 

Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.

Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.

Bình luận