Bài này nói về JavaScript mức senior cho phỏng vấn Vue và React: array method và mutation, promise, event loop, scope, closure, this, memory, và cancellation. Dành cho engineer đã ship UI, giờ cần giải thích cơ chế, không phải thuộc lòng API.

Đọc 1.1 trước (map/filter/reduce, promise, event loop, var/let/const). Người phỏng vấn hỏi event loop và async/await gần như mọi lần. Rồi đọc 1.2 về closure, this, prototype, và AbortController. Với mỗi topic, nêu rõ ràng buộc, chỗ gãy, và cách bạn chứng minh fix trong DevTools.

Tóm tắt: Hàm bậc cao nhận một hàm làm đối số, trả về một hàm, hoặc cả hai. map, filter, reduce, some, và find là các helper trên mảng mà bạn sẽ phải chọn.

Vì sao quan trọng: Trong bảng Vue 3 gắn vào rows, đồng nghiệp viết rows.sort(byName).filter(isActive).map(toView). Thứ tự gốc mất, child nhận rows qua prop lại mutate parent, và list 100k hàng bị giật. Bug nằm ở mutation và copy thừa, không phải “quên forEach”.

1. Cách hoạt động: map luôn trả mảng mới cùng độ dài. filter trả tập con. reduce gộp các phần tử thành một giá trị. some/find dừng sớm với boolean hoặc phần tử khớp đầu tiên.
2. forEach chỉ dành cho side effect (tác dụng phụ). Nó trả undefined, nên dùng với push để dựng mảng chỉ là map viết kém.
3. sort, reverse, và splice mutate mảng gốc và trả cùng reference. toSorted / toReversed / toSpliced copy trước.
4. Proxy của Vue 3 đã track index và length, nên push tại chỗ trên state bạn phụ trách vừa rẻ vừa đúng. React so identity, nên sort tại chỗ rồi setRows(rows) không làm gì.

const rows = [
  { id: 1, name: 'Ada', active: true, qty: 2 },
  { id: 2, name: 'Lin', active: false, qty: 5 },
  { id: 3, name: 'Ada', active: true, qty: 0 },
]

const names = rows.map((r) => r.name)         // ['Ada', 'Lin', 'Ada']
const live = rows.filter((r) => r.active)     // hai hàng
const hasZero = rows.some((r) => r.qty === 0) // true: không phải filter(Boolean)

// ❌ mutate rows và trả cùng reference
const broken = rows.sort((a, b) => a.name.localeCompare(b.name))
// broken === rows → true

// ✅ derived view: copy, rồi filter
const visible = rows
  .toSorted((a, b) => a.name.localeCompare(b.name))
  .filter((r) => r.active)

Điều gì xảy ra: map / filter / some đều trả giá trị mới và để rows yên. sort thì không: sau broken = rows.sort(...), broken === rows là true, nên thứ tự gốc đã mất. toSorted copy trước, đó là derived view an toàn cho computed Vue hoặc hàm render React.

Lỗi hay gặp

• Triệu chứng: bảng con làm xáo thứ tự parent. Nguyên nhân: sort / reverse trên prop. Cách xử lý: toSorted trong computed, đừng mutate prop.
• Triệu chứng: list React không cập nhật sau sort. Nguyên nhân: cùng identity mảng. Cách xử lý: setRows(rows.toSorted(cmp)).
• Triệu chứng: rows.filter(Boolean) làm mất ô 0 / '' hợp lệ. Nguyên nhân: truthiness, không phải emptiness. Cách xử lý: so với null / undefined tường minh.
• Triệu chứng: forEach + push vào mảng Pinia. Nguyên nhân: viết lại map và mutate store dùng chung. Cách xử lý: map ra mảng mới, rồi gán một lần.

Tóm tắt: Promise là object cho một giá trị tương lai. Nó pending, rồi fulfilled hoặc rejected. async / await là cú pháp trên promise, không phải runtime thứ hai.

Vì sao quan trọng: setup() của dashboard await getUser(), rồi await getPosts(user.id), rồi await getFlags(). Flags không phụ thuộc user. Một trong ba trả 500 và spinner không bao giờ tắt. Câu hỏi là chạy song song, chính sách lỗi, và catch rỗng sẽ vẽ ra gì.

1. Cách hoạt động: new Promise bắt đầu ở pending. resolve(value) thì fulfilled; reject(err) thì rejected. Promise fulfilled chạy .then; rejected chạy .catch. .finally luôn chạy.
2. Hàm async luôn trả về Promise. await tạm dừng hàm đó đến khi promise settle, rồi chạy tiếp trên một microtask. Nó không chặn event loop.
3. try/catch quanh await giống .catch trên promise. catch { console.error } rỗng trả undefined và trông như “không có data”.
4. await nối tiếp là waterfall. Call độc lập thì cho vào Promise.all. Chỉ waterfall khi data phụ thuộc thật, ví dụ posts cần user.id.

async function loadSlow(userId: string) {
  const user = await getUser(userId)
  const posts = await getPosts(user.id)
  const flags = await getFlags() // độc lập: tốn một round trip thừa
  return { user, posts, flags }
}

async function loadFast(userId: string) {
  const [user, flags] = await Promise.all([getUser(userId), getFlags()])
  const posts = await getPosts(user.id) // dependency thật
  return { user, posts, flags }
}

// chain .then cùng một ý:
getUser(id)
  .then((user) => Promise.all([user, getFlags(), getPosts(user.id)]))
  .catch((err) => {
    reportError(err)
    throw err
  })

Điều gì xảy ra: loadSlow chờ user, rồi posts, rồi flags: ba round trip nối tiếp. loadFast chạy user và flags cùng lúc; posts vẫn chờ user.id. Nếu getFlags reject, Promise.all reject cả nhóm. Chain .then là cùng một contract: settle một lần, một đường lỗi.

Lỗi hay gặp

• Triệu chứng: spinner mãi sau một lần 500. Nguyên nhân: Promise.all fail-fast mà không có error state trên UI. Cách xử lý: fail contract cho user thấy, hoặc dùng allSettled cho widget optional.
• Triệu chứng: UI hiện “không có hàng”. Nguyên nhân: catch { console.error } trả undefined. Cách xử lý: report lỗi, rồi throw hoặc gán error state tường minh.
• Triệu chứng: bị charge hai lần. Nguyên nhân: retry POST không idempotent. Cách xử lý: chỉ retry GET/PUT và 429/503, kèm idempotency key.
• Triệu chứng: vẫn ghi sau khi rời màn. Nguyên nhân: không abort. Cách xử lý: một AbortController mỗi màn, abort trong onScopeDispose.

Tóm tắt: JavaScript chạy một call stack. Khi stack trống, event loop rút hết hàng đợi microtask trước, rồi có thể paint, rồi lấy một macrotask (task) từ hàng đợi task.

Vì sao quan trọng: Bạn gán ref Vue rồi đọc ngay el.offsetHeight: nhận giá trị cũ. Hoặc vòng parse await dồn dập làm UI treo. Người phỏng vấn bắt đầu bằng puzzle A D C B, rồi hỏi vì sao có nextTick và vì sao trang không kịp paint.

1. Cách hoạt động: Call stack là các hàm đang chạy. console.log đồng bộ chạy ở đây. Không có gì khác xảy ra cho đến khi stack trống.
2. Hàng đợi microtask chứa job của Promise, queueMicrotask, MutationObserver, và flush scheduler của Vue. Sau khi stack trống, mọi microtask chạy trước paint hoặc macrotask kế.
3. Hàng đợi task (macrotask) chứa setTimeout, setInterval, I/O, và sự kiện input. Vòng lặp lấy một macrotask mỗi lượt, rồi lại rút hết microtask.
4. Render (style, layout, paint) có thể xảy ra sau microtask, trước macrotask kế.
5. Long task (tác vụ chạy > 50 ms) trên main thread (luồng chính) làm trễ input. INP (Interaction to Next Paint) là thời gian trang phản hồi bằng hình ảnh sau click hoặc phím.

Ẩn dụ: Call stack là đầu bếp đang làm xong món hiện tại. Microtask là giấy nhớ trên quầy, phải xong hết trước khi bày đĩa. Macrotask là phiếu mới từ cửa sổ. Paint là bày đĩa. Nếu bạn cứ thêm giấy nhớ, đĩa không bao giờ rời bếp. Đó là microtask starvation.

console.log('A')
setTimeout(() => console.log('B'), 0)      // macrotask
Promise.resolve().then(() => console.log('C')) // microtask
console.log('D')
// logs: A, D, C, B

