Hướng dẫn khai báo hằng số trong ES6

Giới thiệu nội dung bài viết

Chào các bạn, hôm nay anh sẽ hướng dẫn mọi người về sử dụng hằng số (const) trong ES6 . Với một người từng học hay sử dụng qua một ngôn ngữ lập trình nào đó rồi thì có thể các bạn đã từng bắt gặp khái niệm hằng số (constant). Như bạn có thể biết thì hằng số không thể thay đổi được. Nó chỉ có thể khai báo được. Vậy cụ thể hằng số được khai báo như thế nào trong ES6 thì ngay trong những phần chia sẻ dưới đây, anh sẽ hướng dẫn từng bước chi tiết thông qua các ví dụ minh hoạ để bạn hiểu được.

Ngoài ra, trong những phần còn lại của bài viết, anh sẽ lần lượt hướng dẫn cách dùng Object, Array cũng như vòng lặp trong ES6.

Ở cuối bài anh có chèn một video hướng dẫn demo chi tiết để các bạn xem lại. Việc kết hợp đọc bài viết cùng với xem các thao tác hướng dẫn trong video sẽ hỗ trợ giúp bạn ghi nhớ kiến thức nhanh và sâu hơn.

1. Cách khai báo hằng số trong ES6

Trong ES6 chúng ta sử dụng từ khoá const để khai báo một hằng số. Hằng số là một giá trị không bao giờ thay đổi. Anh lấy ví dụ như số PI là 3.14 đó là một số bất biến.

Cú pháp khai báo hằng số như sau.

1
const CONSTANT_NAME = value;

Tên biến của hằng số phải là các ký tự viết Hoa. Ví dụ

Ví dụ chúng ta khai báo hằng số RATE = 0.1 như sau

1
const RATE = 0.1;

Sự khác nhau giữa let và const là khi sử dụng const chúng ta không thể reassign (thay đổi giá trị của biến) như let thì chúng ta có thể làm được. Anh lấy ví dụ về let và const như sau.

1
2
3
4
let a = 10;
a = 20;
a = a + 5;
console.log(a); // 25

Khi sử dụng let các em thấy chúng ta có thể thay đổi giá trị của biến a từ 10 sang 20 và 25.

1
2
const RATE = 0.1;
RATE = 0.2 // TypeError

Khi sử dụng biến const nếu ta thay đổi giá trị từ 0.1 sang 0.2 ta sẽ gặp lỗi Type Error

Khi khai báo hằng chúng ta bắt buộc phải có giá trị cho hằng số. Nếu chúng ta khai bao như sau sẽ báo lỗi

1
const RED; // SyntaxError

2. Object trong ES6

Trong ES6, Chúng ta sử dụng const để đảm bảo các biến chỉ được phép đọc và không được thay đổi giá trị. Tuy nhiên đối với các thuộc tính của một đối tượng ta có thể thay đổi được.

1
2
3
const person = { age: 20 };
person.age = 30; // OK
console.log(person.age); // 30

Như các em thấy ta khai báo đối tượng person là const với mục đích là đối tượng person là không thể thay đổi. Tuy nhiên chúng ta có thể thay đổi thuộc tính bên trong đối tượng person. Trong ví dụ trên chúng ta có thể thay đổi thuộc tính age bên trong đối tượng person.

Khi khai báo const person thì chúng ta mặc định đối tượng person là không thay đổi. Chính vì vậy nếu ta thay đổi đối tượng person như đoạn mã sau đây thì sẽ bị lỗi.

1
person = {age: 40}; // TypeError

Vì chúng ta không thể gắn person cho một giá trị khác.

3. Array trong ES6

Ví dụ anh có một mảng màu sắc chứa các màu sau như sau

1
2
3
4
5
6
7
8
9
const colors = ['red'];
colors.push('green');
console.log(colors); // ["red", "green"]

colors.pop();
colors.pop();
console.log(colors); // []

colors = []; // TypeError

Anh khai báo mảng colors = [‘red’] là const có nghĩa là không được thay đổi mảng colors. Tiếp đến anh thêm màu xanh vào mảng (colors.push(‘green’)) lúc này mảng color của anh sẽ có 2 phần tử là đỏ và xanh Tiếp đến anh xoá 2 phần tử trong mảng bằng hàm pop như vậy mảng color của anh giờ là rỗng [] và lúc đó anh sẽ bị báo lỗi TypeError vì anh khai báo mảng colors là const không được phép thay đổi. Lúc đầu nó có 1 phần tử nhưng mình lại biến nó thành [] là sai.

4. Vòng lặp trong ES6

Trong ES6 chúng ta có cú pháp mới để chạy vòng lặp duyệt qua các mảng gọi là for of. Anh có ví dụ như sau:

1
2
3
4
let scores = [75, 80, 95];
for (let score of scores) {
    console.log(score);
}

Trong trường hợp chúng ta không có ý định modify (thay đổi) giá trị bên trong vòng lặp chúng ta có thể sử dụng từ khoá const trong vòng lặp như sau:

1
2
3
4
let scores = [75, 80, 95];
for (const score of scores) {
    console.log(score);
}

Mỗi lần vòng lặp chạy nó sẽ tạo ra một score mới. Ở ví dụ trên chúng ta sẽ nhận được là 75,80,95

Chú ý sẽ có những bạn khai báo const như sau sẽ bị lỗi trong vòng lặp

1
2
3
for (const i = 0; i < scores.length; i++) { // TypeError
    console.log(scores[i]);
}

Chúng ta sẽ nhận lỗi là Uncaught TypeError: Assignment to constant variable vì biến i đã thay đổi giá trị.

5. Demo Video

Play

Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm

Các khoá học lập trình MIỄN PHÍ tại đây

Comments