Biến và Kiểu dữ liệu JavaScript - Bí quyết thành công từ A đến Z

📝 Biến trong JavaScript - Những điều tôi đã học được

Chào các bạn! Hôm nay tôi muốn chia sẻ với các bạn những kiến thức về biến trong JavaScript mà tôi đã tích lũy được. Đây là nền tảng quan trọng nhất khi bắt đầu học JavaScript.

🔧 Tại sao cần hiểu rõ về biến?

Trong JavaScript, biến là nơi lưu trữ dữ liệu và có 3 cách khai báo khác nhau. Hiểu rõ sự khác biệt giữa var, let và const sẽ giúp bạn viết code an toàn và hiệu quả hơn.

🔧 Cách tôi học khai báo biến

// 1. var (cũ, tôi đã dùng lúc đầu nhưng không nên)
var oldVariable = "Không nên dùng";

// 2. let (tôi dùng cho biến có thể thay đổi)
let name = "JavaScript";
let age = 25;

// 3. const (tôi dùng cho hằng số)
const PI = 3.14159;
const API_URL = "https://api.example.com";

Mình ưu tiên const cho hầu hết biến; chỉ dùng let khi thật sự cần gán lại. Tránh var để không gặp rắc rối về hoisting và function scope.

Scope và Hoisting: var có function scope và được hoisted, let/const có block scope và không được hoisted. const tạo immutable binding, let tạo mutable binding. Luôn ưu tiên const trước, chỉ dùng let khi cần reassignment.

📊 Kiểu dữ liệu trong JavaScript

JavaScript có 8 kiểu dữ liệu cơ bản:

Tầm quan trọng của Type System: JavaScript là dynamically typed, nhưng việc hiểu rõ kiểu dữ liệu giúp tránh lỗi logic và tối ưu performance. Type coercion có thể gây ra kết quả bất ngờ, cần cẩn thận khi so sánh.

1. Primitive Types (Kiểu nguyên thủy)

// String - Chuỗi
let message = "Hello, World!";
let name = 'JavaScript';

// Number - Số
let age = 25;
let price = 99.99;

// Boolean - Logic
let isStudent = true;
let isWorking = false;

// Undefined - Chưa định nghĩa
let undefinedVar;

// Null - Rỗng
let nullVar = null;

// Symbol - Ký hiệu (ES6)
let sym = Symbol('id');

// BigInt - Số nguyên lớn (ES2020)
let bigNumber = 1234567890123456789012345678901234567890n;

Khi làm việc với số lớn (tiền tệ, ID), BigInt giúp tránh lỗi tràn số. Với chuỗi, mình chuẩn hóa về Unicode NFC để so sánh nhất quán trong ứng dụng đa ngôn ngữ.

Công cụ kiểm tra kiểu: typeof trả về chuỗi mô tả kiểu dữ liệu. Đặc biệt, typeof null trả về "object" (đây là bug lịch sử của JavaScript), và typeof function trả về "function" mặc dù function cũng là object.

2. Object Types (Kiểu đối tượng)

// Object - Đối tượng
let person = {
    name: "John",
    age: 30,
    city: "New York"
};

// Array - Mảng
let fruits = ["apple", "banana", "orange"];

// Function - Hàm
function greet(name) {
    return "Hello, " + name + "!";
}

Đặc điểm của Object: Object trong JavaScript là “hash table” - cấu trúc key-value, cho phép truy cập nhanh O(1). Array thực chất cũng là object với key là số index, có các method đặc biệt như push(), pop(), map(), filter().

🔄 Chuyển đổi kiểu dữ liệu

1. Chuyển đổi tự động (Type Coercion)

// String + Number = String
let result1 = "5" + 3; // "53"

// Number + String = String
let result2 = 5 + "3"; // "53"

// Boolean + Number = Number
let result3 = true + 1; // 2
let result4 = false + 1; // 1

Cơ chế Type Coercion: JavaScript tự động chuyển đổi kiểu dữ liệu khi thực hiện phép toán. Quy tắc: + ưu tiên string concatenation, các toán tử khác (-, *, /) ưu tiên number conversion. Đây là nguyên nhân gây ra nhiều bug phổ biến.

