Variables and Data Types

Mở đầu — vì sao bài này quan trọng

Nếu coi một chương trình JavaScript như một căn bếp, thì biến (variable) chính là những chiếc hộp đựng nguyên liệu, còn kiểu dữ liệu (data type) là loại nguyên liệu nằm bên trong: đường, muối, nước, hay cả một rổ rau. Bạn không thể nấu được món gì ra hồn nếu lấy nhầm hộp, hoặc tưởng đường là muối. Trong lập trình cũng vậy — phần lớn lỗi của người mới học JavaScript không nằm ở những kỹ thuật cao siêu, mà nằm ngay ở chỗ hiểu sai cách khai báo biến và nhầm lẫn giữa các kiểu dữ liệu.

Ở bài trước, bạn đã làm quen với JavaScript là gì và chạy được những dòng lệnh đầu tiên. Bài này là viên gạch nền móng thật sự: gần như mọi dòng code bạn viết sau này — từ một nút bấm trên website, một giỏ hàng thương mại điện tử, cho đến logic tính phí ship của Shopee hay GrabFood — đều xoay quanh việc lưu trữ dữ liệu vào biến và thao tác với đúng kiểu dữ liệu.

Hiểu vững phần này, bạn sẽ viết code ít lỗi hơn, đọc code của người khác nhanh hơn, và quan trọng nhất là tư duy được "dữ liệu đang ở dạng nào, mình cần biến đổi nó ra sao". Đó là tư duy theo bạn suốt sự nghiệp lập trình, không chỉ với JavaScript. Hãy dành thời gian đọc kỹ, gõ lại từng ví dụ và thử nghiệm — đừng chỉ đọc lướt.

Khái niệm cốt lõi

Biến là gì và ba cách khai báo

Biến là một cái tên mà ta gán cho một vùng nhớ để lưu giá trị. Thay vì viết con số 120000 rải rác khắp nơi trong code, ta đặt nó vào một biến tên giaSanPham để dễ đọc, dễ sửa.

JavaScript hiện đại có ba từ khóa để khai báo biến: var, let và const.

var tenCu = "Cách cũ";        // Tránh dùng trong code mới
let soLuong = 5;               // Biến có thể thay đổi giá trị
const TY_GIA_USD = 25400;      // Hằng số, không thể gán lại

• const dùng cho giá trị không thay đổi sau khi gán. Đây nên là lựa chọn mặc định của bạn.
• let dùng khi bạn biết giá trị sẽ thay đổi (ví dụ biến đếm, tổng tiền cộng dồn).
• var là cách cũ từ thời JavaScript đời đầu. Nó có nhiều hành vi gây bối rối (phạm vi hàm thay vì phạm vi khối, bị "hoisting"), nên trong code mới bạn gần như không cần dùng tới.

Một quy tắc thực hành tốt: luôn bắt đầu bằng const, chỉ đổi sang let khi bạn thật sự cần gán lại giá trị. Cách này giúp code an toàn hơn vì máy sẽ báo lỗi nếu bạn vô tình ghi đè một giá trị lẽ ra phải giữ nguyên.

Quy tắc đặt tên biến

Tên biến nên mô tả rõ ý nghĩa. JavaScript theo quy ước camelCase: chữ đầu viết thường, các từ sau viết hoa chữ cái đầu — tongTien, tenKhachHang, soDienThoai. Tên biến không được bắt đầu bằng số, không chứa dấu cách, và phân biệt chữ hoa chữ thường (gia và Gia là hai biến khác nhau).

Các kiểu dữ liệu nguyên thủy (primitive)

JavaScript chia dữ liệu thành hai nhóm lớn: kiểu nguyên thủy và kiểu tham chiếu (object). Trước hết là các kiểu nguyên thủy thường gặp:

String (chuỗi) — văn bản, đặt trong dấu nháy. Bạn có thể dùng nháy đơn, nháy kép, hoặc nháy ngược (backtick).

const ten = "Nguyễn Văn An";
const thanhPho = 'Hồ Chí Minh';
const loiChao = `Xin chào, ${ten}!`; // Template literal — chèn biến bằng ${}

Backtick với cú pháp ${} được gọi là template literal, rất tiện để ghép chuỗi với biến mà không phải dùng dấu cộng lằng nhằng.

Number (số) — JavaScript chỉ có một kiểu số duy nhất cho cả số nguyên lẫn số thập phân.

const tuoi = 28;
const giaCaPhe = 35000;
const tyLe = 0.075;

Boolean (đúng/sai) — chỉ có hai giá trị true hoặc false. Dùng cho mọi quyết định logic.

const daThanhToan = true;
const conHang = false;

undefined và null — cả hai biểu thị "không có giá trị" nhưng khác nhau về ý nghĩa. undefined là biến đã khai báo nhưng chưa gán gì. null là giá trị "rỗng" mà bạn chủ động gán vào để nói "ở đây cố tình không có dữ liệu".

let chuaCoGiaTri;             // undefined
const khongCoNguoiDung = null; // chủ động gán rỗng

Các kiểu dữ liệu tham chiếu

Array (mảng) — danh sách có thứ tự, đặt trong dấu ngoặc vuông. Phần tử được đánh chỉ số (index) bắt đầu từ 0.

const danhSachMon = ["Phở", "Bún chả", "Cơm tấm"];
console.log(danhSachMon[0]); // "Phở" — phần tử đầu tiên
console.log(danhSachMon.length); // 3 — số phần tử

Object (đối tượng) — tập hợp các cặp khóa–giá trị (key–value), đặt trong dấu ngoặc nhọn. Đây là cách JavaScript mô tả một "thực thể" có nhiều thuộc tính.

const khachHang = {
  ten: "Trần Thị Bích",
  tuoi: 32,
  thanhVienVip: true,
  diaChi: "Đà Nẵng"
};
console.log(khachHang.ten);  // "Trần Thị Bích"
console.log(khachHang["tuoi"]); // 32 — cách truy cập thứ hai

Kiểm tra kiểu dữ liệu với typeof

Khi không chắc một biến đang ở kiểu gì, dùng toán tử typeof:

typeof "xin chào"  // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof undefined   // "undefined"
typeof { a: 1 }    // "object"
typeof [1, 2, 3]   // "object" (mảng cũng là object!)

Tình huống thực tế

Ví dụ 1 — Trang sản phẩm của một shop mỹ phẩm online tại TP.HCM

Hãy tưởng tượng bạn đang dựng phần dữ liệu cho một sản phẩm trên website bán mỹ phẩm. Một lọ serum cần lưu nhiều thông tin với nhiều kiểu khác nhau:

const sanPham = {
  ten: "Serum Vitamin C 30ml",
  gia: 450000,
  conHang: true,
  soLuongTon: 18,
  thanhPhan: ["Vitamin C", "Hyaluronic Acid", "Vitamin E"],
  moTa: null  // chưa có người viết mô tả
};

const thongBao = `${sanPham.ten} - Giá: ${sanPham.gia.toLocaleString("vi-VN")}đ`;
console.log(thongBao); // "Serum Vitamin C 30ml - Giá: 450.000đ"

Diễn giải: Ở đây ta thấy đủ năm kiểu dữ liệu cùng phối hợp: chuỗi (ten), số (gia, soLuongTon), boolean (conHang), mảng (thanhPhan), và null (chưa có mô tả). Phương thức .toLocaleString("vi-VN") biến số 450000 thành chuỗi "450.000" đúng định dạng tiền Việt.

Bài học rút ra: Dữ liệu thật luôn là sự kết hợp của nhiều kiểu. Việc chọn đúng kiểu ngay từ đầu — gia là number để tính toán được, conHang là boolean để kiểm tra logic — sẽ quyết định code của bạn dễ hay khó bảo trì về sau.

Ví dụ 2 — Bẫy kinh điển: nhầm chuỗi với số khi tính tiền

