🔰arrow function

(ES6) a new form of function expression.

JS ⟩ value ⟩ function ⟩ arrow function

⭐️ ES6 (2015)：a new form of function expression.

a => expression       // one statement: {...} optional
(a, b) => expression  // multiple params: (...) required
a => { statement1; statement2; } // multiple statements: {...} required

⭐️ 重點

when the { ... } are omitted, a return value is sent out without using return.

doesn’t have own bindings to this, arguments or super.

⭐️ arrow function as method❗️ (❗️use with caution❗️)

normally, you don't use arrow functions as methods, but if you have：

• an object A that has a method returning a new object B,

• object B has its own methods,

• you don't want this in these methods to refer to B but refer to A instead,

then using arrow functions as methods is an option.

👉 see example： Sequence

• aren't suitable for call, apply and bind methods, which generally rely on establishing a scope.

• don't have access to new.target keyword.

• can’t be used as constructors. (can’t be called with new)

• can’t use yield, within its body.

deplicate parameters Early Error rule (🚧) is always applied to arrow function definition even if 'strict mode' (🚧) is not defined explicitly.

🔴 主題

• roles of arrow function：

  • arrow function as method❗️

  • arrow function as class field❗️

  • arrow function as argument

  • arrow function returning object literal needs (...)❗️

• async arrow function

🧨 雷區

👉 see arrow function returning object literal needs (...)❗️

const user = () => { name: 'Gandalf', age: 2019 };
// ❌ wrong syntax       ↳ ⛔️ SyntaxError: Unexpected token ':'

const user = () => ({ name: 'Gandalf', age: 2019 });
// ✅ wrap object literal in parentheses

📗 參考

• JavaScript: The Definitive Guide ⟩ Ch. 8

• JS.info ⟩

  • object methods, "this"
  • arrow functions revisited

📘 手冊

• Arrow function expressions

👥 相關

• can be used as a bound method in class field.

• can be used in IIFE.

• register handler with arrow functions will lose this context.

• async arrow function

⬇️ 應用

• arr.containsSubarray() - used in Array.prototype.every().
• isCurrentlyInGlobalScope() - check if current context is in global scope.