20 Thủ Thuật JavaScript Cực Hay Cho Tất Cả Lập Trình Viên

JavaScript là một ngôn ngữ lập trình mạnh mẽ và linh hoạt, được sử dụng rộng rãi trong phát triển web. Việc nắm vững một số thủ thuật hay giúp lập trình viên viết mã sạch hơn, hiệu quả hơn và dễ bảo trì hơn. Dưới đây là 20 thủ thuật JavaScript thực tiễn mà bạn nên áp dụng để tối ưu hóa quy trình phát triển phần mềm của mình.

1. Phân rã và Đổi tên Biến Trong Một Bước

Bạn có thể đổi tên biến ngay trong quá trình phân rã đối tượng, giúp xử lý các xung đột tên một cách hiệu quả.

const user = { name: 'Alice', age: 25 };
const { name: userName, age: userAge } = user;
console.log(userName); // Alice
console.log(userAge);  // 25

2. Sử Dụng Chuỗi Tùy Chọn Với Gọi Hàm

Chuỗi tùy chọn giúp bạn bảo đảm rằng hàm tồn tại trước khi gọi nó, ngăn ngừa lỗi khi hàm không được định nghĩa.

const user = {
  getName: () => 'Alice',
};
console.log(user.getName?.());   // Alice
console.log(user.getAge?.());    // undefined

3. Gán Giá Trị Mặc Định Sử Dụng Toán Tử ||=

Thay vì gán giá trị mặc định bằng cách kiểm tra từng trường hợp, bạn có thể sử dụng toán tử gán OR logic (||=).

let count;
count ||= 10;
console.log(count); // 10

4. Chuyển Đổi NodeList Thành Mảng Với Toán Tử Spread

Sử dụng toán tử spread để chuyển đổi nhanh chóng NodeList thành mảng thực tế để làm việc.

const divs = document.querySelectorAll('div');
const divArray = [...divs];
console.log(Array.isArray(divArray)); // true

5. Gán Giá Trị Mặc Định Khi Phân Rã Mảng/Đối Tượng

Khi bạn phân rã đối tượng mà một số thuộc tính có thể thiếu, việc gán giá trị mặc định giúp tránh được lỗi undefined.

const user = { name: 'Alice' };
const { name, age = 25 } = user;
console.log(age); // 25

6. Loại Bỏ Các Giá Trị Falsy Khỏi Mảng

Sử dụng phương thức filter() để loại bỏ những giá trị falsy (như 0, null, undefined, false) khỏi mảng.

const arr = [0, 'hello', null, 42, false, 'world'];
const filtered = arr.filter(Boolean);
console.log(filtered); // ["hello", 42, "world"]

7. Sắp Xếp Mảng Đối Tượng Theo Thuộc Tính

Để dễ dàng sắp xếp mảng chứa các đối tượng, bạn có thể sử dụng phương thức sort() dựa trên một thuộc tính cụ thể.

const users = [{ name: 'Alice', age: 25 }, { name: 'Bob', age: 20 }];
users.sort((a, b) => a.age - b.age);
console.log(users); // [{ name: 'Bob', age: 20 }, { name: 'Alice', age: 25 }]

8. Tải Động Module Với Lazy Loading

Khả năng import động giúp bạn chỉ tải các module khi cần thiết, từ đó giảm thời gian tải ban đầu của ứng dụng.

const loadModule = async () => {
  const module = await import('./myModule.js');
  module.default(); // Gọi hàm xuất mặc định
};
loadModule();

9. Tham Số Mặc Định Khi Phân Rã Đối Tượng

Khi định nghĩa hàm, bạn có thể áp dụng phân rã và đặt giá trị mặc định cho các thuộc tính để làm cho mã dễ đọc hơn.

function createUser({ name = 'Guest', age = 18 } = {}) {
  console.log(name, age);
}
createUser();               // Guest 18
createUser({ name: 'Alice' }); // Alice 18

10. Sử Dụng Object.assign() Để Sao Chép Nông Đối Tượng

Object.assign() rất tiện lợi trong việc sao chép nông đối tượng mà không làm thay đổi đối tượng gốc.

const original = { a: 1, b: 2 };
const copy = Object.assign({}, original);
copy.a = 3;
console.log(original.a); // 1 (không thay đổi)

11. Tăng Hiệu Suất Với Ghi Nhớ Hàm

