Curso Javascript - #03 const vs let vs var

Summary

Este video tutorial aborda las diferencias fundamentales entre 'let', 'const' y 'var' en JavaScript. Se explica cómo 'let' permite la reasignación de valores, ideal para variables cuyo valor cambia, como contadores. En contraste, 'const' restringe la reasignación, manteniendo el valor inicial asignado. Se destacan las reglas de alcance o 'scope', mostrando cómo variables declaradas con 'let' y 'const' pueden redeclararse dentro de diferentes ámbitos. Además, se toca brevemente cómo 'var' se comporta de manera global, independientemente de los bloques de código. El video concluye con ejemplos prácticos, incluyendo mutación de objetos y arrays, para ilustrar cómo 'const' puede usarse para mutar propiedades de objetos o contenidos de arrays sin reasignar la variable misma.

Takeaways

• 🔹 **let** permite inicializar variables que pueden cambiar de valor o tipo a lo largo del tiempo.
• 🔹 **const** requiere que las variables se inicialicen al momento de declararse y no permite cambiar su valor ni tipo posteriormente.
• 🔹 Utilizar **let** cuando se prevea la necesidad de reasignar valores a una variable.
• 🔹 Optar por **const** para declarar variables cuyo valor no se pretende cambiar, aumentando así la previsibilidad del código.
• 🔹 **let** y **const** tienen un alcance de bloque, lo que significa que respetan los límites de los bloques en los que se declaran.
• 🔹 Se puede redeclarar variables con **let** o **const** dentro de un bloque diferente al de su declaración original.
• 🔹 **var** declara variables con un alcance global o de función, sin respetar los bloques.
• 🔹 Acceder a una variable **var** antes de su declaración resulta en `undefined` en vez de un error de referencia, debido al hoisting.
• 🔹 Mutar objetos o arrays declarados con **const** es posible, ya que lo que permanece inmutable es la referencia, no el contenido.
• 🔹 Es recomendable evitar **var** en favor de **let** y **const** para mejorar la claridad y manejo de alcance en el código.

Q & A

¿Cuál es la principal diferencia entre 'let' y 'const' en JavaScript?

La principal diferencia es que 'let' permite reasignar valores a una variable, mientras que 'const' no lo permite, es decir, una vez que se asigna un valor a una variable declarada con 'const', este no puede cambiar.

¿Qué sucede si intentas cambiar el valor de una variable declarada con 'const'?

El intento de cambiar el valor de una variable declarada con 'const' resultará en un error, ya que 'const' no permite la reasignación de valores.

¿Es posible declarar una variable con 'let' sin asignarle un valor inicial?

Sí, es posible declarar una variable con 'let' sin asignarle un valor inicial, lo que resulta en una variable con un valor 'undefined'.

¿Qué sucede si declaras una variable con 'let' o 'const' dos veces en el mismo ámbito?

Declarar una variable con 'let' o 'const' dos veces en el mismo ámbito generará un error, ya que no se permite la redeclaración de variables en el mismo ámbito.

¿Puedes redeclarar una variable en diferentes ámbitos con 'let' o 'const'?

Sí, puedes redeclarar una variable en diferentes ámbitos (o scopes) con 'let' o 'const'. El ámbito más cercano tendrá prioridad en el acceso a la variable.

¿Qué demuestra el ejemplo con la variable 'contador' en diferentes ámbitos?

El ejemplo muestra que, aunque no se puede redeclarar una variable en el mismo ámbito, es posible declarar la misma variable en diferentes ámbitos, y JavaScript accederá a la variable del ámbito más cercano.

¿Qué diferencia hay entre 'var' y 'let'/'const' en términos de ámbito?

La principal diferencia es que 'var' tiene un ámbito de función o global sin importar el bloque de código, mientras que 'let' y 'const' tienen un ámbito de bloque, lo que limita su acceso solo dentro del bloque donde se declaran.

¿Qué es el 'hoisting' y cómo se relaciona con 'var'?

'Hoisting' es un comportamiento de JavaScript donde las declaraciones de variables y funciones son movidas al inicio de su ámbito antes de la ejecución del código. 'var' se ve afectado por el 'hoisting', permitiendo que las variables sean accesadas antes de su declaración explícita.

¿Es posible mutar el contenido de un objeto declarado con 'const'?

Sí, es posible mutar el contenido de un objeto declarado con 'const', como cambiar las propiedades del objeto o agregar nuevas. Lo que no permite 'const' es reasignar el objeto a otro valor.

¿Qué sucede si intentas acceder a una variable 'let' o 'const' fuera de su ámbito?

Si intentas acceder a una variable 'let' o 'const' fuera de su ámbito, obtendrás un error, ya que estas variables no son accesibles fuera del bloque en el que fueron declaradas.

Outlines

00:00

🔍 Diferencias entre let y const en JavaScript

Este segmento introduce las diferencias fundamentales entre 'let' y 'const' en JavaScript, utilizando Visual Studio Code para demostrar cómo 'let' permite la reasignación de valores a una variable, mientras que 'const' prohíbe esta acción, manteniendo el valor inicial asignado. Se destaca que 'let' puede iniciar una variable sin definir, permitiendo su posterior asignación, a diferencia de 'const', que requiere una asignación inicial. Además, se explora el concepto de ámbito ('scope'), mostrando cómo variables declaradas con 'let' o 'const' dentro de un ámbito específico pueden ser redeclaradas en ámbitos distintos sin causar errores, mientras que redeclararlas en el mismo ámbito resulta en un error. Este principio subraya la importancia de entender cómo funcionan los ámbitos para evitar conflictos y errores en el código.

05:01

📘 Conclusión y aplicación de conocimientos en JavaScript

El segundo párrafo enfatiza la importancia de comprender las diferencias entre 'let', 'const' y 'var', ofreciendo una perspectiva sobre cómo 'var' se comporta diferentemente al tener un ámbito global que permite su acceso incluso antes de su declaración explícita. Este concepto, conocido como 'hoisting', se presenta como una característica menos deseable debido a potenciales problemas de legibilidad y mantenimiento del código. El narrador anima a los espectadores a profundizar en el estudio de JavaScript a través de un curso recomendado, preparándolos para aplicar estos conocimientos en frameworks populares como React, Vue, o Angular. Finalmente, se introduce brevemente cómo los objetos y arrays en JavaScript pueden mutar incluso cuando son declarados con 'const', preparando el terreno para futuras lecciones que explorarán la manipulación de estructuras de datos complejas en JavaScript.

Keywords

💡let

En el contexto de JavaScript, 'let' es una palabra reservada utilizada para declarar variables cuyo valor puede cambiar durante la ejecución del código. En el vídeo, 'let' se contrasta con 'const' para destacar su capacidad de permitir la reasignación de valores. Por ejemplo, se utiliza 'let' para inicializar un contador a cero y luego incrementarlo, mostrando cómo se puede modificar el valor de la variable.

💡const

La palabra reservada 'const' en JavaScript se usa para declarar variables cuyo valor no se pretende cambiar una vez asignado. El vídeo enfatiza que 'const' requiere que la variable sea inicializada en el momento de su declaración y no permite su reasignación, a diferencia de 'let'. Se menciona cómo intentar reasignar o cambiar el tipo de valor de una variable 'const' generaría errores.

💡reasignar

Reasignar se refiere al acto de cambiar el valor de una variable después de su inicialización. El vídeo utiliza este concepto para explicar la diferencia principal entre 'let' y 'const', donde 'let' permite la reasignación de valores, mientras que 'const' no lo permite, mostrando ejemplos prácticos de cómo esto afecta el flujo del código.

💡undefined

'undefined' es un valor que se asigna a variables que han sido declaradas pero aún no les ha sido asignado ningún valor. El vídeo ilustra cómo una variable declarada con 'let' puede inicialmente no tener asignado ningún valor, es decir, ser 'undefined', y cómo esto difiere de 'const', que requiere una asignación de valor en la declaración.

💡scope

El 'scope' o ámbito se refiere al contexto en el que las variables son accesibles dentro de un código. El vídeo explica cómo 'let' y 'const' tienen un alcance de bloque, lo que significa que las variables declaradas con estas palabras reservadas son accesibles solo dentro del bloque en que se declaran. Se proporciona un ejemplo con 'scope' local y global para ilustrar cómo funciona la visibilidad de las variables.

💡bloque

Un 'bloque' en JavaScript se refiere a un conjunto de instrucciones encerradas entre llaves '{}'. El vídeo destaca cómo las variables declaradas con 'let' o 'const' dentro de un bloque tienen un 'scope' o alcance limitado a ese bloque, permitiendo la redeclaración en bloques diferentes sin conflictos, mostrando la importancia del 'scope' en la estructura del código.

💡var

'var' es otra palabra reservada en JavaScript para declarar variables, pero a diferencia de 'let' y 'const', su 'scope' es funcional o global y no de bloque. El vídeo critica a 'var' por su comportamiento menos predecible y su hoisting, que permite que las variables sean accesibles antes de su declaración, mostrando ejemplos de cómo esto puede llevar a errores sutiles en el código.

💡hoisting

El 'hoisting' es un comportamiento de JavaScript por el cual las declaraciones de variables (y funciones) se mueven al inicio de su 'scope' antes de que el código se ejecute. En el vídeo, se menciona el 'hoisting' al hablar de 'var', indicando cómo este comportamiento puede llevar a confusión, ya que permite el acceso a las variables antes de su declaración explícita.

💡mutar

Mutación se refiere al cambio del estado o contenido de un objeto o array sin cambiar su referencia en memoria. El vídeo utiliza este concepto al final para diferenciar entre la reasignación de la variable y la mutación de su contenido, usando ejemplos con objetos y arrays para mostrar cómo 'const' permite la mutación de sus propiedades aunque no la reasignación del objeto en sí.

💡objeto

Un 'objeto' en JavaScript es una colección de propiedades, donde una propiedad es una asociación entre un nombre (o clave) y un valor. El vídeo introduce brevemente cómo trabajar con objetos, mostrando que, aunque una variable objeto declarada con 'const' no puede ser reasignada a otro valor o tipo, las propiedades del objeto pueden ser mutadas.

Highlights

Inicio de la batalla de 'let' versus 'const', excluyendo 'var' pero con notas al final.

'let' permite inicializar variables y reasignarles valores, ideal para contadores.

La principal regla de 'const' es que no permite la reasignación de valores.

Diferencia entre 'let' y 'const': 'let' acepta reasignaciones y 'const' exige inicialización inmediata.

'let' puede iniciar como undefined, mostrando flexibilidad en la inicialización.

Tanto 'let' como 'const' no permiten declarar dos veces la misma variable en el mismo ámbito.

En un nuevo ámbito ('scope'), es posible declarar nuevamente una variable con el mismo nombre.

La visibilidad de las variables 'let' y 'const' se limita a su ámbito, no siendo accesibles de un ámbito externo.

'var' tiene un alcance global, lo que permite su acceso incluso antes de ser declarada.

El 'hoisting' permite el acceso a variables 'var' declaradas posteriormente, aunque su valor inicial sea 'undefined'.

Mutación de objetos y arrays es posible con 'const', distinguiendo entre reasignación y mutación.

La práctica de mutar objetos y arrays muestra la flexibilidad de 'const' para estructuras de datos complejas.

Análisis de la utilidad de 'var' en aplicaciones modernas y su posible reemplazo por 'let' y 'const'.

Invitación a reflexionar sobre el uso de 'var' en contextos específicos y su relevancia actual.

Conclusión con la recomendación de preferir 'let' y 'const' sobre 'var' para un manejo de variables más predecible y seguro.

Transcripts

vamos a comenzar con la batalla de coms

versus led por si acaso al bar lo vamos

a dejar aparte pero de todas formas les

voy a dar unas notas al final de este

vídeo tutorial si nos vamos a nuestro

querido visual Studio code si abrimos la

terminal pump vamos a notar que esta

palabra reservada led no sirve para

inicializar una variable Como por

ejemplo contador Mira qué bonito lo voy

a inicializar en cero si aparece el cero

por favor ahora sí y le ponemos un

consola de contador si guardo miren que

ahí está el cero maravilloso Cuál es la

diferencia entonces entre led y con

esquelets no permite poder

reasignarle un valor por ejemplo si este

contador fuera aumentando no va a haber

ningún problema yo lo voy a hacer muchas

veces y ese contador aumenta Este es un

ejemplo de uso muy común de leds pero si

esto mismo lo Tratamos de hacer con con

miren que nuestro sitio web va a

reventar por qué porque la primera regla

de cons es que no puede ser reasignado o

sea si ya le pusimos 0 te quedaste

tranquilito con ese cero y no le puedo

ir aumentando o incluso cambiar el tipo

de valor si acá yo le pusiera un String

tampoco lo va a aceptar en cambio led le

da lo mismo puede aceptar cualquier cosa

le estamos reasignando un valor sin

ningún problema se va entendiendo más o

menos cada vez que queramos entonces

cambiar el valor o reasignar un valor de

una variable vamos a utilizar led y en

todos los otros casos vamos a utilizar

hay otra diferencia Y antes que se me

olvide es que led también podemos

iniciar la variable no sé qué dije ahí

que dije ahí la podemos inicializar como

On The Final por lo tanto si yo lo pinto

en consola este contador voy a guardar

miren que no tiene nada pero con la

palabra reservada con Esto va a explotar

entonces también tenemos otra diferencia

con Sí o sí tenemos que pasarle un valor

de inmediato Como por ejemplo

este cero pero con leds resumiendo si

podría ser un valor un defined y ahora

sin problema podemos asignarle un nuevo

valor que en este caso Recuerden que

estaban de final y ahora debería

aparecer ese número uno resumiendo todo

lo que hemos llevado hasta acá let's se

le puede reasignar un valor puede

comenzar como and The Final y con no

puede comenzar and thefiner y no le

podemos reasignar su valor más adelante

en este mini curso vamos a seguir

practicando con con porque vamos a hacer

que objetos y array muten que no es lo

mismo que resignar su valor dejando las

diferencias y esa batalla vamos a ver

qué cosas comparten Como por ejemplo Si

volvemos a declarar contador como un led

miren que tampoco puedo volver a

inicializar esa variable con la palabra

reservada led Y qué pasa con con Blue

web si nosotros ponemos ahora un const

de cero también va a pasar el mismo

error Por lo tanto tanto led como cons

no permiten declarar dos veces la misma

variable pero aquí viene el juego

verdadero Qué pasa si nosotros hacemos

un scope un ambiente un ámbito local por

ejemplo si ahora hago otra constante con

contador igual a 100 qué Creen ustedes

que me va a pintar Contador se va a

reventar mi sistema Bueno ahí es el

medio spoiler ahí está el 100 qué está

pasando acá que en un ambiente en un

scope en un ámbito Nosotros sí podemos

volver a declarar variables con cons o

leds el ámbito siempre va a buscar la

variable más cercana lo primero que va a

buscar es en su propio ámbito por lo

tanto llega contador que es 100 y hasta

ahí nomás se queda este console en

cambio Si nosotros dejamos comentado

este contador fíjense que ahora va a ser

cero porque es cero porque en este

ámbito en este scope en este ambiente

como te quiera decirle no existe

contador por lo tanto sube un nuevo

nivel y llega hasta contador que es cero

Esto es lo mismo por si acaso con leds

los dos tienen un alcance viven en un

scope si ahora ustedes quieren seguir

jugando con otro If pueden hacer todos

los anidados que quieran para ir jugando

fíjense que siempre va a buscar lo más

cercano que su propio ambiente su propio

scope y si no existiera va a ir subiendo

En este caso llegamos a 100 y si no

existe el 100 va a llegar hasta el

ámbito global Pero hay una pequeña

diferencia que sí desde el ámbito local

