Стрілкові функції

Стрілкові функції - це скорочений варіант оголошення функції.

Синтаксис:

(argname1, [..., argnameN]) => { functioncode }

Параметри:

argname1, argnameN - не обов'язково вказувати. Аргумент (параметр) функції.

functioncode - код функції

Опис:

=> - скорочений спосіб оголошення функції.

Стрілкові функції ( arrow functions ) з'явилися у стандарті ECMAScript 6, тому старі браузери їх не підтримують.

Якщо браузер не підтримує стрілкову функцію тоді виникне синтаксична помилка: "SyntaxError: Unexpected token )".

не можна використати для функції-конструктор, так як при виклику оператора new для стрілкової функції призведе до помилки. var f = () => {}; var mf= new f(); //TypeError f не є конструктором
немає об'єкта arguments. Доступний лише arguments функції в якій описано стрілкову функцію. var f = () => {alert(arguments[0]);}; f(1); function test(){ var f = () => {alert(arguments[0]);}; f(); } test(1);
"не має свого" this, так як стрілкова функція не може бути функцією конструктором. Тому this є рівним тому контексту в якому була створена функція: var f = (x, y) => { this.x =x; this.y = y; this.suma= x+y; alert(this); } alert( f(1,1) );

Стрілкові функції спрощують синтаксис функції. Найпростіший синтаксис функції виглядає наступним чином.

var f = () => 15;

//аналог
var f2= function(){return 15;};

alert( f()+' '+f2() );

var f = x => x+1;

//аналог
var f2=function(x){return x+1;}

alert('f1: '+f(1)+' f2: '+f2(1));

Якщо вказувати два параметри, тоді їх необхідно брати у дужки:

var suma = (x,y) => x+y;

//аналог
var suma2=function(x,y){return x+y;};

alert('suma: '+suma(1,1)+' suma2: '+suma2(1,1));

Щоб повернути об'єкт у стрілковій функції його необхідно взяти у круглі дужки:

var f = (s) => ({text:s});

var ob= f('js');
alert( ob.text );

Приклад:

var test = (s) => alert(s);

test('JavaScript');

var test = (s) => {alert(s);};

var test2 = (s) => {
s='текст: '+s;
alert(s);
}

test2('js');

Прив'язка this до контексту створення (оголошення) стрілкової функції:

var obj={
  test:function(){
    let a=()=>{console.log('стрілкова функція:', this);} //test
    console.log('test:', this); //test
    a();
  }
}
obj.test();

function test(){
    let a=()=>{console.log('стрілкова функція:', this);} //window
    console.log('test: ', this); //window
    a();
}

test();