Curso Javascript - #03 const vs let vs var
Summary
TLDREste 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
🔍 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.
📘 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.
Mindmap
Keywords
💡let
💡const
💡reasignar
💡undefined
💡scope
💡bloque
💡var
💡hoisting
💡mutar
💡objeto
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
تصفح المزيد من مقاطع الفيديو ذات الصلة
PROGRAMACIÓN DESDE 0 || REUTILIZACIÓN DE VARIABLES || TEORÍA-PRÁCTICA
16 - Ámbito de las variables PHP - Curso PHP 8 desde cero (Actualizado)
T10.01. Concepto de Función - Mates 3º ESO
Curso Javascript - #04 Objetos literales, Desctructuring y Optional chaining operator
Declaring Variables without Var, Let, Const - What Would Happen?
04 Cómo usar la tabla de distribución normal
5.0 / 5 (0 votes)