JavaScript Course

Ngôn ngữ tương tác cho Web

Bài học: JavaScript Variables: var, let, const

JavaScript Course Content

Chương 1: Biến và Scope

Chương 2: Functions

Chương 3: Data Types

JavaScript Variables

🔄 var, let, const - Khai báo biến trong JavaScript

Tìm hiểu sự khác biệt giữa var, let và const trong JavaScript. Từ hoisting, scope, temporal dead zone đến best practices trong modern JavaScript development.

Mục tiêu học tập

Hiểu sự khác biệt giữa var, let và const

Nắm vững khái niệm Hoisting và Temporal Dead Zone

Phân biệt Function Scope và Block Scope

Áp dụng best practices trong khai báo biến

Tránh được các lỗi thường gặp với variables

Sử dụng đúng cách trong closures và loops

Lý thuyết cơ bản

varES5 Legacy

• Function scope hoặc global scope
• Hoisted và initialized với undefined
• Có thể khai báo lại trong cùng scope
• Có thể gán lại giá trị
• Tạo property trên global object

letES6 Block Scope

• Block scope
• Temporal Dead Zone (TDZ)
• Không thể khai báo lại
• Có thể gán lại giá trị
• Không tạo global property

constES6 Immutable

• Block scope
• Temporal Dead Zone (TDZ)
• Không thể khai báo lại
• Không thể gán lại reference
• Phải khởi tạo giá trị ngay

Kiểm tra hiểu biết

THEORYBEGINNERSCOPE

1 / 4

Sự khác biệt chính giữa var, let và const là gì?

function example() {
  if (true) {
    var a = 1;    // function scoped
    let b = 2;    // block scoped
    const c = 3;  // block scoped
  }
  console.log(a); // 1 (accessible)
  console.log(b); // ReferenceError
  console.log(c); // ReferenceError
}

Loại:

Level:

Ví dụ thực tế

varvar và Hoisting

var được hoisted và có thể sử dụng trước khi khai báo

💡 var được hoisted (đưa lên đầu scope) và khởi tạo với undefined

JavaScript Code

console.log(x); // undefined (không lỗi)
var x = 5;
console.log(x); // 5

// Tương đương với:
// var x; // hoisted lên đầu
// console.log(x); // undefined
// x = 5;

function example() {
  console.log(y); // undefined
  var y = 10;
  console.log(y); // 10
}
example();

Bảng so sánh chi tiết

Đặc điểm	var	let	const
Scope	Function/Global	Block	Block
Hoisting	Có (khởi tạo undefined)	Có (Temporal Dead Zone)	Có (Temporal Dead Zone)
Khai báo lại	Được phép	Không được phép	Không được phép
Gán lại giá trị	Được phép	Được phép	Không được phép
Khởi tạo bắt buộc	Không	Không	Có
Temporal Dead Zone	Không	Có	Có
Global object property	Có (tạo property)	Không	Không
Best for	Legacy code	Mutable variables	Immutable references

Best Practices

✅ Nên làm (Modern JavaScript)

const by default - Ưu tiên const cho giá trị không thay đổi reference

let when reassignment needed - Chỉ dùng let khi cần gán lại giá trị

Avoid var - Không dùng var trong code ES6+ mới

Declare near usage - Khai báo biến gần nơi sử dụng

Meaningful names - Đặt tên biến có ý nghĩa và rõ ràng

❌ Tránh làm (Legacy patterns)

Sử dụng var trong modern JavaScript (ES6+)

Khai báo biến ở đầu function (hoisting abuse)

Access biến trước khi khai báo (rely on hoisting)

Reassign const variables hoặc modify references

Dùng let trong loops khi không cần block scope riêng

💡 Quy tắc vàng:

const cho giá trị không thay đổi reference (objects, arrays, functions)
let cho biến có thể thay đổi (counters, reassignment)
var chỉ khi cần function scope hoặc maintain legacy code
Khai báo biến gần nơi sử dụng để improve readability
Đặt tên biến có ý nghĩa, tránh single character names

Lỗi thường gặp

❌ Lỗi: Sử dụng var trong loops với closures

✅ Giải pháp: Dùng let để tạo block scope riêng cho mỗi iteration

// ❌ Wrong
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Prints 3, 3, 3
}

// ✅ Correct
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // Prints 0, 1, 2
}

❌ Lỗi: Access biến let/const trước khi khai báo

✅ Giải pháp: Luôn khai báo trước khi sử dụng để tránh TDZ error

// ❌ Wrong
console.log(x); // ReferenceError
let x = 5;

// ✅ Correct
let x = 5;
console.log(x); // 5

❌ Lỗi: Reassign const variables

✅ Giải pháp: Dùng let nếu cần reassign, const chỉ cho immutable references

// ❌ Wrong
const count = 0;
count = 1; // TypeError

// ✅ Correct
let count = 0;
count = 1; // OK

// ✅ Also correct for objects
const user = { name: "John" };
user.name = "Jane"; // OK - mutating content, not reference

❌ Lỗi: Dùng var trong modern JavaScript

✅ Giải pháp: Ưu tiên const > let > tránh var

// ❌ Wrong (legacy style)
var name = "John";
var age = 25;

// ✅ Correct (modern style)
const name = "John";
let age = 25;

❌ Lỗi: Không khai báo const với giá trị

✅ Giải pháp: const phải được khởi tạo ngay khi khai báo

// ❌ Wrong
const PI; // SyntaxError: Missing initializer
PI = 3.14;

// ✅ Correct
const PI = 3.14;

📝 Tóm tắt var, let, const

var

ES5 Truyền thống

Function scope, hoisting, nên tránh dùng trong JS hiện đại

let

ES6 Có thể thay đổi

Block scope, TDZ, có thể gán lại giá trị

const

ES6 Không thay đổi

Block scope, TDZ, không thể gán lại giá trị

Quy tắc cơ bản: Ưu tiên dùng const → dùng let khi cần gán lại giá trị → tránh dùng var! 🎯

Mục lục

Không có mục lục