Fundamentos de JavaScript 1 (JSE):

Módulo 2

Sección 1
Variables

Temas en esta sección:

 Nombrar, declarar e inicializar variables.

 Declaraciones y modo estricto.
 Cambio de valores en variables.
 Constantes.
 Alcance (bloques, sombreado, y hoisting).

Variables
¿Para qué las necesitamos realmente? Como puedes adivinar, la mayoría de los programas
son bastante complejos y rara vez podemos resolver el problema con una sola operación. Por
lo general, el programa constará de muchas más operaciones, cada una de las cuales puede
producir algunos resultados intermedios, que serán necesarios en los siguientes pasos. Las
variables nos permiten almacenar dichos resultados, modificarlos o alimentarlos en
operaciones posteriores.

Nombrado de variables
Imagína a las variables como contenedores en los que puedes almacenar cierta información
(dicha información se denominará valores de variables). Cada contenedor debe tener su
propio nombre, mediante el cual podremos indicarlo claramente.
Por lo general, tenemos bastante libertad cuando se trata de inventar estos nombres, pero
recuerda que deben referirse a lo que almacenaremos en la variable (por ejemplo, altura,
color, contador de pasos, etc.). Por supuesto, JavaScript no verificará la correlación entre el
nombre y el contenido de la variable; es simplemente una de las muchas buenas prácticas
que facilitan que nosotros y otros entendamos el código más adelante.

En la mayoría de los lenguajes de programación, se debe declarar una variable antes de

usarla, y JavaScript no es una excepción. Declarar una variable es simplemente "reservar" el
nombre de la variable. De esta manera, le informamos al programa que, en la parte posterior
de la ejecución, usaremos este nombre para referirnos a nuestro contenedor, para recuperar
un valor de él o guardar un valor en él.

En JavaScript, los nombres de las variables pueden constar de cualquier secuencia de letras
(minúsculas y mayúsculas), dígitos, guiones bajos y signos de dólar, pero no deben comenzar
con un dígito. Hay una lista de palabras reservadas que no se pueden usar como nombres de
variables (consulta la tabla a continuación).

Lo importante también es que el intérprete de JavaScript distingue entre minúsculas y

mayúsculas, también en nombres de variables, por lo que nombres como test , Test ,
o TEST serán tratados como variables diferentes.

Hay un conjunto de palabras reservadas que no se pueden usar para nombrar variables,
funciones o cualquier otra cosa. Son partes integrales del lenguaje y se les asigna un
significado que no se puede cambiar. A continuación encontrarás una lista de ellas:

abstract arguments await boolean

break byte case catch
char class const continue
debugger default delete do
double else enum eval
export extends false final
finally float for function
goto implements if import
in instanceof int interface
let long native new
null package private protected
public return short static
super switch synchronized this
throw throws transient true
try typeof var void
volatile while with yield

Declarando variables
Como mencionamos anteriormente, declaramos la variable para reservarle un nombre. Esto
es una simplificación, porque de hecho, el espacio de memoria también está reservado para la
variable, pero al programar en JavaScript, prácticamente nunca tenemos que pensar en lo que
sucede en la memoria. Por lo general, los valores almacenados en la variable podrán
modificarse durante la ejecución del programa (después de todo, son "variables"). ¿Por qué?
Porque podemos declarar variables cuyos valores no se pueden cambiar. Para ser honesto,
ya ni siquiera las llamamos variables, las llamamos constantes. Para las declaraciones,
usamos las palabras clave var o let para variables y const para constantes. Por ahora,
sin embargo, sigamos con las variables habituales y volveremos a las constantes en un
momento.

Analicemos el siguiente ejemplo de código (también lo encontrarás en la ventana del editor;

ejecútalo allí y observa los resultados en la consola):

var height;

[Link](height); // -> undefined

[Link](weight); // -> Uncaught ReferenceError: weight is not

defined

