Hi 🤓 Cảm ơn bạn đã ghé thăm blog này, nếu những bài viết trên blog giúp ích cho bạn. Bạn có thể giúp blog hiển thị quảng cáo bằng cách tạm ngừng ad blocker 😫 và để giúp blog duy trì hoạt động nếu bạn muốn.
Cảm ơn bạn!

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

Trong bài viết này, mình xin giới thiệu tóm tắt ngắn gọn về các tính năng thường được sử dụng của ES6 nhé.

JavaScript let

JavaScript let được sử dụng để khai báo các biến. Như các bạn đã biết thì trước đây, các biến được khai báo bằng từ khóa var.

Các biến được khai báo bằng let có phạm vi là block-scoped hay phạm vi khối. Điều này có nghĩa là chúng chỉ có thể truy xuất được trong một khối.

Ví dụ:

{
    let website = 'homiedev';

    console.log(website); // homiedev
}
console.log(website); // website is not defined

Như các bạn thấy ở trên, chúng ta đã tạo một biến website trong phạm vi khối {}. Ở ngoài phạm vi khối, khi truy xuất biến thì kết quả là lỗi website is not defined như ở trên, tức là chúng ta khai báo biến ở khối nào thì ở trong khối đó ta mới có thể sử dụng được 😀.

JavaScript const

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

Ví dụ:

// hằng số name sau khi khởi tạo sẽ không thể thay đổi
const name = 'Minh';

Sau khi khai báo, chúng ta sẽ không thể thay đổi giá trị của biến sử dụng const.

JavaScript Arrow Function

Trong bản ES6, chúng ta có thêm một cách khai báo hàm khá hay, hàm này gọi là arrow function.

Ví dụ:

Giả sử chúng ta có một hàm như sau:

// function expression
let sayHi = function() {
   return 'Hi 😁';
}

Chúng ta có thể viết lại bằng cách sử dụng arrow function:

let sayHi = () => 'Hi 😁';

Mình sẽ giới thiệu chi tiết về arrow function trong bài viết tiếp theo nhé!

JavaScript Class

JavaScript class được sử dụng khi chúng ta muốn tạo một đối tượng. Class tương tự như một hàm khởi tạo - constructor function.

Ví dụ:

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

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

Bây giờ chúng ta thử tạo một đối tượng.

Ví dụ:

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

const person1 = new Person('Trang');

console.log(person1.name); // Trang

Chúng ta sẽ tìm hiểu về class trong JavaScript ở bài viết sau nhé.

JavaScript Default Parameter

Trong bản ES6, chúng ta có thể đặt các giá trị mặc định trong các tham số hàm.

Ví dụ:

function displayName(name = 'homiedev.com') {
    console.log('Xin chào! đây là '+ name);
}

displayName('đâu'); // Xin chào! đây là đâu
displayName(); // Xin chào! đây là homiedev.com

Trong ví dụ trên, nếu chúng ta không truyền giá trị tham số cho name thì giá trị mặc định sẽ được sử dụng.

JavaScript Template Literals

Template Literals là cách chúng ta làm cho việc thêm biến vào trong chuỗi dễ dàng hơn.

Ví dụ, trước đây chúng ta sẽ phải sử dụng + như này:

const name = "Hoài";
const age = "22";

console.log('Xin chào, mình là ' + name + ', ' + age + ' tuổi');

Giờ đây việc sử dụng biến kết hợp chuỗi sẽ trở nên dễ dàng hơn khi sử dụng Template Literals:

const name = "Hoài";
const age = "22";

console.log(`Xin chào, mình là ${name}, ${age} tuổi`);

Chúng ta sẽ cùng tìm hiểu chi tiết hơn trong bài viết tiếp theo nhé!

JavaScript Destructuring

Cú pháp destructuring giúp cho việc gán giá trị cho một biến mới dễ dàng và nhanh chóng hơn.

Ví dụ:

Đây là cách thông thường khi ta muốn lấy giá trị trong object và gán vào một biến.

const person = {
    name: 'Hà',
    age: 22,
}

let name = person.name;
let age = person.age;

console.log(name); // Hà
console.log(age); // 22

Như bạn thấy việc lấy giá trị và gán giá trị có thể tốn thời gian và có thể xảy ra việc khai báo tên biến giống với key trong object. Chúng ta có thể làm đoạn code trên ngắn gọn lại bằng cách sử dụng destructuring trong ES6.

const person = {
    name: 'Hà',
    age: 22,
}

// lấy giá trị và gán vào biến cùng lúc
let { name, age } = person;

console.log(name); // Hà
console.log(age); // 22

Để tìm hiểu kĩ hơn về destructuring trong JavaScript các bạn có thể đọc bài viết: Tìm hiểu về destructuring JavaScript.

import và export

Để tổ chức code một cách gọn gàng, hoặc khi muốn reuse lại các hàm thì chúng ta có thể xuất - export một hàm, đối tượng và sử dụng nó trong một file khác bằng cách import nó.

Ví dụ: nếu bạn có hai file JavaScript có tên function.jsmain.js.

Trong file main.js, bạn có thể import hàm trong file function.js:

// function.js
// export function để sử dụng ở nơi khác
export default function sayNo() {
    console.log('No 🤪');
}

// main.js
import sayNo from './function.js';

sayNo(); // 'No 🤪'

Để tìm hiểu về importexport trong JavaScript các bạn có thể xem tại bài viết này: Tìm hiểu Modules trong JavaScript.

JavaScript Promise

Promise trong JavaScript được sử dụng để xử lý các tác vụ bất đồng bộ - asynchronous.

Ví dụ:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("homiedev.com");
  }, 300);
});

// xử lý bất đồng bộ
myPromise
  .then((value) => `Đây là blog ${value}`)
  .then((value) => {
    // value ở đây sẽ lấy từ lần return ở "then" phía trên
    // nếu xảy ra lỗi sẽ xuống catch
    console.log(value);
  })
  .catch((err) => {
    // xử lý lỗi ở đây
    console.error(err);
  });

Chúng ta sẽ tìm hiểu về Promise trong JavaScript ở bài viết theo nhé.

Rest Parameter và Spread Operator trong JavaScript

Bạn có thể sử dụng Rest Parameter để đại diện cho số lượng đối số mà không cần xác định rõ dưới dạng một mảng.

Ví dụ:

function displayNumbers(a, b, ...args) {
  console.log(a); // 1
  console.log(b); // 2
  console.log(args); // [3, 4, 5]
}

displayNumbers(1, 2, 3, 4, 5);

Để lấy phần còn lại của tham số được như trên thì các bạn sử cú pháp ...tên muốn đặt cho mảng.

Bạn sử dụng spread syntax ... để sao chép các mục vào một mảng.

Ví dụ:

let arr1 = ['a', 'b'];
let arr2 = [...arr1, 'c', 'd'];
console.log(arr2); // [a, b, c, d]

Như vậy là chúng ta đã tìm hiểu về một số tính năng hay được sử dụng trong ES6 JavaScript. Hi vọng bài viết giúp ích cho các bạn.

Chúng ta có thể cùng nhau thảo luận về chủ đề này dưới phần comment nhé ^^.

Có thể bạn thích ⚡
homiedev
About Me

Hi, I'm @devnav. Một người thích chia sẻ kiến thức, đặc biệt là về Frontend 🚀. Trang web này được tạo ra nhằm giúp các bạn học Frontend hiệu quả hơn 🎉😄.

Chúc các bạn tìm được kiến thức hữu ích trong blog này 😁😁.