Стрелочные функции | Arrow functions

В ES6 есть новый способ создания функций с помощью оператора стрелка =>. Такие функции называются стрелочные.

let add = (x, y) => x + y;

Эта запись аналогична следующей:

function add(x, y){
	return x + y;
}

Стрелка в обязательно должна ити сразу после параметров

let add = (x, y) 
=> x + y;
// SyntaxError: no line break is allowed before '=>'

Если стрелочная функция принимает тольео 1 параметр - нет необходимости заключать его в круглые скобки

let square = x => x * x;

Если функция не принимает никакого аргумента то можно обойтись только круглыми скобками

let getDay = () => 13;

Если функция ничего не возвращает - то всё равно она создаётся обычным способом

let log = () => console.log('Logging');

Если тело функции состоит из двух и более строк, то тело функции оборачивается в фигурные скобки и используется return.

let multiply = (x, y) => {
    let result = x * y;
    return result;
};

Если функция возвращает объект и имеет одну строку, то нужно возвращаемый объект обернуть в круглые скобки.

let getPerson = () => ({ name: 'John' });

Можно использовать для IIFE (Immediately-Invoked Function Expression) - немедленно выполняемых функций

(function(){
	console.log('IIFE 1')
})();
// превращается в 
(() => console.log('IIFE 2'))();

 

Практическо применение

• Удобно использовать с массивами

numbers.forEach(function(num){
	sum = sum + num;
})
// можно заменить на
numbers.forEach(num => sum += num);

let numbers = [1, 2, 3 ,4 , 5, 6, 7 ,8 ,9 ,10];
let squared = numbers.map(n => n * n);
console.log(squared); // Array [ 1, 4, 9, 16, 25, 36, 49, 64, 81, 100 ]

• В стрелочной функции - значение this берётся из контекста. Если стрелочная функция используется в объекте то контекстом для this будет не сам объект а window.

let person = {
    name: 'Bob',
    greet: () => {
        console.log('Hello, my name is ' + this.name);
		console.log(this)
    }
}
person.greet();
// Hello, my name is 
// Window → http://www.test-es6.ru/

т.к. person вызывается из контекста window то this - будет window. Эта особенность помогает работать с замыканиями без введения дополнительной переменной.

let person = {
    name: 'Bob',
	self: this,
    greet: function() {
		var self = this;
        window.setTimeout(function(){
            console.log('Hello, my name is ' + self.name);
            console.log('"this" is', self);
        }, 2000);
    }
}
// Hello, my name is Bob
// "this" is Object { name: "Bob", self: Window → /, greet: greet() }
// заменяем на стрелочную функцию

let person = {
    name: 'Bob',
    greet: function() {
        window.setTimeout(() => {
            console.log('Hello, my name is ' + this.name);
            console.log('"this" is', this);
        }, 2000);
    }
}
person.greet();
// Hello, my name is Bob
// this" is Object { name: "Bob", greet: greet() }

Дополнительные ограничения:

• Нельзя использовать как конструктор объектов
• Нельзя использовать с методами bind, apply, call, т.к. this берётся из контекста видео.