Loạt bài JavaScript cơ bản · Bài 09/18 — Mục lục học tập

Cùng một tên biến có thể tồn tại ở những phạm vi khác nhau. Nếu không biết một biến được khai báo ở đâu và được phép dùng ở đâu, bạn sẽ gặp lỗi biến không tồn tại hoặc sửa nhầm dữ liệu. Bài này giúp bạn đọc phạm vi từ cặp ngoặc nhọn và ranh giới hàm.

Phạm vi khối với let và const

const course = "JavaScript";
if (true) {
  const message = "Đang học " + course;
  console.log(message);
}
console.log(course);
// console.log(message); // ReferenceError

Biến khai báo trong khối chỉ dùng được trong khối đó và những khối con. Khối bên trong có thể đọc biến ở bên ngoài, nhưng chiều ngược lại không đúng. Điều này giúp dữ liệu tạm thời không vô tình ảnh hưởng phần mã khác.

Phạm vi hàm

function calculateAverage(a, b) {
  const total = a + b;
  return total / 2;
}
const average = calculateAverage(8, 6);
console.log(average); // 7
// console.log(total); // ReferenceError

total là chi tiết nội bộ của hàm. Để đưa kết quả ra ngoài, hãy dùng return thay vì cố đọc biến nội bộ. Mỗi lần gọi hàm có môi trường thực thi riêng, nên giá trị tạm của lần gọi này không tự trở thành biến toàn cục cho lần sau.

Biến cùng tên ở khối trong

const name = "An";
{
  const name = "Bình";
  console.log(name); // Bình
}
console.log(name); // An

Trường hợp này gọi là che khuất tên biến. Nó hợp lệ nhưng dễ gây khó hiểu nếu lồng nhiều tầng. Ưu tiên các tên phản ánh ý nghĩa dữ liệu. Nếu bạn muốn thay đổi biến bên ngoài, không được vô tình khai báo lại một biến mới bằng let trong khối trong.

Khai báo trước khi dùng

Đừng dựa vào cơ chế hoisting để sử dụng let hoặc const trước dòng khai báo. Truy cập chúng trong giai đoạn trước khi được khởi tạo gây ReferenceError. Ngoài ra, không gán cho tên chưa khai báo; trong strict mode việc đó gây lỗi và trong một số mã script cũ có thể tạo biến toàn cục ngoài ý muốn.

"use strict";
let lessonCount = 0;
function completeLesson(currentCount) {
  return currentCount + 1;
}
lessonCount = completeLesson(lessonCount);
console.log(lessonCount); // 1

Hàm trên nhận dữ liệu qua tham số, trả kết quả rõ ràng và không âm thầm thay đổi biến bên ngoài. Cách tổ chức này giúp bạn kiểm tra hàm với nhiều đầu vào mà không cần dựng lại toàn bộ trạng thái ứng dụng.

Bài tập

Hàm dưới đây cần trả lại giá sau giảm nhưng biến discounted chỉ tồn tại trong if. Hãy sửa bằng cách return theo từng nhánh.

function applyDiscount(price, hasDiscount) {
  if (hasDiscount) {
    return price * 0.9;
  }
  return price;
}
console.log(applyDiscount(100000, true)); // 90000
console.log(applyDiscount(100000, false)); // 100000

Ghi nhớ: khi thấy ReferenceError, kiểm tra chính tả, vị trí khai báo và phạm vi trước khi tạo thêm biến toàn cục để chữa tạm.