Thủ thuật ghi nhớ (memoization) giúp lưu trữ kết quả của hàm tốn kém dựa trên đối số, rất hữu ích cho các hàm tính toán nặng.

const memoize = (fn) => {
  const cache = {};
  return (...args) => {
    const key = JSON.stringify(args);
    if (!cache[key]) {
      cache[key] = fn(...args);
    }
    return cache[key];
  };
};
const slowSquare = (n) => n * n;
const memoizedSquare = memoize(slowSquare);
console.log(memoizedSquare(4)); // 16 (cached on second call)

12. Nhóm Các Mục Mảng Bằng reduce()

Giúp bạn nhóm các mục trong mảng dựa trên một thuộc tính bằng cách sử dụng phương thức reduce().

const people = [
  { name: 'Alice', role: 'admin' },
  { name: 'Bob', role: 'user' },
  { name: 'Charlie', role: 'admin' },
];
const grouped = people.reduce((acc, person) => {
  (acc[person.role] = acc[person.role] || []).push(person);
  return acc;
}, {});
console.log(grouped);
// { admin: [{ name: 'Alice' }, { name: 'Charlie' }], user: [{ name: 'Bob' }] }

13. Làm Phẳng Mảng Lồng Nhau Với Array.flat()

Đơn giản hóa việc làm phẳng mảng lồng nhau nhiều cấp bằng Array.flat().

const nested = [1, [2, [3, [4]]]];
console.log(nested.flat(Infinity)); // [1, 2, 3, 4]

14. Chuyển Đổi Giá Trị Boolean Dễ Dàng

Bạn có thể chuyển đổi giá trị boolean bằng cách sử dụng toán tử NOT (!).

let isVisible = false;
isVisible = !isVisible;
console.log(isVisible); // true

15. Hợp Nhất Nhiều Mảng Bằng concat()

Sử dụng concat() để kết hợp nhiều mảng trong một câu lệnh duy nhất, đơn giản và dễ hiểu.

const arr1 = [1, 2];
const arr2 = [3, 4];
const arr3 = [5, 6];
const merged = arr1.concat(arr2, arr3);
console.log(merged); // [1, 2, 3, 4, 5, 6]

16. Sử Dụng for...of Để Lặp Qua Mảng Không Đồng Bộ

Khi lặp qua các promise, sử dụng vòng lặp for...of cùng với await để đảm bảo rằng mỗi promise được giải quyết trước khi tiếp tục.

const fetchData = async () => {
  const urls = ['url1', 'url2'];
  for (const url of urls) {
    const response = await fetch(url);
    console.log(await response.json());
  }
};

17. Lấy Phần Tử Cuối Cùng Của Mảng Dễ Dàng

Truy xuất phần tử cuối cùng trong mảng mà không cần biết chiều dài bằng phương thức at().

const arr = [1, 2, 3, 4];
console.log(arr.at(-1)); // 4

18. Định Dạng Ngày Tháng Với Intl

Intl.DateTimeFormat cung cấp một cách mạnh mẽ để định dạng ngày tháng theo các định dạng locale khác nhau.

const date = new Date();
const formatted = new Intl.DateTimeFormat('en-GB', {
  dateStyle: 'full',
}).format(date);
console.log(formatted); // ví dụ: "Monday, 25 October 2021"

19. Làm Tròn Số Với Math.round() Kết Hợp Template Literals

Trực tiếp định dạng số đã làm tròn với template literals để tạo ra kết quả đẹp mắt.

const num = 3.14159;
console.log(`${Math.round(num * 100) / 100}`); // 3.14

20. Chuyển Đổi Đối Tượng Giống Mảng Sang Mảng Với Array.from()

Sử dụng Array.from() để chuyển đổi các đối tượng giống mảng, như arguments, thành một mảng thực sự.

function example() {
  const argsArray = Array.from(arguments);
  console.log(argsArray);
}
example(1, 2, 3); // [1, 2, 3]

Mỗi thủ thuật trên sẽ giúp bạn cải thiện quy trình làm việc và viết mã hiệu quả hơn. Hãy tích hợp chúng vào công việc hàng ngày để tối ưu hóa mã nguồn và nâng cao năng suất của bạn trong việc phát triển phần mềm. Cảm ơn bạn đã theo dõi bài viết này.
source: viblo