La primera línea es la declaración de la variable (podemos ver la palabra clave var ). Esta
declaración significa que la palabra height sera tratada como el nombre del contenedor para
ciertos valores.

La declaración, como otras instrucciones de JavaScript, debe terminar con un punto y coma.
En la segunda línea, tratamos de escribir el valor de esta variable (es decir, lo que hay en el
contenedor) en la consola. Debido a que aún no hemos puesto nada allí, el resultado no está
definido (el intérprete conoce esta variable, pero aún no tiene valor, el valor no está definido).
En la siguiente línea, tratamos de imprimir el contenido de la variable weight... que olvidamos
declarar. Esta vez, veremos ReferenceError . El intérprete de JavaScript, que ejecuta
nuestro programa, nos ha informado que no conoce una variable con este nombre (por lo que
la variable en sí no está definida).

Variables - Declarando variables cont.

En el ejemplo, usamos la palabra clave var . La alternativa es la palabra clave let . Usamos
ambas palabras clave de la misma manera. Ambas están destinados para declarar variables,
y ambas se pueden encontrar en diferentes ejemplos en Internet o en libros. Sin embargo, no
son exactamente iguales y discutiremos las diferencias en su funcionamiento más adelante en
este capítulo (incluso en varios lugares).

La palabra clave var proviene de la sintaxis JavaScript original, y la palabra clave let se
introdujo mucho más tarde. Por lo tanto, encontrarás var en programas más antiguos.
Actualmente, se recomienda enfáticamente usar la palabra let por razones que discutiremos
en un momento.

Entonces, echemos un vistazo a nuestro ejemplo reescrito esta vez usando la palabra
clave let .

let height;
[Link](height); // -> undefined

Una de las diferencias básicas en el uso de var y let es que let nos impide declarar otra
variable con el mismo nombre (se genera un error). El uso de var le permite volver a declarar
una variable, lo que puede generar errores en la ejecución del programa.

var height;
var height;
[Link](height); // -> undefined

El ejemplo anterior demuestra la posibilidad de volver a declarar una variable usando la

palabra clave var. En esta situación, no causará un error, pero en programas más complejos,
una redeclaración, especialmente por accidente, puede tener consecuencias. Al declarar con
let, el intérprete verifica si dicha variable ya ha sido declarada, sin importar si se usó let o var
en la declaración anterior.

let height;
let height; // -> Uncaught SyntaxError: Identifier 'height' has
already been declared
[Link](height);
Así que usa let para declarar variables, aunque solo sea porque no quieres volver a declarar
accidentalmente una variable.
Inicializando variables
Después de una declaración exitosa, la variable debe ser inicializada, en otras palabras,
debe recibir su primer valor. La inicialización se realiza asignando un determinado valor a
una variable (indicado por su nombre). Para asignarlo usamos el operador =.

Puedes asignar a una variable: un valor específico; el contenido de otra variable; o, por
ejemplo, el resultado devuelto por una función.

La inicialización se puede realizar junto con la declaración o por separado como un comando
independiente. Es importante ingresar el primer valor en la variable antes de intentar leerla,
modificarla o mostrarla.

let height = 180;

let anotherHeight = height;
let weight;
[Link](height); // -> 180
[Link](anotherHeight); // -> 180
weight = 70;
[Link](weight); // -> 70

En el ejemplo anterior (verifícalo en el editor), las declaraciones de las variables height y

anotherHeight se combinan con su inicialización, mientras que la variable weight se declara e
inicializa por separado. Las variables height y weight se inicializan proporcionando valores
específicos (más precisamente, un número), mientras que la variable anotherHeight recibe un
valor leído de la variable de height. Los valores de todas las variables se muestran en la
consola.

Por cierto, presta atención a una cosa. Si especificas un nombre de variable en [Link], el
intérprete lo reconoce y muestra su valor. Si pones el mismo nombre entre comillas, se tratará
como texto sin formato y se mostrará como tal.