rows.value = next
await nextTick() // flush của Vue là microtask. Layout có thể vẫn dirty.
const h = el.value?.offsetHeight // read này force layout, hãy gom các read

// Nhường input bằng macrotask, không phải vòng microtask.
async function parseChunks(chunks: string[]) {
  for (const chunk of chunks) {
    consume(JSON.parse(chunk))
    await new Promise((r) => setTimeout(r, 0))
  }
}

Điều gì xảy ra: A và D chạy trên stack. Callback Promise.then được xếp vào hàng microtask; setTimeout vào hàng macrotask. Sau D, vòng lặp rút hết microtask (C) trước timer (B). nextTick chờ flush của chính Vue, cũng là microtask, không chờ paint. setTimeout(0) là cách cắt parse dài để input còn chạy được.

Lỗi hay gặp

• Triệu chứng: el.offsetHeight cũ ngay sau khi ghi ref. Nguyên nhân: Vue chưa flush. Cách xử lý: await nextTick() trước khi đọc, và gom các lần đọc để tránh forced reflow.
• Triệu chứng: UI treo lúc parse, Performance hiện một task 200 ms. Nguyên nhân: vòng microtask hoặc parse đồng bộ. Cách xử lý: nhường bằng setTimeout(0) hoặc scheduler.yield().
• Triệu chứng: dùng setTimeout(0) để “fix timing Vue”. Nguyên nhân: bạn cần nextTick, cái chờ flush của Vue, không phải macrotask sau đó.
• Triệu chứng: await nextTick() rồi đo rồi ghi layout. Nguyên nhân: forced reflow. Cách xử lý: đọc hết layout, rồi mới ghi, hoặc dùng rAF.

Tóm tắt: var có phạm vi hàm và gán lại được. let có phạm vi block và gán lại được. const có phạm vi block và không gán lại được. Nó không freeze object.

Vì sao quan trọng: Bug cổ điển là for (var i = 0; i < 3; i++) setTimeout(() => console.log(i)) in ra 3, 3, 3. Người ta còn nhầm bug đó với await trong vòng lặp, vốn là lỗi khác. const không làm user.role = 'guest' thành bất hợp lệ.

1. Cách hoạt động: var dùng được trong cả hàm, kể cả phía trên dòng khai báo (khởi tạo là undefined). let và const sống trong khối { } nơi chúng được khai báo.
2. TDZ (Temporal Dead Zone) là khoảng từ lúc vào block đến khi let/const được khởi tạo. Đọc binding lúc đó thì throw ReferenceError, không phải undefined.
3. Gán lại (count = 1) đổi binding. Mutation (user.role = 'guest' hoặc arr.push) đổi object mà binding đang trỏ tới. const chỉ cấm gán lại.
4. Bug var + setTimeout là callback được lên lịch, dùng chung một i phạm vi hàm. await tuần tự trong for (var …) khác: mỗi vòng đều chờ.

// ❌ var có phạm vi hàm: mọi callback thấy i cuối
for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0)
}
// logs: 3, 3, 3  (không phải 0, 1, 2)

// await tuần tự KHÔNG mắc bug đó: mỗi bước đều chờ.
for (var j = 0; j < 3; j++) {
  await save(j) // chạy 0, rồi 1, rồi 2
}

// ✅ let tạo binding cho từng vòng
for (let k = 0; k < 3; k++) {
  setTimeout(() => console.log(k), 0)
}
// logs: 0, 1, 2

const user = { role: 'admin' }
user.role = 'guest' // hợp lệ: const là binding, không phải freeze

Điều gì xảy ra: Ba callback setTimeout chạy sau vòng lặp. Với var i chỉ có một i, đã là 3. Với let k mỗi vòng có k riêng. Vòng await save(j) tuần tự, nên dù var j vẫn in 0 rồi 1 rồi 2. user.role = 'guest' mutate object; binding const vẫn trỏ cùng object.

Lỗi hay gặp

• Triệu chứng: mọi timer đều log index cuối. Nguyên nhân: var kèm callback được lên lịch trong vòng (setTimeout, .then, event handler). Cách xử lý: let, hoặc truyền index như đối số.
• Triệu chứng: “const lẽ ra phải chặn push”. Nguyên nhân: const là binding. Cách xử lý: copy (toSorted, spread) nếu bạn cần mảng mới.
• Triệu chứng: list Vue không cập nhật sau destructure. Nguyên nhân: const { items } = props. Cách xử lý: toRefs(props).
• Triệu chứng: app crash lúc load với ReferenceError trong store. Nguyên nhân: TDZ do import vòng. Cách xử lý: cắt vòng; đừng “default biến thành undefined”.

