Biến và kiểu dữ liệu

Khi bắt đầu hành trình học lập trình với JavaScript, một trong những nền tảng quan trọng nhất mà bạn cần nắm vững là cách làm việc với biến và kiểu dữ liệu. Đây là những viên gạch đầu tiên trong việc xây dựng bất kỳ ứng dụng hay trang web nào. Hiểu rõ cách khai báo biến, phân biệt giữa các loại biến, và nhận diện các kiểu dữ liệu khác nhau sẽ giúp bạn viết mã hiệu quả và tránh được nhiều lỗi phổ biến.

Trong bài học này, chúng ta sẽ cùng khám phá cách JavaScript quản lý thông tin, cách bạn có thể lưu trữ và thao tác với dữ liệu trong mã nguồn của mình.

1. Kỹ thuật cơ bản trong Biến và Kiểu dữ liệu của JavaScript

1.1. Khai báo biến

  • var, let, const:
    • var có phạm vi hoạt động trong function hoặc toàn cục và có thể bị hoisted (đưa lên đầu phạm vi).
    • let có phạm vi trong block và không thể bị hoisted.
    • const tương tự let, nhưng không thể thay đổi giá trị sau khi đã gán.

1.2. Kiểu dữ liệu cơ bản

  • Primitive Types:
    • String: Chuỗi ký tự, ví dụ "Hello, World!".
    • Number: Bao gồm cả số nguyên và số thập phân, ví dụ 42, 3.14.
    • Boolean: Chỉ có hai giá trị true hoặc false.
    • Null: Đại diện cho giá trị rỗng hoặc không tồn tại.
    • Undefined: Đại diện cho một biến chưa được gán giá trị.
    • Symbol: Được sử dụng để tạo ra giá trị duy nhất, thường được dùng làm khóa trong object.
  • Reference Types:
    • Object: Tập hợp các cặp key-value, ví dụ {name: "John", age: 30}.
    • Array: Danh sách các phần tử được đánh số thứ tự, ví dụ [1, 2, 3].
    • Function: Một khối mã có thể được gọi bằng tên của nó.

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

  • Ép kiểu thủ công: Sử dụng các hàm như Number(), String(), Boolean() để chuyển đổi giữa các kiểu dữ liệu.
  • Chuyển đổi tự động: JavaScript tự động chuyển đổi giữa các kiểu dữ liệu trong một số ngữ cảnh, như khi sử dụng toán tử + giữa số và chuỗi.

1.4. Kiểm tra kiểu dữ liệu

  • typeof: Trả về kiểu của một biến, ví dụ typeof 42 trả về "number".
  • instanceof: Kiểm tra xem một object có thuộc về một constructor nào đó hay không, ví dụ arr instanceof Array trả về true nếu arr là một mảng.

2. Kỹ thuật nâng cao trong Biến và Kiểu dữ liệu của JavaScript

2.1. Shadowing và Hoisting

  • Shadowing: Khi một biến được khai báo trong phạm vi con có cùng tên với một biến trong phạm vi cha, biến trong phạm vi con sẽ che khuất biến trong phạm vi cha.
  • Hoisting: Hiện tượng khai báo biến với var được đưa lên đầu phạm vi trước khi mã được thực thi, tuy nhiên với let và const, biến sẽ không thể sử dụng trước khi được khai báo.

2.2. Destructuring (Phân rã)

  • Array Destructuring: Giúp truy xuất các phần tử của mảng và gán chúng cho các biến.
const [first, second] = [1, 2, 3];
console.log(first); // 1
console.log(second); // 2
  • Object Destructuring: Truy xuất các giá trị từ object và gán chúng cho các biến.
const {name, age} = {name: "John", age: 30};
console.log(name); // John
console.log(age); // 30

2.3. Spread và Rest Operators

  • Spread (...): Giúp sao chép các phần tử của mảng hoặc các thuộc tính của object.
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]
  • Rest (...): Giúp gom các phần tử còn lại vào một mảng.
const [first, ...rest] = [1, 2, 3, 4];
console.log(rest); // [2, 3, 4]

2.4. Template Literals

  • Chuỗi mẫu: Sử dụng dấu backticks `` để tạo chuỗi có thể chứa biểu thức nhúng.
const name = "John";
const message = `Hello, ${name}!`;
console.log(message); // Hello, John!

2.5. Truy cập và gán giá trị cho thuộc tính động của Object

  • Computed Property Names: Cho phép sử dụng biểu thức để đặt tên thuộc tính khi khai báo object.
const key = 'name';
const obj = {
  [key]: 'John'
};
console.log(obj.name); // John

2.6. Immutable Variables (Biến không thay đổi)

  • Object.freeze(): Ngăn không cho thay đổi các thuộc tính của một object.
const obj = Object.freeze({name: "John"});
obj.name = "Doe"; // Không có tác dụng, obj vẫn là {name: "John"

Những kỹ thuật này sẽ giúp sinh viên nắm vững từ cơ bản đến nâng cao, chuẩn bị tốt cho việc lập trình và giải quyết các vấn đề phức tạp trong JavaScript.

Bài viết liên quan

Làm quen với VueJS

26-10-2024 Admin
42 views + likes

Nếu bạn mới bắt đầu học lập trình front-end, thì Vue.js là một gợi ý không thể bỏ qua vì cách tiếp cận và sử dụng rất dễ dàng.

Lý thuyết về Cookie & Session & Localstorage

18-10-2024 Admin
45 views + likes

Cookie thích hợp cho việc lưu trữ thông tin nhỏ và ngắn hạn, Session là lựa chọn tốt để lưu trữ thông tin bảo mật như phiên làm việc

Network request trong JS

10-10-2024 Admin
50 views + likes

Network request trong JS

Xử lý bất đồng bộ với callback, promise, và async/await trong JavaScript

27-09-2024 Admin
67 views + likes

Bất đồng bộ là một khái niệm quan trọng trong lập trình, đặc biệt là trong các ứng dụng web và xử lý tác vụ như tải dữ liệu từ máy chủ, đọc file từ hệ thống

Cài đặt php 8.2 cho ubuntu

24-09-2024 Admin
56 views + likes

Để cài đặt PHP 8.2 trên Ubuntu, bạn có thể làm theo các bước sau: