Variables en JavaScript: ¿Qué son y para sirven? Con ejemplos!

Las variables en JavaScript son esenciales para almacenar datos y realizar operaciones en tu código. ¿Qué son y para qué sirven? En este artículo, aprenderás cómo funcionan, cómo declararlas y usarlas en tus proyectos HTML, y cómo sumar valores con ellas. Incluimos ejemplos prácticos para que puedas ver su aplicación real.

1. ¿Qué son las variables en JavaScript y para que sirven?

Las variables en la programación son como contenedores en los cuales puedes guardar datos (ejemplo; los campos de un formulario, como nombre, edad, dirección, son información que puedes almacenar con variables) y que pueden ser utilizados más adelante en el código. Puedes hacer esto tantas veces como sea necesario.

Las variables son conceptos que se usan en todos los lenguajes de programación, y cada lenguaje usa una sintaxis diferente para crear (declarar) estas variables. En JavaScript usamos las palabras clave var, let y const para hacer uso de estas variables (contenedores de datos).

📝¡En palabras más sencillas, las variables en JavaScript son como cajas con etiquetas donde guardamos información que queremos utilizar más adelante en nuestro programa!

Imagínate que estás construyendo una casa. Las variables serían como los cajones donde guardas las herramientas, los materiales o los muebles. Cada cajón tiene una etiqueta (el nombre de la variable) para que sepas fácilmente dónde encontrar lo que necesitas.

1.1. ¿Y para qué usamos las variables en JavaScript?:

Almacenar datos:

Guardamos todo tipo de información, como números, texto, valores verdaderos o falsos (booleanos), listas de elementos (arrays) u objetos más complejos. Por ejemplo, podemos guardar el nombre de un usuario, su edad o el precio de un producto.

Realizar operaciones:

Una vez que tenemos los datos guardados, podemos hacer cálculos, comparar valores, unir textos, etc. Por ejemplo, si tenemos una variable con el precio de un producto y otra con la cantidad, podemos calcular el total de la compra.

Crear lógica:

Las variables nos permiten tomar decisiones dentro de nuestro programa. Por ejemplo, podemos mostrar un mensaje diferente si un usuario es mayor o menor de edad, comparando el valor de una variable que almacena su edad con un número específico.

Hacer el código más legible:

Al asignar nombres claros y descriptivos a las variables, nuestro código se vuelve más fácil de entender y mantener.

1.3. Ejemplo sencillo para entender que son y para que sirven las variables en JavaScript:

Supongamos que en el código de nuestra página web (específicamente dentro del script) creamos (declaramos) una variable, se vería así en JavaScript:

Y luego, mas adelante en otra línea del código de nuestra página queremos hacer uso de esta variable (contenedor de datos), para ello, podemos llamar a dicha variable (haciendo referencia a su nombre «prueba»), usando un código como el siguiente:

Si bien este es un ejemplo muy básico, lo importante es entender que en JavaScript (como en cualquier lenguaje de programacion) usamos las variables para guardar diferentes tipos de datos, para que mas adelante, haciendo referencia al nombre que le hayamos asignado, podemos hacer uso de dichos datos guardados. Algunos usos que podríamos hacer pueden ser:

• Reflejar esos datos directamente en la página web.
• Como realizar cálculos matemáticos
• Concatenar cadenas de texto
• Comparar valores para tomar decisiones
• Crear estructuras de datos más complejas como arreglos y objetos.

1.3. Resumen de que son y para que sirven las variables en JavaScript:

1. Contenedores de datos: Las variables almacenan diferentes tipos de datos (números, cadenas, objetos, etc.).
2. Referencias por nombre: Usas el nombre de la variable para acceder a su contenido en cualquier parte de tu código, siempre que esté dentro del alcance.
3. Reutilización: Puedes utilizar el valor almacenado en una variable en múltiples lugares de tu código, facilitando la reutilización y mantenimiento.
4. Modificación: Dependiendo de cómo declares la variable (var, let, const), puedes cambiar su valor durante la ejecución del programa, lo cual es útil para realizar operaciones y cálculos dinámicos.

2. ¿Qué tipos de datos podemos guardar en las variables en JavaScript?

Los tipos de datos en JavaScript que podemos guardar se dividen en dos categorías principales: tipos primitivos y tipos de referencia (objetos).

2.1. Tipos de datos primitivos:

Son los tipos de datos más básicos que no se pueden descomponer en estructuras más simples. Estos tipos de datos se manejan por valor, lo que significa que cuando se asigna o se pasa un valor primitivo, se copia directamente el valor.

Los tipos de datos primitivos en JavaScript son los siguientes:

• Número (Number): Representa tanto números enteros como decimales.Ejemplos: 42, 3.14, -7

let entero = 42;
let decimal = 3.14;Lenguaje del código: JavaScript (javascript)

• Cadena de Texto (String): Representa secuencias de caracteres.Se pueden delimitar con comillas simples, dobles o comillas invertidas (para plantillas literales).

let saludo = "Hola";
let despedida = 'Adiós';
let mensaje = `Bienvenido`;Lenguaje del código: JavaScript (javascript)

• Booleano (Boolean): Representa un valor de verdad, true o false.

let esVerdadero = true;
let esFalso = false;Lenguaje del código: JavaScript (javascript)

• Nulo (Null): Representa la ausencia intencionada de cualquier valor.

let sinValor = null;Lenguaje del código: JavaScript (javascript)

• Indefinido (Undefined): Representa una variable que ha sido declarada pero no inicializada.

let noDefinido;
console.log(noDefinido); // undefinedLenguaje del código: JavaScript (javascript)

• Símbolo (Symbol): Representa un valor único e inmutable, a menudo usado para claves de propiedades únicas en objetos.

let simbolo1 = Symbol("descripcion");
let simbolo2 = Symbol("descripcion");Lenguaje del código: JavaScript (javascript)

2.2. Tipos de datos de referencia (objetos):

En JavaScript, los tipos de datos de referencia son aquellos que no almacenan directamente los valores asignados, sino una referencia o puntero a la ubicación en la memoria donde se guarda el valor real. A diferencia de los tipos de datos primitivos, cuando trabajas con tipos de referencia, no estás trabajando directamente con los valores, sino con la referencia a esos valores.

Los mas comunes son:

1️⃣ Objeto (Object):

• Son colección de propiedades, donde cada propiedad es una combinación de clave (nombre) y valor.
• Descubre que son los objetos en JS

let persona = {
    nombre: "Juan",
    edad: 30
};Lenguaje del código: JavaScript (javascript)

2️⃣ Arreglo (Array):

• Son como una lista ordenada de valores, que pueden ser de cualquier tipo.
• Descubre que son los arreglos en JS

let colores = ["rojo", "verde", "azul"];Lenguaje del código: JavaScript (javascript)

3️⃣ Función (Function):

• Son bloques de código diseñado para realizar una tarea específica.
• Descubre que son las funciones en JS

function saludar() {
    console.log("Hola");
}Lenguaje del código: JavaScript (javascript)

4️⃣Fecha (Date):

• Representa un momento específico en el tiempo.

let fechaActual = new Date();Lenguaje del código: JavaScript (javascript)

5️⃣ Mapas (Map):

• Colección de pares clave/valor donde las claves pueden ser de cualquier tipo.

let mapa = new Map();
mapa.set("clave", "valor");Lenguaje del código: JavaScript (javascript)

6️⃣ Conjuntos (Set):

• Colección de valores únicos.

let conjunto = new Set();
conjunto.add(1);
conjunto.add(2);Lenguaje del código: JavaScript (javascript)

NOTA: Como podemos ver en los ejemplos de cada uno de los tipos de datos nombrados anteriormente, no se especifica directamente en el código el tipo de dato que estamos usando. Esto es porque JavaScript es un lenguaje de programación de tipado dinámico!!

2.3. ¿Dónde se guardan los datos que añadimos en las variables en javascript?

Hasta aquí dijimos que las variables sirven para guardar datos para su posterior uso en el programa. Ahora bien, ¿Dónde se guardan estos datos?

La respuesta corta es: en la memoria del ordenador.

2.3.1. Pero, ¿Cómo funciona esto exactamente?

Cuando ejecutas un programa de JavaScript, el navegador (o el entorno donde estés ejecutando tu código) reserva una porción de la memoria del ordenador para almacenar la información necesaria para ejecutar ese programa.

Dentro de esta porción de memoria, se crean espacios específicos para cada una de las variables que declaras y que luego, puedes llamar para realizar las tareas que desees.

Imagina la memoria como un gran almacén. Cada caja en este almacén es una variable. Cuando declaras una variable y le asignas un valor, estás colocando ese valor dentro de una de estas cajas. El nombre de la variable es como una etiqueta en la caja que te permite encontrarla fácilmente más tarde.

2.3.2. ¿Qué sucede con las variables cuando terminan de ser utilizadas?

Cuando una variable ya no es necesaria, el motor de JavaScript puede liberar la memoria que ocupaba. Este proceso se llama «recolección de basura». Sin embargo, no te preocupes por esto, ya que el motor de JavaScript lo gestiona automáticamente en la mayoría de los casos.

RESUMEN:

• Las variables se almacenan en la memoria del ordenador.
• Cada variable ocupa un espacio específico en la memoria.
• El nombre de la variable es como una etiqueta que te permite encontrar el valor almacenado.
• El motor de JavaScript gestiona automáticamente la asignación y liberación de memoria.

3. Ámbito de una variable en JavaScript.

El ámbito (o también llamado scope o alcance) de una variable en JavaScript se refiere al contexto en el cual esa variable es accesible y puede ser utilizada. Dependiendo de cómo y dónde se declara una variable, su ámbito puede ser global, de función, de bloque o léxico.

En otras palabras:

Al declarar una variable (o sea, al guardar un dato en la memoria del ordenador para su posterior uso), lo podemos hacer en diferentes partes del código script de nuestra página web, y dependiendo de este lugar en donde lo declaramos, así como también dependiendo el tipo de variable que usemos en la declaración, también puede variar la manera en la que hacemos uso de él (cuando explicamos los tipos de variables y sus características profundizamos en este tema).

Entender los diferentes tipos de ámbito es crucial para evitar errores comunes, como la referencia a variables no definidas o la sobrescritura accidental de valores.

Los tipos de ámbito en JavaScript son:

1. Ámbito Global
2. Ámbito de Función
3. Ámbito de Bloque
4. Ámbito Léxico

3.1. Ámbito Global:

Las variables declaradas fuera de cualquier función o bloque tienen un ámbito global. Esto significa que son accesibles desde cualquier parte del código, ya sea dentro o fuera de funciones o bloques.

EJEMPLO:

Explicación:

• Aquí, la variable globalVar se declara utilizando var fuera de cualquier función o bloque.
• Ámbito Global: Debido a que está fuera de cualquier función o bloque, globalVar pertenece al ámbito global. Esto significa que la variable es accesible desde cualquier parte del código, tanto dentro como fuera de funciones.:

3.2. Ámbito de función:

Las variables declaradas dentro de una función solo son accesibles dentro de esa función. Este es un ámbito local, ya que la variable no es accesible fuera de la función.

EJEMPLO:

Explicación:

• Dentro de la función myFunction, se declara una variable localVar utilizando var.
• Debido a que localVar está declarada dentro de la función, su ámbito es local a esa función.
• Esto significa que localVar solo puede ser utilizada dentro de myFunction. El console.log(localVar) dentro de la función funciona correctamente y mostrará "I'm local" en la consola, ya que está accediendo a localVar dentro de su ámbito.
• Ahora bien, si se quisiera llamar por fuera de dicha función, la misma acción ocasionaría un error.

3.3. Ámbito de Bloque

Una variable declarada dentro de un bloque (un bloque es todo que se encuentra dentro de {}), como en un if, for, while, etc., solo es accesible dentro de ese bloque.

EJEMPLO:

Explicacion:

• Aquí, la variable bloqueVar se declara utilizando let dentro de un bloque if, que está definido por las llaves {}.
• Ámbito de Bloque: En JavaScript, las variables declaradas con let (o const) tienen un ámbito de bloque. Esto significa que bloqueVar solo es accesible dentro del bloque de código en el que se declara, que en este caso es el bloque {} del if.
• Dentro del bloque, console.log(bloqueVar) imprime "Soy local del bloque" en la consola, porque bloqueVar es accesible dentro de este ámbito.
• Sin embargo, dado que bloqueVar fue declarada con let dentro del bloque {} del if, su alcance está restringido a ese bloque. Fuera de este bloque, bloqueVar no existe, por lo que el intento de acceder a ella resulta en un error: «bloqueVar is not defined».

3.4. Ámbito Léxico

El ámbito léxico significa que una función recuerda el entorno en el que fue creada, incluso si se ejecuta en un contexto diferente.

EJEMPLO:

Explicación del ejemplos en pasos:

1. Declaración de outerFunction y outerVar:
   • Se define una función llamada outerFunction.
   • Dentro de outerFunction, se declara una variable outerVar usando let, y se le asigna el valor "I'm outer".
   • El alcance de outerVar es el bloque de la función outerFunction.
2. Declaración de innerFunction:
   • Dentro de outerFunction, se define otra función llamada innerFunction.
   • innerFunction utiliza console.log para acceder y mostrar el valor de la variable outerVar.
   • Aquí es donde entra en juego el scope léxico: innerFunction está definida dentro de outerFunction, lo que significa que tiene acceso al ámbito en el que fue creada, incluyendo todas las variables y funciones definidas en ese ámbito. Por lo tanto, innerFunction puede acceder a outerVar, aunque outerVar no esté dentro de su propio cuerpo.
3. Retorno usando return innerFunction;:
   • outerFunction retorna la función innerFunction como su valor de retorno. Esto significa que la función innerFunction puede ser asignada a una variable fuera de outerFunction.
4. Asignación de innerFunction a myFunc y ejecución:
   • Se llama a outerFunction(), lo que retorna innerFunction y asigna la referencia de esa función a la variable myFunc.
   • Cuando myFunc() se ejecuta, aunque outerFunction ya haya terminado su ejecución, innerFunction (ahora myFunc) recuerda el ámbito en el que fue creada.
   • Esto incluye outerVar, que aún es accesible para innerFunction debido a su scope léxico.Por lo tanto, myFunc() imprime "I'm outer" en la consola.

3.4.1. Conclusión: Qué significa el Scope Léxico

El scope léxico en JavaScript se refiere a la capacidad de una función de recordar el contexto (o ámbito) en el que fue creada, incluso cuando es ejecutada fuera de ese contexto.

• En este ejemplo, innerFunction se crea dentro de outerFunction, y debido al scope léxico, innerFunction «recuerda» el entorno en el que fue definida, incluyendo la variable outerVar.
• Cuando se llama a myFunc(), que es simplemente una referencia a innerFunction, ésta aún tiene acceso a outerVar, porque fue creada en el mismo contexto o ámbito donde outerVar existe.

Este concepto es fundamental para entender cómo funcionan los cierres (closures) en JavaScript, que permiten a una función acceder a las variables de su entorno léxico incluso después de que ese entorno haya finalizado su ejecución.

4. Hoisting (elevación) en las variables en JavaScript.

El hoisting es una característica del motor de JavaScript que «levanta» las declaraciones de variables y funciones al inicio de su ámbito antes de ejecutar el código.

¿Pero que significa «levanta» las declaraciones de variables?

«Levantar» (o «hoisting» en inglés) las declaraciones de variables al inicio de su ámbito significa que el motor de JavaScript procesa primero todas las declaraciones de variables y funciones antes de ejecutar cualquier parte del código. Esto implica que las declaraciones de variables y funciones son movidas al principio de su contexto de ejecución (global o de función) en el momento de la compilación, aunque no lo veas explícitamente en tu código fuente.

Veamos un ejemplo de hoisting en una variable como let:

Considera el siguiente código, declarando una variable let dentro de una función:

Como vemos en este ejemplo:

1. Dentro de la función, la primera llamada a la variable let (usando console.log(x); ) da como resultado un error (ReferenceError: Cannot access 'x' before initialization)
2. Esto sucede porque la declaración de la variable x es «levantada» al principio de la función exampleWithLet, pero permanece en la «Temporal Dead Zone» (TDZ) hasta que se inicializa.
   • Cuando la función se ejecuta, el motor de JavaScript reconoce que x ha sido declarada, pero no permite acceder a ella hasta que se inicializa (momento en el que el lector del código del navegador llega a la línea donde se asigno el valor a la variable). Esto causa un ReferenceError si intentas acceder a x antes de su inicialización.
   • Internamente, JavaScript trata el código como si la declaración de x estuviera al principio de la función, pero sin permitir su acceso hasta después de la línea let x = 10;.
3. En la segunda llamada a la variable, podemos ver que ahora si da como resultado el dato almacenado en dicha variable. Esto sucede porque esta vez se llamo después de su declaración

RECUERDA: En este caso, vimos un ejemplo de hoisting en la variable let, pero cada una de las variables tiene un comportamiento diferente relacionado al hoisting, ampliamos en el punto relacionado a tipos de variables!

5. ¿Cómo crear variables en JavaScript? Declaración.

Bien, ahora que ya tenemos una descripción de los puntos mas importantes que deberíamos saber sobre las variables en JavaScript ¿Cómo hacemos para crearlas?.

Crear una variable es lo mismo que decir declarar una variable. Y la sintaxis para declararlas es la siguiente:

Donde:

1. let:
   • Es la palabra clave más utilizada para declarar variables en JavaScript moderno (también podríamos usar var o const – ampliáremos). Indica que la variable tiene un alcance de bloque.
2. nombre_de_la_variable:
   • Es el nombre que le das a la variable y que luego usaremos para llamarla y usarla. Debe ser significativo y seguir las convenciones de nomenclatura de JavaScript (por ejemplo, usar la nomenclatura camelCase).
3. valor:
   • Es el valor inicial que le asignas a la variable. Puede ser de cualquier tipo de dato (número, cadena, booleano, objeto, etc.). Recuerda que en javascript no es necesario especificar el tipo de dato directamente en el código.

5.1. ¿En nombre_de_la_variable podemos usar cualquier nomenclatura?

En JavaScript, los nombres de las variables (nombre_de_la_variable) deben seguir ciertas reglas y convenciones para ser válidos. Aquí te explico qué puedes y qué no puedes hacer al nombrar una variable:

5.1.1. Reglas para nombrar variables en JavaScript

1. Debe comenzar con una letra, guion bajo (_), o signo de dólar ($):
   • Ejemplos válidos:
     • let nombre;
     • let _nombre;
     • let $nombre;
   • Ejemplos inválidos:
     • let 1nombre; // Error
     • let #nombre; // Error
2. Después del primer carácter, puede incluir letras, números, guion bajo (_), o signo de dólar ($):
   • Ejemplos válidos:
     • let nombre1;
     • let _nombre2;
     • let nombre_3;
     • let $nombre4;
   • Ejemplos inválidos:
     • let nombre#; // Error
     • let nombre&; // Error
3. Distingue entre mayúsculas y minúsculas:
   • Las variables nombre, Nombre, y NOMBRE son distintas.
   • Ejemplo:
     • let nombre = "Ana";
     • let Nombre = "Juan";
     • console.log(nombre); // "Ana"
     • console.log(Nombre); // "Juan"
4. No puede ser una palabra reservada de JavaScript:
   • No puedes usar palabras reservadas como let, const, var, if, else, function, etc., como nombres de variables.
   • Ejemplo inválido:
     • let if = "condicion"; // Error

5.1.2. Convenciones comunes para nombrar variables

Aunque las reglas anteriores son obligatorias, hay ciertas convenciones que se suelen seguir para mejorar la legibilidad y el mantenimiento del código:

1. camelCase: Es la convención más común, donde la primera palabra está en minúsculas y cada palabra subsiguiente comienza con una mayúscula.
   • Ejemplo:
     • let nombreCompleto;
     • let edadUsuario;
2. Descriptivos y significativos: Los nombres de las variables deben ser descriptivos y reflejar claramente el propósito de la variable.
   • Ejemplo:
     • let cantidadDeProductos; // Descriptivo
     • let cdp; // Poco claro
3. Evitar abreviaciones innecesarias: A menos que sean ampliamente entendidas, evita usar abreviaciones que puedan confundir a otros desarrolladores (o a ti mismo en el futuro).
   • Ejemplo:
     • let totalPrice; // Mejor que "tp"

5.1.3. Ejemplos de nombres de variablres válidos e inválidos

VÁLIDOS:

INVÁLIDOS:

5.1.4. Buenas prácticas para nombrar variables:

• Descriptivos: El nombre de la variable debe reflejar el propósito de la variable. Por ejemplo, nombreUsuario es más descriptivo que x.
• Camel Case: Es común usar el estilo Camel Case, donde la primera letra de cada palabra (excepto la primera) se escribe en mayúscula (por ejemplo, nombreCompleto).
• Evita acrónimos: A menos que sean muy conocidos, los acrónimos pueden dificultar la lectura del código.
• Sé consistente: Utiliza un estilo de nomenclatura consistente en todo tu código.

5.1.5. Resumen de la nomenclatura que podemos usar al nombrar variables en javascript:

• Permitidos: Letras, números, _, $.
• No permitidos: Comenzar con números, uso de caracteres especiales como @, #, -, y palabras reservadas.
• Convenciones: Usa camelCase, nombres descriptivos, y evita abreviaciones innecesarias.

6. Tipos de variables en JavaScript.

Como dijimos, se puede declarar variables usando tres palabras claves, cada una con sus características propias:

