Noi functionalitati ale Javascript – ES6 pentru React JS

In cateva saptamani vom lansa o continuare a cursului de Javascript si jQuery. Acest nou curs va fi dedicat librariei React JS. Aceasta librarie a fost dezvoltata de Facebook si vine cu multe functionalitati utile pentru aplicatiile SPA – Single Page Application.  Dar vom povesti mai mult despre acestea in momentul lansarii cursului.

Momentan as vrea sa discutam despre ce functionalitati au fost introduse in noua versiune de Javascript, respectiv in ES6. Pe langa faptul ca sunt folositoare, un al doilea motiv pentru care as vrea sa le trecem in revista, ar fi faptul ca le vom folosi de-a lungul cursului de React JS.

In nicun caz ceea ce este prezentat in acest articol nu reprezinta toate functionalitatile noi aduse de ES6. In total sunt mai bine de 75 de feature-uri noi. Nu vom trece prin toate. Scopul acestui articol este de a le discuta doar pe cele care, in opinia mea, sunt cele mai utilizate in combinatie cu React JS.

De asemenea pentru a inlatura orice confuzie, Javascript este dezvoltat pe specificatiile de ES – EcmaScript. Fara a intra in detalii prea tehnice,  ES , fie el ES5 sau ES6 este Javascript. Diferenta dintre versiuni este data de setul de cuvinte cheie / functionalitati pe care il suporta.

Introducerea let si const

Pentru a declara o variabila in „vechiul” Javascript (a se citi de la ES5 in jos) foloseam keyword-ul var. Din cauza unui soi de „magie neagra” denumita javascript hoisting puteam utiliza o variabila inainte de a o declara. De exemplu:

// ES5
console.log(myVar); // va printa undefined
var myVar = 10;

Ei bine, in ES6, folosind cuvantul cheie let devine obligatoriu sa declaram o variabila inainte de a o utiliza.

// ES6
console.log(myVar) // va genera ReferenceError myVar is not defined
let myVar = 10

Ca si complement al lui let putem utiliza si const pentru a declara constante:

// ES6
let x = 10
const y = 20
x = 25 // totul este ok
y = 30 // TypeError: Assignment to constant variable; nu putem schimba o constanta

Arrow functions in ES6

Veti intalni foarte des arrow functions in codul de React. In ES5 – „vechiul Javascript” pentru a declara o functie ar fi trebuit sa scriem:

// ES5
var sum = function(a, b) {
   return a + b
}

In ES6 putem scrie direct:

// ES6
const sum = (a, b) => {return a + b}

Iar daca avem o functie simpla , care necesita doar o singura linie putem chiar elimina cuvantul return:

// ES6
const sum = (a, b) => a + b // daca nu se folosesc acolade, o functie arrow va returna tot timpul rezultatul ultimei linii

Declaratiile de tip destructor

Pentru a cita din developer.mozilla.org, destructorii sunt folositi pentru a extrage variabile cu acelasi nume dintr-un obiect sau array.

De exemplu, este destul de des intalnit cazul in care trebuie sa extragem dintr-un obiect proprietati sub forma unor variabile separate:

// ES5; sa presupunem ca this.props.user = {name: "Daniel", age : 33}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);

Ei bine, in ES6 putem folosi urmatoare sintaxa pentru a scoate aceste proprietati:

// ES6; sa presupunem ca this.props.user = {name: "Daniel", age : 33}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)

Sau chiar intr-o singura linie:

const {name, age} = this.props.user
alert(name + " " + age)

Compozitiile de tip Object Literals

Oarecum in aceeasi idee, in ES5 erau des intalnite cazurile in care trebuia sa scriem ceva de genul:

// ES5
str = "HELLO"
number = 20
obj = {
   str: str,
   number: number
}

Folosind Object Literals putem putem declara obiecte facand asocieri intre numele numele variabilelor si proprietatile acelui obiect:

