Hằng số trong JavaScript - JavaScript Const

  • Như

    Tác giả

    Như

  • Ngày đăng

    25 thg 10, 2023

  • Số lượt xem

    970 lượt xem

Bài học này giúp bạn tìm hiểu cách sử dụng biến hằng trong JavaScript - JavaScript Const để tạo tính ổn định cho mã nguồn và bảo vệ dữ liệu khỏi sự thay đổi không mong muốn.

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

Các biến được xác định bằng const không thể được gán lại

Các biến được xác định bằng const có Phạm vi khối

Không thể gán lại

Biến const không thể được gán lại:

const PI = 3.141592653589793;
PI = 3.14;      // This will give an error
PI = PI + 10;   // This will also give an error

 

Phải được gán giá trị

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

const PI = 3.14159265359;

 

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

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

Sử dụng const khi bạn khai báo:

  • Một mảng mới

  • Một đối tượng mới

  • Một chức năng mới

  • RegExp mới

 

Đối tượng và mảng không đổi

Từ khóa const hơi gây hiểu nhầm.

Nó không xác định một giá trị không đổi. Nó định nghĩa một tham chiếu không đổi đến một giá trị.

Vì vậy bạn KHÔNG thể:

  • Gán lại một giá trị không đổi
  • Tái chỉ định một mảng không đổi
  • Tái chỉ định một đối tượng không đổi

Nhưng bạn CÓ THỂ:

  • Thay đổi các phần tử của mảng hằng
  • Thay đổi thuộc tính của đối tượng không đổi

Mảng không đổi - Constant Arrays

Bạn có thể thay đổi các phần tử của một mảng không đổi:

// You can create a constant array:
const cars = ["Saab", "Volvo", "BMW"];
cars[0] = "Toyota";  // You can change an element
cars.push("Audi");  // You can add an element

 

Nhưng bạn KHÔNG thể gán lại mảng:

const cars = ["Saab", "Volvo", "BMW"];
cars = ["Toyota", "Volvo", "Audi"];    // ERROR

 

Đối tượng không đổi - Constant Objects

Bạn có thể thay đổi các thuộc tính của một đối tượng không đổi:

// You can create a const object:
const car = {type:"Fiat", model:"500", color:"white"};
car.color = "red";  // You can change a property
car.owner = "Johnson";  // You can change a property

 

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

const car = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"};    // ERROR

 

Sự khác nhau giữa var, let, const

  Phạm vi Khai báo lại Gán lại Hoisted Binds this
var Không Có Có Có Có
let Có Không Có Không Không
const Có Không Không Không Không

Ưu điểm

let và const có phạm vi khối.

let và const không thể được khai báo lại.

let và const phải được khai báo trước khi sử dụng.

let và const không liên kết với this.

let và const không được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

Khuyết điểm

var không cần phải khai báo.

var được được di chuyển lên đầu phạm vi trước khi chúng được thực thi.

var liên kết với this.

Trình duyệt hỗ trợ

Từ khóa let và 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 đủ:

chrome edge firefox safari opera
Chrome 49 Edge 12 Firefox 36 Safari 11 Opera 36
Mar, 2016 Jul, 2015 Jan, 2015 Sep, 2017 Mar, 2016

 

Phạm vi khối - Block Scope

Khai báo một biến bằng const cũng tương tự như let khi nói đến phạm vi khối.

Trong ví dụ nà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;
// Here x is 10
{
const x = 2;
// Here x is 2
}
// Here x is 10

 

Bạn có thể tìm hiểu thêm về phạm vi khối trong bài JavaScript Scope.

Khai báo lại

Việc khai báo lại biến var JavaScript được phép ở bất kỳ đâu trong chương trình:

var x = 2;     // Allowed
var x = 3;     // Allowed
x = 4;         // Allowed

 

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

var x = 2;   // Allowed
const x = 2;   // Not allowed
{
let x = 2;   // Allowed
const x = 2;   // Not allowed
}
{
const x = 2;   // Allowed
const x = 2;   // Not allowed
}

 

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;     // Allowed
x = 2;           // Not allowed
var x = 2;       // Not allowed
let x = 2;       // Not allowed
const x = 2;     // Not allowed
{
 const x = 2;     // Allowed
 x = 2;           // Not allowed
 var x = 2;       // Not allowed
 let x = 2;       // Not allowed
 const x = 2;     // Not allowed
}

 

Được phép khai báo lại một biến có const, trong phạm vi khác hoặc trong khối khác:

const x = 2;       // Allowed
{
 const x = 3;   // Allowed
}
{
 const x = 4;   // Allowed
}

 

Hoisting

Các biến được xác định bằng var được đưa lên trên cùng và có thể được khởi tạo bất kỳ lúc nào.

Nghĩa là bạn có thể sử dụng biến trước khi nó được khai báo:

carName = "Volvo";
var carName;

 

Nếu bạn muốn tìm hiểu thêm về hoisting, hãy nghiên cứu bài JavaScript Hoisting.

Các biến được xác định bằng const cũng được đưa lên đầu nhưng không được khởi tạo.

Vì vậy sử dụng biến const trước khi khai báo sẽ dẫn đến ReferenceError:

Bài trước Bài kế tiếp

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về Javascript