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

() => expressionparam => expression(param) => expression(param1, paramN) => expression() => {  statements}param => {  statements}(param1, paramN) => {  statements}

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

async param => expressionasync (param1, param2, ...paramN) => {  statements}

Hinweis:Traditionelle Funktionsausdrücke und Pfeilfunktionen unterscheiden sich nicht nur in ihrer Syntax. Wir werden ihre Verhaltensunterschiede in den folgenden Abschnitten ausführlicher vorstellen.

// Traditional anonymous function(function (a) {  return a + 100;});// 1. Remove the word "function" and place arrow between the argument and opening body brace(a) => {  return a + 100;};// 2. Remove the body braces and word "return" — the return is implied.(a) => a + 100;// 3. Remove the parameter parenthesesa => a + 100;

// Traditional anonymous function(function (a, b) {  return a + b + 100;});// Arrow function(a, b) => a + b + 100;const a = 4;const b = 2;// Traditional anonymous function (no parameters)(function () {  return a + b + 100;});// Arrow function (no parameters)() => a + b + 100;

// Traditional anonymous function(function (a, b) {  const chuck = 42;  return a + b + chuck;});// Arrow function(a, b) => {  const chuck = 42;  return a + b + chuck;};

// Traditional Functionfunction bob(a) {  return a + 100;}// Arrow Functionconst bob2 = (a) => a + 100;

const func = (x) => x * x;// expression body syntax, implied "return"const func2 = (x, y) => {  return x + y;};// with block body, explicit "return" needed

const func = () => { foo: 1 };// Calling func() returns 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(); // logs undefined, Window { /* … */ } (or the global object)obj.c(); // logs 10, Object { /* … */ }

"use strict";const obj = {  a: 10,};Object.defineProperty(obj, "b", {  get: () => {    console.log(this.a, typeof this.a, this); // undefined 'undefined' Window { /* … */ } (or the global object)    return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined'  },});

class C {  a = 1;  autoBoundMethod = () => {    console.log(this.a);  };}const c = new C();c.autoBoundMethod(); // 1const { autoBoundMethod } = c;autoBoundMethod(); // 1// If it were a normal method, it should be undefined in this case

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

Hinweis:Klassenfelder werden auf derInstanz und nicht auf demPrototyp definiert. Daher würde jede Instanzerstellung eine neue Funktionsreferenz erstellen und eine neue Closure allozieren, was potenziell zu einem höheren Speicherverbrauch führen könnte als bei einer normalen ungebundenen Methode.

function foo(n) {  const f = () => arguments[0] + n; // foo's implicit arguments binding. arguments[0] is n  return f();}foo(3); // 3 + 3 = 6

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 || (() => {});

// An empty arrow function returns undefinedconst empty = () => {};(() => "foobar")();// Returns "foobar"// (this is an Immediately Invoked Function Expression)const simple = (a) => (a > 15 ? 15 : a);simple(16); // 15simple(10); // 10const max = (a, b) => (a > b ? a : b);// Easy array filtering, mapping, etc.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]// More concise promise chainspromise  .then((a) => {    // …  })  .then((b) => {    // …  });// Arrow functions without parameterssetTimeout(() => {  console.log("I happen sooner");  setTimeout(() => {    // deeper code    console.log("I happen later");  }, 1);}, 1);

const obj = {  num: 100,};// Setting "num" on globalThis to show how it is NOT used.globalThis.num = 42;// A traditional function to operate on "this"function add(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,};// Setting "num" on globalThis to show how it gets picked up.globalThis.num = 42;// Arrow functionconst 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 () {      // the function executes on the window scope      this.count++;      console.log(this.count);    }, 300);  },};obj.doSomethingLater(); // logs "NaN", because the property "count" is not in the window scope.

const obj = {  count: 10,  doSomethingLater() {    // The method syntax binds "this" to the "obj" context.    setTimeout(() => {      // Since the arrow function doesn't have its own binding and      // setTimeout (as a function call) doesn't create a binding      // itself, the "obj" context of the outer method is used.      this.count++;      console.log(this.count);    }, 300);  },};obj.doSomethingLater(); // logs 11

Help improve MDN