Một bạn thực tập tại startup giao đồ ăn lấy giá tiền từ ô nhập liệu (input) trên web. Mọi giá trị lấy từ input HTML đều là chuỗi, kể cả khi người dùng gõ số.

const giaMon = "45000";    // chuỗi, không phải số!
const phiShip = 15000;     // số

const tongChuoiSai = giaMon + phiShip;
console.log(tongChuoiSai); // "4500015000" — sai bét!

Tại sao? Vì khi gặp một chuỗi, toán tử + sẽ nối chuỗi thay vì cộng số. Kết quả "45000" + 15000 trở thành "4500015000". Cách sửa là ép kiểu chuỗi về số trước:

const tongDung = Number(giaMon) + phiShip;
console.log(tongDung); // 60000 — chính xác

Diễn giải: Lỗi này khiến hóa đơn hiển thị sai con số khổng lồ, và nó cực kỳ phổ biến trong các dự án thật. Hàm Number(), hoặc parseInt() / parseFloat(), dùng để chuyển chuỗi thành số.

Bài học rút ra: Luôn tự hỏi "dữ liệu này đang là kiểu gì?" trước khi tính toán. Dữ liệu từ form, từ URL, từ file CSV gần như luôn là chuỗi — bạn phải chủ động ép kiểu.

Ví dụ 3 — So sánh == và === trong hệ thống đăng nhập

Một nền tảng học trực tuyến kiểm tra mã OTP người dùng nhập vào. Mã đúng lưu trong hệ thống là số 123456, còn mã người dùng gõ vào là chuỗi "123456".

const otpDung = 123456;       // number
const otpNhap = "123456";     // string

console.log(otpNhap == otpDung);  // true — nguy hiểm!
console.log(otpNhap === otpDung); // false — chính xác về kiểu

Diễn giải: Toán tử == so sánh "lỏng", nó tự động ép kiểu trước khi so, nên "123456" và 123456 được coi là bằng nhau. Toán tử === so sánh "chặt", yêu cầu cả giá trị lẫn kiểu phải khớp. Trong hầu hết trường hợp, bạn nên dùng === để tránh những kết quả bất ngờ.

Bài học rút ra: Mặc định luôn dùng === và !==. Sự khác biệt nhỏ này từng gây ra vô số lỗi bảo mật và logic trong các hệ thống thực tế.

Hướng dẫn từng bước

Hãy cùng xây một đoạn dữ liệu mô tả một đơn hàng GrabFood từ đầu, vận dụng mọi thứ vừa học.

• Khai báo các thông tin cố định bằng const. Tên khách, mã đơn không đổi trong suốt vòng đời đơn hàng.

   const maDonHang = "GF-2026-0612";
   const tenKhach = "Lê Hoàng Nam";
   

• Dùng let cho giá trị sẽ thay đổi. Tổng tiền còn cộng dồn nên dùng let.

   let tongTien = 0;
   

• Tạo mảng các món ăn dưới dạng object. Mỗi món là một object có tên và giá.

   const cacMon = [
     { ten: "Cơm gà xối mỡ", gia: 55000 },
     { ten: "Trà tắc", gia: 18000 }
   ];
   

• Cộng dồn giá trị vào tongTien. Đây là lúc let phát huy tác dụng.

   tongTien = cacMon[0].gia + cacMon[1].gia; // 73000
   

• Thêm một biến boolean cho trạng thái. Kiểm tra logic sẽ dựa vào nó.

   const daApDungVoucher = false;
   

• Ghép tất cả thành thông báo bằng template literal.

   const tomTat = `Đơn ${maDonHang} của ${tenKhach}: ${tongTien.toLocaleString("vi-VN")}đ`;
   console.log(tomTat);
   // "Đơn GF-2026-0612 của Lê Hoàng Nam: 73.000đ"
   

Qua sáu bước, bạn đã phối hợp string, number, boolean, array và object trong một tình huống đời thực — đúng cách một lập trình viên thật sự làm việc.

Lỗi thường gặp & mẹo

