Tìm hiểu chi tiết về var, const, let trong JavaScript: Sự khác biệt và cách sử dụng

Tổng quan về cách khai báo biến trong JavaScript

Trong JavaScript, việc khai báo biến là một trong những hoạt động cơ bản nhất mà mọi lập trình viên cần thực hiện. Tuy nhiên, JavaScript cung cấp ba cách khác nhau để khai báo biến: var, let, và const. Mỗi cách khai báo có những đặc điểm, phạm vi, và hành vi khác nhau. Hiểu rõ về sự khác biệt giữa chúng không chỉ giúp bạn viết code sạch hơn mà còn tránh được nhiều lỗi tiềm ẩn.

Trước khi ECMAScript 2015 (ES6) ra đời, var là cách duy nhất để khai báo biến trong JavaScript. Với ES6, hai từ khóa mới là let và const được giới thiệu, mang đến những cách mới để xử lý biến, giúp code trở nên chặt chẽ và dễ đoán hơn. Bài viết này sẽ đi sâu vào phân tích cả ba cách khai báo, giúp bạn hiểu rõ khi nào nên sử dụng mỗi loại.

var - Cách khai báo biến truyền thống

var là cách khai báo biến đầu tiên và đã tồn tại từ khi JavaScript ra đời. Tuy nhiên, nó có một số đặc điểm mà đôi khi có thể gây ra các lỗi khó lường trong ứng dụng lớn.

Cú pháp và cách sử dụng var

var message = "Xin chào";
var count = a5;
var isActive = true;

// Khai báo nhiều biến
var x = 10, y = 20, z = 30;

// Khai báo mà không gán giá trị
var result; // giá trị là undefined

Đặc điểm của var

1. Function scope

Biến được khai báo bằng var có phạm vi (scope) là function chứa nó, hoặc global scope nếu được khai báo ngoài function.

function demoVarScope() {
    var message = "Bên trong function";
    console.log(message); // "Bên trong function"
}

demoVarScope();
// console.log(message); // Lỗi: message is not defined

// Ví dụ về global scope
var globalVar = "Tôi là biến toàn cục";
function accessGlobal() {
    console.log(globalVar); // "Tôi là biến toàn cục"
}

2. Hoisting

var có đặc tính hoisting - nghĩa là khai báo biến được "đưa lên" đầu phạm vi của nó, nhưng không phải giá trị.

console.log(hoistedVar); // undefined (không lỗi)
var hoistedVar = "Tôi đã được hoisted";
console.log(hoistedVar); // "Tôi đã được hoisted"

// Tương đương với:
var hoistedVar;          // Khai báo được hoisted
console.log(hoistedVar); // undefined
hoistedVar = "Tôi đã được hoisted"; // Gán giá trị
console.log(hoistedVar); // "Tôi đã được hoisted"

3. Có thể khai báo lại

Biến var có thể được khai báo lại mà không gây lỗi:

var user = "Nam";
console.log(user); // "Nam"

var user = "Hoa"; // Không có lỗi khi khai báo lại
console.log(user); // "Hoa"

4. Không có block scope

var không có phạm vi khối (block scope), nghĩa là nó có thể được truy cập từ bên ngoài các khối lệnh như if, for, while:

if (true) {
    var blockVar = "Tôi nằm trong block";
}
console.log(blockVar); // "Tôi nằm trong block" - truy cập được từ bên ngoài block

for (var i = 0; i < 3; i++) {
    // Xử lý gì đó
}
console.log(i); // 3 - biến i vẫn tồn tại và có thể truy cập sau vòng lặp

Những vấn đề với var

Đặc tính không có block scope và có thể khai báo lại của var có thể dẫn đến những lỗi khó phát hiện:

var counter = 10;

// Sau một đoạn code dài...

// Vô tình khai báo lại biến counter
var counter = 0; // Không gây lỗi, nhưng ghi đè giá trị trước đó

// Nếu bạn không biết về khai báo trước đó, điều này có thể gây bug

Vấn đề này đặc biệt nghiêm trọng trong các ứng dụng lớn hoặc khi làm việc với nhiều thư viện.