Phạm Vi Của Biến Var vs Let vs Const Trong ES6.

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:

Đây là hai khái niệm bạn cần nắm rõ để có thể phân biệt:

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ĩ, 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 = 'D.A.N_3002';
}

console.log(name);

Kết quả: 

D.A.N_3002

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 = 'Guest';

if(true) {
   let name = 'D.A.N_3002';
   console.log(name);
}

console.log(name);

Kết quả:

D.A.N_3002
Guest

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

const name = 'D.A.N_3002';
name = 'New name';

TypeError: Assignment to constant variable.

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

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

Dinh Anh Nguyen
D.A.N_3002

Nguồn: codelearn.io