[JS Basics] Biến và Kiểu dữ liệu: Khái niệm quan trọng cần nắm vững

Khi bước chân vào thế giới lập trình JavaScript, hai khái niệm đầu tiên và quan trọng nhất mà bất kỳ ai cũng cần nắm vững chính là Biến (Variables) và Kiểu dữ liệu (Data Types). Hãy tưởng tượng bạn đang xây một ngôi nhà, biến chính là những chiếc hộp để chứa đựng vật liệu, còn kiểu dữ liệu là nhãn dán trên hộp cho biết bên trong chứa gì: gạch, cát, hay xi măng. Việc hiểu rõ và sử dụng chúng một cách chính xác là nền tảng vững chắc để bạn có thể viết nên những dòng code hiệu quả và logic.

Bài viết này sẽ giúp bạn chinh phục hai khái niệm cốt lõi này một cách toàn diện và dễ hiểu nhất, từ những khái niệm cơ bản đến những điểm khác biệt tinh tế.

Biến (Variables): "Chiếc hộp" lưu trữ thông tin

Trong JavaScript, biến là một cái tên đại diện cho một giá trị được lưu trữ trong bộ nhớ máy tính. Thay vì phải nhớ địa chỉ ô nhớ phức tạp, chúng ta chỉ cần đặt cho nó một cái tên dễ nhận biết. Mỗi khi cần sử dụng giá trị đó, bạn chỉ việc gọi tên biến ra.

Cách Khai Báo Biến

Để khai báo một biến trong JavaScript, chúng ta sử dụng ba từ khóa chính: var, let, và const. Mỗi từ khóa có quy tắc và phạm vi hoạt động riêng, việc lựa chọn đúng từ khóa sẽ giúp code của bạn trở nên rõ ràng và ít lỗi hơn.

1. var: Người "tiền bối" linh hoạt

var là cách khai báo biến đã có từ những phiên bản đầu tiên của JavaScript.

• Phạm vi (Scope): Biến var có phạm vi là toàn cục (global scope) hoặc phạm vi hàm (function scope). Điều này có nghĩa là nếu một biến var được khai báo bên ngoài bất kỳ hàm nào, nó sẽ trở thành biến toàn cục. Nếu được khai báo bên trong một hàm, nó chỉ có thể được truy cập trong hàm đó.
• Hosting: Biến var được "hoisted" (đưa lên đầu), nghĩa là bạn có thể sử dụng biến trước khi nó được khai báo (giá trị sẽ là undefined).
• Khai báo lại (Redeclaration): Bạn có thể khai báo lại một biến var đã tồn tại mà không gặp lỗi.

var name = 'Alice'
var age = 30

function greet() {
  var greeting = 'Xin chào!' // Chỉ dùng được trong hàm này
  console.log(greeting + ' ' + name)
}

console.log(age) // 30
// console.log(greeting); // Lỗi! loiChao is not defined

2. let: Sự thay thế hiện đại

let được giới thiệu trong ES6 (ECMAScript 2015) để giải quyết một số vấn đề của var.

• Phạm vi (Scope): Biến let có phạm vi khối (block scope). Một khối được định nghĩa bởi cặp dấu ngoặc nhọn {} (ví dụ: trong vòng lặp for, câu lệnh if). Biến let chỉ tồn tại và có thể truy cập được bên trong khối mà nó được khai báo.
• Hosting: let cũng được hoisted nhưng không được khởi tạo. Việc truy cập biến let trước khi khai báo sẽ gây ra lỗi ReferenceError.
• Khai báo lại: Bạn không thể khai báo lại một biến let trong cùng một phạm vi.

let userName = 'Bob'

if (true) {
  let age = 25 // Chỉ tồn tại trong khối if này
  console.log(age) // 25
}

// console.log(age); // Lỗi! tuoi is not defined

3. const: Hằng số bất biến

const cũng được giới thiệu trong ES6, dùng để khai báo các hằng số - những giá trị không thay đổi trong suốt quá trình chạy chương trình.

• Phạm vi (Scope): Tương tự let, const cũng có phạm vi khối (block scope).
• Bất biến (Immutability): Một khi đã gán giá trị cho một biến const, bạn không thể gán lại giá trị mới cho nó.
• Yêu cầu khởi tạo: Biến const phải được gán giá trị ngay tại thời điểm khai báo.

const PI = 3.14159
// PI = 3.14; // Lỗi! Assignment to constant variable.

const user = {
  name: 'Charlie',
  age: 40,
}

// Lưu ý: Bạn không thể gán lại toàn bộ đối tượng...
// user = { name: "David", age: 50 }; // Lỗi!

// ...nhưng bạn có thể thay đổi thuộc tính của nó!
user.age = 41
console.log(user.age) // 41

