🔰closure

JS ⟩ value ⟩ function ⟩ closure

A closure

• is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).

• gives you access to an outer function's scope from an inner function.

• is created every time a function is created, at function creation time.

🖥️ 影片

👉 lexical environment

see how a closure "closes over" outer lexical environments

⭐️ 重點

A closure is a function that remembers its outer variables and can access them. in JavaScript, all functions are naturally closures (with only one exception 👉 "new Function" syntax). 📗 JS.info ⟩ Closure

it matters from which scope your closure closes in variables.

👉 scopes matter with closures❗

雖說似乎有一個奇怪的 "for-init" scope，但裡面 let 變數的表現其實更像是 block-scoped。👉 scopes matter with closures ⟩ ❓

Closure is observed when a function uses variable(s) from outer scope(s) even while running in a scope where those variable(s) wouldn't be accessible. 📗 You Don't Know JS Yet

🔴 主題

• closure examples

  • ❗scopes matter with closures

  • 💡private property by closure

  • closure: to close over or not

  • closure: manage grades - closure can be used as a function with private properties.

  • closure as object - closure can be used as an object.

• lexical environment - stores all local variables.

• [[Environment]] - reference to surrounding lexical environment.

💈範例

• replit：closures

// • `clsr` closes over parameter `a`
//             ╭──clsr──╮
let sum = a => b => a + b ;

sum(3)(4),    // 7
sum(5)(-1),   // 4

👥 相關

• a closure is usually a nested function.

• a callback is usually a closure.

📗 參考

• YDKJS: Scope & Closures (v.2) ⟩ Ch. 7

• JS.info ⟩ Variable scope, closure

• itHome ⟩ 你不可不知的 JavaScript 二三事 ⟩

  • #Day28：閉包 (Closures)

  • #Day29：閉包 (Closures) 進階打怪實戰

📘 手冊

• Closures

• Pratical closures

👥 相關

• every function (including IIFE) is a closure.

• memoize by closure