Đọc hiểu code cơ bản: biến, kiểu dữ liệu, điều kiện, vòng lặp, hàm

Biến (variable) là một chiếc hộp có dán nhãn để đựng một giá trị. Trong tiệm bánh, hãy hình dung các hộp nguyên liệu trên kệ, mỗi hộp có nhãn: “đường”, “bột mì”, “bơ”.

const tenKhach = "Chị Hương";      // hằng: hộp dán chết, không đổi nội dung
let soLuong = 1;                   // biến: hộp có thể thay nội dung
soLuong = 2;                       // đổi nội dung hộp soLuong từ 1 thành 2
const PHI_SHIP = 30_000;           // 30_000 chính là 30000; dấu _ chỉ để dễ đọc

• const (constant, hằng): gán một lần, không được gán lại. Code hiện đại dùng const là chủ yếu.
• let: có thể gán lại giá trị mới.
• Dấu = trong code nghĩa là “cất vào hộp”, không phải “bằng nhau” như trong toán.
• Dòng bắt đầu bằng // là chú thích (comment): ghi chú cho người đọc, máy bỏ qua.

Tên biến viết liền, không dấu, thường theo kiểu camelCase (chữ đầu viết thường, các từ sau viết hoa chữ cái đầu) như tenKhach, soLuong. Hằng số cấu hình hay viết HOA như PHI_SHIP. Trong code thật, tên thường bằng tiếng Anh (customerName, quantity); trong bài này dùng cả hai để bạn quen.

Logic nghiệp vụ đầy những chữ “nếu”. Code diễn đạt chúng bằng if / else:

// Quy tắc (giả định cho ví dụ): khách tự đến lấy thì không tính ship;
// giao tận nơi thì đơn từ 500.000đ được miễn phí ship, dưới mức đó tính 30.000đ.
if (deliveryType === "pickup") {
  phiShip = 0;
} else if (tamTinh >= 500_000) {
  phiShip = 0;
} else {
  phiShip = 30_000;
}

Đọc như tiếng Việt: nếu khách tự lấy thì phí ship 0; nếu không, mà tạm tính từ 500.000 trở lên thì 0; còn lại thì 30.000. Máy kiểm tra từ trên xuống, gặp điều kiện đúng đầu tiên thì làm phần đó và bỏ qua phần còn lại.

Các ký hiệu so sánh và kết hợp hay gặp:

Bạn có thể thấy == (hai dấu bằng) trong code cũ. Nó so sánh “lỏng”, tự đổi kiểu trước khi so (ví dụ coi chuỗi "1" bằng số 1), dễ gây bất ngờ. Code hiện đại dùng ===.

Hàm (function) là một đoạn công thức được đặt tên, nhận đầu vào (tham số), làm việc gì đó, và trả ra đầu ra (giá trị trả về). Giống công thức “Làm kem bơ”: đầu vào là bơ và đường, đầu ra là kem bơ. Đặt tên rồi thì lần sau chỉ cần nói “làm kem bơ” thay vì đọc lại từng bước.

//        tên hàm      đầu vào: tên và kiểu         kiểu đầu ra
function tinhTamTinh(items: OrderItem[]): number {
  let tong = 0;
  for (const item of items) {
    tong = tong + item.unitPrice * item.quantity;
  }
  return tong;  // "return" = trả kết quả ra ngoài và kết thúc hàm
}

const ketQua = tinhTamTinh(donHang);  // "gọi" hàm: đưa nguyên liệu vào, nhận kết quả

Hàm thuần và hàm có tác dụng phụ

Đây là phân biệt rất đáng giá khi review code:

• Hàm thuần (pure function): chỉ tính toán từ đầu vào ra đầu ra, không đụng gì bên ngoài. Cùng đầu vào luôn cho cùng kết quả. tinhTamTinh là hàm thuần. Dễ hiểu, dễ kiểm thử, an toàn.
• Hàm có tác dụng phụ (side effect): làm thay đổi thế giới bên ngoài: ghi database, gửi tin nhắn Zalo, trừ tiền, gửi email. Gọi hai lần có thể gây hậu quả hai lần.

// Hàm có tác dụng phụ: mỗi lần gọi là một lần ghi database và một tin nhắn gửi đi
async function xacNhanDon(code: string): Promise<void> {
  await capNhatTrangThai(code, "da_xac_nhan");                 // ghi vào database
  await guiTinZalo(code, "Tiệm đã nhận đơn của bạn. Cảm ơn!"); // gửi tin cho khách
}

Hai chữ mới: async đánh dấu hàm có những việc tốn thời gian chờ (đợi database, đợi mạng), và await nghĩa là “chờ việc này xong rồi mới làm tiếp”. Code backend đầy async/await vì hầu như việc gì cũng phải chờ database hay dịch vụ bên ngoài.

Bạn đã thấy những chữ như : number, : string, OrderItem[] trong code. Đó là chú thích kiểu (type annotation), phần TypeScript thêm vào JavaScript.

Ẩn dụ: trong bếp, hộp đường dán nhãn “ĐƯỜNG”. Nếu ai đó định đổ muối vào, người kiểm tra sẽ chặn lại trước khi món bánh bị hỏng. Bộ kiểm tra kiểu (type checker) của TypeScript làm đúng việc đó: đọc code và báo lỗi trước khi chương trình chạy, thay vì để khách hàng phát hiện.

Ví dụ kinh điển: dữ liệu đọc từ ô nhập trên form luôn là chuỗi chữ. Trong JavaScript thuần, cộng một số với một chuỗi sẽ nối chuỗi, không cộng số:

const tamTinh = 100_000;
const phiShipTuForm = "30000";            // giá trị lấy từ ô nhập: là chuỗi, không phải số
console.log(tamTinh + phiShipTuForm);     // JavaScript in ra "10000030000", không phải 130000

Một đơn 130.000đ biến thành “10 tỷ” trên hóa đơn. Với TypeScript, nếu hàm khai báo rõ tham số là number, lỗi bị bắt ngay khi viết code. Đây là những thông báo lỗi kiểu bạn sẽ gặp, kèm cách “dịch”:

error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

Dịch: bạn đưa vào hàm một chuỗi, trong khi hàm cần một con số. (Đúng tình huống “30000” ở trên.)

error TS2345: Argument of type '"giao-hang"' is not assignable to parameter of type 'DeliveryType'.

Dịch: kiểu giao hàng chỉ được là "pickup" hoặc "delivery", không có giá trị "giao-hang".

error TS2551: Property 'quantiy' does not exist on type 'OrderItem'. Did you mean 'quantity'?

Dịch: gõ sai tên ô; TypeScript còn gợi ý tên đúng.

error TS2322: Type 'string' is not assignable to type 'number'.

Dịch: đang cất một chuỗi vào hộp chỉ dành cho số.

Và một lỗi khi chạy (không phải lỗi kiểu) rất phổ biến:

TypeError: Cannot read properties of undefined (reading 'unitPrice')

Dịch: code định “mở ô” unitPrice của một thứ không tồn tại, ví dụ lấy món thứ 6 trong một đơn chỉ có 2 món, hoặc sản phẩm không tìm thấy trong database.

Vì sao kiểu đặc biệt quan trọng khi làm việc với AI? Vì nó cho agent một vòng phản hồi tự động: agent viết code, chạy type checker, thấy lỗi, tự sửa, trước khi bạn phải nhìn tới. Bài Kiểm tra tĩnh: linter, formatter và type checker08-06 sẽ đi sâu hơn.