• Quên rằng dữ liệu từ input là chuỗi. Như ví dụ tính tiền ở trên, hãy luôn Number() trước khi làm phép tính.
• Gán lại biến const. Viết const x = 5; rồi sau đó x = 10; sẽ báo lỗi Assignment to constant variable. Nếu cần đổi giá trị, dùng let ngay từ đầu.
• Nhầm =, == và ===. Một dấu = là gán giá trị; hai dấu == là so sánh lỏng; ba dấu === là so sánh chặt. Đây là lỗi gõ nhầm hàng đầu của người mới.
• Truy cập index không tồn tại trong mảng. mang[10] khi mảng chỉ có 3 phần tử sẽ trả về undefined, không báo lỗi — dễ khiến bạn tưởng code đúng.
• Quên rằng typeof null trả về "object". Đây là một lỗi nổi tiếng tồn tại từ thời JavaScript ra đời, không bao giờ được sửa. Hãy nhớ nó như một ngoại lệ.
• Mẹo: Dùng console.log(typeof bien, bien) khi gỡ lỗi để thấy đồng thời cả kiểu lẫn giá trị của biến. Đây là thói quen giúp bạn tiết kiệm hàng giờ debug.
• Mẹo: Đặt tên biến bằng tiếng Anh hoặc tiếng Việt không dấu nhất quán trong một dự án. Nhất quán quan trọng hơn việc chọn ngôn ngữ nào.

Bài tập thực hành

• Khởi động. Khai báo ba biến mô tả bản thân bạn: hoTen (string), tuoi (number), dangHocLapTrinh (boolean). In ra một câu giới thiệu bằng template literal.

• Object hồ sơ. Tạo một object hocVien gồm các khóa: ten, email, cacKhoaHoc (một mảng tên khóa học), và daTotNghiep (boolean). In ra khóa học đầu tiên trong mảng.

• Sửa lỗi tính tiền. Cho const giaGoc = "200000"; và const giamGia = 50000;. Viết code tính giá sau giảm sao cho kết quả là số 150000, không phải chuỗi nối.

• Phân biệt so sánh. Dự đoán kết quả của "7" == 7, "7" === 7, và 0 == false trước khi chạy. Sau đó chạy thử để kiểm chứng và giải thích vì sao.

• Thử thách. Tạo một mảng gioHang chứa ba object sản phẩm (mỗi object có ten và gia). Dùng let tongGioHang = 0; rồi cộng giá của cả ba sản phẩm vào, cuối cùng in tổng giỏ hàng theo định dạng tiền Việt.

Hãy gõ tay từng bài, đừng copy. Khi gặp lỗi, đọc kỹ thông báo lỗi — đó chính là người thầy tốt nhất.

Tóm tắt

Trong bài này, bạn đã nắm được những viên gạch nền móng của JavaScript: cách khai báo biến với const, let và lý do nên tránh var. Bạn đã đi qua các kiểu dữ liệu cốt lõi — string, number, boolean, undefined, null — cùng hai kiểu tham chiếu quan trọng là array và object. Bạn cũng biết cách kiểm tra kiểu bằng typeof, ép kiểu chuỗi sang số với Number(), và phân biệt được == với ===.

Quan trọng hơn cả các cú pháp, bạn đã rèn được tư duy nền tảng: trước khi thao tác với bất kỳ dữ liệu nào, hãy luôn tự hỏi "nó đang ở kiểu gì?". Chính câu hỏi đó sẽ giúp bạn tránh phần lớn lỗi mà người mới hay mắc, như đã thấy trong ba tình huống thực tế về shop mỹ phẩm, tính tiền giao đồ ăn và kiểm tra mã OTP.

Hãy hoàn thành đầy đủ phần bài tập trước khi sang bài tiếp theo. Khi bạn đã quen tay với biến và kiểu dữ liệu, bạn sẽ sẵn sàng bước vào thế giới hàm (functions) — nơi chúng ta biến những dữ liệu này thành hành động thực sự.