const materials = ["Hydrogen", "Helium", "Lithium", "Beryllium"];console.log(materials.map((material) => material.length));// Expected output: Array [8, 6, 7, 9]

() => 式引数 => 式(引数) => 式(引数1, 引数N) => 式() => {  文}引数 => {  文}(引数1, 引数N) => {  文}

(a, b, ...r) => 式(a = 400, b = 20, c) => 式([a, b] = [10, 20]) => 式({ a, b } = { a: 10, b: 20 }) => 式

async 引数 => 式async (引数1, 引数2, ...引数N) => {  文}

メモ:従来の関数式とアロー関数は、構文以外にも異なる点があります。次のいくつかの節で、その動作の違いを詳しく紹介します。

// 従来の無名関数(function (a) {  return a + 100;});// 1. "function" という語を削除し、引数と本体の開始中括弧の間に矢印を配置する(a) => {  return a + 100;};// 2. 本体の中括弧を削除と "return" という語を削除 — return は既に含まれています。(a) => a + 100;// 3. 引数の括弧を削除a => a + 100;

// 従来の無名関数(function (a, b) {  return a + b + 100;});// アロー関数(a, b) => a + b + 100;const a = 4;const b = 2;// 従来の関数（引数なし）(function () {  return a + b + 100;});// アロー関数（引数なし）() => a + b + 100;

// 従来の関数(function (a, b) {  const chuck = 42;  return a + b + chuck;});// アロー関数(a, b) => {  const chuck = 42;  return a + b + chuck;};

// 従来の関数function bob(a) {  return a + 100;}// アロー関数const bob2 = (a) => a + 100;

const func = (x) => x * x;// 式本体の場合、暗黙の "return" がありますconst func2 = (x, y) => {  return x + y;};// ブロック本体では、明示的な "return" が必要です

const func = () => { foo: 1 };// 呼び出した func() は undefined を返す！const func2 = () => { foo: function () {} };// SyntaxError: function statement requires a nameconst func3 = () => { foo() {} };// SyntaxError: Unexpected token '{'

const func = () => ({ foo: 1 });

"use strict";const obj = {  i: 10,  b: () => console.log(this.i, this),  c() {    console.log(this.i, this);  },};obj.b(); // undefined, Window { /* … */ } (またはグローバルオブジェクト) と表示obj.c(); // 10, Object { /* … */ } と表示

"use strict";const obj = {  a: 10,};Object.defineProperty(obj, "b", {  get: () => {    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (またはグローバルオブジェクト)    return this.a + 10; // グローバルオブジェクト 'Window' を表すので、 'this.a' は 'undefined' を返す  },});

class C {  a = 1;  autoBoundMethod = () => {    console.log(this.a);  };}const c = new C();c.autoBoundMethod(); // 1const { autoBoundMethod } = c;autoBoundMethod(); // 1// 通常のメソッドであれば、この場合は未定義になるはずです。

class C {  a = 1;  constructor() {    this.method = this.method.bind(this);  }  method() {    console.log(this.a);  }}

メモ:クラスフィールドはインスタンスで定義され、プロパティでは定義されていません。そのため、インスタンスを作成するたびに新しい関数参照が作成され、新しいクロージャが割り当てられます。これにより、通常の非バインドメソッドよりも多くのメモリーが使用される可能性があります。

function foo(n) {  const f = () => arguments[0] + n; // foo は arguments をバインドしている。 arguments[0] は n である  return f();}foo(3); // 3 + 3 = 6

メモ:arguments という変数は厳格モードでは宣言できないので、上のコードは構文エラーになります。これにより、arguments のスコープ効果がより理解しやすくなります。

function foo(n) {  const f = (...args) => args[0] + n;  return f(10);}foo(1); // 11

const Foo = () => {};const foo = new Foo(); // TypeError: Foo is not a constructorconsole.log("prototype" in Foo); // false

const func = (a, b, c)  => 1;// SyntaxError: Unexpected token '=>'

const func = (a, b, c) =>  1;const func2 = (a, b, c) => (  1);const func3 = (a, b, c) => {  return 1;};const func4 = (  a,  b,  c,) => 1;

let callback;callback = callback || () => {};// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});

// 空のアロー関数は undefined を返しますconst empty = () => {};(() => "foobar")();// "foobar" を返します// （これは、即時起動型の関数式です。）const simple = (a) => (a > 15 ? 15 : a);simple(16); // 15simple(10); // 10const max = (a, b) => (a > b ? a : b);// 簡単な配列のフィルタリング、マッピング等const arr = [5, 6, 13, 0, 1, 18, 23];const sum = arr.reduce((a, b) => a + b);// 66const even = arr.filter((v) => v % 2 === 0);// [6, 0, 18]const double = arr.map((v) => v * 2);// [10, 12, 26, 0, 2, 36, 46]// さらに簡潔なプロミスチェーンpromise  .then((a) => {    // …  })  .then((b) => {    // …  });// 見た目に解析が簡単な引数なしのアロー関数setTimeout(() => {  console.log("I happen sooner");  setTimeout(() => {    // deeper code    console.log("I happen later");  }, 1);}, 1);

const obj = {  num: 100,};// "num" を window に設定し、使用されていないことを表す。globalThis.num = 42;// 単純な従来の関数で "this" を運用するconst add = function (a, b, c) {  return this.num + a + b + c;};console.log(add.call(obj, 1, 2, 3)); // 106console.log(add.apply(obj, [1, 2, 3])); // 106const boundAdd = add.bind(obj);console.log(boundAdd(1, 2, 3)); // 106

const obj = {  num: 100,};// "num" を window に設定し、どのように扱われるかを見る。globalThis.num = 42;// アロー関数const add = (a, b, c) => this.num + a + b + c;console.log(add.call(obj, 1, 2, 3)); // 48console.log(add.apply(obj, [1, 2, 3])); // 48const boundAdd = add.bind(obj);console.log(boundAdd(1, 2, 3)); // 48

const obj = {  count: 10,  doSomethingLater() {    setTimeout(function () {      // この関数は window のスコープで実行される      this.count++;      console.log(this.count);    }, 300);  },};obj.doSomethingLater(); // "NaN" と表示。 "count" プロパティが window のスコープにないため。

const obj = {  count: 10,  doSomethingLater() {    // メソッドの構文で "this" を "obj" コンテキストにバインドする    setTimeout(() => {      // アロー関数は独自のバインドを行わないので、      // setTimeout （関数呼び出しとして）は自身へのバインドを作成せず、      // 外部メソッドの "obj" コンテキストが使用される。      this.count++;      console.log(this.count);    }, 300);  },};obj.doSomethingLater(); // logs 11