5 Mẹo JavaScript Cơ Bản Nhưng Cực Kỳ Hữu Ích Giúp Code Sạch Và Thông Minh Hơn

JavaScript là ngôn ngữ nền tảng của phát triển web hiện đại. Dù bạn mới bắt đầu bước chân vào thế giới lập trình hay đã là một developer có kinh nghiệm, việc tận dụng tối đa các cú pháp tinh gọn và thông minh sẽ giúp mã nguồn của bạn trở nên gọn gàng, dễ bảo trì và hiệu quả hơn rất nhiều.

Hôm nay, hãy cùng DCSoftTech điểm qua 5 mẹo JavaScript cơ bản nhưng cực kỳ lợi hại mà bạn có thể áp dụng ngay vào dự án của mình nhé!

1. Optional Chaining (?.) – Nói Lời Vĩnh Biệt Với Lỗi Undefined

Khi làm việc với các đối tượng (object) lồng nhau sâu, việc gọi một thuộc tính không tồn tại thường dẫn đến lỗi kinh điển: Cannot read property '...' of undefined. Trước đây, chúng ta phải viết những đoạn kiểm tra rất dài dòng như user && user.address && user.address.city.

Giờ đây, với Optional Chaining, mọi thứ trở nên cực kỳ gọn gàng:

const user = {
  name: "DCSoftTech",
  // address chưa được định nghĩa
};

// Trả về undefined thay vì bắn lỗi ứng dụng
const city = user?.address?.city; 
console.log(city); // undefined

2. Nullish Coalescing Operator (??) – Gán Giá Trị Mặc Định An Toàn

Thông thường, khi cần gán giá trị mặc định, chúng ta hay dùng toán tử ||. Tuy nhiên, || sẽ coi các giá trị như 0, "" (chuỗi rỗng), hoặc false là falsy và gán nhầm giá trị mặc định.

Toán tử Nullish Coalescing (??) thông minh hơn vì nó chỉ kích hoạt khi giá trị bên trái là null hoặc undefined:

const userCount = 0;

// Dùng || sẽ vô tình lấy giá trị mặc định 10 vì 0 bị tính là falsy
const countWithOr = userCount || 10; // Kết quả: 10 (Sai ý định nếu thực sự có 0 user)

// Dùng ?? hoạt động chính xác
const countWithNullish = userCount ?? 10; 
console.log(countWithNullish); // Kết quả: 0

3. Destructuring Assignment (Phân Rã Dữ Liệu) – Tối Ưu Hóa Truy Cập Biến

Thay vì phải lặp đi lặp lại tên đối tượng khi lấy dữ liệu, Destructuring cho phép bạn trích xuất các thuộc tính của object hoặc phần tử của mảng ra các biến riêng biệt chỉ trong một dòng code.

const product = {
  id: 1,
  name: "Bàn phím cơ",
  price: 1500000,
  category: "Phụ kiện"
};

// Phân rã đối tượng
const { name, price } = product;
console.log(`${name} có giá ${price}đ`);

Kỹ thuật này cũng cực kỳ hữu ích khi bạn nhận props trong các hàm component của React.

4. Template Literals – Nối Chuỗi Mượt Mà Không Cần Dấu Cộng

Việc nối chuỗi bằng dấu + truyền thống dễ gây rối mắt và khó đọc khi chuỗi quá dài. Template Literals (sử dụng dấu huyền `) cho phép nhúng trực tiếp biểu thức và biến vào trong chuỗi một cách tự nhiên:

const name = "Lập trình viên";
const tech = "JavaScript";

// Cách cũ
console.log("Xin chào, " + name + "! Chào mừng bạn đến với thế giới " + tech + ".");

// Cách hiện đại với Template Literals
console.log(`Xin chào, ${name}! Chào mừng bạn đến với thế giới ${tech}.`);

5. Arrow Functions & Array Methods (map, filter) – Xử Lý Dữ Liệu Gọn Gàng

Kết hợp Arrow Functions với các hàm xử lý mảng tích hợp sẵn như map() và filter() giúp code của bạn mang phong cách lập trình hàm (functional programming) hiện đại, dễ đọc và ít lỗi hơn vòng lặp for thủ công.

const numbers = [1, 2, 3, 4, 5];

// Lọc số chẵn và nhân đôi chúng
const result = numbers
  .filter(n => n % 2 === 0)
  .map(n => n * 2);

console.log(result); // [4, 8]

Lời Kết

Những mẹo nhỏ trên tuy rất cơ bản nhưng lại là “vũ khí đắc lực” giúp bạn nâng cao chất lượng mã nguồn mỗi ngày. Hãy thử áp dụng chúng vào dự án tiếp theo của bạn nhé!

Đừng quên theo dõi website của DCSoftTech để cập nhật thêm nhiều bài viết chia sẻ kiến thức lập trình hữu ích khác.