• var
• let
• const

6.1. Variable var:

La palabra clave var en JavaScript, aunque sigue siendo válida, ha sido en gran medida reemplazada por let y const debido a sus comportamientos más predecibles y seguros.

Siguiendo la sintaxis que vimos en el punto anterior, así se declara una variable var:

1. var:
   • Esta es la palabra clave que indica que estás declarando una variable.
2. miVariable:
   • Este es el nombre que le das a tu variable. Puedes elegir cualquier nombre que quieras, siempre y cuando siga las reglas de nomenclatura de JavaScript (por ejemplo, no puede empezar con un número y no puede contener espacios).
3. valor:
   • Aquí es donde asignas un valor inicial a tu variable. El valor puede ser de cualquier tipo de dato, como un número, una cadena de texto, un booleano, un objeto, etc.

PRINCIPALES CARACTERÍSTICAS de la variable var:

1. Alcance de función y global:
2. Hoisting en las variables var:
3. Redeclaración de la variable var:
4. Alcance de las variables var dentro de bucles y condicionales
5. Comportamiento de var en el contexto global
6. Resumen de las características de var:

6.1.1. Alcance de función y global:

• Alcance de función: Las variables declaradas con var tienen un alcance de función, lo que significa que son accesibles dentro de la función en la que fueron declaradas.
• Alcance global: Si se declaran fuera de cualquier función, tienen un alcance global.
• Por ejemplo:

EJEMPLO VARIABLE var CON ALCANCE DE FUNCIÓN:

Explicación del ejemplo:

• Se declara una variable var dentro de la función (entre los { } ), y luego se llama a la misma (usando el código console.log(mensaje);) dentro de las misma función y se imprime su valor sin problemas.
• Ahora bien, cuando se llama a la misma variable fuera de la función, la misma no se imprime y se arroja un error (como vemos en el ejemplo).

VARIABLE var CON ALCANCE GLOBAL:

Explicación:

• Declaración global: La variable mensaje se declara directamente en el ámbito global, es decir, fuera de cualquier función. Esto significa que esta variable es accesible desde cualquier parte de tu código JavaScript.
• Alcance dentro de la función: Dentro de la función saludar(), podemos acceder a la variable mensaje sin problemas, ya que su alcance es global.
• Impresión: Al llamar a la función saludar(), se imprime el valor de mensaje en la consola.

6.1.2. Hoisting en las variables var:

En el punto 3 ya vimos que es el hoisting, ahora bien. ¿Cómo se comporta el hoisting en la variable var?. Con var, esto significa que puedes utilizar una variable antes de su declaración sin obtener un error.

Por ejemplo:

Como podemos ver en el ejemplo, aunque la primera línea console.log(nombre) está antes de la declaración de nombre, el hoisting hace que JavaScript «eleve» la declaración de nombre al principio del ámbito. Por lo tanto, nombre ya existe cuando se ejecuta el console.log, pero su valor es undefined porque la asignación aún no se ha realizado.

En cambio, el segundo console.log(nombre) se produce después de la declaración de la variable, por lo tanto si se imprime su valor en la consola.

¿Por qué ocurre el hoisting?

El hoisting es una característica del motor de JavaScript que permite que el código se ejecute de manera más eficiente. Sin embargo, puede llevar a comportamientos inesperados si no se entiende bien.

6.1.3. Redeclaración de la variable var:

¿Qué significa redeclarar una variable?

Redeclarar una variable implica volver a declarar una variable con el mismo nombre dentro del mismo ámbito. En JavaScript, cuando se utiliza la palabra clave var, la redeclaración no genera un error, sino que simplemente se ignora la nueva declaración. Ejemplo:

En este ejemplo, primero se declara la variable x y se le asigna el valor 10. Luego, se vuelve a declarar x y se le asigna el valor 20. A pesar de la redeclaración, el valor de x se actualiza a 20.

Comportamiento de la redeclaración con var:

• No afecta el valor: Si redeclaras una variable con var y le asignas un nuevo valor, este nuevo valor sobrescribirá el valor anterior.
• Mantiene el ámbito: La redeclaración no cambia el ámbito de la variable. Si una variable fue declarada globalmente, seguirá siendo global incluso si la redeclaras dentro de una función.

Ejemplo:

En este ejemplo, aunque redeclaramos la variable nombre con un nuevo valor, el valor final que se imprime es «Pedro», ya que la última asignación sobrescribe la anterior.

¿Por qué se permite la redeclaración con var?

Históricamente, la redeclaración con var se permitía para mayor flexibilidad. Sin embargo, esta característica puede llevar a errores difíciles de detectar, especialmente en código más complejo.

¿Por qué se desaconseja la redeclaración con var?

• Confusión: La redeclaración puede hacer que el código sea más difícil de entender y mantener.
• Errores: La redeclaración accidental puede sobrescribir valores importantes y causar errores difíciles de depurar.

¿Qué alternativas hay a var?

• let: Con let, no se permite la redeclaración dentro del mismo ámbito. Si intentas redeclarar una variable con let, obtendrás un error de sintaxis.
• const: Con const, no se permite la redeclaración y tampoco se puede reasignar el valor de la variable una vez inicializada.

6.1.4. Alcance de las variables var dentro de bucles y condicionales

Como dijimos, cuando hablamos del alcance de una variable, nos referimos a las partes del código donde podemos acceder a ella. Las variables declaradas con var en JavaScript tienen un alcance funcional (no de bloque como let), lo que significa que son accesibles desde cualquier parte de la función en la que se declaran.

¿Qué implica esto para bucles y condicionales?

1. Bucles:
   • Si declaras una variable con var dentro de un bucle, esa variable será accesible desde cualquier parte de la función, incluso después de que el bucle haya terminado.
   • Esto puede llevar a problemas si no tienes cuidado, ya que la variable puede mantener el último valor asignado dentro del bucle.
2. Condicionales:
   • Lo mismo aplica para los condicionales. Si declaras una variable con var dentro de un if, else if o else, esa variable será accesible desde cualquier parte de la función.

POR EJEMPLO:

En este ejemplo, la variable i es declarada con var dentro del bucle for. Sin embargo, como su alcance es funcional, podemos acceder a ella incluso después de que el bucle haya terminado.

¿Por qué esto puede ser problemático?

• Variables globales accidentales: Si declaras una variable con var dentro de una función y esa función es llamada muchas veces, la variable puede terminar siendo tratada como una variable global, lo que puede llevar a conflictos de nombres y errores difíciles de depurar.
• Pérdida de datos: Si reasignas una variable dentro de un bucle, el valor final de esa variable será el último valor asignado, lo que puede sobrescribir valores importantes.

¿Cuál es la solución?

Para evitar estos problemas, se recomienda utilizar let y const en lugar de var.

• let: Tiene un alcance de bloque (todo lo que se declara dentro de {}), lo que significa que la variable solo es accesible dentro del bloque donde fue declarada (por ejemplo, dentro de un bucle o un condicional).
• const: También tiene un alcance de bloque y, además, el valor de la variable no puede ser reasignado.

RECUERDA: El alcance funcional de var puede llevar a comportamientos inesperados dentro de bucles y condicionales. Para evitar estos problemas, es recomendable utilizar let y const, que tienen un alcance de bloque y ofrecen un mayor control sobre el ciclo de vida de las variables.

