Đình Anh

01/03/2023

ES6 Series #1: Các Kiểu Khai Báo Biến Var, Let và Const

Một trong những tính năng nổi bật của ES6 đó là sự bổ sung let và const phục vụ cho việc khai báo biến dữ liệu.

Vậy tại sao lại cần tới let và const dù trước đó đã có var để khai báo biến, thì ở bài viết này chúng ta sẽ cùng tìm hiểu lý do của từng kiểu khai báo biến.

1. Function Scope vs Block Scope:

Function Scope

Các biến Function Scope sẽ có tác dụng trong phạm vi của một function mà nó được khai báo bên trong. Ngoài ra, nếu bạn khai báo không nằm trong một hàm nào thì sẽ trở thành biến toàn cục (global variable).

function hello() {
   console.log('hello')
}

Block Scope

Các biến Block Scope sẽ có tác dụng trong phạm vi của một block mà nó được khai báo bên trong và các block con trong đó. Một block là đoạn code bên trong cặp dấu ngoặc nhọn:

if(true) {
   console.log('Hello');
}

2. Var

Tất cả các biến được khai báo với var đều là function scope. Điều này đồng nghĩa, nếu ta khai báo trong một block scope thì biến đó vẫn có thể truy cập được ở bên ngoài.

Ví dụ:

if(true) {
    var name = 'UniTech Blog';
}
console.log(name);

Kết quả:

UniTech Blog

Ta thấy biến name được khai báo bên trong một block của hàm if, nhưng vì ta dùng var nên name là một biến function scope (ở đây là biến toàn cục) ==> Ta có thể truy cập nó từ bên ngoài.

3. Let

Tất cả các biến được khai báo với let đều là block scope, ta chỉ có thể truy cập vào biến khi ở cùng 1 block hoặc là các block con.

Ví dụ:

let name = 'UniTech Blog';
if(true) {
    let name = 'UniTym';
    console.log(name);
}
console.log(name);

Kết quả:

UniTym
UniTech Blog

Có thể thấy, đoạn code trên sẽ tạo ra 2 biến name ở 2 block scope khác nhau:

• name = 'UniTech Blog' sẽ có scope là Global.

• name = 'UniTym' sẽ có scope là block của lệnh if.

Và 2 hàm log cũng nằm trong 2 scope khác nhau ==> Kết quả in ra sẽ khác nhau (tùy thuộc vào scope của nó).

4. Const

Từ khóa này tương tự với let, chỉ khác là giá trị của biến sẽ không thể thay đổi. Ta không thể gán một giá trị mới cho biến được khai báo bằng const.

Ví dụ:

const name = 'UniTech Blog';
name = 'UniTym';

Khi chạy, đoạn code trên sẽ trả về một lỗi như sau:

Uncaught TypeError: Assignment to constant variable.

Tuy nhiên, nếu biến được khai báo bằng const là một object thì ta vẫn có thể thay đổi các thuộc tính trong object đó. Do đây không phải là gán một giá trị mới cho biến, mà chỉ là thay đổi bên trong biến.

Ví dụ:

const person = {
   name: 'Dinh Anh Nguyen',
   age: 19,
};
console.log(person.name);

person.name = 'D.A.N_3002';
console.log(person.name);

Kết quả:

Dinh Anh Nguyen
D.A.N_3002

Tổng kết:

Vậy khi nào thì bạn nên dùng var, let hoặc const. Điều này thì tùy vào mục đích của bạn, tuy nhiên mình có một số lời khuyên như sau:

• Không nên sử dụng var vì từ khóa này rất khó xác định scope cụ thể của biến.
• Sử dụng let khi biến đó cần phải thay đổi giá trị.
• Sử dụng const khi biến đó không cần thay đổi giá trị (Config DB, nhập liệu từ người dùng,... ).

Cảm ơn mọi người đã đọc hết bài viết của mình, hy vọng rằng bài viết đã giúp bạn có cái nhìn tổng quát hơn về việc khai báo biến cũng như là phạm vi của biến trong ES6. Mong mọi người sẽ ủng hộ series tìm hiểu về các phiên bản ES này của mình, cũng như là góp ý để bài viết được tốt hơn.