Chúc mừng năm mới! Chúc cho mọi người một năm mới an khang, thịnh vượng và hạnh phúc. Mong rằng mọi điều tốt lành sẽ đến với bạn và gia đình. Chúc cho mọi dự định và ước mơ của bạn được thực hiện, và mọi nỗ lực của bạn đều được đền đáp. Hãy tận hưởng những niềm vui và hạnh phúc trong năm mới này nhé!

Mở đầu

ES là một thuật ngữ được viết tắt của ECMAScript. ECMAScript được tạo ra để chuẩn hóa JavaScript và ES6 là phiên bản thứ 6 của ECMAScript, nó được xuất bản vào năm 2015 và còn được gọi là ECMAScript 2015. Các phiên bản ES đã ra mắt bao gồm: ES6, ES7, ES8, ES9, ES10, ES11, ES12, ES13,...

Ở những phiên bản này đều sẽ có những cập nhật về các tính năng, và phiên bản có sự thay đổi nổi bật nhất là ES6. Sau đây mình sẽ liệt kê những sự thay đổi chính ở phiên bản này.

Nội dung

Arrow function

Có cú pháp ngắn gọn hơn so với định nghĩa function truyền thống.

Ví dụ:

// Function expression
const add = function(a, b) {
  return a + b;
};

// Arrow function
const add = (a, b) => a + b;

Classes

Bạn có thể sử dụng từ khóa class để khởi tạo một Class từ phiên bản này.

Ví dụ:

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

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

Enhanced Object Literals

Giúp cho việc khai báo một object ngắn gọn hơn, không bị lặp lại.

Ví dụ:

let name = 'Join'
let age = 18
let getName = () => name

// Cú pháp cũ để tạo một object

const student = {
    name: name,
    age: age,
    getName: getName
 }
 
// Cú pháp mới áp dụng Enhanced Object Literals
// Nhìn gọn gàng hơn phải không nào

const student = {
    name,
    age,
    getName,
 }
 
 //

Ngoài ra, bạn cũng có thể tạo key động cho object bằng cú pháp [ ]

Ví dụ:

let key = 'name'

let student = {
    [key + '1']: 'Than'
}

console.log(student) // { name1: Than }

Template Literals

Được sử dụng để nối chuỗi thông qua cú pháp ``

Ví dụ:

 let name = 'Than'
 
 let fullName = `Nguyen Le ${name}` //Nguyen Le Than

Destructuring

Destructuring cho phép chúng ta lấy giá trị của một mảng hoặc thuộc tính của object thành những biến riêng biệt.

Ví dụ:

let array = ["John", "Smith"]

let [firstName, surname] = array

console.log(firstName) // John
console.log(surname)  // Smith

let và const

Chắc hẳn bạn đã sử dụng let và const cho việc khai báo biến, tới thời điểm hiện tại let và const đang được thay thế var trong việc khai báo biến.

let x = 10;
const PI = 3.14;

Rest Parameters và Spread Operator

Rest parameters cho phép bạn truyền một số lượng tham số không xác định vào hàm. Ví dụ:

// Hàm sum nhận vào một số lượng number không xác định.
const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0);

// Gọi hàm sum như sau
sum(1,2,10,11,12)

Spread Operator cho phép bạn mở rộng một array hoặc object một cách ngắn gọn, hoặc có thể hiểu Spread Operator dùng để rải các phần tử của một đối tượng này sang một đối tượng khác. Ví dụ:

const arr = [1, 2, 3];
// Sử dụng Spread để tạo ra newArr bao gồm các phần tử của arr và thêm hai phần tử 4, 5
const newArr = [...arr, 4, 5];
console.log(newArr); // [1, 2, 3, 4, 5]

Default Parameters

Bạn có thể thêm một giá trị mặc định cho tham số của hàm, và tham số này sẽ trở thành optional ( có thể truyền hoặc không truyền tham số )

// Hàm tính diện tích hình chữ nhật
function calculateRectangleArea(width = 5, height = 10) {
  return width * height;
}

// Gọi hàm mà không truyền tham số
const area1 = calculateRectangleArea(); // width = 5, height = 10
console.log(area1); // Kết quả: 50

// Gọi hàm và chỉ truyền một tham số
const area2 = calculateRectangleArea(8); // width = 8, height = 10
console.log(area2); // Kết quả: 80

// Gọi hàm và truyền cả hai tham số
const area3 = calculateRectangleArea(3, 6); // width = 3, height = 6
console.log(area3); // Kết quả: 18

Promises

Cùng với callback, promises là cơ chế mới để xử lý bất đồng bộ.

Ví dụ:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // Nếu thành công gọi resolve
    if (success) {
      resolve(data);
    } else {
        // Nếu thất bại gọi tới reject
      reject(error);
    }
  });
};

// Sử dụng hàm fetchData như thế nào?
fetchData()
.then((data) => console.log(data) // Data nhận được từ resolve ở trên)
.catch((error) => console.log(error) // Error nhận được từ reject ở trên)

Tổng kết

Bài viết này mình đã liệt kê một số sự thay đổi nổi bật nhất ở phiên bản ES6, và vẫn còn nhiều tính năng khác được thêm vào phiên bản này. Nếu các bạn thấy hay thì hãy upvote cho mình nhé!!