Arrow function vs declaratie clasică

Explicați-mi și mie, că poate îmi scapă ceva esențial, de ce o groază de lume folosește arrow function în javascript. sintaxă care mie mi se pare oribilă și greu de înțeles când “scanezi” codul, mai ales când e scris de altcineva.

Adică este folosit ceva de genul

const Button = () => {
}

în loc de

function Button()
{
}

În al doilea caz înțeleg instant că e o funcție, în primul caz am nevoie de o fracțiune de secundă să parsez codul și să-l interepretez ca să înțeleg că variabila aia e de fapt o funcție.

1 Like

Poti sa gasesti aici mai multe detalii despre arrow functions Arrow function expressions - JavaScript | MDN

Mie sincer imi place sa folosesc arrow function dar de exemplu in React cred ca este mai okay vizibil ca functional compontents sa fie declarate cu function si result functilor folosind arrow.

Bănuiesc că pentru interiorul funcțiilor te referi la lambda. Dar chiar și acolo prefer să văd cuvântul “function”, să nu am fracțiunea aia de secundă pentru e decoda hieroglifele care simbolizează o funcție, de exemplu așa:

const functia_mea = function()
{
}

Printre cele mai importante chestii este cine este “this” in functia aia. arrow function this keyword - Google Zoeken

2 Likes

Am văzut, înțeleg că this-ul funcției părinte se propagă în jos spre funcțiile arrow. Nu cred că am folosit prea des this în funcții, așa că n-am remarcat diferența, probabil mi-ar fi crăpat capul să depanez vreun bug subtil legat de chestia asta :slight_smile:

O chestie de genul ăsta am pățit zilele astea în php, când într-un foreach am suprascris din greșeală o variabilă cu același nume din afara scope-ului.

Nu uita că poţi defini şi funcţii „clasice” în felul ăsta:

const foo = function () {}

Diferenţa dintre definirea clasică vs variabilă cred că ţine de preferinţe personale.

http://adripofjavascript.com/blog/drips/variable-and-function-hoisting.html

2 Likes

Arrow function-ul are urmatoarele avantaje:

  1. E mai scurt si se preteaza la callback-uri, declararea in sine cu const e doar pentru consistenta.
  2. Arrow function-ul e mai elegant daca returnezi direct ceva si nu ai nevoie de { ceva; return ceva }, eventual returnezi direct obiecte cu x => ({ greeting: "Hey " + x })
  3. Arrow function-ul nu are o referinta pentru this, ceea ce e foarte bine fiindca daca lucrezi cu functii nu vrei sa ai deaface cu this fiindca e mereu un ‘parametru’ care vine din context-ul in care e rulat. Daca dai explicit ceva functiei stii de unde isi primeste referinta. Problema cu react de exemplu e ca daca folosesti functia normala trebuie sa faci bind la this mereu ca sa ai contextul din componenta curenta, cu arrow function cum n-ai this nu te mai intereseaza ca fiecare arrow function va fi in contextul lui izolat fara sa ii pese de unde ruleaza.
  4. This nu se foloseste din cauza programarii functionale mai bine zis, daca n-ai clase e urat, se prefera compozitia si functiile pure pe cat de mult posibil, this incalca puritatea functiilor.
  5. Cateodata ai nevoie de this, atunci folosesti un function sau il dai jos in arrow function.
  6. Daca folosesti un arrow function ca o metoda intr-un obiect, o sa fie doar o functie salvata in obiect, nu o metoda. (nu are prototip)
  7. Se combina foarte mult cu ternary operator-ul, e.g. let max = (a, b) => a > b ? a : b;
  8. Mie function-ul imi aduce aminte de perioada cu IIFE-uri si closures :smiley: Codul e clar mai modern cu arrow function-uri peste tot.
9 Likes

Am facut un exemplu “fun” legat de this

let Lorem = {

  my_var : "original",

  change : function() {
    this.my_var = "changed";
  },

  get : function() {
     return this.my_var;
  },

  sample : function() {
    let objectInstance = this; // naming convention propriu, nu stiu daca e ceva standard undeva.

    setTimeout( function() {
       console.log( "timeout - objectInstance : " + objectInstance.my_var );
       console.log( "timeout - this : " + this.my_var );
    }, 1000 );
  }

};

let test_1 = Lorem,
    test_2 = Lorem,
    test_3 = Object.assign({}, Lorem);
    
Lorem.change();

console.log( "test 1 : " + Lorem.get() );

console.log( "----" );

console.log( "test 2 : " + test_2.get() );

console.log( "----" );

console.log( "test 3 : " + test_3.get() );

Lorem.sample();

Nu stiu care e politica cu topicurile, si cand e momentul sa “moara”.

1 Like