10 Mẹo JavaScript Mọi Lập Trình Viên Cần Biết

JavaScript là nền tảng của phát triển web hiện đại, nhưng ngay cả những lập trình viên có kinh nghiệm cũng có thể bỏ qua những tính năng tinh tế giúp mã hóa nhanh hơn, sạch hơn và hiệu quả hơn. Trong bài viết này, tôi sẽ chia sẻ 10 mẹo JavaScript thực tiễn có thể giúp bạn nâng cao kỹ năng của mình.

1. Sử Dụng const và let Thay Vì var

var có phạm vi hàm, điều này có thể dẫn đến hành vi không mong muốn. Hãy ưu tiên let cho những biến có thể thay đổi và const cho các hằng số.

const name = "Prasoon"; // không thể gán lại
let age = 17;            // có thể gán lại

Việc này giúp giảm thiểu lỗi và làm cho mã của bạn trở nên dễ dự đoán hơn.

2. Tham Số Mặc Định

Bạn không cần kiểm tra undefined một cách thủ công nữa. Hãy sử dụng tham số mặc định.

function greet(name = "Khách") {
  console.log(`Xin chào, ${name}!`);
}
greet(); // Xin chào, Khách!

3. Template Literals

Ghép chuỗi bằng + đã trở nên lỗi thời. Template literals sạch hơn và cho phép chuỗi đa dòng.

const user = "Alice";
console.log(`Xin chào, ${user}! Chào mừng đến với JavaScript.`);

4. Destructuring Objects và Arrays

Destructuring giúp bạn trích xuất giá trị dễ dàng hơn.

const user = { name: "Bob", age: 20 };
const { name, age } = user;
console.log(name, age); // Bob 20

const colors = ["red", "green"];
const [first, second] = colors;
console.log(first, second); // red green

5. Hàm Mũi Tên (Arrow Functions)

Hàm mũi tên ngắn gọn và không ràng buộc this của riêng nó, làm cho chúng trở nên hoàn hảo cho các callback.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

6. Sử Dụng && và || để Rút Gọn

Thay vì sử dụng câu lệnh if, bạn có thể sử dụng toán tử logic cho các điều kiện đơn giản hơn.

const user = null;
console.log(user && user.name); // null
console.log(user || "Khách");   // Khách

7. Toán Tử Spread

Toán tử spread (...) giúp sao chép mảng/đối tượng và hợp nhất một cách dễ dàng.

const arr1 = [1, 2];
const arr2 = [3, 4];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4]

8. Optional Chaining

Truy cập các thuộc tính của đối tượng lồng nhau một cách an toàn mà không cần kiểm tra từng cấp độ.

const user = { profile: { name: "Alice" } };
console.log(user.profile?.name);       // Alice
console.log(user.contact?.email);      // undefined

9. for…of cho Mảng

Sử dụng for…of thay vì vòng lặp for cho việc lặp qua mảng một cách sạch sẽ hơn.

const colors = ["red", "green", "blue"];
for (const color of colors) {
  console.log(color);
}

10. Debounce Các Hàm Tốn Tài Nguyên

Tránh tác động đến hiệu suất bằng cách debounce các hàm như scroll hoặc input handlers.

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleScroll = debounce(() => console.log("Cuộn trang!"), 300);
window.addEventListener("scroll", handleScroll);

Mẹo Thêm:

Luôn giữ cho mã của bạn dễ đọc. JavaScript rất mạnh mẽ, nhưng mã lộn xộn rất khó bảo trì. Các công cụ như ESLint và Prettier có thể giúp bạn thực thi các thực tiễn tốt nhất.

JavaScript có rất nhiều mẹo và thực tiễn tốt nhất. Việc làm chủ chúng không chỉ giúp bạn nhanh hơn mà còn cho phép bạn viết mã sạch hơn, an toàn hơn và hiệu quả hơn.

Bạn đã sử dụng mẹo nào trong số này chưa? Hay bạn có mẹo JavaScript yêu thích nào khác? Chia sẻ trong phần bình luận nhé!