let height = 180;

[Link](height); // -> 180
[Link]("height"); // -> height

Declaraciones y modo estricto

JavaScript tuvo algunos cambios importantes introducidos en 2009 y 2015. La mayoría de
estos cambios ampliaron la sintaxis del lenguaje con nuevos elementos, pero algunos de ellos
se referían solo al funcionamiento de los intérpretes de JavaScript. A menudo se trataba de
aclarar el comportamiento de los intérpretes en situaciones potencialmente erróneas, como en
los casos de inicialización de variables sin ninguna declaración previa.

Veamos un ejemplo:

height = 180;

[Link](height); // -> 180

A primera vista, puedes ver que nos hemos olvidado de declarar la variable height. La sintaxis
de JavaScript original permitía tal negligencia, y en el momento de la inicialización hizo esta
declaración por nosotros. Parece una solución bastante buena, pero desafortunadamente a
veces puede conducir a situaciones ambiguas y potencialmente erróneas (diremos algunas
palabras más al respecto mientras discutimos el alcance).

Vamos a modificar nuestro ejemplo:

"use strict";

height = 180; // -> Uncaught ReferenceError: height is not defined

[Link](height);

Al principio de nuestro código, agregamos "use strict"; . Esta sentencia ha cambiado

radicalmente el comportamiento del intérprete. ¿Por qué? Lo usamos cuando queremos
obligar al intérprete a comportarse de acuerdo con los estándares modernos de JavaScript.
Entonces, siempre que no estés ejecutando un código realmente antiguo, siempre debes
usarlo. Y esta vez, usar una variable sin su declaración anterior se trata como un error.

La frase "use strict"; debe colocarse al principio del código. Hará que el intérprete se
ocupe del resto del código utilizando el modo estricto, que es el estándar moderno de
JavaScript. Todos los demás ejemplos de nuestro curso estarán preparados para funcionar en
este modo de forma predeterminada, incluso si "use strict"; no siempre aparezca al
principio del código.

Constantes
La palabra clave const se usa para declarar contenedores similares a variables. Dichos
contenedores se denominan constantes. Las constantes también se utilizan para almacenar
ciertos valores, pero una vez que se han ingresado valores durante la inicialización, ya no se
pueden modificar. Esto significa que este tipo de contenedor se declara e inicializa
simultáneamente. Por ejemplo, la siguiente declaración de la constante greeting es correcta:

const greeting = "¡Hola!";

Pero esta próxima definitivamente causa un error:

const greeting; // -> Uncaught SyntaxError: Missing initializer in

const declaration

greeting = "¡Hola!";

Como dijimos, un cambio en la constante es imposible. Esta vez la declaración es correcta,

pero tratamos de modificar el valor almacenado en la constante.

const greeting = "¡Hola!";

greeting = "Hi!"; // -> Uncaught TypeError: Assignment to constant

variable.

El propósito principal de una constante es erradicar la posibilidad de cambiar accidentalmente

un valor almacenado en ella. Esto es importante cuando tenemos algunos valores que
realmente nunca deberían cambiar. Los ejemplos típicos de constantes son rutas a recursos,
tokens y otros datos que nunca cambian durante la vida útil del script.

Pero las constantes también se pueden usar como subresultados en los cálculos o en otros
lugares donde la información que se recopiló o calculó no cambiará más. El uso de una const,
además de evitar que un valor se cambie por error, permite que el motor de JavaScript
optimice el código, lo que puede afectar su rendimiento.

Alcance
Hasta ahora, asumimos que después de declarar una variable, su nombre podría usarse en
todo el código del programa (es decir, el alcance de la variable es global). Esto no es del todo
cierto: el alcance de una variable depende de dónde se declare. Desafortunadamente, para
una buena comprensión del alcance de una variable, necesitamos aprender algunos
elementos de programación más, como instrucciones o funciones condicionales, que se
analizarán con detalle más adelante en el curso. Así que aquí nos limitaremos a la información
básica y volveremos a este tema en diferentes partes del curso. Uno de los elementos básicos
que influyen en el alcance de las variables es un bloque del programa.

