🔵 Phần 3: Kiến thức Nâng Cao – ES6+ và Tối ưu

Dưới đây là đáp án chi tiết cho phần 🔵 Phần 3: Kiến thức Nâng Cao – ES6+ và Tối ưu:

---

1. Destructuring là gì? Lấy ví dụ với object và array.

• Destructuring là cú pháp giúp tách giá trị từ array hoặc object ra biến một cách nhanh chóng.

Với object:

const user = { name: 'Tài', age: 25 };
const { name, age } = user;

Với array:

const arr = [1, 2, 3];
const [a, b] = arr;

---

2. Spread và Rest operator khác nhau như thế nào?

Toán tử	Mục đích	Ví dụ
...spread	Trích xuất phần tử	[...arr1, ...arr2]
...rest	Thu gọn phần còn lại	function(...args) {}

const arr = [1, 2, 3];
const newArr = [...arr, 4]; // spread

function sum(...nums) {     // rest
  return nums.reduce((a, b) => a + b);
}

---

3. Template literals (template strings) và cách sử dụng

• Là cú pháp mới với dấu backtick (`) giúp chèn biến, viết chuỗi nhiều dòng dễ dàng.

const name = 'Tài';
const greet = `Hello, ${name}!
Welcome to JS.`;

---

4. Các kiểu import/export trong JavaScript module là gì?

Kiểu	Cú pháp
Named export	export function a() {}
Default export	export default function() {}
Import named	import { a } from './file.js'
Import default	import abc from './file.js'

---

5. Set và Map là gì? Khác biệt so với Array/Object?

Cấu trúc	Đặc điểm	So với Array/Object
Set	Tập hợp giá trị duy nhất	Không có key, loại bỏ trùng lặp
Map	Cặp key-value, key có thể là object	Linh hoạt hơn object (key không giới hạn)

const set = new Set([1, 2, 2]); // => Set(2) {1, 2}
const map = new Map();
map.set('a', 1).set({}, 2);

---

6. Optional chaining và nullish coalescing (?., ??) là gì?

• Optional chaining (?.): giúp truy cập sâu mà không bị lỗi nếu thuộc tính không tồn tại.

• Nullish coalescing (??): trả về vế phải chỉ khi vế trái là null hoặc undefined.

const user = {};
console.log(user.address?.city); // undefined, không lỗi

const val = null ?? 'default';   // => 'default'

---

7. Event loop và call stack trong JavaScript là gì?

• Call stack: nơi chứa các hàm đang thực thi (ngăn xếp).

• Event loop: kiểm tra stack trống để đưa các tác vụ async (callback, promise) từ queue/microtask vào stack.

🔁 Quy trình:

Call Stack trống? → Event loop đẩy từ queue → Stack

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);
// Output: 1 → 3 → 2

---

8. Debounce và Throttle khác nhau như thế nào? Viết ví dụ đơn giản.

Kỹ thuật	Mô tả	Dùng khi
Debounce	Chỉ chạy sau khi ngừng gọi 1 khoảng thời gian	Tìm kiếm gợi ý khi nhập liệu
Throttle	Giới hạn tần suất gọi hàm	Cuộn trang, resize cửa sổ, scroll event

Debounce:

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

Throttle:

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

---

9. Deep clone và shallow clone là gì? Cách để clone object trong JS?

• Shallow clone: clone cấp 1 (object con vẫn tham chiếu).

• Deep clone: clone tất cả các cấp, không còn tham chiếu chung.

Shallow clone:

const copy = { ...original };

Deep clone:

const deep = JSON.parse(JSON.stringify(obj)); // đơn giản nhưng không clone được function, date

// Hoặc dùng thư viện:
import _ from 'lodash';
const deepCopy = _.cloneDeep(obj);

---

10. Memory leak là gì? Làm sao để tránh trong JavaScript?

• Memory leak: bộ nhớ không còn dùng nhưng không được giải phóng → gây chậm hệ thống.

• Nguyên nhân phổ biến:

  • Biến global không giải phóng

  • Listener không được remove

  • Closure giữ tham chiếu không cần thiết

Cách tránh:

• Hủy listener khi không dùng:

element.removeEventListener('click', handler);

• Tránh giữ tham chiếu lâu trong closure.

• Sử dụng WeakMap, WeakSet cho caching.

---