podemos empezar a subir pero no al

contrario Qué pasaría si no existe esa

variable global o en el ámbito global

pero sí existe en un ámbito distinto o

local que sería este segundo If si

nosotros guardamos miren que acá me va a

decir que contador no existe por lo

tanto la regla es que desde adentro

hacia afuera si podemos pero desde

afuera hacia adentro no podemos acceder

a esas variables tanto con led o con por

si acaso es el mismo problema porque

esta variable no está declarada esto es

maravilloso si esto te parece muy

difícil no te preocupes porque te voy a

dejar en la descripción de este vídeo un

curso de javascript con más de 16 horas

de estudio donde repasamos todos estos

conceptos y con prácticas este mini

curso está hecho para que ustedes vean

las definiciones y obviamente después se

puedan pasar a View a react iceberg a

angular a lo que ustedes quieran para

finalizar vamos a ver el mismo ejemplo

con bar voy a guardar y ahora tenemos

una asquerosidad porque sí bar todo lo

que ustedes declaren con bar siempre va

a ser global por lo tanto podemos

acceder a él sin ningún problema incluso

podemos acceder a él si la variable está

declarada después Aquí bueno no me sale

el 200 me salen de final pero tampoco

explota mi sitio web se recuerdan que

con con o con leds esto debería explotar

porque explota porque la variable

todavía no está siendo declarada y yo

estoy tratando de acceder a ella Pero en

cambio con bar si podemos acceder a esa

variable que en este momento es and The

Final pero por lo menos no explota

nuestro sitio web ojo que esto no es una

ventaja Este es un término que nosotros

también analizamos que se llama Hosting

vuelvo a repetir en la descripción del

video te dejo ese cursazo hemos revisado

de las principales diferencias entre

cons y LED y déjame en los comentarios

si tú ocuparías bar en alguna situación

a mí todavía no se me ocurre Pero puede

ser que más de uno tenga alguna idea de

cómo utilizar bar en una aplicación Ay

ay ay voy a estar atento a tu comentario

Muchas gracias a todas las personas que

han adquirido los cursos

tanto de react como de View vamos pasito

a pasito viendo las definiciones y

siempre con la buena onda que a ustedes

los caracteriza nos vemos como siempre

en el siguiente vídeo tutorial

Está bueno está bueno Y si tiró el

ejemplo con los objetos no mala idea no

porque todavía no vemos los objetos

ya no lo vemos entonces más adelante

pero no me reta

para todos los que se quedaron hasta el

final y se quedaron con la duda de que

quiera esa cosa de que se estaba mutando

algo y es que nosotros podemos trabajar

también con objeto eso lo vamos a ver un

poquito más adelante pero imaginémonos

que hacemos un objeto llamado persona y

esa persona va a tener un nombre que en

este caso se va a llamar Blue web esa

persona también va a tener un apellido

que en este caso va a decir suscríbete

que apellido más raro suscríbete miren

si lo pintamos en consola nosotros

tenemos personas cierto con las reglas

que hemos visto no podríamos nosotros

decir la hora que persona va a ser un

objeto o va a ser por ejemplo más

radical un String vamos a poner aquí un

String si yo guardo miren que me está

saliendo el error como volvemos a

repetir una constante no se puede

resignar su valor Pero qué pasa si ahora

accedemos a una propiedad que por

ejemplo puede ser nombre y le vamos a

colocar YouTube voy a guardar y miren

que si pintamos en consola persona no

explota mi sitio web y ahora dice

suscríbete a YouTube en este momento el

dato no ha cambiado no ha sido

reasignado sino que estamos mutando ese

objeto por eso les decía que tanto los

objetos como si nosotros tuviéramos un

array podemos utilizar incluso métodos

que mutan el array en este caso le voy a

empujar un nuevo elemento y va a ser una

manzanita Y si nosotros vemos en consola

frutas voy a guardar fíjense que sí

existe ese elemento en cuestión el dato

no ha cambiado el dato muta por eso con

con lo podemos realizar era mejor

terminar el vídeo así cierto bueno

nos vemos