2. Chuyển đổi thủ công (Explicit Conversion)

// Chuyển sang String
let num = 123;
let str = String(num); // "123"
let str2 = num.toString(); // "123"

// Chuyển sang Number
let str3 = "456";
let num2 = Number(str3); // 456
let num3 = parseInt("123.45"); // 123
let num4 = parseFloat("123.45"); // 123.45

// Chuyển sang Boolean
let str4 = "hello";
let bool1 = Boolean(str4); // true
let bool2 = !!str4; // true

Kinh nghiệm của mình:

Number() nghiêm ngặt hơn parseInt/parseFloat và sẽ trả về NaN nếu có ký tự lạ.
Với parseInt, luôn truyền cơ số: parseInt('08', 10) để tránh hành vi cũ ở môi trường legacy.

So sánh các hàm chuyển đổi: Number() chuyển đổi toàn bộ chuỗi, parseInt() dừng ở ký tự không phải số, parseFloat() xử lý số thập phân. String() và .toString() tương đương, nhưng toString() không hoạt động với null/undefined.

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

1. Bài tập: Calculator đơn giản

// Nhập hai số từ người dùng
let num1 = prompt("Nhập số thứ nhất:");
let num2 = prompt("Nhập số thứ hai:");

// Chuyển đổi sang number
num1 = Number(num1);
num2 = Number(num2);

// Thực hiện phép tính
let sum = num1 + num2;
let difference = num1 - num2;
let product = num1 * num2;
let quotient = num1 / num2;

// Hiển thị kết quả
console.log("Tổng:", sum);
console.log("Hiệu:", difference);
console.log("Tích:", product);
console.log("Thương:", quotient);

Xử lý dữ liệu người dùng: prompt() luôn trả về string, cần chuyển đổi sang number để tính toán. Đây là pattern phổ biến khi làm việc với form input và API response.

2. Bài tập: Kiểm tra kiểu dữ liệu

function checkDataType(value) {
    console.log("Giá trị:", value);
    console.log("Kiểu dữ liệu:", typeof value);
    console.log("Có phải là số không:", !isNaN(value));
    console.log("Có phải là chuỗi không:", typeof value === 'string');
    console.log("---");
}

// Test với các kiểu dữ liệu khác nhau
checkDataType(42);
checkDataType("Hello");
checkDataType(true);
checkDataType(null);
checkDataType(undefined);

Kiểm tra kiểu dữ liệu chính xác: typeof có hạn chế với null và array. isNaN() kiểm tra “Not a Number”, nhưng isNaN("hello") trả về true. Nên dùng Number.isNaN() (ES6) để kiểm tra chính xác hơn.

💡 Tips học hiệu quả

1. Thực hành thường xuyên

Làm tất cả các bài lab
Thử nghiệm với code
Đặt câu hỏi khi không hiểu

2. Sử dụng console.log()

// Debug với console.log
let a = 5;
let b = "10";
let result = a + b;

console.log("a =", a, "type:", typeof a);
console.log("b =", b, "type:", typeof b);
console.log("result =", result, "type:", typeof result);

3. Hiểu về Type Coercion

JavaScript tự động chuyển đổi kiểu dữ liệu
Có thể gây ra lỗi nếu không cẩn thận
Nên sử dụng chuyển đổi thủ công khi cần

🎯 Kết luận

Học về biến, kiểu dữ liệu và chuyển đổi kiểu đã giúp tôi hiểu rõ hơn về JavaScript. Đây là nền tảng quan trọng để học các khái niệm nâng cao hơn.

Những điều tôi học được:

Cách khai báo biến đúng cách
Phân biệt các kiểu dữ liệu
Chuyển đổi kiểu dữ liệu
Debug và kiểm tra kiểu dữ liệu

Lời khuyên:

Hãy thực hành nhiều với các bài tập
Đừng ngại thử nghiệm với code
Sử dụng console.log() để debug
Hiểu rõ về type coercion

Hãy tiếp tục hành trình của bạn 🚀

Tài liệu tham khảo: