JavaScript Next

Declaración de variables locales Más videos

Descripción del tema

JavaScript se ha caracterizado por manejar el scope de una variable dentro de una función, mejor conocido como lexical scope. La nueva versión nos permite declarar variables locales, limitando el scope a un bloque.

Esto significa que ahora podremos definir una variable dentro de un bloque if o un for, y solo existirá dentro de ese bloque, una vez que termina la ejecución de ese bloque la memoria sería liberada.

Para definir una variable local utilizamos el operador let, este operador nos permitirá crear la variable dentro del bloque en el que estamos, por ejemplo.

let x = 1;

if(true){
  let x = 5;
  console.log(x); //=> 5
}

console.log(x); //=> 1

Como se puede observar en el ejemplo, estamos creando dos variables x, la variable dentro del bloque if solamente existirá en ese bloque, fuera del if existirá la primera declaración de x.

Otro ejemplo de uso de variables locales es un for, por ejemplo:

let callbacks = [];

for(let i=0; i<10; i++){
   console.log(i);
   callbacks.push(function(){
      console.log(i);
   });
}

callbacks[5](); // 5

console.log(i); //Uncaught ReferenceError: i is not defined

Como se puede observar, si intentamos acceder a la variable i fuera del bloque for, ocurrirá un error, ya que i no existe fuera del bloque for.

Algo importante a notar del ejemplo anterior es que la variable i se esta re-declarando por cada iteración del ciclo, por lo tanto dentro de cada función que creamos se imprimirá correctamente el valor deseado. Como ejercicio de práctica, intenta cambiar let por var en la declaración de i, ¿Que número imprime en la consola cuando ejecutamos el callback en la posición 5? (Deja un comentario con tu respuesta)

Soporte

Actualmente la mayoría de los navegadores modernos soportan esta característica, si requieres soportar nevegadores antiguos Babel es la solución. Te dejo una gráfica del soporte actual.

Let support

Soporte de variables locales

Declaración de bloques 

Para declarar un bloque simplemente podemos usar las llaves {}, con esto podemos definir un nuevo scope local, todas las variables (creadas con let) existirán únicamente dentro de este bloque.

{
  let x = 1, 
      y = 2,
      z;
}

También podemos declarar más variables locales usando un mismo let, asignarle valores inmediatamente o definirlas sin valor alguno.

Conclusiones

Una de las principales razones para utilizar variables locales es el hecho de que estas variables serán destruidas en cuanto termine la ejecución del bloque, esto hará que el navegador tenga un mejor manejo de la memoria, permitíendonos tener aplicación más eficientes.

Personalmente he venido usando esta sintaxis desde ya hace varios meses, actualmente con Babel podemos transpilar a ES5 si necesitamos soportar navegadores antiguos. Si estas usando Chrome abre la consola y corre los ejemplos que he puesto, verás como funcionan de maravilla!

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso JavaScript Next, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

1Comentario

  • Avatar-8 andres felipe 12/04/2016

    me encantaría aprender nodejs y conseguir un consultor para la empresa donde laboro saludos 3207330254 andrés felipe naranjo quintero

    Instructor del curso

    Crysfel3

    Autor: Crysfel Villa

    es Ingeniero de Software, JavaScript ha sido el lenguaje de su preferencia desde que aún no era tan popular allá por el 2004. Actualmente trabaja como consultor resolviendo problemas relacionados a JavaScript.

    Descarga Código Fuente

    Regístrate a este curso

    Este tutorial pertenece al curso JavaScript Next, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

    Ya que este curso no está finalizado al registrarte podrás recibir en tu correo los nuevos tutoriales de este curso!

    Tendrás acceso a descargar los videos, códigos y material adicional.

    Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

    Llevarás un registro de tu avance.