Sự khác biệt giữa các từ khóa var, let và const trong JavaScript

Học viên: Phạm Thanh Huấn
Lớp: Web Frontend - React Js 29
Emai: HuanPT99@gmail.com
Link tham khảo: https://www.geeksforgeeks.org/difference-between-var-let-and-const-keywords-in-javascript

Sự khác biệt giữa các từ khóa var, let và const trong JavaScript

Trong JavaScript, người dùng có thể khai báo một biến bằng cách sử dụng 3 từ khóa là var, let và const. Trong bài viết này, chúng ta sẽ thấy sự khác biệt giữa các từ khóa var, let và const. Chúng ta sẽ thảo luận về phạm vi và các khái niệm bắt buộc khác về từng từ khóa.

JavaScript var keyword: var là từ khóa lâu đời nhất để khai báo một biến trong JavaScript.

Phạm vi: Phạm vi toàn cầu hoặc phạm vi chức năng. Phạm vi của từ khóa var là phạm vi toàn cục hoặc hàm. Nó có nghĩa là các biến được xác định bên ngoài hàm có thể được truy cập trên toàn cầu và các biến được xác định bên trong một hàm cụ thể có thể được truy cập trong hàm.

Ví dụ 1: Biến ‘a’ được khai báo trên toàn cầu. Vì vậy, phạm vi của biến ‘a’ là toàn cục và nó có thể truy cập ở mọi nơi trong chương trình. Output được hiển thị nằm trong bảng điều khiển.

var a = 10
function f() {
    console.log(a)
}
f();
console.log(a);

Output:

10
10

Ví dụ 2: Biến ‘a’ được khai báo bên trong hàm. Nếu người dùng cố gắng truy cập nó bên ngoài chức năng, nó sẽ hiển thị lỗi. Người dùng có thể khai báo 2 biến có cùng tên bằng cách sử dụng var keyword. Ngoài ra, người dùng có thể gán lại giá trị vào biến var. Đầu ra được hiển thị trong bảng điều khiển.

function f() {
 
    // It can be accessible any
    // where within this function
    var a = 10;
    console.log(a)
}
f();
 
// A cannot be accessible
// outside of function
console.log(a);

Output:

10
ReferenceError: a is not defined

Ví dụ 3: Người dùng có thể khai báo lại biến bằng var và người dùng có thể cập nhật biến var. Đầu ra được hiển thị trong bảng điều khiển.

var a = 10
 
// User can re-declare
// variable using var
var a = 8
 
// User can update var variable
a = 7

Output:

7

Ví dụ 4: Nếu người dùng sử dụng biến var trước khi khai báo, nó sẽ khởi tạo với giá trị undefined. Output được hiển thị trong bảng điều khiển.

console.log(a);
var a = 10;

Output:

undefined

JavaScript let keyword: Từ khóa let là phiên bản cải tiến của từ khóa var.

Phạm vi: block scoped: Phạm vi của biến let chỉ là phạm vi khối. Nó không thể truy cập được bên ngoài khối cụ thể ({block}). Hãy xem ví dụ dưới đây.

Ví dụ 1: Output được hiển thị trong bảng điều khiển.

let a = 10;
function f() {
    let b = 9
    console.log(b);
    console.log(a);
}
f();

Output:

9
10

Ví dụ 2: Mã trả về lỗi vì chúng ta đang truy cập biến let bên ngoài khối hàm. Output được hiển thị trong bảng điều khiển.

let a = 10;
function f() {
    if (true) {
        let b = 9
 
        // It prints 9
        console.log(b);
    }
 
    // It gives error as it
    // defined in if block
    console.log(b);
}
f()
 
// It prints 10
console.log(a)

Output:

9
ReferenceError: b is not defined

Ví dụ 3: Người dùng không thể khai báo lại biến được xác định bằng từ khóa let nhưng có thể cập nhật nó.

let a = 10
 
// It is not allowed
let a = 10
 
// It is allowed
a = 10

Output:

Uncaught SyntaxError: Identifier 'a' has already been declared

Ví dụ 4: Người dùng có thể khai báo biến có cùng tên trong các khối khác nhau bằng cách sử dụng từ khóa let.

let a = 10
if (true) {
    let a = 9
    console.log(a) // It prints 9
}
console.log(a) // It prints 10

Output:

9 
10

Ví dụ 5: Nếu người dùng sử dụng biến let trước khi khai báo, nó sẽ không khởi tạo với undefined giống như biến var và trả về lỗi.

console.log(a);
let a = 10;

Output:

Uncaught ReferenceError: Cannot access 'a' before initialization

Từ khóa const trong JavaScript: Từ khóa const có tất cả các thuộc tính giống với từ khóa let, ngoại trừ người dùng không thể cập nhật nó.

Phạm vi: block scoped: Khi người dùng khai báo một biến const, họ cần khởi tạo nó, nếu không, nó sẽ trả về lỗi. Người dùng không thể cập nhật biến const một khi nó được khai báo.

Ví dụ 1: Chúng ta đang thay đổi giá trị của biến const để nó trả về lỗi. Đầu ra được hiển thị trong bảng điều khiển.

const a = 10;
function f() {
    a = 9
    console.log(a)
}
f();

Output:

TypeError:Assignment to constant variable.

Ví dụ 2: Người dùng không thể thay đổi các thuộc tính của const object, nhưng họ có thể thay đổi giá trị của các thuộc tính của const object.

const a = {
    prop1: 10,
    prop2: 9
}
 
// It is allowed
a.prop1 = 3
 
// It is not allowed
a = {
    b: 10,
    prop2: 9
}

Output:

Uncaught SyntaxError:Unexpected identifier

Sự khác biệt giữa var, let, và const:

Lưu ý: Đôi khi, người dùng gặp sự cố khi làm việc với biến var khi họ thay đổi giá trị của nó trong một khối cụ thể. Vì vậy, người dùng nên sử dụng từ khóalet và const để khai báo một biến trong JavaScript.

Cảm ơn mọi người đã dành thời gian đọc bài dịch của mình!