Tóm tắt: Closure là hàm kèm các biến ở nơi nó được viết. Môi trường đó là lexical scope: hàm vẫn thấy các binding đó sau khi hàm ngoài đã return.

Vì sao quan trọng: Ô search vẫn fetch query trước. watch Vue log page của hôm qua. Helper debounce gửi args lần gọi đầu. Map ở module vẫn giữ export 20MB của user trước sau logout. Đó là closure stale và retainer, không phải thiếu createCounter.

1. Cách hoạt động: Lexical scope nghĩa là hàm tìm tên ở nơi nó được viết, không phải nơi được gọi. Hàm lồng nhau tạo chuỗi scope ra tới module.
2. Closure là object hàm đó kèm môi trường nó bắt được. Hàm trong vẫn đọc và ghi binding ngoài sau khi lần gọi ngoài đã kết thúc.
3. Nó giữ binding, không phải snapshot, trừ khi bạn copy một const lúc schedule. Lần ghi sau vào cùng binding hiện với mọi closure còn sống.
4. Closure stale là callback đã schedule vẫn thấy bản copy cũ, hoặc binding cũ bạn không còn muốn. Abort kèm “đọc giá trị mới bên trong hàm async” là cách xử lý thường gặp ở Vue.
5. Những gì closure giữ thì garbage collection chưa thu được đến khi hàm được thả. Singleton ở module là retainer sống lâu nhất.

function debounceLatest<T extends unknown[]>(fn: (...args: T) => void, ms: number) {
  let timer = 0
  let last: T
  return (...args: T) => {
    last = args // giữ args mới nhất, không phải lần gọi #1
    clearTimeout(timer)
    timer = window.setTimeout(() => fn(...last), ms)
  }
}

watch(
  () => props.query,
  async (query, _prev, onCleanup) => {
    const ac = new AbortController()
    onCleanup(() => ac.abort())
    const page = currentPage.value // đọc sau mỗi lần đổi
    results.value = await search(query, page, { signal: ac.signal })
  },
)

Điều gì xảy ra: debounceLatest lưu last trên wrapper, nên timeout luôn chạy với args mới nhất. watch abort fetch trước và đọc currentPage.value bên trong callback, nên lần lật page sau không kẹt ở page đầu. Không có onCleanup, search đầu vẫn có thể ghi results.

Lỗi hay gặp

• Triệu chứng: debounce luôn search lần gõ đầu. Nguyên nhân: timeout close over args lần gọi #1. Cách xử lý: lưu last trên wrapper.
• Triệu chứng: watch log page hôm qua. Nguyên nhân: const page = page.value trước await. Cách xử lý: đọc .value trong hàm async.
• Triệu chứng: heap phình sau mỗi lần search. Nguyên nhân: watch trong util không onScopeDispose(stop). Cách xử lý: stop theo scope component.
• Triệu chứng: sau logout, Memory vẫn hiện exportBlob. Nguyên nhân: Map ở module giữ user trước. Cách xử lý: xóa lúc logout; đừng giữ blob theo user ở module.

Tóm tắt: Mọi object đều có link nội bộ [[Prototype]]. Tra cứu property đi own key trước, rồi chain đó, đến null. class là constructor kèm sugar trên prototype, không phải mô hình object thứ hai.

Vì sao quan trọng: el instanceof HTMLElement là false với node từ iframe. Library extend Array gãy khi sang realm khác. Vue reactive() trên instance Mapbox hoặc chart bọc Proxy, nên this và instanceof loạn. markRaw là cách xử lý, không phải “đừng dùng class”.

1. Cách hoạt động: obj.foo tìm thuộc tính own trước, rồi Object.getPrototypeOf(obj), rồi đi tiếp. Chuỗi kết thúc ở Object.prototype, rồi null.
2. class Foo { method() {} } đặt method trên Foo.prototype nên mọi instance dùng chung một function. Field của class là từng instance; không nằm trên prototype.
3. Object.create(proto) tạo object có [[Prototype]] là proto. new Foo() chính là Object.create(Foo.prototype) rồi gọi Foo với this.
4. instanceof đi theo chuỗi của receiver, tìm Ctor.prototype. Realm khác (iframe, worker, jsdom) có Array.prototype khác, nên check fail.
5. Đừng dựng UI Vue hay React trên kế thừa prototype. Component và composable là function kèm data. Dùng class khi cần identity (subclass Error) và method dùng chung.

