Viewing: developer.mozilla.org

Baseline Widely available

This feature is well established and works across many devices and browser versions. Its been available across browsers since 2016 ..

Learn more
See full compatibility

this ( this, arguments, super, new.target). , , .

(param1, param2, , paramN) => { statements }
(param1, param2, , paramN) => expression
// : (param1, param2, , paramN) => { return expression; }

//       :
(singleParam) => { statements }
singleParam => { statements }

//       :
() => { statements }
() => expression
// : () => { return expression; }

//     ,    
params => ({foo: bar})

//       
(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, , paramN = defaultValueN) => { statements }

//   
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

"ES6 In Depth: Arrow functions" on hacks.mozilla.org.

: this.

. :

var elements = ["Hydrogen", "Helium", "Lithium", "Beryllium"];

elements.map(function (element) {
  return element.length;
}); //     [8, 6, 7, 9]

//       :
elements.map((element) => {
  return element.length;
}); // [8, 6, 7, 9]

//         return,
//   return    

elements.map((element) => element.length); // [8, 6, 7, 9]

//   ,      length,     :
//  ,   `"length"`  ,    ,
//     `lengthFooBArX`    ,      
elements.map(({ length: lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9]

//       ,   .   ,  ,
//    `"length"`,  ,     .     ,
//      ,      `length`
elements.map(({ length }) => length); // [8, 6, 7, 9]

`this`

, this ( , undefined strict , " " ..). - .

function Person() {
  //   Person() `this`   .
  this.age = 0;

  setInterval(function growUp() {
    //   ,   growUp() `this` 
    //   ,    `this`,
    //    Person().
    this.age++;
  }, 1000);
}

var p = new Person();

ECMAScript 3/5, this :

function Person() {
  var that = this;
  that.age = 0;

  setInterval(function growUp() {
    //    (callback)   that, 
    //     this.
    that.age++;
  }, 1000);
}

, , this ( growUp() ).

this, this . :

function Person() {
  this.age = 0;

  setInterval(() => {
    this.age++; // `this`    Person
  }, 1000);
}

var p = new Person();

this , (strict mode) this :

var f = () => {
  "use strict";
  return this;
};
f() === window; //

call apply

this , call() apply(), , this:

var adder = {
  base: 1,

  add: function (a) {
    var f = (v) => v + this.base;
    return f(a);
  },

  addThruCall: function (a) {
    var f = (v) => v + this.base;
    var b = {
      base: 2,
    };

    return f.call(b, a);
  },
};

console.log(adder.add(1)); //  2
console.log(adder.addThruCall(1)); //    2

arguments

arguments, arguments .

var arguments = 42;
var arr = () => arguments;

arr(); // 42

function foo() {
  var f = (i) => arguments[0] + i; //    arguments
  //   f
  // c  arguments  foo
  return f(2);
}

foo(1); // 3

arguments :

function foo() {
  var f = (...args) => args[0];
  return f(2);
}

foo(1); // 2

, . , , :

"use strict";
var obj = {
  i: 10,
  b: () => console.log(this.i, this),
  c: function () {
    console.log(this.i, this);
  },
};
obj.b(); // prints undefined, Window {...} (  )
obj.c(); // prints 10, Object {...}

("bind") this. Object.defineProperty():

"use strict";
var obj = {
  a: 10,
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a + 10;
    //    'Window',  'this.a'  'undefined'
  },
});

`new`

new:

var a = new (function () {})();
//  "a"      

var b = new (() => {})();
//   
// Uncaught TypeError: (intermediate value) is not a constructor

`yield`

yield ( , , ). .

(concise body) (block body) .

, .

var func = (x) => x * x; //  ,
//   
var func = (x, y) => {
  return x + y;
}; //  ,
//

()

, : params => {object:literal} , .

var func = () => { foo: 1 };
//  func()  undefined!

var func = () => { foo: function() {} };
// SyntaxError: function statement requires a name

({}) (.. foo , ).

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

var func = ()
           => 1;
// SyntaxError: expected expression, got '=>'

, (), , .

let callback;

callback = callback || function() {}; // ok

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

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

//     undefined
let empty = () => {};

(() => "foobar")();
//  "foobar"
// ( Immediately Invoked Function Expression
//  'IIFE'  )

var simple = (a) => (a > 15 ? 15 : a);
simple(16); // 15
simple(10); // 10

let max = (a, b) => (a > b ? a : b);

//    : filter, map, ...

var arr = [5, 6, 13, 0, 1, 18, 23];

var sum = arr.reduce((a, b) => a + b);
// 66

var even = arr.filter((v) => v % 2 == 0);
// [6, 0, 18]

var double = arr.map((v) => v * 2);
// [10, 12, 26, 0, 2, 36, 46]

//    promise-
promise
  .then((a) => {
    // ...
  })
  .then((b) => {
    // ...
  });

//    ,    
setTimeout(() => {
  console.log("  ");
  setTimeout(() => {
    // deeper code
    console.log("  ");
  }, 1);
}, 1);