Desenvolupament d'Aplicacions

ECMAScript 6 i els seus tres tipus de variables disponibles.

En el nou estàndard de Javascript (ES6) tenim disponibles tres tipus de variables. Aquí t'expliquem quines són les seves diferències i per què has de començar a utilitzar-les.

drauta
Mario Garcia
Mario Garcia

gener 08, 2021

ECMAScript 6 i els seus tres tipus de variables disponibles.

Des de Juny de l'any 2015 tenim davant nostre el nou estàndard de Javascript anomenat ECMAScript 6 o ES2015, i des de llavors tenim disponibles noves funcions que podem utilitzar des de ja mateix en els nostres projectes i ens facilitaran la forma en què tractem les dades, implementem algoritmes, promeses, funcions fletxes, Class, find (), etc. Totes elles ens permetran poder implementar solucions de forma menys complexa i amb la possibilitat de poder fer un codi més entenedor i escalable.

En aquest article, ens centrarem en explicar les característiques de les noves variables disponibles, les seves diferències, quan i on usar-les:

  • Var
  • Const
  • Let

Tractarem cadascuna de les variables disponibles, amb una breu explicació i amb exemples d'ús, perquè el seu funcionament es comprengui de millor manera:

Var:

Var és la variable típica i que tots els que programem amb Javascript estem habituats a utilitzar. 

Segons on es vagi a declarar, el seu scope serà de caràcter global o local: 

  • La variable Var declarada fora de context de funció, tindrà un scope global.
  • La variable Var declarada dins de context de funció, condicional o bucle, tindrà un scope de caràcter local.

* Scope: Quan es parla de la diferència entre tipus de variables apareixerà la paraula "scope", què és? El scope és l'abast que una variable tindrà en el teu codi. El scope et permetrà accedir a la informació d'una variable o una altra depenent del lloc del codi on s'hagi declarat (Var) o quin tipus de variable sigui (Let, Const). Hi ha dos tipus de scope, el scope global i el scope local.

Posem un exemple de Var amb codi:

var

Si ens fixem, estem veient que efectivament el scope de Var depenent de en quin lloc s'estigui declarant, el resultat (output) és un o altre.

Faltaria per veure què passa quan redeclarem una variable Var dins de context de funció o bucle i quan pel contrari, "cridem" a aquesta mateixa variable dins el mateix àmbit, sense declarar-la:

var2

Dins de la funció, i en el mateix bucle, en un primer moment, el valor de la variable serà el mateix que el valor de la variable global (fora de la funció) declarada amb el mateix nom, però a mesura que s'executen les iteracions, el seu valor modificarà. Doncs el valor llavors, en l'output fora de la funció serà el resultat de la iteració. 

En canvi:

var3

Si tornem a declarar la variable dins el bucle, el valor resultant no es veurà modificat i serà el mateix que el de la variable global (fora de la funció). Com veiem, el lloc on declarem i reasignem el valor d'una variable és molt important quan es fa servir la variable Var. Això se soluciona amb l'ús de les noves variables Let i Const.

Let 

Let és una variable amb scope local, que a diferència de Var, el seu output no dependrà de en quin lloc de el codi s'estigui declarant:

let1

S’ha d’aclarir també que no podem declarar dues vegades una mateixa variable Let amb el mateix nom (a diferència del Var), llavors apareixerà un error per consola que impedirà el correcte flux d'execució del Javascript. Això causarà que el codi sigui més net i entenedor.

Const

Const és una variable de scope global. Ja no hem de preocupar-nos de declarar la variable Var fora del context de funció, loop o condicional perquè la mateixa sigui global.

const

La variable Const a diferència de les dues anteriors, no ens permet assignar un nou valor per a la mateixa en el cas que aquesta ja estigui declarada prèviament.

Comparteix aquest article

Articles Relacionats