6.1.5. Comportamiento de var en el contexto global

Cuando declaras una variable con var fuera de cualquier función, esa variable adquiere un alcance global. Esto significa que puede ser accedida desde cualquier parte de tu código JavaScript.

Características de var en el contexto global:

• Accesibilidad universal: Una variable global puede ser modificada o utilizada desde cualquier función o script en tu página web.
• Persistencia: Su valor se mantiene a lo largo de toda la ejecución del script.
• Potencial de conflictos: Si múltiples partes de tu código intentan modificar la misma variable global, pueden surgir conflictos y comportamientos inesperados.

Un EJEMPLO es el del punto 6.1.1.

Desventajas del alcance global con var:

• Conflictos de nombres: Si tienes muchas variables globales, es fácil que se produzcan conflictos de nombres, especialmente en proyectos grandes.
• Dificultad para depurar: Los errores causados por variables globales pueden ser más difíciles de rastrear, ya que pueden ser modificadas desde cualquier parte del código.
• Pérdida de control: Las variables globales pueden ser modificadas accidentalmente desde cualquier parte del código, lo que puede llevar a comportamientos inesperados.

¿Por qué evitar el alcance global con var?

• Modularidad: El alcance global reduce la modularidad de tu código, haciendo que sea más difícil de mantener y reutilizar.
• Limpieza: Un exceso de variables globales puede hacer que tu código sea menos legible y más propenso a errores.
• Seguridad: En entornos más grandes, como aplicaciones web, las variables globales pueden representar un riesgo de seguridad.

Alternativas a var en el contexto global:

• Módulos: Utiliza módulos para encapsular tu código y evitar la contaminación del ámbito global.
• let y const: Dentro de funciones, utiliza let y const para declarar variables con alcance de bloque, lo que ayuda a evitar conflictos de nombres.

RECUERDA: Aunque var en el contexto global puede parecer conveniente al principio, a largo plazo puede generar más problemas de los que resuelve. Es recomendable limitar el uso de variables globales y optar por soluciones más modulares y seguras.

6.1.6. Resumen de las características de var:

• Alcance de función: Las variables var son accesibles dentro de la función en la que se declaran.
• Hoisting: Las declaraciones de var se elevan al comienzo de su contexto de ejecución.
• Redeclaración permitida: Las variables var pueden ser redeclaradas en el mismo ámbito.
• Sin alcance de bloque: Las variables var no están limitadas a bloques de código como bucles o condicionales.
• Propiedad del objeto global: Las variables var declaradas en el contexto global se convierten en propiedades del objeto global.

6.2. Variable let:

La palabra clave let en JavaScript se utiliza para declarar variables con alcance de bloque. Esto significa que la variable solo es accesible dentro del bloque donde fue declarada. Un bloque está definido por llaves {}.

Sintaxis:

1. let:
   • La palabra clave para declarar una variable.
2. variableName:
   • El nombre que le asignas a la variable.
3. valor:
   • El valor inicial opcional que puedes asignar a la variable.

CARACTERÍSTICAS de la variable let:

1. Alcance de bloque de la variable let en JavaScript:
2. Hoisting y la variable let
3. La variable let no permite redeclaración en el mismo ámbito:
4. Reasignación de variables let
5. Uso de let, ideal en bucles:
6. La variable let no se convierte en una propiedad del objeto global:
7. Resumen de las características de let:

6.2.1. Alcance de bloque de la variable let en JavaScript:

El alcance de bloque significa que una variable declarada con let solo es visible y accesible dentro del bloque de código donde fue declarada (recuerda que un bloque de código está delimitado por llaves {}).

Ejemplo:

En este ejemplo:

• La variable mensaje se declara dentro de un bloque.
• Dentro del bloque, podemos acceder y utilizar la variable.
• Fuera del bloque, la variable mensaje no existe y tratar de acceder a ella provocará un error.

Comparación con var:

• var: Tiene alcance funcional. Una variable declarada con var dentro de una función es accesible desde cualquier parte de esa función.
• let: Tiene alcance de bloque. Una variable declarada con let es solo accesible dentro del bloque donde fue declarada.

¿Por qué es importante el alcance de bloque?

• Evita conflictos de nombres: Al limitar el alcance de una variable a un bloque específico, reduces la probabilidad de que se produzcan conflictos de nombres con otras variables que tengan el mismo nombre en otros bloques.
• Hace el código más legible: El alcance de bloque hace que el código sea más fácil de entender, ya que puedes ver claramente dónde se utiliza cada variable.
• Mejora la modularidad: Al limitar el alcance de las variables, puedes crear módulos de código más independientes y reutilizables.

Casos de uso comunes de let:

• Bucles: Dentro de un bucle for, puedes declarar una variable con let para controlar la iteración sin que afecte a variables con el mismo nombre fuera del bucle.
• Condicionales: Dentro de un if, else if o else, puedes declarar variables con let para realizar operaciones específicas dentro de esos bloques.
• Funciones: Dentro de una función, puedes declarar variables con let para almacenar valores locales a esa función.

RECUERDA: El alcance de bloque de let es una característica fundamental de JavaScript moderno que te permite escribir código más limpio, seguro y fácil de mantener. Al comprender y utilizar correctamente let, evitarás muchos de los problemas comunes asociados con el alcance de las variables.

6.2.2. Hoisting y la variable let

A diferencia de las variables declaradas con var, las variables declaradas con let no son hoisteadas.

¿Qué significa esto?

• No se pueden usar antes de ser declaradas: Si intentas acceder a una variable let antes de su declaración, obtendrás un error de referencia.
• No hay inicialización predeterminada: A diferencia de var que se inicializa con undefined, las variables let no tienen un valor predeterminado antes de su asignación.

¿Por qué no hay hoisting con let?

El comportamiento de hoisting con var puede llevar a errores y confusiones. Para evitar estos problemas, let fue introducido con un comportamiento diferente.

La Zona Muerta Temporal (Temporal Dead Zone – TDZ)

Aunque las variables let son hoisteadas, se encuentran en una zona muerta temporal antes de su declaración. Esto significa que si intentas acceder a una variable let antes de su declaración, obtendrás un error, incluso si está dentro del mismo bloque.

EJEMPLO:

En este caso, la variable x está en la zona muerta temporal antes de la línea console.log(x), por lo que se genera el error.

RECUERDA:

• Las variables let no son hoisteadas.
• Intentar acceder a una variable let antes de su declaración resulta en un error de referencia.
• La zona muerta temporal evita el uso prematuro de variables let.

Al entender el concepto de hoisting y la diferencia entre var y let, puedes escribir código JavaScript más seguro y predecible.

6.2.3. La variable let no permite redeclaración en el mismo ámbito:

Una de las principales ventajas de utilizar la palabra clave let en JavaScript es que no permite la redeclaración de una variable dentro del mismo ámbito.

Aquí dejamos nuevamente los significados de ámbito y redeclaración:

• Ámbito: El ámbito de una variable se refiere al alcance o visibilidad de esa variable dentro de tu código. En el caso de let, el ámbito es generalmente el bloque donde se declara (definido por llaves {}).
• Redeclaración: Intentar declarar nuevamente una variable con el mismo nombre dentro del mismo ámbito.

EJEMPLO:

