Diferencias entre var, let y const

Clase 48 de 55 • Fundamentos de JavaScript 2018

Resumen

““var”” es la manera más antigua de declarar variables. No es muy estricta en cuanto al alcance, ya que al declarar variables de esta forma, dichas variables podrán ser accedidas, e incluso modificadas, tanto dentro como fuera de los bloques internos en una función.

Con ““let”” por otra parte, el alcance se reduce al bloque (las llaves) en el cual la variable fue declarada. Fuera de este bloque la variable no existe. Una vez declarada la variable con let, no se puede volver a declarar con en ninguna otra parte de la función.

““const”” al igual que ““let”” se define en el contexto o alcance de un bloque, a diferencia de let y var, las variables definidas como constantes (const), ya no podrán ser modificadas ni declaradas nuevamente, en ninguna otra parte de la función o el contexto en el que ya existen.

La recomendación es reducir siempre al mínimo el alcance de nuestras variables, por lo que se debe usar let en lugar de var mientras sea posible.

Pablo Andres

student•

Resumen de la clase:
var - let - const

• Cuando declaramos variables con ‘var’ siempre conviene declararlas ‘arriba’ del código en el que sea claro cuáles van a ser las variables que se van a usar dentro de nuestra función o programa.

• Dentro de una función javascript detecta todas las variables declaradas con ‘var’ y las ‘declara’ por sí solo como si estuvieran ‘arriba’ en el código. Por lo que si se declara un var dentro de un bloque else y este no es accedido por el condicional, la variable ‘var’ declarada dentro de ese else existe de todas maneras.

• Si utilizamos ‘let’, el alcance de esa variable se ve reducido únicamente al bloque de código donde es utilizado.

• ‘const’ se comporta parecido a let sólo que no es posible reasignarlo.

• Es posible modificar una variable ‘const’ en el caso de un array[ ] con el método push() por ejemplo.

• Reducir siempre al mínimo el alcance de nuestras variables.

• Utilizar 'let’ si tenemos que reasignar una variable.

• Si nunca tenemos que reasignar una variable usamos ‘const’.

Nathaly Stefani Riaño Bejarano

student•

Gracias! ✌

Pablo Andres

student•

Hola, nuevamente me alegra que te sea útil.
Y te vuelvo a pasar el link del resumen del curso completo.
Saludos.

Santiago Lopera Naranjo

student•

Considero esta clase debería ser de las primeras del curso

Santiago Bastidas Rodríguez

student•

De acuerdo, porque en un principio si hacemos la investigación por otros medios, vamos a encontrar que este tema antes de la clase y es probable que a este nivel del curso ya sea innecesario.

Oscar Stevens Cuartas Bejarano

student•

es posible, y … es decir, esta bien? ser profesionalizarse y trabajar como BACK END Y FRONT END??? O es mejor elegir solo 1 camino ?

(teniendo en cuenta que en paises como el mio “colombia” quieren que uno haga desde el cafe, barrer y hasta diseñar y construir turbinas de aviones y de paso para transbordadores espaciales, por unos centavos al mes)

Ernesto García

teacher•

Está bien siempre y cuando tengas claras las limitaciones del stack que utilices. Definitivamente podemos trabajar de ambos lados pero es muy complicado lograr ser máster en absolutamente todo.

Bryan Estiven Silva Mercado

student•

En mi país Ecuador es igual , creo que si se puede si uno se dedica y aprende las bases de ambos y luego poder destacarse en uno de los dos.

Carlos Guillermo Coello Valenzuela

student•

Hola, aquí les dejo una explicación un poco más amena para los que les causa confusión los scopes y el ambito de una declaración.

// scope global - disponible en todos los scopes
var sacha = "sacha1"

function miFuncion() {
	// empieza scope miFuncion

	if (true) {
		// empieza scope if

		var sacha = "sacha2";
		// se declara dentro del scope miFunción
		// está disponible desde el inicio de la función
		// tendrá valor undefined hasta ejecutarse esta linea
		// dejará de estar disponible cuando termine el scope miFuncion

		let sacha2 = "sacha3";
		const sacha3 = "sacha4";
		// se declaran dentro del scope if
		// están disponibles a partir de esta línea con el valor asignado
		// dejan de estar disponibles cuando termine el scope if

		// termina scope if
		// los datos declarados con let y constdentro del scope if dejan de existir
	}
	if (true) {
		// inicia scope if 2

		let sacha = "sacha5";
		let sacha2;
		console.log(sacha, sacha2);
		// imprimirá: sacha5 undefined
		// a pesar de haber tres sacha declaradas
		// (scope global, scope miFunción, scope if 2)
		// console.log tomará la declarada en el scope más cercano
		// (scope if 2 - este)
		// sacha2 no existe en ningún otro scope
		// en este (if 2) fue declarade más no definida
		// por lo que su valor es undefined

		// termina scope if 2
		// los datos declarados con let y const dentro del scope if 2 dejan de existir
	}
	console.log(sacha);
	// imprimirá: sacha2 (declarada en scope miFunción, inicializada en scope if)

	// termina scope miFunción
	// los datos declarados con let, const y var dentro del scope miFunción dejan de existir
}

console.log(sacha);
// imprimirá: sacha1

Scopes

scope local: es el bloque en que se está ejecutando una instrucción.
scope de una función: es el bloque que está delimitado por una función.
scope global: es el que está accesible sin importar en qué bloque se esté. Todos los scope pueden tener otros scopes dentro.

Declaraciones

var: se declara en el scope de la función con valor undefined, se inicializa al momento de ejecutarse cualquier línea donde se alla definido (dentro del scope de la función), si no se encuentra dentro de ninguna función entonces se declara en el scope global, puede ser modificada dentro del scope de la función/global desde el inicio del mismo, la primera inicialización debe ser con var, puede ser inicializada con var varias veces, una por cada scope local que esté contenido dentro del scope de la función/global.
let: se declara dentro del scope local al momento de la ejecución de la línea, deja de estar disponible cuando termina el scope local, se puede modificar dentro del scope local, a partir de la línea en la que se declara.
const: se declara dentro del scope local al momento de la ejecución de la línea, deja de estar disponible cuando termina el scope local, no puede ser modificada una vez declarada.

Jonathan HERNANDEZ

student•

Muchas gracias, gran aporte !!!!

Rodrigo Reyes

student•

👌🏼

Jorge Arturo Salgado Ordoñez

student•

Interesante, pero creo que esta clase debería ser de las primeras del curso.

Ivan Santiago

student•

‘No utilizar var, por favor’ Jajaja 😄

Juan Pablo Lopez Guzman

student•

Entra un valor a un ‘var’ … a bueno mejor a un let / const

Cristobal Peña

student•

Pero para el caso del ciclo for puesto en el video. ¿Cómo obtienes el valor final de i utilizando let? Pues Sacha utilizando let obtuvo undefined como resultado... Gracias.

Daniel Cu Sanchez

student•

Me agrado la dinamica del curso! Pudieran mejorar la parte calbacks y su explicación

Sergio Arturo Enriquez Nava

student•

Hola daniel, a mi me parece que el video de como funciona el asincronismo lo explica muy bien https://www.youtube.com/watch?v=bWvnWhVCHAc, callback en español quiere decir llamar de vuelta, Es como cuando nos mandaban por la tortilla de pequeños y decian, ya que estas por a ya pregunta cuanto vale la coca de 2 lts

aquie te dejo el enlace para que tengas mas informacion https://developer.mozilla.org/es/docs/Glossary/Callback_function

saludos

Ettore Stark

student•

Llegado a este punto del curso noto que pese a usar JavaScript durante un par de años debía aprender con mayor detalles ciertos conceptos.

Alexander Vega

student•

Var: para uso de variables globales. Let: para variables locales. Const: igual que let, pero no puedes reasignarle un nuevo valor en el mismo codigo.

es lo que pude entender.

Jonathan Edwin Gutiérrez Olvera

student•

Si uso una variable let hasta arriba con alcance global, ¿Cuál seria la diferencia de usar var y cuál es más recomendable en este caso? 🤔

Francisco Ponce

student•

Hola jegolvera,

Una de las diferencias se llama hoisting. Si copias el ejemplo que esta aquí abajo de var, puedes notar como no hay un error de variables no definidas

var

console.log(a);
var a= 'Hola mundo';

Y ahora con let... sí hay un error de definicióm

let

console.log(b)
let a = 'Hola mundo'

Sin embargo muy extenso este tema por lo cual te dejo un recurso que podría ayudarte a entender mejor el concepto. recurso 1 recurso 2

Melsar Otoniel Andrade Castillo

student•

Personalmente uso let y he dejado de usar var Siento que usar let me evita errores y dolores de cabeza en el futuro.

Ramiro Calo

student•

Alguien sabe quien es el encargado de liberar la memoria cuando finaliza el alcance de una variable? es el propio browser? o se puede correr algo?

y cuando definimos una clase, la creamos (new) y la quiero borrar? basta con hacer null?

Miguel Gil Rosas

student•

Es el motor (runtime) del lenguaje el encargado de hacer eso, en este caso será el intérprete de Javascript que empaqueta Chrome. En los lenguajes de más alto nivel existe un proceso de fondo llamado Recolector de Basura (Garbage Collector), que revisa el HEAP (almacen de memoria de un proceso donde se guardan los objetos) y controla que los objetos aún estén en alcance, si no lo están los marca para eliminar y cuando haga falta memoria se puede reutilizar. En los de más bajo nivel hay que hacerlo a mano.

Respecto a lo de la clase si creas un objeto con new,y guardas la referencia en una variable asignas un trozo del HEAP para ese objeto. Si luego esa variable pierde el alcance o le asignas otro valor y nadie más apunta a ese objeto el Recolector de Basura lo eliminará.

Fernando Huamán Santamaria

student•

++var++: Este termino nos permite declarar una variable casi global, debido a que cuando declaramos una variable dentro de una función, al querer invocar un console.log() de la variable nos retorna un error pero si lo dejamos libre o en un for si se puede obtener su valor desde cualquier parte del código. ++----------------------------------------------------------------------------------------------------------------------------------------++ ++let++: Este termino también nos permite declarar un tipo de variable que se limita al cuerpo donde este. Por ejemplo:

Si lo declaramos afuera de cualquier function , for , if , etc. entonces va a ser un tipo de variable global.
Si lo declaramos dentro de una function(), entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo de la function.
Si lo declaramos dentro de una for, entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo de for.
Si lo declaramos dentro de una if, entonces si queremos obtener el valor de la variable va a tener que ser dentro del cuerpo del if.
Y asi con los distintos casos que se encuentre.

++----------------------------------------------------------------------------------------------------------------------------------------++ ++const++: Este termino nos permite declarar una variable que contiene un valor o tambien que contiene un conjunto de valores en un array a los cuales no pueden ser modificados sus respectivos valores porque sino nos retorna un error. Pero lo que si se puede hacer cuando tenemos una variable constante que tiene un array con valores es agregarle mas valores con el metodo "nombre_de_variable.push(valor)". ++----------------------------------------------------------------------------------------------------------------------------------------++ ++CONSEJO++:

En el caso de var o let es mejor usar la segunda opcion porque en caso de que haya un debug pues tus posibilidades de encontrar el error en el codigo serian menores ya que al declarar una varaible con let hay que recordar que este reduce su dominio de uso.
Si en caso declares una variable que cuyo valor no quieres que cambie en todo el tiempo, seria mejor declararla con el termino const.

Cristobal Peña

student•

Gracia spor el aporte. Pero te dejo una pregunta.

Para el caso del ejemplo con el ciclo for del video ¿cómo puedo obtener el mismo resultado con var utilizando unicamente let? Me refiero a hacer console.log con el último valor de i.

Gracias

Cristhian Camilo Perez Veloza

student•

Importante:
“Reducir al mínimo el alcance de las variables”

Luis Angel Frias Herrera

student•

La principal diferencia entre var, let y const es el alcancé que tienen y capacidad de alteración de los datos que estas contienen.

let y const tienen un alcance limitado al entorno o función en el que son declarados, ya sea dentro de un for, if o función. Por otro lado var no importa el lugar donde se declare, este ocupa un espacio de memoria y por lo tanto ha sido declarada permitiendo así que en algún lugar sobre-escriba el contenido de otra variable con el mismo nombre.

En resumen, la mejor forma de declarar variables en javascript, es usando let para datos que se cambiarán a futuro, y const para valores definidos por ejemplo, los llamados "número mágicos"

Yossijaki Jorge Astilleros Chávez

student•

var > let > const

Luis David López Berber

student•

Excelente observación

Jose L. Figueroa

student•

Hoisting. En JS una variable puede ser declarada después de que esta ha sido usada, en otras palabras, una variable puede ser usada antes de que esta haya sido declarada.

Ya que lo que hace internamente JS es que si la variable ha sido declarada / usada en algún punto dentro del bloque, es pasar dicha variable a la parte superior del bloque.

Daniel Vaca

student•

Vaya, esto si es realmente nuevo. Hago la analogía que let permite el mismo comportamiento de variables como Java o C#, mientras que var es un comportamiento bastante propio de javascript.

Jeiner Muñoz Olivera

student•

Esto les va a servir mucho. A mí me ayudó a despejar todas mis dudas con ejemplos. Es la página de Fili Santillán: Diferencias entre variables.

Carlos Alfonso Garcia Rivera

student•

gracias 👍

Walter Omar Barrios Vazquez

student•

Var, Let, and Const – What's the Difference?

Eliseo Ávila

student•

Es un excelente aporte, muchas gracias!!

Daniel Páez

student•

Y aquì dejo mi còdigo depurado con mis aprendizajes 😃
Disfrutalo

/*
Autor: Daniel Páez
URL Autor: Daniel Páez
Tema de la clase: var, let, const
Descripción: var, let, const
URL Autor:  heysoypaez.com
URL código: github.com/heysoypaez
*/

/*PROTOCOLO DE VERIFICACIÓN DE FUNCIONAMIENTO
==================================*/
//Imprimiendo algo en la consola
console.log("inicializando archivo");


/*DECLARACIÓN DE OBJETOS
============================*/		
let daniel = {
		nombre: "Daniel",
		apellido: "Pàez",
		edad: 18

	}

/*DECLARACIÓN DE VARIABLES
==================================*/
//Null

/*DECLARACIÓN DE FUNCIONES
========================================================*/


/*FUNCION PARA VER SI ES MAYOR DE EDAD
incluyendo las buenas prácticas de let*/

function esMayorDeEdad(persona) {

	/*DECLARACIÓN DE VARIABLES CONSTANTES
	======================================*/
	const MAYORIA_DE_EDAD = 18;
	//En const no podemos volver a asignar el valor de la variable.

	/*DECLARACIÓN DE VARIABLES REASIGNABLES
	======================================*/
	let mensaje
	let mensaje2
	/* El alcance donde podemos acceder a esta varible se reduce al bloque de codigo donde fue creado. */

	/*EJECUCION DE LA LÓGICA
	========================*/

	//siempre que sea efectivo evita magic numbers
	if (persona.edad >= MAYORIA_DE_EDAD ) {

		mensaje = "Es mayor de edad"

	}

	else {

		mensaje = "Es menor de edad"
		mensaje2 = "Otro mensaje"

	}

	/*OUTPUT, MOSTRAR
	==================*/
	return console.log(mensaje, mensaje2)
}


/*EJECUCIÓN DE FUNCIONES Y PROMESAS
========================================0*/

//funcion 1
esMayorDeEdad(daniel)


//funcion 2
for (let i = 0; i <= 3 ; i++) {
	//js agrega a i despues del primer ciclo
	console.log(i)

}


//Fijate como el valor de esta variable i es independiente a la del ciclo for
let i;

console.log(`Terminó el for el valor de i es ${i}`)



/*=======================================
RENDER EN PANTALLA
Agregando al html datos de la clase
=======================================*/

//Variables
let temaClase = "Var, let y const";
let titulo = document.getElementById("title")
let contenidoClase = document.getElementById("contenido-clase")

//Variables reasignadas
titulo.innerHTML=  temaClase;
contenidoClase.innerHTML= temaClase;

//contenido de la clase

let apuntes = document.getElementById("apuntes")
let textoContenido = "=> Reduce al minimo el alcance de cada una de las variables a menos que tenga un objetivo concreto" 

apuntes.innerHTML = `${textoContenido}`;

Aaron Joel Limachi Quispe

student•

Es muy divertido, parece de película

Daniel Páez

student•

¿ Por qué te parece divertido Najack ? :D