// Tra cứu: key own, rồi [[Prototype]], rồi null
const proto = { kind: 'row' }
const row = Object.create(proto)
row.id = 1
row.id        // 1 (own)
row.kind      // 'row' (prototype)
Object.getPrototypeOf(row) === proto // true

// Check an toàn theo realm, không dùng instanceof
Array.isArray(data)
el.nodeType === 1

const map = markRaw(new google.maps.Map(el))
type AppErrorDTO = { kind: 'AppError'; message: string }

Điều gì xảy ra: row.id là own; row.kind tìm thấy trên proto. Object.create là chuỗi không cần class. Array.isArray và nodeType vẫn đúng khi qua iframe; instanceof Array thì không. markRaw không cho Vue proxy map. DTO là thứ bạn gửi qua postMessage, vì structured clone bỏ prototype.

Lỗi hay gặp

• Triệu chứng: el instanceof HTMLElement ra false trong embed. Nguyên nhân: window khác, prototype khác. Cách xử lý: el.nodeType === 1 hoặc el instanceof win.HTMLElement.
• Triệu chứng: chart Vue nháy và method throw. Nguyên nhân: reactive(new Mapbox.Map()). Cách xử lý: markRaw instance; giữ tọa độ trong state của bạn.
• Triệu chứng: err instanceof AppError ra false sau worker. Nguyên nhân: structured clone bỏ prototype. Cách xử lý: gửi { kind, message } rồi hydrate lại.
• Triệu chứng: Object.create(null) nổ ở obj.toString. Nguyên nhân: không có Object.prototype. Cách xử lý: Object.hasOwn / Object.prototype.hasOwnProperty.call.

Tóm tắt: Với function, this được bind ở call site: mặc định, method, call/apply/bind, hoặc new. Arrow function không bind this; chúng close over lexical this của scope bên ngoài.

Vì sao quan trọng: Method Vue Options API chạy tốt đến khi ai đó đổi thành arrow, rồi this.$emit chết. addEventListener('click', obj.method) làm mất receiver. Bind một wrapper mới mỗi lần render thì removeEventListener không bao giờ khớp. <script setup> không có this.

1. Cách hoạt động: Gọi mặc định: this là undefined trong ESM / strict mode, không phải object global. Throw còn hơn ghi global thầm lặng.
2. Gọi method: obj.fn() bind this vào obj. Tách const fn = obj.fn; fn() là mất receiver.
3. fn.call(thisArg, a) / fn.apply(thisArg, args) gọi ngay. fn.bind(thisArg) trả function mới với this đã cố định. new Fn() bind this vào instance.
4. Arrow close over lexical this. methods của Vue Options phải là function để instance bind được. Arrow ở đó bắt this của module (undefined trong ESM).
5. Composition API gần như không dùng this. Template Vue vẫn expose instance; <script setup> thì không. React class onClick={this.handle} là cùng bug mất receiver.

export default defineComponent({
  methods: {
    onSubmit() {
      this.$emit('save', this.form) // Options bind this
    },
    // onSubmit: () => this.$emit(...)  // ❌ this là undefined trong ESM
  },
})

const onKey = (e: KeyboardEvent) => {
  if (e.key === 'Escape') close()
}
onMounted(() => window.addEventListener('keydown', onKey))
onUnmounted(() => window.removeEventListener('keydown', onKey))

Điều gì xảy ra: onSubmit là function, nên Vue bind this vào instance và $emit chạy. Arrow trong methods sẽ bắt this của module. onKey có identity function ổn định, nên add và remove khớp. addEventListener('keydown', () => …) mỗi lần mount sẽ leak vì remove không tìm được cùng reference.

Lỗi hay gặp