Bloques del Programa

Podemos separar el código de un programa en bloques. En los bloques que creamos usando
llaves {}, hay un conjunto de instrucciones que, por alguna razón, deben tratarse de forma
independiente. Los bloques suelen estar asociados a instrucciones condicionales, bucles o
funciones, de las que hablaremos más adelante. También podemos separar un bloque de un
programa que no tenga nada en especial, simplemente eligiendo un determinado rango de
instrucciones (en la práctica, esto no está especialmente justificado, y por ahora solo lo
haremos por motivos educativos).

Veamos un ejemplo:

let counter;

[Link](counter); // -> undefined

counter = 1;

[Link](counter); // -> 1

counter = counter + 1;

[Link](counter); // -> 2

Primero, declaramos la variable counter. Luego abrimos un bloque dentro del cual
inicializamos esta variable y mostramos su contenido. Fuera del bloque, aumentamos el valor
almacenado en la variable en 1 y lo mostramos nuevamente. En este caso, el intérprete
ejecutará el programa como si no hubiera notado el bloque, pasando por las instrucciones
antes del bloque, en el bloque y después del bloque. Crear un bloque aquí, sin, por ejemplo,
instrucciones condicionales, no tiene una justificación real, es solo un ejemplo del uso de
llaves {}.

Los bloques del programa se pueden anidar, es decir, podemos crear un bloque dentro de
otro.

let counter;

[Link](counter); // -> undefined

counter = 1;

[Link](counter); // -> 1

}
counter = counter + 1;

[Link](counter); // -> 2

Por cierto, toma en cuenta que el código dentro del bloque se ha movido a la derecha. Esto se
denomina indentación. Para un intérprete de JavaScript, no importa en absoluto, pero
definitivamente aumenta la legibilidad del código, lo que permite a los lectores (incluso a tí)
descubrir rápidamente qué partes del código están dentro y cuáles están fuera del bloque. Los
editores de código suelen agregar sangrías en los lugares correctos por sí mismos, pero es un
buen hábito recordarlo y, si no aparecen automáticamente, da formato al código a mano.

Es hora de seguir adelante para determinar qué está pasando realmente con estos alcances.
Desafortunadamente, los alcances de las variables (y constantes) declaradas
con let y const son ligeramente diferentes a las declaradas con var. Así que los
discutiremos de forma independiente.

let y const

La primera regla es simple. Si declaramos alguna variable o constante usando let o const ,
respectivamente, fuera de los bloques de código, serán globales. Con esto queremos decir
que sus nombres serán visibles en todo el programa, fuera de los bloques, dentro de los
bloques, en las funciones, etc. Podremos referirnos a ellos en cualquier lugar por sus nombres
y, por supuesto, tendremos acceso a sus valores.

¿Qué sucede si declaramos algo usando let o const dentro de un bloque? Esto creará una
variable o constante local. Será visible solo dentro del bloque en el que se declaró y en los
bloques que opcionalmente se pueden anidar en él.

Veamos un ejemplo sencillo:

let height = 180;

let weight = 70;

[Link](height); // -> 180

[Link](weight); // -> 70

[Link](height); // -> 180

[Link](weight); // -> Uncaught ReferenceError: weight is not

defined
La variable height, declarada fuera del bloque, es global. La variable weight es local: su
alcance está limitado por el bloque en el que se declaró. Esto es claramente visible cuando se
intenta mostrar los valores de ambas variables dentro y fuera del bloque. También podemos
probar el caso con bloques anidados:

let height = 200;

{
let weight = 100;
{
let info = "tall";
[Link](height); // -> 200
[Link](weight); // -> 100
[Link](info); // -> tall
}
[Link](height); // -> 200
[Link](weight); // -> 100
[Link](info); // -> Uncaught ReferenceError: info is not
defined
}

