Let trong JavaScript

Như mình đã có đề cập ở đâu đó trong các bài viết trước đây. Từ khóa let được giới thiệu trong ES6 (2015). Các biến được khai báo let có phạm vi khối, phải được khai báo trước khi sử dụng và không thể được khai báo lại trong cùng một phạm vi. Nghe có vẻ thấy mệt mệt rồi đúng không. Không có gì đâu chúng ta sẽ cùng tìm hiêu nhé!

Phạm vi khối- Block Scope  là gì?

Trước ES6 (2015), JavaScript không có Block Scope mà chỉ có phạm vi toàn cục -  Global Scope và phạm vi hàm - Function Scope. Cũng vì thế mà từ ES6 đã xuất hiện 2 từ khóa JavaScript là let và const. Hai từ khóa này đã cung cấp phạm vi khối- Block Scope  trong JavaScript:

Ví dụ:

Các biến được khai báo bên trong khối { } không thể được truy cập từ bên ngoài khối:

{
  let x = 2;
}
// x không được sử dụng ở phạm vi này do khai báo bằng let

Phạm vi toàn cục -  Global Scope là gì?

Các biến được khai báo var luôn có phạm vi toàn cục và KHÔNG được có phạm vi khối:

Ví dụ:

Các biến được khai báo var bên trong khối { } có thể được truy cập từ bên ngoài khối:

{
  var x = 2;
}
// x có thể được sử dụng ở phạm vi này do khai báo bằng var

Không thể được khai báo lại

Các biến được xác định bằng let không thể khai báo lại. Bạn không thể vô tình khai báo lại một biến được khai báo bằng let.

Với let bạn không thể làm điều này:

let x = "Minacode";

let x = 0;

Khi các bạn code như ở trên thì trình soạn thảo sẽ báo lỗi code ngay.

Các biến được xác định bằng var có thể được khai báo lại.

Với var bạn hoàn toàn có thể làm điều này:

var x = "Minacode";

var x = 0;

Khai báo lại các biến

Việc khai báo lại một biến JavaScript bằng var được phép ở bất kỳ đâu. Tuy nhiên việc khai báo lại một biến bằng var  có thể gây ra vấn đề.

Ví dụ:

var x = 10;
// x ở đây là 10

{
var x = 2;
// x ở đây là 2
}

// x ở đây đã là 2

Khai báo lại một biến bên trong một khối cũng sẽ khai báo lại biến bên ngoài khối đó:

Với let, KHÔNG được phép khai báo lại một biến trong cùng một khối tuy nhiên việc khai báo lại một biến bằng let có thể giải quyết được vấn đề này.

let x = 10;
// x ở đây là 10

{
let x = 2;
// x ở đây là 2
}

// x ở đây vẫn là 10

Các bạn có thể thấy việc Khai báo lại một biến bên trong một khối sẽ không khai báo lại biến bên ngoài khối

Hỗ trợ trình duyệt với Let

Từ khóa let không được hỗ trợ trong Internet Explorer 11 trở về trước. Bảng sau xác định các phiên bản trình duyệt đầu tiên được hỗ trợ đầy đủ:

Const trong JavaScript

Cũng giống như Let, Từ khóa const được giới thiệu trong ES6 (2015). Các biến được xác định bằng const không thể được khai báo lại, gán lại và có Phạm vi khối.

Một biến const không thể được gán lại. Ví dụ:

const PI = 3.141592653589793;
PI = 3.14;      // Lỗi
PI = PI + 10;   // Lỗi

Phải được chỉ định-Assigned

Các biến JavaScript const phải được gán một giá trị khi chúng được khai báo:

Sử dụng:

const PI = 3.14159265359;

Thay vì:

const PI;
PI = 3.14159265359;

Khi nào nên sử dụng const trong JavaScript?

Luôn khai báo một biến const khi bạn biết rằng không nên thay đổi giá trị. Hoặc khi bạn đang khai báo:

• + Một mảng mới
• + Một đối tượng mới
• + Một hàm mới
• + Biểu thức chính quy mới

Bạn có thể thay đổi các phần tử của một mảng được khai báo bằng const. Ví dụ:

// Bạn tạo một mảng cars với const:
const cars = ["Saab", "Volvo", "BMW"];

// Bạn có thể thay đổi phần tử trong mảng:
cars[0] = "Toyota";

// Bạn có thể thêm phần tử vào mảng:
cars.push("Audi");

Nhưng bạn KHÔNG thể gán lại mảng. Ví dụ:

const cars = ["Saab", "Volvo", "BMW"];

cars = ["Toyota", "Volvo", "Audi"];    // Lỗi do bạn đã gán lại mảng

Tương tự bạn có thể thay đổi các thuộc tính của một đối tượng được khai báo bằng const. Ví dụ:

// Bạn tạo một đối tượng vói const:
const car = {type:"Fiat", model:"500", color:"white"};

// Bạn có thể thay đổi thuộc tính :
car.color = "red";

// Bạn có thể thêm thuộc tính:
car.owner = "Johnson";

Nhưng bạn KHÔNG thể gán lại đối tượng. Ví dụ:

const car = {type:"Fiat", model:"500", color:"white"};

car = {type:"Volvo", model:"EX60", color:"red"};    // Lỗi do bạn đã gán lại đối tượng

Hỗ trợ trình duyệt với Const 

Giống như Let, const không được hỗ trợ trong Internet Explorer 11 trở về trước. Bảng sau xác định các phiên bản trình duyệt đầu tiên được hỗ trợ đầy đủ:

Phạm vi khối-Block Scope .

Việc khai báo một biến với const cũng tương tự như let khi nói đến Block Scope .

Trong ví dụ dưới đây, x được khai báo trong khối không giống với x được khai báo bên ngoài khối:

const x = 10;
// x ở đây là 10

{
const x = 2;
// x ở đây là 2
}

// x ở đây vẫn là 10

Khai báo lại

Không được phép khai báo lại một biến đã được khai báo bởi var hoặc let thành const, trong cùng phạm vi:

var x = 2;     // ok
const x = 2;   // no ok

{
let x = 2;     // ok
const x = 2;   // no ok
}

{
const x = 2;   // ok
const x = 2;   // no ok
}

Không được phép gán lại một biến const hiện có, trong cùng phạm vi:

const x = 2;     // ok
x = 2;           // no ok
var x = 2;       // no ok
let x = 2;       // no ok
const x = 2;     // no ok
{
  const x = 2;   // Allowed
  x = 2;         // no ok
  var x = 2;     // no ok
  let x = 2;     // no ok
  const x = 2;   // no ok
}

Tuy nhiên chúng ta được phép khai báo lại một biến với const, trong phạm vi khác hoặc trong khối khác:

const x = 2;       // ok

{
  const x = 3;   // ok
}

{
  const x = 4;   // ok
}

Đến khúc này mình tổng kết một chút vài ý cô đọng về var, let và const nhé!

1. 1, var có global scope trong khi let và const có block scope.
2. 2, Các biến var có thể update và khai báo lại trong scope của nó; let có thể update nhưng không khai báo lại được; Các biến const không thể update cũng như không thể khai báo lại.
3. 3, var và let có thể khai báo mà không cần khởi tạo, const phải được khởi tạo trong quá trình khai báo.

>>Còn tiếp nhé>>