• Triệu chứng: this.$emit ra undefined sau refactor. Nguyên nhân: arrow trong methods Options, hoặc helper tách bằng const fn = this.save. Cách xử lý: giữ method function; gọi this.save() hoặc fn.call(this).
• Triệu chứng: listener không bao giờ gỡ. Nguyên nhân: bind hoặc arrow tạo trong onMounted mỗi lần, identity khác. Cách xử lý: giữ một function; hoặc truyền { signal } rồi abort.
• Triệu chứng: click handler React class có this sai. Nguyên nhân: onClick={this.handle} không bind. Cách xử lý: arrow class field, hoặc bind trong constructor.
• Triệu chứng: fn() gọi trần ghi global. Nguyên nhân: this mặc định là window. Cách xử lý: ESM / strict mode.

Tóm tắt: Các tính năng ES6+ hay gặp trong phỏng vấn senior là destructuring, spread, optional chaining, nullish coalescing, module, structuredClone, Array.prototype.at, và top-level await. Mỗi cái có một lỗi hay gặp, thú vị hơn cú pháp.

Vì sao quan trọng: user.age || 18 coi tuổi 0 là thiếu. JSON.parse(JSON.stringify(state)) làm mất Date và Map. Một barrel import kéo chart 200kb vào trang login. Người phỏng vấn gài những bug đó; họ không bắt bạn thuộc lòng destructuring.

1. Cách hoạt động: Destructuring và spread copy key enumerable own đúng một tầng. Object lồng vẫn dùng chung. Rest trên object cũng shallow.
2. ?. dừng ngay khi gặp null hoặc undefined. Dùng khi đúng là optional. Che user thiếu sau response 200 là bug sản phẩm, không phải default khéo.
3. ?? chỉ default khi null / undefined. 0, false, và '' vẫn giữ. || theo truthiness, và đó là bug tuổi 0.
4. structuredClone giữ Date, Map, Set, và nhiều typed array. JSON.stringify là serializer: nó bỏ undefined, function, và biến Date thành string.
5. ES module là live binding. import() động là ranh giới bundle. Top-level await làm cả module graph phải chờ: ổn ở entry app Vue/Vite, đắt nếu util dùng chung phải chờ network.
6. arr.at(-1) đọc phần tử cuối mà không cần arr[arr.length - 1]. Nó không copy. Nên dùng hơn slice(-1)[0] khi ý bạn là “một phần tử”.

const page = Number(route.query.page ?? 0) // 0 là trang thật
const enabled = flag ?? true              // false phải thắng ||
const email = user?.profile?.email        // chỉ khi profile có thể thiếu

const copy = structuredClone(toRaw(doc))  // Date và Map được giữ
// JSON.stringify(doc) sẽ stringify createdAt và bỏ undefined

const last = rows.at(-1)
const { Chart } = await import('./heavy-chart') // ranh giới bundle

Điều gì xảy ra: ?? giữ 0 và false. ?. chỉ đi tiếp khi user và profile còn. structuredClone(toRaw(doc)) giữ Date/Map và gỡ Vue proxy trước. import động tách chart ra khỏi bundle login. rows.at(-1) là hàng cuối, không phải mảng một phần tử.

Lỗi hay gặp

• Triệu chứng: trang 0 nhảy thành trang 1. Nguyên nhân: Number(query.page || 1). Cách xử lý: ?? 0 (hoặc ?? 1 chỉ khi thiếu, không phải khi bằng 0).
• Triệu chứng: clone mất createdAt kiểu Date. Nguyên nhân: JSON.parse(JSON.stringify(doc)). Cách xử lý: structuredClone(toRaw(doc)).
• Triệu chứng: bundle login có chart. Nguyên nhân: export * from './heavy-chart' trong barrel. Cách xử lý: import() động thật ở route cần nó.
• Triệu chứng: structuredClone(vueProxy) throw. Nguyên nhân: proxy và vài internals Vue không clone được. Cách xử lý: toRaw trước.

Tóm tắt: Garbage collector của JavaScript giải phóng object không còn đi tới được từ root (stack, global, và bất cứ gì mà closure còn sống hoặc DOM node còn trỏ tới). Leak là một root bị quên, bạn không gỡ theo vòng đời component.

Vì sao quan trọng: SPA ổn ở phút 0, rồi 1.5GB sau một ngày routing phía client. Retainer điển hình: DOM detached, listener, watch Vue không stop, closure giữ body của fetch, một Map metadata đáng ra phải là WeakMap. Câu “Gỡ node khỏi document rồi” chưa đủ nếu closure vẫn trỏ tới nó.