Como puedes ver, la variable info declarada en el bloque más interno solo es visible dentro de
él. La variable weight es visible tanto dentro del bloque en el que fue declarada como dentro
del bloque anidado en ella. Y la variable global height es visible en todas partes.

var

En el caso de declaraciones de variables usando la palabra clave var , la situación es

ligeramente diferente. La variable declarada utilizándola fuera de los bloques será, como en el
caso de let, global, es decir, será visible en todas partes. Si la declaras dentro de un bloque,
entonces... bueno, por lo general volverá a ser global.

Comencemos con un ejemplo simple:

var height = 180;

var weight = 70;

 [Link](height); // -> 180

[Link](weight); // -> 70

[Link](height); // -> 180

[Link](weight); // -> 70

Como era de esperar, ambas variables, height y weight , resultan ser globales. ¿Las
variables declaradas usando var siempre, independientemente del lugar de declaración,
serán globales? Definitivamente no. El problema es que var ignora los bloques de programa
ordinarios, tratándolos como si no existieran. Entonces, ¿en qué situación podemos declarar
una variable local usando var? Sólo dentro de una función. Dedicaremos mucho espacio a
discutir la función y luego volveremos al problema del alcance de la variable. Ahora
intentaremos presentar y discutir solo un ejemplo simple, que mostrará que las variables var a
veces también son locales.

Unas breves palabras sobre funciones

Empecemos explicando qué son las funciones. A menudo sucede que una determinada pieza
de código, que realiza alguna tarea específica, se utilizará muchas veces. Sí, puedes copiar
este fragmento de código, todas sus instrucciones, en cualquier lugar donde desees utilizarlo.
Sin embargo, esto sería muy ineficiente. En primer lugar, el tamaño de nuestro programa
crecería innecesariamente. En segundo lugar, si quisiéramos hacer algunos cambios en este
código, por ejemplo, para corregir algún error, tendríamos que hacerlo en todos los lugares
donde lo usamos.

Una solución simple a esto problema es una función. Una función es solo una pieza de
código separada que nombras, de la misma manera que nombras una variable. Si deseas
usarla en algún lugar, simplemente se hace referencia a ella con ese nombre (decimos
que llamamos a la función).

La declaración de una función simple, digamos testFunction , puede verse así:

function testFunction() {
[Link]("Hola");
[Link]("Mundo");
}

La forma de definir la función que se muestra en el ejemplo es una de varias disponibles en

JavaScript. La definición comienza con la palabra clave function , seguida del nombre de la
función que inventamos. Después del nombre, verás paréntesis, que opcionalmente podrían
contener parámetros pasados a la función (volveremos a esto cuando analicemos funciones
con más precisión). Luego abrimos el bloque del programa, que contiene las instrucciones
pertenecientes a la función. Al definir una función, las instrucciones contenidas en la función
no se ejecutan. Para ejecutar la función, debes llamarla de forma independiente, usando su
nombre.

Echa un vistazo al siguiente programa.

[Link]("Comencemos:"); // -> Comencemos:

[Link]("Hola"); // -> Hola
[Link]("Mundo"); // -> Mundo
[Link]("y otra vez:"); // -> y otra vez:
[Link]("Hola"); // -> Hola
[Link]("Mundo"); // -> Mundo
[Link]("y una vez más:"); // -> y una vez más:
[Link]("Hola"); // -> Hola
[Link]("Mundo"); // -> Mundo

Imprimirá una secuencia de texto en la consola:

Comencemos:
Hola
Mundi
y otra vez:
Hola
Mundo
y una vez más:
Hola
Mundo

Podemos reescribir el mismo programa usando nuestra función testFunction . Declarémoslo

de nuevo y llamémosla en los lugares correctos:

function testFunction() {
[Link]("Hola");
[Link]("Mundo");
}