// ES6
str = "HELLO"
number = 20
obj = { str, number} // will make obj = {str: "HELLO", number: 20}

Putem elimina punct si virgula

In functie de browser si in ES5 puteam sa nu mai adaugam caracterul ; la finalul unei linii de cod. Dar in unele browsere era inca obligatoriu.

Din ES6 semnul de punct si virgula devine optional pentru orice linie de cod si orice browser.

//ES5
var theNumber = 10;
console.log(theNumber);

//ES6
let theNumber = 10
console.log(theNumber)

Nu este un feature care ne schimba radical viata, dar va face codul ceva mai usor de citit.

Clase si mostenri

Chiar daca se puteau face unele artificii, in ES5 nu existau cuvinte cheie precum classs sau extends. In ES6 exact ca si in Java putem scrie acum cod precum :

//ES6
class Dog {
   constructor(name, weight) {
      this.name = name
      this.weight = weight
   }
   speak() {
     alert("Woof, woof my name is: " + this.name)
   }
}
const dog = new Dog("Spike", 25)
dog.speak()

Si putem crea folosind extends si clase copil pe baza unor clase parinte:

class Chiwawa extends Dog {
  shaking() {
    alert("look at me ! I'm shaking !")
  }
}

const miniDog = new Chiwawa("MiniCaine", 1)
miniDog.shaking() // am propriile mele metode
miniDog.speak() // dar mostenesc si metode de la clasa parinte.

Acest keyword extends este foarte des utilizat stand la baza mai tuturor componentelor din React:

class Greeting extends React.Component {
  render() {
    return

Hello, {this.props.name}

; } }

Chiar daca este un limbaj diferit conceptele de programare obiect raman acelasi pe care gasiti si in cursul de Java.

Filter si map

Sunt des intalnite cazurile in care trebuie sa filtrati un array de primitive sau obiecte. In ES5 singura varianta ar fi fost utilizarea unei instructiuni for sau a ceva similar cu foreach din jQuery.

Incepand cu ES6 orice array are o serie de noi metode implicite. Pentru cazul de mai sus putem folosi un filter:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]
const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // va afisa [20,90,22,33]

Chiar daca este un feature de ES5 si nu unul de ES6, vom intalni foarte des in React functia map aplicata unui array. Exact ca si un for folosind un map facem o parcurgere a fiecarui element din array in parte:

const numbers = [5,1, 20, 90, 8, 22, 33, 9]
numbers.map( (n) => console.log(n)) // va afisa toate elemementele din array

Si putem avea access si la un al doilea parametru optional: index-ul

const numbers = [5,1, 20, 90, 8, 22, 33, 9]
numbers.map( (n, index) => console.log("value " + n  " at index " + index)
// va afisa  :
// 5 at index 0
// 1 at index 1
// 20 at index 2
// ...

Mai tot timpul cand avem de afisat o lista de elemente in React vom utiliza aceste functii map.

In incheiere as vrea sa va reamintesc ca acestea sunt o mica parte din noile functionalitati ale ES6. Sunt doar cele pe care le vom folosi cel mai des in cursul de React. Puteti gasi aici o lista completa cu toate aceste functionalitati.

Pana data viitoare va spun la revedere si spor la invatat!



Alte articole si tutoriale:
«

Oferta limitata eBook gratuit: DUBLEZA-TI VENITUL PRIN CUNOSTINTELE DE IT

Inscrie-te la newsletter si vei primi un eBook gratuit. Vei fi si informat despre ofertele speciale, tutoriale gratis si discount-urile pentru cursurile LEC Academy.

Download ebook
×

Abonare email

Accesul la tutorialele gratuite se face pe baza inscrierii la newsletter. Inscrie-te la newsletter-ul LEC Academy si ai acces la peste 40 de lectii gratuite. Daca doresti, vei fi informat despre ofertele speciale, promotiile si discount-urile pentru cursurile LEC Academy.

Vezi lectii gratis
×