1. Cách hoạt động: Reachability, không phải “mình không dùng biến này nữa”. Còn root nào đi tới được object thì object ở lại. Closure là root cho mọi thứ chúng capture.
2. Leak hay gặp: listener window / document, setInterval, IntersectionObserver / ResizeObserver, watch / $subscribe Vue không stop, cache global, DOM detached vẫn bị handler giữ.
3. WeakMap giữ object mà không giữ chúng sống. Dùng cho metadata trên DOM node không phải của bạn, không phải LRU cho response API.
4. Tìm leak: chụp heap snapshot, dùng trang, chụp lần nữa, xem delta. Search Retainers cho Detached HTMLElement hoặc exportBlob 20MB đã biết. Comparison view hay hơn scroll một snapshot.
5. Gắn mọi resource với scope component: onUnmounted, onScopeDispose, watch onCleanup, hoặc { signal }. Keep-alive: onUnmounted có thể không bao giờ chạy, nên dispose việc nặng ở onDeactivated.

const meta = new WeakMap<HTMLElement, { rowId: string }>()
// khi element chết, metadata chết theo.
// Map<HTMLElement, …> sẽ ghim node.

onMounted(() => {
  const stop = watch(filters, fetchList, { deep: true })
  const ac = new AbortController()
  window.addEventListener('resize', onResize, { signal: ac.signal })
  onScopeDispose(() => {
    stop()
    ac.abort()
  })
})

Điều gì xảy ra: Key của WeakMap không giữ element sống, nên metadata của hàng có thể chết cùng node. watch được stop khi dispose scope, và listener resize bị abort cùng lifetime đó. Một Map<HTMLElement, …> hoặc một watch không stop sẽ ghim memory đó cả session.

Lỗi hay gặp

• Triệu chứng: heap phình sau mỗi lần navigation phía client. Nguyên nhân: watch hoặc listener window không teardown. Cách xử lý: onScopeDispose / { signal }.
• Triệu chứng: Detached HTMLElement trong Retainers. Nguyên nhân: handler hoặc ref Vue vẫn trỏ node đã gỡ. Cách xử lý: gán null cho ref; gỡ listener.
• Triệu chứng: “cache” WeakMap không bao giờ hit. Nguyên nhân: key là string hoặc object literal mới mỗi lần. Cách xử lý: Map có eviction, hoặc key object ổn định.
• Triệu chứng: tab keep-alive vẫn chạy WebSocket. Nguyên nhân: việc bắt đầu trong onMounted và chỉ dừng ở onUnmounted. Cách xử lý: onDeactivated / onActivated.

Tóm tắt: Hoisting nghĩa là engine cấp binding trước khi chạy thân hàm. Function declaration được khởi tạo. var được gán undefined. let / const / class nằm trong temporal dead zone (TDZ) đến khi tới dòng của chúng. Truy cập sớm sẽ throw ReferenceError.

Vì sao quan trọng: Câu đố phỏng vấn là console.log(a) trước let a. Bug trên production là import ESM vòng: store Pinia và composable import lẫn nhau, và app throw Cannot access X before initialization lúc start. Unit test bỏ sót vì graph khác.

1. Cách hoạt động: Coi hoisting là bài thứ tự load, không phải “engine kéo dòng lên”. Binding tồn tại cho cả scope; khác nhau ở lúc khởi tạo.
2. Function declaration được khởi tạo bằng object hàm. Bạn gọi được chúng trước dòng khai báo trong cùng scope. Function expression (const fn = () => {}) theo quy tắc const.
3. var được khởi tạo undefined, nên đọc sớm ra giá trị sai mà không báo. let / const / class throw đến khi init. typeof x trên let đang TDZ vẫn throw, khác typeof undeclared.
4. ESM vòng: a.ts import b.ts import a.ts. File sau có thể đọc export const còn trong TDZ. Cắt vòng bằng getStore(), module thứ ba, hoặc import() sau init, không phải bằng var.
5. import type bị xóa và không gây TDZ lúc runtime. const store = useFooStore() ở top module chạy trước khi Pinia được cài, cùng họ với bug đó.

console.log(a) // undefined: var đã được khởi tạo
var a = 1

console.log(b) // ReferenceError: b đang trong TDZ
let b = 2

// Cắt vòng Pinia ↔ composable bằng getter lazy.
export function getUserStore() {
  return useUserStore()
}