En este ejemplo, al intentar declarar nuevamente la variable nombre con let dentro del mismo ámbito, JavaScript arrojará un error (a diferencia de var), ya que no permite redeclaraciones.

¿Por qué es importante esta restricción de la redeclaración en la variable let?

• Evita errores comunes: La redeclaración accidental de variables puede llevar a comportamientos inesperados y difíciles de depurar en tu código.
• Mejora la legibilidad: Al evitar redeclaraciones, el código se vuelve más claro y fácil de entender, ya que cada variable tiene un significado único dentro de su ámbito.
• Promueve buenas prácticas: La restricción de redeclaración fomenta un estilo de programación más seguro y estructurado.

RECUERDA: La imposibilidad de redeclarar variables con let es una característica importante que contribuye a la seguridad y legibilidad de tu código JavaScript. Al utilizar let, puedes evitar errores comunes y escribir código más robusto.

6.2.4. Reasignación de variables let

A diferencia de las constantes declaradas con const, las variables declaradas con let sí permiten la reasignación de su valor. Esto significa que puedes cambiar el valor almacenado en una variable let después de su declaración inicial.

EJEMPLO:

Como puedes ver, después de declarar la variable edad con el valor 30, podemos cambiar su valor a 35 en una línea posterior.

IMPORTANTE!!

• No confundir con redeclaración: Reasignar significa cambiar el valor de una variable existente, mientras que redeclarar implica declarar nuevamente una variable con el mismo nombre dentro del mismo ámbito, lo cual no está permitido con let.
• El identificador permanece: Al reasignar, el identificador (el nombre de la variable) se mantiene, pero el valor asociado a él cambia.

¿Cuándo usar la reasignación?

La reasignación es útil cuando necesitas actualizar el valor de una variable a lo largo de la ejecución de tu código. Por ejemplo:

• En bucles: Puedes reasignar un contador dentro de un bucle for para controlar las iteraciones.
• En condicionales: Puedes reasignar una variable basada en el resultado de una condición.
• Al actualizar estados: En aplicaciones más grandes, puedes reasignar variables para actualizar el estado de la aplicación en respuesta a eventos del usuario.

RECUERDA: La reasignación de variables let es una característica flexible que te permite modificar el valor de una variable a lo largo del tiempo. Sin embargo, es importante usarla de manera consciente para evitar errores y mantener tu código limpio y legible.

6.2.5. Uso de let, ideal en bucles:

La palabra clave let en JavaScript, con su alcance de bloque, es ideal para trabajar con bucles. Esto se debe a que nos permite declarar variables dentro de cada iteración del bucle, evitando conflictos de nombres y asegurando que cada iteración tenga su propio contexto.

Entonces: ¿Por qué let es mejor que var en bucles?

• Alcance de bloque: Con let, la variable declarada dentro del bucle solo existe dentro de esa iteración. Esto evita que los valores se acumulen entre iteraciones, lo que puede llevar a resultados inesperados.
• Evita conflictos de nombres: Cada iteración tiene su propia instancia de la variable, lo que reduce la posibilidad de sobrescribir valores accidentalmente.

EJEMPLO:

En este ejemplo:

• let i = 0: Se declara una nueva variable i en cada iteración del bucle.
• El valor de i se incrementa en cada iteración, y luego se imprime.
• Al finalizar el bucle, la variable i ya no existe, ya que su alcance era el bloque del bucle.

¿Cuál es la diferencia con var?

Si en el ejemplo anterior usamos var, la variable i tiene un alcance más amplio, por lo que si se llama después del bucle, su valor sigue siendo 5. Esto puede llevar a errores si se intenta reutilizar la variable i en otra parte del código.

En conclusión, al utilizar let en bucles, estarás escribiendo código JavaScript más limpio y eficiente.

6.2.6. La variable let no se convierte en una propiedad del objeto global:

Una de las grandes ventajas de utilizar let en JavaScript es que no se convierte en una propiedad del objeto global.

¿Qué significa esto?

• Objeto global: En JavaScript, el objeto global (generalmente window en los navegadores) es un objeto especial al que se pueden agregar propiedades.
• Variables var y el objeto global: Cuando se declaraba una variable con var fuera de cualquier función, automáticamente se convertía en una propiedad del objeto global. Esto podía llevar a conflictos de nombres si múltiples scripts intentaban acceder a la misma propiedad global.
• let y el alcance de bloque: A diferencia de var, let tiene un alcance de bloque. Esto significa que una variable declarada con let solo es accesible dentro del bloque donde se declaró. Al no ser global, no se agrega como propiedad al objeto global.

EJEMPLO:

En este ejemplo, aunque mensaje es una variable global (declarada fuera de cualquier función), al usar let, no se convierte en una propiedad del objeto window. Por lo tanto, al intentar acceder a ella a través de window.mensaje, se obtiene undefined.

RECUERDA: El hecho de que let no se convierta en una propiedad del objeto global es una característica fundamental que contribuye a escribir código JavaScript más limpio, seguro y mantenible.

6.2.7. Resumen de las características de let:

• Alcance de bloque: let solo es accesible dentro del bloque donde se declaró.
• Hoisting sin inicialización: let se eleva pero no se inicializa, generando un error si se accede antes de su declaración.
• Sin redeclaración en el mismo ámbito: No se puede redeclarar una variable let en el mismo ámbito.
• Permite reasignación: Puedes cambiar el valor de una variable let después de haberla declarado.
• Uso seguro en bucles: Cada iteración del bucle tiene su propio ámbito.
• No es propiedad del objeto global: Cuando se declara globalmente, no se añade al objeto global window.

6.3. Variable const:

La palabra clave const en JavaScript se utiliza para declarar una constante, es decir, una variable cuyo valor no puede ser cambiado después de su inicialización.

SINTAXIS:

Dónde:

1. const:
   • Es la palabra clave que indica que estamos declarando una constante.
2. nombreConstante:
   • Es el nombre que le asignamos a la constante. Sigue las mismas reglas de nombrado que las variables (debe comenzar con una letra o un guion bajo, y puede contener letras, números y guiones bajos).
3. valor:
   • Es el valor inicial que se asigna a la constante. Este valor no puede ser cambiado posteriormente.

PRINCIPALES CARÁCTERSITCAS de la variable const:

1. La variable const es no reasignable (inmutable):
2. La variable const requiere inicialización:
3. Alcance de bloque de la variable const:
4. La variable const No se eleva como var (Hoisting):
5. Objetos y arreglos en variables const son mutables:
6. Resumen de las características de const:

6.3.1. La variable const es no reasignable (inmutable):

Una característica fundamental de las variables declaradas con const en JavaScript es su inmutabilidad. Esto significa que una vez que se asigna un valor a una constante, ese valor no puede ser cambiado posteriormente.

EJEMPLO:

En este ejemplo, intentar reasignar el valor de PI a 3.14 generará un error, ya que PI ha sido declarada como una constante.

IMPORTANTE!

• No confundir con inmutabilidad de datos: Aunque la variable en sí es inmutable, los datos que contiene pueden ser mutables en ciertos casos. Por ejemplo:
  • Objetos: Puedes modificar las propiedades de un objeto asignado a una constante.
  • Arreglos: Puedes modificar los elementos de un arreglo asignado a una constante.

Ejemplo con objetos:

En este caso, puedes cambiar la propiedad edad del objeto persona, pero no puedes reasignar el objeto completo a una nueva referencia.

Beneficios de usar const:

• Prevención de errores: Evita modificaciones accidentales de valores importantes.
• Mejora la legibilidad: Clarifica el código al indicar que un valor no cambiará.
• Optimización potencial: En algunos casos, el motor de JavaScript puede realizar optimizaciones cuando sabe que un valor es constante.

6.3.2. La variable const requiere inicialización:

Una de las características distintivas de las variables declaradas con const en JavaScript es que siempre deben ser inicializadas en el momento de su declaración.

¿Qué significa esto?

• Inicialización: Significa asignar un valor a la variable en la misma línea en la que se declara.
• Obligatoria: A diferencia de las variables declaradas con let, donde la inicialización es opcional, con const es un requisito indispensable.

EJEMPLO:

¿Por qué es obligatoria esta inicialización?

• Inmutabilidad: Dado que el valor de una constante no puede cambiar después de su declaración, tiene sentido exigir que se le asigne un valor inicial desde el principio.
• Prevención de errores: Al obligar a la inicialización, se evitan situaciones en las que una constante podría ser utilizada antes de que se le haya asignado un valor, lo que podría generar errores inesperados.
• Claridad del código: La inicialización obligatoria hace más claro el propósito de una constante, ya que indica que su valor no cambiará a lo largo del código.

RECUERDA: La inicialización obligatoria de las constantes const es una característica importante que contribuye a la seguridad y legibilidad del código JavaScript. Al seguir esta regla, estarás escribiendo código más robusto y fácil de mantener.

6.3.3. Alcance de bloque de la variable const:

El alcance de bloque es una característica fundamental de las variables declaradas con const en JavaScript, y es una de las razones por las cuales es preferida sobre var en la mayoría de los casos.

Recuerda…. ¿Qué significa alcance de bloque?

• Bloque: Un bloque de código está delimitado por llaves {}. Puede ser un bloque de función, un bloque if, un bloque for, etc.
• Alcance de bloque: Significa que una variable declarada dentro de un bloque solo es accesible dentro de ese bloque. Una vez que se sale del bloque, la variable ya no existe.

EJEMPLO:

En este ejemplo:

• mensaje se declara con const dentro de un bloque.
• Dentro del bloque, podemos acceder a mensaje y su valor se imprime en la consola.
• Fuera del bloque, intentar acceder a mensaje genera un error, ya que la variable solo existe dentro de ese bloque.

Comparación con var:

• var: Tiene alcance funcional o global. Si se declara fuera de una función, su alcance es global. Si se declara dentro de una función, su alcance es toda la función.
• const y let: Tienen alcance de bloque, lo que las hace más seguras y evita conflictos de nombres.

Ventajas del alcance de bloque:

• Evita conflictos de nombres: Cada bloque tiene su propio espacio de nombres, lo que reduce la posibilidad de que dos variables con el mismo nombre se confundan.
• Hace el código más legible: Al limitar el alcance de las variables, se facilita el seguimiento del flujo del programa.
• Mejora la modularidad: Permite crear bloques de código más independientes y reutilizables.

RECUERDA: El alcance de bloque de const es una característica clave que hace que esta palabra clave sea una excelente opción para declarar variables en JavaScript. Al comprender este concepto, podrás escribir código más limpio, seguro y mantenible.

6.3.4. La variable const No se eleva como var (Hoisting):

Una de las diferencias clave entre las variables declaradas con const y var en JavaScript es que const no se eleva (puedes ver la definición de hoisting en punto 4)

¿Por qué const no se eleva?

• Alcance de bloque: Como ya hemos visto, const tiene alcance de bloque, lo que significa que solo es accesible dentro del bloque donde se declara. El hoisting, por su parte, está más relacionado con el alcance funcional o global.
• Inicialización obligatoria: const requiere que se le asigne un valor en el momento de su declaración. Si se eleva, no habría un valor inicial para asignarle.

En este ejemplo, si const se elevara como var, podríamos esperar que mensaje tenga un valor undefined en la primera línea. Sin embargo, esto genera un error porque mensaje no está definida en ese punto.

Ventajas de que const no se eleve:

• Evita errores comunes: Al no permitir el uso de una variable antes de su declaración, se evitan errores comunes relacionados con el hoisting.
• Hace el código más predecible: El comportamiento de const es más intuitivo, ya que el alcance de la variable está claramente definido por el bloque donde se declara.

RECUERDA: La falta de hoisting en const es una característica importante que contribuye a la seguridad y legibilidad del código JavaScript. Al entender este concepto, podrás escribir código más limpio y evitar errores comunes relacionados con el alcance de las variables.

6.3.5. Objetos y arreglos en variables const son mutables:

Aunque const impide la reasignación de la variable en sí, si la variable contiene un objeto o un arreglo, las propiedades del objeto o los elementos del arreglo pueden ser modificados.

¿Por qué ocurre esto?

• Referencia: Cuando asignamos un objeto o un arreglo a una constante, lo que estamos almacenando es una referencia a ese objeto en memoria.
• Inmutabilidad de la referencia: const impide que cambiemos esa referencia.
• Mutabilidad del contenido: Sin embargo, el contenido al que apunta la referencia (el objeto en sí) puede ser modificado.

Consideraciones adicionales:

• Objetos anidados: Si un objeto contiene otros objetos, puedes modificar las propiedades de los objetos internos.
• Arreglos: Puedes agregar, eliminar o modificar elementos de un arreglo asignado a una constante.
• Spread operator y rest operator: Estos operadores pueden ser útiles para crear nuevas copias de objetos o arreglos a partir de constantes, evitando modificar el original.

¿Cuándo usar const con objetos y arreglos?

• Datos inmutables: Si quieres asegurarte de que un valor no cambie accidentalmente, const es una buena opción.
• Mejorar la legibilidad: Al indicar que un valor no debería cambiar, haces tu código más claro y fácil de entender.
• Optimizaciones: En algunos casos, el motor de JavaScript puede realizar optimizaciones cuando sabe que un valor es constante.

RECUERDA: Aunque const proporciona una buena forma de prevenir errores de reasignación, es importante comprender cómo funciona con objetos y arreglos para utilizarla de manera efectiva. Al combinar const con buenas prácticas de programación, puedes escribir código JavaScript más seguro, eficiente y mantenible.

6.3.6. Resumen de las características de const:

• No reasignable: Una vez que se asigna un valor, no se puede cambiar.
• Requiere inicialización: Debe ser inicializada en el momento de la declaración.
• Alcance de bloque: Solo es accesible dentro del bloque en el que se declara.
• Hoisting sin inicialización: Se eleva, pero no está disponible hasta su declaración.
• Objetos y arreglos mutables: Los valores internos de objetos y arreglos pueden ser modificados, aunque la referencia en sí no puede cambiar.

7. Buenas prácticas generales en el uso de variables en javascript.

El uso adecuado de variables en JavaScript es esencial para escribir código limpio, mantenible y eficiente.

Aquí hay algunas recomendaciones generales:

7.1. Usa let y const en lugar de var

• let: Para variables que pueden cambiar su valor.
• const: Para variables cuyo valor no debe cambiar.

Ventajas de usar let y const:

• let y const tienen alcance de bloque, lo que evita problemas de alcance y hoisting asociados con var.
• const garantiza que las variables no sean reasignadas, lo que mejora la seguridad y claridad del código.

7.2. Declara Variables en el Ámbito Más Reducido

Declara variables en el ámbito más pequeño posible (dentro de funciones o bloques) para evitar conflictos de nombres y mejorar la legibilidad.

7.3. Inicializa Variables al Declararlas

Siempre que sea posible, inicializa variables en el momento de su declaración para evitar valores undefined.

7.4. Usa Nombres de Variables Descriptivos

Usa nombres de variables que sean claros y descriptivos, para que otros (o tú mismo en el futuro) puedan entender fácilmente el propósito de cada variable.

7.5. Evita el Uso de Variables Globales

Minimiza el uso de variables globales para evitar conflictos y efectos secundarios inesperados. En su lugar, usa el alcance de función o bloque.

7.6. Mantén el Código Limpio y Ordenado

Organiza tu código para que sea fácil de leer. Usa espacios, sangrías y saltos de línea para mejorar la legibilidad.

7.7. Usa Constantes para Valores Fijos

Utiliza const para valores que no cambiarán durante la ejecución del programa, como configuraciones o valores predeterminados.

7.8. Evita Sobrescribir Variables

Evita la sobrescritura de variables para mantener el código claro y predecible.

7.9. Utiliza Desestructuración

La desestructuración puede hacer que el código sea más conciso y claro, especialmente cuando trabajas con objetos y arreglos.

7.10. Considera el Uso de Template Literals para Strings

Los template literals hacen que trabajar con cadenas de texto sea más sencillo y legible, especialmente cuando necesitas interpolar variables.

7.11. Maneja el Alcance y Hoisting

Comprende cómo funciona el alcance y el hoisting en JavaScript para evitar comportamientos inesperados. Usa let y const para mantener el alcance controlado y evitar hoisting no deseado.

8. ¿De que me sirven las variables con JavaScript si tengo una web con WordPress?

Saber usar y manipular variables con JavaScript puede ser extremadamente útil, incluso si tu página web está construida con Gutenberg en WordPress. Aquí te explico cómo puedes beneficiarte de este conocimiento:

8.1. Personalización de Bloques de Gutenberg

• Extendiendo Funcionalidades: Puedes crear bloques personalizados de Gutenberg o extender los existentes mediante JavaScript. Entender las variables te permite manejar datos dentro de estos bloques de manera más eficiente.
• Interactividad: Si necesitas añadir comportamientos dinámicos a un bloque, como mostrar/ocultar contenido basado en la interacción del usuario, las variables son esenciales para almacenar el estado actual y manipularlo.

8.2. Manipulación del DOM (Document Object Model)

• Interactividad en el Sitio: Puedes usar JavaScript para manipular elementos en tu página, como cambiar el contenido, estilos o estructura en respuesta a acciones del usuario. Las variables te permiten almacenar información como el estado de un botón (por ejemplo, si está encendido o apagado) y usarla para modificar el DOM.
• Validación de Formularios: Si usas formularios en tu página, las variables te permiten capturar los valores ingresados por el usuario y validar los datos antes de enviarlos.

8.3. Controlar la Carga de Contenidos

• Carga Condicional de Contenido: Puedes usar variables para controlar qué contenido se muestra en función de la interacción del usuario o del estado actual de la página.
• Lazy Loading: Usar JavaScript para implementar técnicas de lazy loading o carga diferida de imágenes y otros recursos en función de la necesidad.

8.4. Integración con APIs

• Llamadas a APIs: Si necesitas integrar tu sitio con APIs externas o internas, las variables son fundamentales para almacenar respuestas de las APIs, gestionar datos de sesión, y manipular los resultados antes de mostrarlos al usuario.

8.5. Animaciones y Efectos Dinámicos

• Efectos Dinámicos: Puedes usar variables para controlar y ajustar animaciones, como el tiempo de ejecución de un efecto, o para condicionar el comportamiento de animaciones en diferentes circunstancias.

8.6. Optimización de la Experiencia de Usuario

• Gestión del Estado del Usuario: Puedes usar variables para guardar preferencias de usuario, como temas claros u oscuros, y aplicarlas cada vez que el usuario visita la página.
• Interacción en Tiempo Real: Variables en JavaScript te permiten manejar datos en tiempo real, como el contador de caracteres en un campo de entrada, o mostrar mensajes de error instantáneamente si un campo no es válido.

8.7. Mejorar la Performance

• Optimización de Scripts: Saber cómo usar y manejar variables eficientemente puede ayudarte a optimizar tus scripts, asegurando que no se ejecuten operaciones innecesarias y que el sitio sea más rápido.

8.8. Uso de Bibliotecas y Frameworks

• Integración con Librerías: Muchas librerías y frameworks de JavaScript como React, Vue.js o jQuery, dependen de una sólida comprensión de cómo funcionan las variables. Incluso al usar Gutenberg, puedes integrarlas para añadir funcionalidades avanzadas a tu sitio.

8.9. Automatización de Tareas

• Automatización de Contenidos: Usar variables te permite automatizar tareas repetitivas, como la generación de contenido dinámico o la actualización de elementos en la página sin intervención manual.

8.10. Desarrollo de Widgets Personalizados

• Widgets Personalizados: Si necesitas desarrollar widgets personalizados que interactúen con el contenido de tu página, las variables son cruciales para gestionar y manipular la información que estos widgets necesitan.

RESUMEN: Saber manejar variables con JavaScript en una página construida con Gutenberg en WordPress te permite añadir interactividad, personalizar funcionalidades, mejorar la experiencia del usuario, y hacer que tu sitio sea más dinámico y adaptable a diferentes situaciones.

9. Ejemplo de interacción usando variables con javascript en WordPress.

Por ejemplo, podemos insertar y usar código JavaScript directamente en un bloque HTML personalizado dentro del editor de Gutenberg.

Esto te permite aprovechar las variables de JavaScript para agregar interactividad directamente en tus páginas sin necesidad de crear un plugin completo o registrar bloques adicionales.

Para ello sigue estos pasos:

1. Abre el Editor de la Página o Entrada:
   • En el editor de Gutenberg, agrega un nuevo bloque.
2. Selecciona el Bloque HTML Personalizado:
   • Busca y selecciona el bloque «HTML Personalizado».
3. Escribe tu Código JavaScript:
   • Dentro del bloque HTML, puedes escribir directamente tu código HTML, CSS y JavaScript. Aquí tienes un ejemplo:

<div id="mi-contador">
    <h3>Contador: <span id="contador">0</span></h3>
    <button onclick="incrementar()">Incrementar</button>
    <button onclick="decrementar()">Decrementar</button>
</div>

<script>
let contador = 0;

function incrementar() {
    contador++;
    document.getElementById('contador').textContent = contador;
}

function decrementar() {
    contador--;
    document.getElementById('contador').textContent = contador;
}
</script>Lenguaje del código: HTML, XML (xml)

Este ejemplo básico demuestra cómo las variables en JavaScript pueden interactuar con elementos HTML para crear una experiencia de usuario dinámica e interactiva en una página web.

En este ejemplo creamos un contador que incrementa y decrementa a medida que el usuario hace clic en su respectivos botones.

10. Preguntas frecuentes y resumen sobre variables en JS.