Variables y Constantes en JavaScript

Cuando estamos programando surge la necesidad de almacenar datos en memoria que permita ser reutilizable durante el desarrollo de un programa, para lograr esto hacemos uso de variables y constantes para guardar información que puede cambiar o permanecer igual a lo largo de la ejecución del programa. Hoy vamos a ver cómo declararlas, asignarles valores y cuándo es mejor usar una opción sobre la otra.

Variables en JavaScript

En JavaScript, existen tres maneras de declarar variables, cada una con sus particularidades: var, let y const. Vamos a desglosar cada una para entender cuándo usarlas.

Utilizando var

ECMAScript es un conjunto de reglas y especificaciones que define cómo funciona JavaScript, antes de su sexta versión (ES6) la única forma de declarar variables era usando var. Aunque sigue siendo funcional, hoy en día es preferible evitarla debido a su comportamiento peculiar con el scope (alcance) y hoisting (elevación).

Utilizando var se ve de la siguiente manera:

    // Creamos una variable nombre y edad, y les asignamos un valor
    var nombre = "José" 
    var edad = 22

Problema con var

Las variables declaradas con var tienen alcance de función en lugar de alcance de bloque. Esto significa que las variables declaradas con var son accesibles dentro de toda la función donde fueron definidas, sin importar si fueron declaradas dentro de un bloque (if, for, etc.). El principal problema aquí es que las variables con var son más propensas a colisiones o sobrescritura accidental, especialmente en bloques de código grandes o complejos.

A continuación te muestro un ejemplo básico:

Ejemplo con var

if (true) {
  var numero = 10;
}
console.log(numero); // Imprime 10, aunque "numero" se declaró dentro del bloque if

El valor de numero se declara en el bloque if, pero es accesible fuera de este, lo que puede llevar a confusión en programas grandes. Si hubiera otro var numero en otro lugar, puede problemas en el código al intentar obtener el valor de numero.

Utilizando let

Fue introducido en ES6, let es la opción recomendada para declarar variables que pueden cambiar su valor. A diferencia de var, las variables declaradas con let tienen alcance de bloque, lo que significa que las variables declaradas con let son accesibles únicamente dentro del bloque de código en el que fueron definidas (entre {}), como en un if, for, etc. A continuación te muestro un ejemplo:

if (true) {
   let numero = 10;
}
console.log(numero); // Error: numero no esta definido

Ha diferencia de var en el ejemplo anterior, aquí, numero no está disponible fuera del bloque if, lo que mejora la seguridad y legibilidad del código, ya que las variables están limitadas al contexto donde realmente se necesitan, en este caso, solo dentro del bloque if.

Utilizando Const

const también fue introducido en ES6 y se utiliza para declarar constantes, es decir, valores que no pueden ser reasignados una vez establecidos. Si intentas cambiar el valor de una constante, JavaScript generará un error. A continuación te muestro un ejemplo:

const PI = 3.1416 
PI = 3.15 // Error: no se puede reasignar una constante

En el ejemplo anterior, declaramos una constante PI con su respectivo valor, luego intentamos reasignarle un nuevo valor, es en ese momento donde se nos informará en consola del navegador que la constante PI no se le puede reasignar un valor una vez que ya fue definido.

Hasta el momento hemos visto el uso distinto y la diferencia entre let, var, const, hemos declarado variables y asignado valores, pero para comprender mejor la diferencia entre declarar y asignar, a continuación veremos la diferencia.

Declaración de variables

En JavaScript, puedes declarar una variable sin asignarle un valor inicialmente, lo que hará que la variable tenga el valor undefined. Luego, puedes asignarle un valor en cualquier momento. Por ejemplo:

let ciudad; 
console.log(ciudad); // Imprime undefined

En este blog no hablaremos aun acerca de los tipos de datos, lo haremos en el siguiente blog, pero para que tengas una idea del ejemplo anterior, undefined es un tipo de dato en JavaScript que aparece cuando una variable no tiene un valor asignado o definido, en el ejemplo anterior es lo que sucede, hemos declarado la variable cuidad pero no se ha asignado ningún valor, por lo tanto JavaScript interpretará el valor de cuidad como undefined hasta que se le asigne un valor a la variable.

Declaración de variables con var

La sintaxis para declarar variables con var es:

var alumno;
var profesor;
var edad;

En JavaScript no es necesario colocar un punto y coma ; al final de cada linea de código, sin embargo, es una buena práctica hacerlo para indicar que la línea de código termina hasta donde este el punto y coma. Al menos en JavaScript no nos mostrará un error si colocamos o no el punto y coma al final.

Declaración de variables con let

La sintaxis para declarar variables con let es:

let estudiante;
let maestro;
let idEstudiante;

Declaración de constantes

La sintaxis para declarar constantes es:

const DIRECCION_IP = '0.0.0.0';
const EDAD = 22;

Dado a que las constantes almacenan un valor que no puede modificarse, es necesario asignarles su valor al momento de su declaración.

Asignación de valores

Asignación a variables con `var``

La sintaxis para asignar valores a las variables declaradas con var es:

var profesor = "Alejandro" // Declaración y asignación en una sola línea
var alumno; // Declaración de variable
alumno = "Alexander" // Asignación de valor

Asignación a variables con let

La sintaxis para asignar valores a las variables declaradas con let es:

let profesor = "Wilson" // Declaración y asignación en una sola línea
let alumno; // Declaración de variable
alumno = "Gabriel" // Asignación de valor

Asignación a constantes

Como te comente en la sección anterior, las constantes almacenan un valor que no puede modificarse, por lo tanto es necesario asignarles su valor al momento de su declaración. La sintaxis es la siguiente:

const SERVER_PORT = "3000"
const PI = 3.1416

Es importante mencionar que se considera una buena práctica nombrar las constantes utilizando mayusculas y aplicando el estilo de escritura "Snake Case".

Técnicas para nombrar variables

Existen varias técnicas y estilos recomendados para nombrar variables, pero algunos se utilizan más comúnmente en la práctica. Aquí te explico algunas de las técnicas más importantes y cuál es la más utilizada.

Camel Case

Es la técnica más común y ampliamente utilizada en JavaScript, especialmente para nombrar variables y funciones. En Camel Case, la primera palabra está en minúscula, y cada palabra subsiguiente comienza con una letra mayúscula, sin espacios ni guiones.

Ejemplo:

let nombreUsuario;
let precioTotal;
let calcularPrecioTotal;

Pascal Case

Similar al Camel Case, pero aquí todas las palabras comienzan con una letra mayúscula. En JavaScript, se utiliza mayormente para nombres de clases o constructores. Para efectos de ejemplo con variables, se vería de la siguiente manera:

let NombreVendedor;
let PrecioTotal;
let CalcularPrecioTotal;

Snake Case

En Snake Case, todas las letras están en minúsculas, y las palabras están separadas por un guion bajo (_). Aunque no es tan común en JavaScript moderno, se puede ver en código antiguo o cuando se integran librerías de otros lenguajes (como Python, donde es más común).

let nombre_usuario;
let precio_total;

Snake Case no es tan popular en JavaScript, ya que la comunidad tiende a preferir Camel Case para la mayoría de las situaciones.

Es recomendable que mantengas un estilo consistente en todo tu código. Si decides usar Camel Case, úsalo en todo el proyecto, sin mezclar con otros estilos como Snake Case o Pascal Case para variables y funciones.

Conclusión

Las variables y constantes son fundamentales en cualquier lenguaje de programación, y en JavaScript no es diferente. La llegada de let y const con ES6 ha hecho que la gestión de variables sea más clara y predecible. Ahora que conoces cómo declarar y asignar variables correctamente, así como cuándo usar let o const, estarás mejor preparado para escribir código más seguro y eficiente.

¡Ahora te toca a ti! Practica estos conceptos en tu propio código y comparte este artículo con otros colegas que están comenzando en el mundo de la programación, que quieran aprender y mejorar sus habilidades en JavaScript.

En CodeMundo, ¡estamos aquí para aprender juntos! 👩‍💻👨‍💻