// Đừng: const store = useUserStore() ở top module trong util.
import type { User } from './user' // bị xóa: không TDZ lúc chạy

Điều gì xảy ra: var a đã tồn tại là undefined khi log đầu chạy. let b đã tồn tại nhưng đang TDZ, nên log thứ hai throw. getUserStore() hoãn đọc export Pinia đến lúc gọi, sau khi cả hai module đã init. import type không chạy, nên không tạo vòng.

Lỗi hay gặp

• Triệu chứng: app throw Cannot access X before initialization; test thì pass. Nguyên nhân: ESM vòng, graph khác. Cách xử lý: getStore(), module thứ ba, hoặc import() sau init.
• Triệu chứng: typeof store throw lúc start. Nguyên nhân: let/const trong TDZ. typeof không cứu bạn. Cách xử lý: đừng đọc export ở top module.
• Triệu chứng: useFooStore() ở top module là undefined hoặc throw. Nguyên nhân: Pinia chưa được cài. Cách xử lý: gọi trong setup / action.
• Triệu chứng: class Child extends Parent throw. Nguyên nhân: Parent là const vòng còn TDZ. Cách xử lý: cắt vòng import.

Tóm tắt: AbortController là primitive của browser để hủy việc. Một controller expose signal bạn truyền vào fetch, listener, và cleanup watch Vue. Abort là cooperative: code không bao giờ check signal thì vẫn chạy xong.

Vì sao quan trọng: Typeahead bắn năm GET đang bay và cái chậm nhất thắng, ghi đè input. Đổi route vẫn ghi vào trang trước. let seq++ là cờ bỏ-stale tự chế. Người phỏng vấn muốn AbortController như contract, và nó ghép với Promise.all thế nào.

1. Cách hoạt động: const ac = new AbortController(); truyền { signal: ac.signal } vào fetch và addEventListener. ac.abort() reject fetch với AbortError và gỡ listener đã dùng signal đó.
2. Race condition (tranh chấp thứ tự) trong search là “ghi sau cùng thắng” khi response chậm. Abort controller trước đó mỗi query mới để GET cũ không ghi được results.
3. Bỏ qua stale mà không abort vẫn tốn network. Nên abort và bỏ qua: catch AbortError rồi return; đừng toast nó; đừng gửi lên Sentry.
4. Promise.race([fetch(url, { signal }), timeout(ms, ac)]) abort được khi timeout nếu timeout gọi ac.abort(). Các nhánh Promise.all vẫn chạy trừ khi chúng nhận cùng signal.
5. Cleanup lúc unmount: Vue watch onCleanup(() => ac.abort()), onScopeDispose, hoặc cleanup useEffect React. Một signal có thể phủ fetch, listener, và watch.

watch(
  () => route.query.q,
  async (q, _p, onCleanup) => {
    const ac = new AbortController()
    onCleanup(() => ac.abort())
    try {
      const [hits, nextFacets] = await Promise.all([
        search(q, { signal: ac.signal }),
        getFacets(q, { signal: ac.signal }),
      ])
      results.value = hits
      facetCounts.value = nextFacets
    } catch (err) {
      if ((err as DOMException).name === 'AbortError') return
      throw err
    }
  },
)

Điều gì xảy ra: Mỗi lần đổi query abort controller trước, nên search và getFacets dừng cùng nhau. Một 200 đến muộn không ghi đè results. AbortError bị nuốt; 500 thật vẫn throw. Dùng chung một signal thì Promise.all hủy được như một nhóm.

Lỗi hay gặp

• Triệu chứng: query đầu chậm ghi đè query sau. Nguyên nhân: không abort, lần ghi sau cùng thắng. Cách xử lý: AbortController mới mỗi query; bỏ qua AbortError.
• Triệu chứng: Sentry ngập mỗi lần gõ. Nguyên nhân: log AbortError như failure. Cách xử lý: return khi name === 'AbortError'.
• Triệu chứng: facet vẫn tới sau abort. Nguyên nhân: các nhánh Promise.all không nhận signal. Cách xử lý: truyền cùng signal vào mọi lời gọi.
• Triệu chứng: rời trang vẫn patch Pinia. Nguyên nhân: không abort trong onCleanup. Cách xử lý: abort lúc unmount; đừng ghi nếu signal.aborted.