20 bí kíp JavaScript mà mọi lập trình vên đều nên biết

JavaScript là một ngôn ngữ mạnh mẽ và linh hoạt, nhưng nếu không hiểu rõ, bạn có thể gặp phải rất nhiều bất ngờ. Dưới đây là 20 bí kíp hữu ích mà mọi lập trình viên JavaScript nên biết để giúp mã nguồn của bạn trở nên sạch sẽ, dễ đọc và hiệu quả hơn.

1. Dùng === thay vì ==

• === so sánh cả giá trị và kiểu dữ liệu, giúp tránh lỗi do việc chuyển đổi kiểu ngầm định.

console.log(5 === '5'); // false
console.log(5 == '5'); // true

2. Dùng const và let thay vì var

• var có phạm vi trong hàm, dễ gây lỗi không mong muốn. const và let giúp mã nguồn an toàn và dễ hiểu hơn.

3. Phân tách đối tượng (Object Destructuring)

• Phân tách đối tượng giúp bạn dễ dàng và nhanh chóng lấy các thuộc tính của đối tượng.

const user = { name: 'Tuan', age: 25 };
const { name, age } = user;

4. Phân tách mảng (Array Destructuring)

• Phân tách mảng là một cách nhanh chóng để gán giá trị mảng cho các biến.

const [first, second] = [10, 20];

5. Sử dụng Arrow Function

• Arrow function giúp mã nguồn ngắn gọn và dễ đọc hơn, đồng thời cung cấp một this cố định từ phạm vi bên ngoài.

const add = (a, b) => a + b;

6. Sử dụng Template Literals

• Template literals cho phép bạn dễ dàng chèn biến vào trong chuỗi.

const name = 'Tuan';
console.log(`Xin chao, ${name}!`);

7. Nullish Coalescing Operator (??)

• Sử dụng ?? để thiết lập giá trị mặc định khi giá trị là null hoặc undefined.

const value = null;
const defaultValue = value ?? 'default';

8. Optional Chaining (?.)

• Optional chaining giúp tránh lỗi khi truy cập các thuộc tính không tồn tại của đối tượng.

const user = {};
console.log(user?.address?.city); // undefined

9. Sử dụng Default Parameters

• Đặt giá trị mặc định cho tham số giúp hàm xử lý tốt hơn khi thiếu dữ liệu.

function greet(name = 'Guest') { return `Xin chao, ${name}`;
}

10. Sử dụng Spread Operator

• Spread operator giúp sao chép và kết hợp các đối tượng hoặc mảng một cách nhanh chóng.

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

11. Sử dụng Rest Parameters

• Rest parameters thu thập các tham số còn lại thành một mảng.

function add(...numbers) { return numbers.reduce((a, b) => a + b);
}

12. Chuyển đổi NodeList thành Mảng với Array.from()

• Dùng Array.from() để chuyển một NodeList từ DOM thành mảng.

const elements = Array.from(document.querySelectorAll('p'));

13. Xử lý mã bất đồng bộ với async / await

• async và await giúp mã bất đồng bộ dễ đọc hơn so với callback hay chuỗi then.

async function fetchData() { const response = await fetch('https://api.example.com/data'); const data = await response.json();
}

14. Sử dụng Promise.all cho nhiều Promise

• Promise.all cho phép bạn thực thi nhiều promise cùng lúc và nhận kết quả khi tất cả hoàn thành.

const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);

15. Sử dụng Array.map để xử lý dữ liệu mảng

• map() tạo một mảng mới bằng cách thực hiện một hàm trên mỗi phần tử.

const numbers = [1, 2, 3];
const doubled = numbers.map(num => num * 2);

16. Lọc mảng với Array.filter

• filter() tạo một mảng mới với các phần tử thỏa mãn điều kiện.

const numbers = [1, 2, 3, 4];
const evens = numbers.filter(num => num % 2 === 0);

17. Tính toán dữ liệu với Array.reduce

• reduce() giúp cộng dồn, đếm hoặc xử lý dữ liệu theo logic tùy chỉnh.

const numbers = [1, 2, 3];
const sum = numbers.reduce((acc, num) => acc + num, 0);

18. Sắp xếp mảng với Array.sort

• sort() sắp xếp mảng tại chỗ theo thứ tự tùy chỉnh.

const numbers = [3, 1, 2];
numbers.sort((a, b) => a - b);

19. Xóa phần tử khỏi mảng với splice hoặc filter

• splice() thay đổi mảng gốc, trong khi filter() tạo ra một mảng mới mà không thay đổi mảng gốc.

const numbers = [1, 2, 3];
numbers.splice(1, 1); // Xóa phần tử thứ hai
const newArray = numbers.filter(num => num !== 2); // Không thay đổi mảng gốc

20. Dùng console.table để debug dễ dàng hơn

• console.table() giúp hiển thị dữ liệu dễ đọc hơn theo dạng bảng, đặc biệt là với các mảng và đối tượng phức tạp.

const users = [ { name: 'Hoang', age: 25 }, { name: 'Anh', age: 30 }
];
console.table(users);

JavaScript rất phong phú và cung cấp vô số cách để viết mã nguồn sạch sẽ, ngắn gọn và hiệu quả. Hãy thử áp dụng những bí kíp này vào dự án của bạn và xem sự khác biệt trong quá trình phát triển.