JavaScript là một ngôn ngữ mạnh mẽ và không ngừng phát triển, mang đến nhiều tính năng nâng cao giúp tối ưu hóa hiệu suất và cải thiện chất lượng mã nguồn. Dù bạn là một lập trình viên dày dạn kinh nghiệm hay chỉ đơn giản muốn nâng cao kỹ năng của mình, việc nắm vững các kỹ thuật nâng cao trong JavaScript sẽ giúp bạn viết code hiệu quả, dễ bảo trì và tối ưu hơn.

Trong bài viết này, hãy cùng VietnamWorks inTECH khám phá 20 thủ thuật JavaScript nâng cao giúp bạn làm việc thông minh hơn.

1. Destructuring Assignment (Phân rã biến)

Destructuring assignment là một tính năng mạnh mẽ cho phép bạn trích xuất giá trị từ mảng hoặc thuộc tính từ object vào các biến riêng lẻ. Điều này giúp mã nguồn của bạn dễ đọc và gọn gàng hơn.

const [first, second] = [10, 20];
const { name, age } = { name: 'Alice', age: 30 };

2. Default Parameters (Tham số mặc định)

Tham số mặc định cho phép bạn đặt giá trị mặc định cho các đối số của hàm, giúp hàm linh hoạt và dễ sử dụng hơn.

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}
greet(); // Output: Hello, Guest!

3. Template Literals (Chuỗi mẫu)

Template literals giúp bạn nhúng biểu thức vào chuỗi một cách dễ dàng, giúp việc nối chuỗi trở nên trực quan hơn.

const name = 'Bob';
console.log(`Hello, ${name}!`);

4. Arrow Functions (Hàm mũi tên)

Arrow functions cung cấp cú pháp ngắn gọn hơn để viết biểu thức hàm và tự động ràng buộc this với phạm vi bao quanh nó.

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

5. Spread và Rest Operators

Toán tử spread (...) giúp bạn mở rộng một iterable (như mảng) thành các phần tử riêng lẻ, trong khi toán tử rest thu thập nhiều phần tử vào một mảng.

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

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}

6. Promises và Async/Await

Promises và cú pháp async/await giúp việc viết và hiểu mã bất đồng bộ dễ dàng hơn.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
}

7. Optional Chaining (Chuỗi truy xuất tùy chọn)

Optional chaining (?.) giúp bạn truy cập các thuộc tính lồng nhau một cách an toàn mà không cần kiểm tra từng cấp độ.

const user = { name: 'Alice', address: { city: 'Wonderland' } };
const city = user?.address?.city;

8. Nullish Coalescing (Toán tử hợp nhất null)

Toán tử hợp nhất null (??) cung cấp giá trị mặc định khi gặp null hoặc undefined.

const value = null ?? 'default';
console.log(value); // Output: default

9. Dynamic Imports (Nhập module động)

Nhập module động cho phép bạn tải module theo yêu cầu, giúp cải thiện hiệu suất bằng cách tách nhỏ mã nguồn.

import('./module.js').then(module => {
  module.doSomething();
});

10. Proxy Objects (Đối tượng Proxy)

Proxy cho phép bạn tạo các đối tượng có hành vi tùy chỉnh đối với các thao tác cơ bản (ví dụ: truy xuất thuộc tính, gán giá trị).

const handler = {
  get: (obj, prop) => {
    if (prop in obj) {
      return obj[prop];
    } else {
      return 'Property not found';
    }
  }
};

const proxy = new Proxy({ name: 'Alice' }, handler);
console.log(proxy.name); // Output: Alice
console.log(proxy.age);  // Output: Property not found

11. Memoization (Ghi nhớ kết quả)

Memoization là một kỹ thuật tối ưu hóa các hàm tốn nhiều tài nguyên bằng cách lưu trữ kết quả của chúng để tránh tính toán lại.

function memoize(fn) {
  const cache = {};
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      return cache[key];
    } else {
      const result = fn(...args);
      cache[key] = result;
      return result;
    }
  };
}

12. Currying (Hàm Curry)

Currying là một kỹ thuật lập trình hàm, trong đó một hàm có nhiều tham số được chuyển đổi thành một chuỗi các hàm chỉ nhận một tham số mỗi lần.

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function (...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

13. Higher-Order Functions (Hàm bậc cao)

Hàm bậc cao là các hàm có thể nhận hàm khác làm đối số hoặc trả về một hàm khác.

function higherOrder(fn) {
  return function (...args) {
    console.log('Before function call');
    const result = fn(...args);
    console.log('After function call');
    return result;
  };
}

14. Event Delegation (Ủy quyền sự kiện)

Ủy quyền sự kiện là một kỹ thuật giúp xử lý sự kiện hiệu quả bằng cách thêm một trình nghe sự kiện vào phần tử cha thay vì từng phần tử con.

document.querySelector('#parent').addEventListener('click', function (event) {
  if (event.target.tagName === 'BUTTON') {
    console.log('Button clicked:', event.target.textContent);
  }
});

15. Debouncing và Throttling

Debouncing và throttling là các kỹ thuật giúp kiểm soát tần suất một hàm được gọi, rất hữu ích để tối ưu hiệu suất trong các tình huống như sự kiện cuộn (scroll) hoặc thay đổi đầu vào (input).

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

function throttle(fn, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      fn(...args);
      inThrottle = true;
      setTimeout(() => (inThrottle = false), limit);
    }
  };
}

16. Custom Hooks trong React

Custom hooks trong React cho phép bạn đóng gói và tái sử dụng logic có trạng thái giữa các component.

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = React.useState(() => {
    const item = window.localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  const setValue = value => {
    setStoredValue(value);
    window.localStorage.setItem(key, JSON.stringify(value));
  };

  return [storedValue, setValue];
}

17. Web Workers

Web Workers cho phép bạn chạy các tập lệnh trong luồng nền (background thread), giúp giao diện người dùng luôn mượt mà và phản hồi nhanh.

const worker = new Worker('worker.js');
worker.postMessage('Hello, Worker!');
worker.onmessage = function (event) {
  console.log('Message from worker:', event.data);
};

18. Service Workers

Service Workers hoạt động như các proxy mạng, giúp tạo trải nghiệm ngoại tuyến hiệu quả và cải thiện hiệu suất tải trang.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
    console.log('Service Worker registered with scope:', registration.scope);
  });
}

19. Intersection Observer API

Intersection Observer API cung cấp cách quan sát thay đổi của phần tử mục tiêu khi nó xuất hiện hoặc biến mất trong khung nhìn (viewport) của tài liệu.

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log('Element is in view:', entry.target);
    }
  });
});

observer.observe(document.querySelector('#target'));

20. Custom Elements và Shadow DOM

Custom Elements và Shadow DOM cho phép bạn tạo các thành phần có thể tái sử dụng với kiểu dáng và hành vi được đóng gói độc lập.

class MyElement extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `<style>:host { color: blue; }</style><p>Hello, World!</p>`;
  }
}

customElements.define('my-element', MyElement);

Lời kết

JavaScript không chỉ là một ngôn ngữ phổ biến mà còn liên tục được cập nhật với những tính năng hữu ích giúp cải thiện hiệu suất và trải nghiệm lập trình. 20 thủ thuật trên không chỉ giúp bạn tối ưu code mà còn mở ra nhiều cơ hội sáng tạo trong quá trình phát triển ứng dụng.

VietnamWorks inTECH hy vọng sau bài viết này, bạn sẽ có thêm những công cụ hữu ích để nâng cao trình độ JavaScript của mình.

VietnamWorks inTECH