[Link]("Comencemos:");
testFunction();
[Link]("y otra vez:");
testFunction();
[Link]("y una vez más:");
testFunction();
 salida

El efecto del programa será el mismo que antes (prueba ambos ejemplos).

let suma;

function testFunction() {

suma = 1+1;

[Link]("Hola");

[Link]("Mundo");

[Link]("Calculo de suma =", suma);

[Link]("Comencemos:");

testFunction();

[Link]("y otra vez:");

testFunction();

[Link]("y una vez más:");

testFunction();

La palabra clave var - continuación

Después de esta breve introducción a las funciones (obviamente, esta no es nuestra última
reunión con ellas), volvamos a la palabra clave var y los ámbitos de las variables.

Si declaramos una variable usando la palabra clave var dentro de una función, su alcance se
limitará solo al interior de esa función (es un alcance local). Esto significa que el nombre de la
variable se reconocerá correctamente solo dentro de esta función.

Consideremos el siguiente ejemplo:

var globalGreeting = "Buenos";

function testFunction() {

var localGreeting = "Días";

[Link]("función:");
 [Link](globalGreeting);

[Link](localGreeting);

testFunction();

[Link]("programa principal:");

[Link](globalGreeting);

[Link](localGreeting); // -> Uncaught ReferenceError:

localGreeting is not defined

En primer lugar, ejecuta este programa y observa los resultados en la consola. ¿Qué pasó y,
sobre todo, por qué pasó?

Echemos un vistazo más de cerca al código. En el ejemplo, declaramos la variable

global globalGreeting . Luego definimos la función testFunction , dentro de la cual
declaramos la variable local localGreeting . Luego llamamos a la función testFunction ,
que resultó en escribir los valores de ambas variables (dentro de la función, tenemos acceso
tanto a la variable global como a las locales). Intentar acceder a la variable
local localGreeting fuera de la función fallará. Así que finalmente logramos demostrar que
las declaraciones de variables que usan la palabra var también pueden ser locales.

Sombreado
JavaScript permite sombreado de variables. ¿Qué significa eso? Significa que podemos
declarar una variable global y una variable local con el mismo nombre.

En el alcance local, en el que declaramos una variable local usando su nombre, tendremos
acceso al valor local (la variable global está oculta detrás de la local, por lo que no tenemos
acceso a ella en este alcance local). Usar este nombre fuera del alcance local significa que
nos referiremos a la variable global. Sin embargo, esta no es la mejor práctica de
programación y debemos evitar tales situaciones. No es difícil adivinar que con un poco de
falta de atención, el uso de este mecanismo puede conducir a situaciones no deseadas y
probablemente a errores en el funcionamiento del programa.
Si queremos evitar tales situaciones, sería bueno ver exactamente de qué se trata.
Comencemos con un ejemplo sin sombreado:

let counter = 100;

[Link](counter); // -> 100

counter = 200;

[Link](counter); // -> 200

[Link](counter); // -> 200

La variable counter , declarada al principio del programa, es una variable global. A lo largo
del programa, también dentro del bloque, operamos sobre esta misma variable. Un pequeño
cambio en el código es suficiente para que el programa se comporte de manera
completamente diferente.

let counter = 100;

[Link](counter); // -> 100

let counter = 200;

[Link](counter); // -> 200

[Link](counter); // -> 100

¿Ves la diferencia? Esta vez en el bloque, en lugar de counter = 200; (es decir, cambios
en el contenido de la variable counter global), aparece la instrucción let counter =
200; (es decir, declaraciones de la variable local combinada con su inicialización). El
intérprete consideraría que tal situación es incorrecta si la redeclaración apareciera en el
mismo alcance.

Sin embargo, la declaración es local (tiene un alcance diferente al global) y todas las
referencias a la variable con este nombre dentro del bloque se referirán a esta variable local.
Fuera del bloque, la variable global se seguirá viendo con el mismo nombre. Presta atención a
los valores que muestra la consola.

Sombreado - continuación
El sombreado no solo puede estar relacionado con la situación en la que una variable local
cubre una variable global. Si aparecen alcances anidados (por ejemplo, bloques anidados en
el caso de una declaración let), la variable local declarada en un bloque más anidado eclipsará
la variable local del mismo nombre declarada en el bloque externo.

El sombreado también está presente en las declaraciones de variables que usan la

palabra var , y esta vez el alcance local no está limitado por el bloque de programa, sino por
el bloque de funciones.

var counter = 100;

function testFunction() {

var counter = 200;

[Link](counter);

[Link](counter); // -> 100

testFunction(); // -> 200

[Link](counter); // -> 100

En la mayoría de los casos, esto no es deseable, así que trate de evitar dar los mismos
nombres de variale a varias variables, independientemente de dónde las declares.

Hoisting
¿Recuerdas que dijimos que todas las variables deben declararse antes de su uso?
Esto no es del todo cierto, y realmente la palabra "debería" encaja mejor que
"debe". Por supuesto, una buena práctica es siempre declarar las variables antes
de usarlas. Y apégate a esto. Pero la sintaxis de JavaScript original permite algunas
desviaciones de esta regla.

El intérprete de JavaScript escanea el programa antes de ejecutarlo, buscando

errores en su sintaxis, entre otras cosas. Hace una cosa más en esta ocasión.
Busca todas las declaraciones de variables y las mueve al principio del rango en el
que fueron declaradas (al principio del programa si son globales, al principio del
bloque si es una declaración let local, o al principio de la función si es una
declaración local var ). Todo esto sucede, por supuesto, en la memoria del
intérprete, y los cambios no son visibles en el código.
Hoisting, es un mecanismo bastante complejo y francamente bastante
incoherente. Comprenderlo bien requiere la capacidad de usar libremente muchos
elementos de JavaScript, que aún no hemos mencionado.

Además, es más una curiosidad que algo práctico que usarás al escribir programas,
por lo que veremos solo un pequeño ejemplo que nos permitirá comprender
aproximadamente su principio. Esto puede facilitarte la comprensión de algunas
situaciones sorprendentes al escribir tu propio código o probar ejemplos que
encuentres en varias fuentes.

var height = 180;

[Link](height); // -> 180

[Link](weight); // -> Uncaught ReferenceError: weight is not

defined

En el ejemplo anterior, olvidamos declarar la variable weight. El resultado es obvio:

nos estamos refiriendo a una variable (es decir, estamos tratando de leer su
contenido) que no existe. Algo como esto debe terminar en un error.

Hagamos un pequeño cambio:

var height = 180;

[Link](height); // -> 180

[Link](weight); // -> undefined

var weight = 70;

[Link](weight); // -> 70

Esta vez declaramos nuestra variable, pero en un lugar bastante extraño. Junto con
la declaración, también realizamos la inicialización. El resultado del programa
puede ser un poco sorprendente. Esta vez no hay errores. El Hoisting ha
funcionado y el intérprete ha movido la declaración al comienzo del rango (en este
caso, el programa).

Sin embargo, el intento de mostrar el contenido de la variable weight da dos

resultados diferentes. ¿Por qué? El hositing solo se refiere a la declaración, no a la
inicialización. Entonces el valor 70, que le asignamos a la variable weight,
permanece en la línea donde está la declaración original. El motor de JavaScript
interpreta el ejemplo anterior más o menos de la siguiente manera:

var weight;
var height = 180;

[Link](height); // -> 180

[Link](weight); // -> undefined

weight = 70;

[Link](weight); // -> 70

Desafortunadamente, el hoisting funciona un poco diferente con las

declaraciones let y const .

Sin embargo, no entraremos en eso. Basta con que seas consciente del fenómeno.
Y sobre todo, recordar SIEMPRE declarar las variables antes de usarlas.