Lời khuyên: Hãy ưu tiên sử dụng const nếu bạn biết giá trị sẽ không thay đổi. Sử dụng let khi giá trị cần được cập nhật. Hạn chế sử dụng var trong code hiện đại để tránh các hành vi khó lường.

Kiểu dữ liệu (Data Types): "Nhãn dán" phân loại thông tin

JavaScript là một ngôn ngữ có kiểu động (dynamically typed), nghĩa là bạn không cần chỉ định kiểu dữ liệu của một biến khi khai báo. Kiểu dữ liệu của biến sẽ tự động được xác định dựa trên giá trị được gán cho nó.

Có hai nhóm kiểu dữ liệu chính trong JavaScript: Kiểu dữ liệu nguyên thủy (Primitive Types) và Kiểu dữ liệu tham chiếu (Reference Types - hay Objects).

Kiểu dữ liệu Nguyên thủy (Primitive Types)

Đây là những kiểu dữ liệu cơ bản và bất biến. Khi bạn gán một biến nguyên thủy cho một biến khác, bạn đang sao chép giá trị của nó.

1. Number: Đại diện cho cả số nguyên và số thực (số thập phân).

   let integerNumber = 100
   let floatNumber = 99.5
   

2. String: Đại diện cho một chuỗi các ký tự, được đặt trong dấu nháy đơn (' '), nháy kép (" ") hoặc backticks (`).

   let name = 'JavaScript'
   let greeting = `Chào mừng đến với ${name}!` // Template literal
   

3. Boolean: Chỉ có hai giá trị: true (đúng) hoặc false (sai). Thường được sử dụng trong các câu lệnh điều kiện.

   let isStudying = true
   let isCompleted = false
   

4. undefined: Một biến đã được khai báo nhưng chưa được gán giá trị sẽ có kiểu là undefined.

   let a
   console.log(a) // undefined
   

5. null: Đại diện cho sự "vắng mặt" một cách cố ý của một giá trị đối tượng. Nó là một giá trị được gán, mang ý nghĩa "không có gì cả".

   let data = null
   

6. Symbol (ES6): Tạo ra các giá trị duy nhất và bất biến. Thường được sử dụng làm khóa cho các thuộc tính đối tượng để tránh xung đột tên.

   const id = Symbol('id')
   

7. BigInt: Dùng để biểu diễn các số nguyên có giá trị cực lớn, vượt qua giới hạn của kiểu Number.

   const bigNumber = 9007199254740991n
   

Kiểu dữ liệu Tham chiếu (Reference Types)

Không giống như kiểu nguyên thủy lưu trữ giá trị trực tiếp, kiểu tham chiếu lưu trữ một "tham chiếu" (địa chỉ) đến vị trí của đối tượng trong bộ nhớ. Khi bạn gán một biến tham chiếu cho biến khác, bạn đang sao chép địa chỉ tham chiếu đó, không phải bản thân đối tượng.

1. Object: Một tập hợp các cặp key: value. Đây là kiểu dữ liệu phức tạp và linh hoạt nhất, có thể chứa nhiều loại dữ liệu khác nhau.

   let laptop = {
     brand: 'Apple',
     model: 'Macbook Pro',
     year: 2023,
     isOn: true,
   }
   

2. Array: Một loại đối tượng đặc biệt dùng để lưu trữ một danh sách các giá trị được sắp xếp theo thứ tự. Các phần tử được truy cập bằng chỉ số (index), bắt đầu từ 0.

   let languages = ['JavaScript', 'Python', 'Java']
   console.log(languages[0]) // "JavaScript"
   

3. Function: Cũng là một loại đối tượng đặc biệt, có thể thực thi một khối mã. Chúng có thể được gán cho biến, truyền dưới dạng đối số và trả về từ các hàm khác.

   function sum(a, b) {
     return a + b
   }
   

Kết luận: Nắm vững Biến và Kiểu dữ liệu là bắt buộc

Việc nắm vững Biến và Kiểu dữ liệu là bước đệm không thể thiếu trên hành trình chinh phục JavaScript.

• Biến giống như những chiếc hộp lưu trữ, với const cho những thứ không đổi, let cho những thứ có thể thay đổi trong một phạm vi nhỏ, và var là lựa chọn cũ ít được khuyến khích.
• Kiểu dữ liệu là nhãn dán cho biết bên trong hộp chứa gì, từ những viên gạch đơn giản như Number, String, Boolean đến những cỗ máy phức tạp như Object và Array.

Hiểu rõ cách chúng hoạt động, cách khai báo và khi nào nên sử dụng loại nào sẽ giúp bạn xây dựng những ứng dụng web mạnh mẽ, hiệu quả và dễ bảo trì.

Chúc bạn có một hành trình học tập thú vị và thành công với JavaScript!