JavaScript es un lenguaje de programación complejo que nos permite desarrollar tanto para el mundo frontend como para el mundo backend de la web. Así como los bucles, las variables son un elemento muy importante dentro de la sintaxis de JavaScript. En este post, te enseñaremos cómo declarar variables en JavaScript usando las palabras clave más comunes.
¿Qué es una variable en JavaScript?
Antes de enseñarte cómo declarar variables en JavaScript, debemos entender el elemento del que estamos hablando. En JavaScript, las variables son contenedores de datos que nos permiten almacenar y manipular valores a lo largo de la ejecución de un programa. En programación, las variables son espacios o «compartimentos» donde se puede guardar información y asociarla a un determinado nombre al que haremos referencia durante el programa.
De esta forma, cada vez que se consulte ese nombre posteriormente, te devolverá la información que contiene. Una variable en JavaScript es la forma que tiene este lenguaje de programación para nombrar un valor. Es decir, cuando declaramos una variable, le asignamos un nombre a un determinado valor. Esto nos permite no tener que volver a repetir este valor, sino más bien insertar el nombre cuando queramos usarlo.
Además, esto facilita la acción de cambiar este valor a nivel global, pues basta con cambiar el valor en la variable para que todos los valores en los que está variable esté insertada se alteren. Las variables son la manera como los programadores le dan nombre a un valor para poder reusarlo, actualizarlo o simplemente registrarlo. Las variables se pueden usar para guardar cualquier tipo de dato en JavaScript.
Una analogía útil es pensar en las variables como etiquetas para nuestros valores. Piensa en un contenedor de arándanos con una etiqueta que dice 'arándanos'. En este ejemplo, la variable arándanos, señala hacia un valor, que son los mismos arándanos.
Lea también: IVA 21% Excel
Por ejemplo, podemos declarar una variable llamada edad y asignarle el valor 4:
var edad = 4
Ahora que hemos asignado este valor a la variable edad, podremos referirnos a este más adelante. Si escribes ahora la variable edad en tu consola, esta te devolverá el valor de 4.
Cómo declarar variables en JavaScript: var, let y const
Existen tres maneras de declarar variables en JavaScript, cada una utiliza una palabra clave diferente: let, var y const. En JavaScript, puedes declarar variables usando las palabras clave var, const o let. Para esto, los programadores necesitan alguna manera de guardar y registrar datos.
La palabra clave var
La palabra clave var es una abreviación de variable y es la manera antigua de declarar que lo que estamos escribiendo es este tipo de variable JavaScript. Antiguamente, en JavaScript se utilizaba la palabra clave var para inicializar variables. Cuando JavaScript fue creado por primera vez, la única manera de declarar una variable era con la palabra clave var.
Aunque te lo puedes encontrar o pueden existir situaciones donde puede ser útil, hoy en día no tiene demasiado sentido utilizar var en nuestro código. var es la declaración de variable de vieja escuela y normalmente no lo utilizamos en absoluto en proyectos modernos. Al usar var, las variables pueden ser reasignadas y también pueden ser declaradas sin valor inicial.
Lea también: Guía IVA reducido
Por ejemplo, podemos declarar y reasignar una variable con var:
var nombre = 'Madison'// Luego, reasignamos esta variablenombre = 'Ben'// console.log(nombre) devolverá 'Ben'
También es posible declarar una variable sin asignarle un valor inicial:
var año// Más adelante, podemos asignarle un valoraño = 2020// Ahora nuestra variable año apuntará al valor 2020
Al declarar variables en JavaScript usando la palabra clave var, estas tienen un alcance de función, también conocido como function scoped. Esto significa que, a partir del momento en el que hayamos definido la variable, esta será cierta en todo nuestro código dentro de la función o a nivel global si se declara fuera de cualquier función.
La palabra clave let
En JavaScript las variables se declaran con la palabra reservada let, que se introdujo en ECMAScript 6 (2015). En JavaScript, utilizaremos la palabra clave let para inicializar variables. La sintaxis básica para declarar una variable usando let es la siguiente:
let mensaje = 'Hola, Mundo!'console.log(mensaje) // Imprime 'Hola, Mundo!'
En este ejemplo, hemos declarado una variable llamada mensaje y le hemos asignado el valor 'Hola, Mundo!'. Luego, usamos console.log para imprimir el valor de mensaje.
Lea también: ¿Cómo localizar tus XML del SAT?
Las variables declaradas con let pueden ser reasignadas después de su inicialización. Por ejemplo:
let numero = 42numero = 100 // El valor de numero cambia a 100
La palabra clave let, a diferencia de la palabra clave var, nos permite declarar variables en JavaScript que son ciertas a nivel del bloque. Esto también se conoce en inglés como block scoped. let no permite declarar la misma variable más de una vez en el mismo ámbito, lo que ayuda a evitar errores de redeclaración.
La palabra clave const
Al igual que la palabra clave let, const nos permite establecer variables a nivel de bloque. En ECMAScript 2015 se añade la palabra clave const, que permite crear «compartimentos» similares a una variable, salvo que los valores que contiene no pueden ser modificados. Las variables declaradas utilizando const se llaman “constantes”. No pueden ser alteradas.
La diferencia entre estas dos palabras clave es que const hace referencia a una constante. Esto quiere decir que el valor asignado a una variable const no puede cambiar. Por ejemplo, si tenemos una constante en donde i es igual a 7 y luego intentamos cambiar el valor de i, JavaScript nos devolverá un error:
const i = 7// Si ahora decidimos cambiar el valor de i// i = 10; // JavaScript nos devolverá un error: Assignment to constant variable.
Como puedes ver, la diferencia respecto a let es que const asigna un valor y no permite reasignarlo o redeclararlo posteriormente. Lo siguiente que debes saber sobre const es que solo se puede declarar una sola vez. Si intentamos redeclarar una constante, obtendremos un error:
const y = 2// const y = 5; // Error: Identifier 'y' has already been declared
Esta es una fortaleza de la palabra clave const que fue introducida como una mejor manera de crear variables en JavaScript, ya que te ayuda a evitar reasignaciones accidentales. Ser una “constante” solo significa que el valor de la variable nunca cambia.
Alcance (Scope) de las Variables
El ámbito (Scope) se refiere a los lugares dentro de nuestro código en donde las variables están disponibles para su uso. Las palabras clave var, let y const tienen diferencias significativas en cuanto a su alcance.
Cuando una variable tiene un ámbito global, significa que está disponible en cualquier lugar de tu programa. Las variables declaradas con var fuera de cualquier función tienen alcance global. Sin embargo, var tiene principalmente un alcance de función (function scoped).
Por otro lado, let y const tienen alcance de bloque (block scoped). Un bloque se refiere a cualquier espacio que esté entre llaves de apertura y cierre {} (como los de una sentencia if, un bucle for o una función).
Para entender mejor esta diferencia entre function scoped y block scoped, pongamos un ejemplo:
// Ejemplo con var (function scoped)function ejemploVar() { var x = 1; if (true) { var x = 2; // Esta reasigna la 'x' exterior console.log("Dentro del bloque con var:", x); // 2 } console.log("Fuera del bloque con var:", x); // 2}ejemploVar();// Ejemplo con let (block scoped)function ejemploLet() { let y = 1; if (true) { let y = 2; // Esta es una nueva 'y' diferente a la exterior, dentro del bloque console.log("Dentro del bloque con let:", y); // 2 } console.log("Fuera del bloque con let:", y); // 1}ejemploLet();Como podemos observar, al pintar console.log(x) en el ejemplo de var, obtendremos el número 2 tanto dentro como fuera del bloque if. Esto sucede porque la variable var tiene un efecto a nivel general dentro de su función, por lo que cualquier cambio que sufra en el código, sea dentro de un bloque o no, se verá representado en el resultado final.
Mientras que cuando pintemos console.log(y) en el ejemplo de let, obtendremos el número 2 dentro del bloque if, pero el número 1 fuera de él. Esto es porque let tiene alcance de bloque: solo existe dentro del bloque donde fue definida. La variable y dentro del if está 'atrapada' dentro de las llaves de apertura y cierre. El código que está dentro de dichas llaves sí puede acceder a y, pero ningún código fuera de estas lo puede hacer.
Esta diferencia entre palabras clave nos permite crear variables que respeten una cierta jerarquía en nuestro código. Las variables con alcance de función son útiles a los programadores porque frecuentemente queremos crear variables que solo sirvan o sean necesarias dentro de cierta función. Crear variables globales también nos puede generar errores o fallos.
A continuación, una tabla resumen de las principales diferencias entre var, let y const:
| Palabra Clave | Alcance | Reasignación | Redeclaración en el mismo ámbito | Introducido en |
|---|---|---|---|---|
| var | De función | Sí | Sí | Inicial |
| let | De bloque | Sí | No | ES6 (2015) |
| const | De bloque | No | No | ES6 (2015) |
Inicialización y Reasignación de Variables
La primera vez que se realiza la asignación de un valor a una variable se suele llamar inicializar una variable. La inicialización de una variable es el proceso de asignarle un valor inicial en el momento de su declaración. Esto se puede hacer simultáneamente con la declaración utilizando la siguiente sintaxis:
let edad = 25; // Inicialización: se declara 'edad' y se le asigna el valor 25
Como su propio nombre indica, una variable puede variar su contenido, ya que aunque contenga una cierta información, se puede volver a cambiar. A esta acción ya no se le llamaría «inicializar» una variable, sino «redeclarar» o «reasignar» una variable, ya que le estamos cambiando su contenido.
Las variables declaradas con let y var pueden ser reasignadas después de su inicialización. Sin embargo, las variables declaradas con const no pueden ser reasignadas. Si intentamos reasignar una constante, JavaScript generará un error.
const adulto = false;const edad = 20;if (edad > 18) { // adulto = true; // Error: Assignment to constant variable.}console.log(adulto); // Seguirá siendo 'false' porque no se puede reasignar 'const'Para casos donde necesitamos actualizar el valor de una variable, usamos let:
let adulto = false;let edad = 20;if (edad > 18) { adulto = true; // Esto es válido con let}console.log(adulto); // Ahora imprimirá 'true'Conceptos avanzados: Hoisting y la Zona Muerta Temporal (TDZ)
En JavaScript, las declaraciones de variables y funciones son “elevadas” (hoisting) al principio de su contexto de ejecución. Sin embargo, las variables declaradas con let y const no están completamente disponibles hasta su definición. A esto le decimos que están en una Zona Muerta Temporal (TDZ por sus siglas en inglés, Temporal Dead Zone).
Si intentamos acceder a una variable que nunca ha sido declarada dentro de su ámbito, como:
console.log(a); // JavaScript genera un ReferenceError: a is not defined
Es decir, el motor de JavaScript no puede encontrar la variable en el ámbito actual ni en ningún ámbito superior.
Sin embargo, si intentamos acceder a una variable declarada con let o const antes de su declaración (es decir, cuando está en su TDZ), obtendremos un error distinto:
console.log(a); // Cannot access 'a' before initializationlet a = 5;
Este error indica que la variable existe pero no puede ser accedida antes de su inicialización.
Nombres de Variables y Buenas Prácticas
Nombrar variables es una de las habilidades más importantes y complejas en la programación. En un proyecto real, se pasa mucho más tiempo modificando y extendiendo una base de código existente que escribiendo algo nuevo desde cero. Cuando regresamos a nuestro código luego de un tiempo, es mucho más fácil encontrar información que está bien etiquetada.
Por favor, dedica tiempo para pensar un nombre correcto para una variable antes de declararla. Crea nombres que describan al máximo lo que son y sean concisos. Ejemplos de nombres malos son data y value. Ponte de acuerdo con tu equipo, y con tu propia mente, cuáles términos se utilizarán. Aunque no es obligatorio, se recomienda declarar siempre las variables antes de usarlas en JavaScript.
- OJO: Las mayúsculas y minúsculas en los nombres de las variables de JavaScript importan. No es lo mismo una variable llamada precio que Precio, pueden contener valores diferentes.
- En JavaScript, es muy habitual declarar las variables con const para anunciar implícitamente que esos valores no cambiarán a lo largo del programa, y en el caso que tengamos intenciones de que cambien, declararlas con let.
- En esos casos, se suele utilizar camelCase (por ejemplo, nombreCompleto) como estrategia de nombrado.
- Existen ciertos casos en los que se suele utilizar SNAKE_UPPER_CASE (por ejemplo, MAX_VALUE), y es en la situación en las que tenemos constantes con valores que no van a cambiar durante el programa, pero que el programador estará cambiando continuamente durante el desarrollo del programa para ajustar cambios.
Variables Booleanas en JavaScript
En JavaScript, una variable es booleana si se le asigna como contenido true o false. true y false son palabras clave de JavaScript, por tanto no podemos usarlas como nombres de variables. Las variables booleanas toman valor true o false.
En general, toda variable tiene un equivalente numérico (donde true es 1 y false es 0) y un equivalente en forma de texto. Por ejemplo, el equivalente en forma de texto del valor true sería 'true' y se puede obtener escribiendo el nombre de la variable seguido de .toString().
let esActivo = true;console.log(esActivo.toString()); // Imprime 'true' como una cadena de texto
tags: #como #declarar #varias #variables #javascript #ejemplo