const let vartutorial const lettutorial const let var
const-let-var

ES6 - Const, let y var, cuál y cuándo?

Publicado: por

Tutorial de cuando usar Const, Let y var en ecmascript 6. Principales características. Desde que salió ecmascript 6, nos han dado un abanico de posibilidades para programar.

En el caso del uso de const, let y var uso 3 leyes:

  1. Usa const por defecto.
  2. Usa let si tienes que sobrescribir una variable.
  3. Usa var si eres un nostálgico o no tomas en cuenta el punto 1 y 2.

Si no te acuerdas, clasifícalo alfabéticamente, y si usas eslint puedes usar la regla prefer-const.

1. Var

Antes de los transpiladores y esta sintaxis tan sofisticada, podías hacer lo que te diera la gana, pudiendo en algunos casos dar unos resultados muy distintos a los que esperabas.

1.1. El problema de usar var

En realidad no hay nada de malo en usar var. Sin embargo, hay algunos errores que podrías evitar.

var miraMiMano = ()=>{
	var mano='✊'
}
mano; 
// ReferenceError: mano is not defined

1.2 Falta de block scoping

Puedes reasignar variables dentro de un bloque que en realidad anulan las asignaciones de los padres.

var cocodrilo = '🐊';
if(true){
    var cocodrilo = '🐸';
}
cocodrilo; // cocodrilo se convierte en sapo. 
'🐸'

Para aclarar, hacer esto con una función no cambiaría el valor:

var ardilla = '🐿';
var convertirArdillaEnKoala=()=>{
	var ardilla = '🐨';
}
convertirArdillaEnKoala();
ardilla // aun sigue siendo ardilla;
"🐿"

1.3 Hoisting

Peculiaridad del lenguaje que básicamente quiere decir que una variable declarada ‘sube’ o ‘flota’ hasta lo más alto de la función (closure) en la que se encuentre independientemente de dónde la declaremos.

2. Const y let

const y let son las nuevas palabras clave de asignación de variables.

2.1. Block scoped

Variables asignados, ya sea con const o let son block scoped. Es decir, por cada ámbito, tiene su propio valor.

let cocodrilo = '🐊';
if(true){
    let cocodrilo = '🐸';
}
cocodrilo; // cocodrilo seguiría siendo cocodrilo, tiene block scope ;)
'🐊'

Cada asignación está sujeta a su propio bloque. 🐊 solo puede convertirse en 🐸 si hay una asignación sin una nueva declaración.

let cocodrilo = '🐊';
if(true){
    cocodrilo = '🐸';
}
cocodrilo; // cocodrilo se convierte en sapo
'🐸'

2.2. Hoisting

Las variables asignadas con ambos const y let no están sujetas a subir como las asignadas var. Las variables con var inicializan con undefined. Las variables con const y let no se inicializan en absoluto, dando ReferenceError.

pollo='🐥'; // inicializa como var por defecto
const pollo='🦅' // ReferenceError: pollo is not defined

¡Y esto es genial! 😃 El uso de const y let en combinación con "use strict" impone una asignación de variable perfecta. Esto a su vez reduce el riesgo de error del desarrollador 💪

3. Const

const es la abreviatura de constante.

Las variables asignadas con const son

  • solo lectura
  • no pueden ser redeclarado o reasignado
const buho='🦉';
buho='🐳'; // Uncaught TypeError: Assignment to constant variable.
  • mutable - Object y Array pueden ser modificados 👍
const animalesDelMar={};
animalesDelMar.ballena='🐳';
animalesDelMar.pezRallas='🐠';
animalesDelMar.tiburon='🦈';
animalesDelMar.pulpo='🐙';
  • no se adjunta a window cuando se declara en alcance global

4. Let

Las variables asignadas con let son muy similares a las definidas con var. La principal diferencia es el scope (ámbito), ya que let tienen alcance de bloque. Significa que la variable se puede ver dentro de ese bloque y en cualquier subbloque.

Las variables asignadas con var tienen un alcance funcional e ignoran las reglas de alcance del bloque.

Las variables asignadas let no se pueden volver a declarar, solo se pueden reasignar.

Tampoco se adjunta a window cuando se declara en alcance global

5. Cuál y cuándo

En casi todos los casos, opta por const. La mayoría de las veces deseas que sea read-only. Usa let solo cuando sepas que una variable tendrá un valor dinámico. Probablemente no necesitarás usar var más 😅.

6. ¿Es este el final de var? 💾

Sí. Desde el inicio de const y let, el uso de var ha disminuido considerablemente. El uso const y let provoca reducción del riesgo de error para el desarrollador, hacen que el código sea más limpio.

En la práctica ayuda a los recién llegados al proyecto para entenderlo mucho mejor. Recordemos que las tareas de mantenimiento les suele tocar a programadores 'junior'. 😧

Referencias

Jhey Tompkins

Harry Manchanda

iconos unicode

 
... y finalmente... Si te ha gustado, difúndelo. Es solo un momento. escríbe algo en comentarios 😉 Gracias.