Entendiendo Variables en JavaScript

¡Hola HaWkers! Este es el tercer artículo de nuestra serie de artículos que van a cubrir la profundización de nuestro Roadmap JavaScript - TODO lo que necesitas Aprender 🦅. Si no sabes de qué estoy hablando, haz clic en el link anterior.

Bueno, ¡vamos a comenzar!

Dentro del universo de la programación, las variables tienen un papel fundamental. En JavaScript, ese papel es ampliado por su dinamicidad y versatilidad. Este artículo tiene como objetivo elucidar qué son variables, cómo declararlas, y cómo se comportan dentro del ambiente JavaScript.

Tipos de Datos en Variables

En JavaScript, las variables pueden almacenar diferentes tipos de datos. Mientras algunas lenguajes exigen que declares explícitamente el tipo de dato de una variable, JavaScript es dinámicamente tipado. Esto significa que el tipo de dato de una variable puede cambiar durante la ejecución del programa. Algunos de los tipos más comunes incluyen:

Number: Para números, sea entero o flotante.
String: Para secuencias de caracteres.
Boolean: Para valores verdadero o falso.
Object: Para colecciones de datos o instancias de constructores.
Undefined: Para variables no inicializadas.
Null: Representa la ausencia de valor.

Variables y Tipos de Datos: Una Mirada Más Profunda

En JavaScript, el tipo de una variable es determinado por su valor:

let x = 10; // Number
let y = '¡HaWkers!'; // String
let z = true; // Boolean
console.log(typeof x); // Retorna "number"
console.log(typeof y); // Retorna "string"
console.log(typeof z); // Retorna "boolean"

Esto nos permite usar la misma variable para diferentes tipos de datos:

let data = 2023;
console.log(data); // 2023

data = 'JavaScript';
console.log(data); // JavaScript

¿Qué son variables?

Variables, en términos simples, son "cajas" donde almacenamos valores. Imagina que posees una serie de cajones, y en cada uno de ellos, guardas un objeto diferente. Las variables funcionan de manera similar, almacenando datos que pueden ser números, strings, objetos, entre otros.

Declarando variables

En JavaScript, tenemos varias formas de declarar variables, siendo las más comunes a través de las palabras clave var, let, const. Cada una de ellas tiene sus peculiaridades:

var: Era la forma tradicional de declarar variables antes de ES6. Las variables declaradas con var son, por defecto, elevadas (hoisting) y tienen scope de función.
let: Introducido con ES6, permite declarar variables con scope de bloque, evitando muchos problemas relacionados con var.
const: También de ES6, es usado para declarar constantes, es decir, valores que no pueden ser reasignados después de su declaración.

¿Var, Let o Const? Una Cuestión de Inmutabilidad

Al elegir entre var, let y const, la inmutabilidad es una consideración importante. Cuando declaras una variable con const, no solo estás diciendo que la variable no puede ser reasignada; estás haciendo una afirmación sobre la inmutabilidad:

const miArray = [1, 2, 3];
miArray.push(4);
// ¡Esto es permitido!

miArray = [1, 2, 3, 4];
// ¡Esto causará un error!

Aunque podemos modificar el array declarado como constante, no podemos reasignar un nuevo valor a él.

Inicialización vs. Declaración

En JavaScript, es posible declarar una variable sin inicializarla:

let miVariable;
console.log(miVariable);
// Retorna undefined

Pero, podemos asignar un valor a ella más tarde:

miVariable = '¡Ahora tengo un valor!';
console.log(miVariable);
// Retorna "¡Ahora tengo un valor!"

Hoisting

Hoisting es un comportamiento peculiar de JavaScript que "mueve" declaraciones de variables hacia el tope de su scope. En la práctica, significa que una variable puede ser utilizada antes de ser declarada. Sin embargo, es una práctica recomendada declarar variables al inicio de su scope para evitar confusiones.

Reglas de nomenclatura

Aunque JavaScript es un lenguaje flexible, existen algunas reglas para nombrar variables:

Los nombres pueden contener letras, números, guiones bajos (_) y signos de dólar ($), pero no pueden comenzar con un número.
No está permitido usar palabras clave del lenguaje como nombre de variable.
Los nombres de variables son sensibles a mayúsculas y minúsculas, es decir, Nombre y nombre son diferentes.
Es recomendado usar la convención camelCase para nombres de variables con más de una palabra.

Variables Temporales con Template Strings

En lugar de concatenar variables en strings usando el signo de adición (+), el JavaScript moderno ofrece Template Strings para incrustar variables dentro de strings:

let nombre = 'HaWker';
console.log(`¡Hola, ${nombre}!`);

Esto facilita la lectura y formateo de textos que incluyen variables.

Operaciones con Variables

No estás limitado a solo almacenar valores en variables. También puedes ejecutar operaciones:

let a = 5;
let b = 10;
let suma = a + b;
console.log(`La suma de ${a} y ${b} es ${suma}.`);
// Retorna "La suma de 5 y 10 es 15."

Scope de variables

El scope de una variable se refiere a la parte del código donde ella puede ser accedida. En JavaScript, tenemos básicamente tres scopes: global, de función y de bloque.

Scope Global (global scope)

Variables declaradas fuera de cualquier función o bloque pertenecen al scope global. Ellas pueden ser accedidas desde cualquier lugar del código, lo que, a veces, puede causar conflictos y errores inesperados.

Cuidados con Variables Globales

Las variables globales pueden ser útiles, pero también son arriesgadas. Ellas pueden ser accedidas o modificadas desde cualquier lugar en el código, lo que puede llevar a comportamientos inesperados:

var globalVar = '¡soy global!';

function modificar() {
  globalVar = '¡fui modificado!';
}

modificar();
console.log(globalVar);
// Esto imprimirá: ¡fui modificado!

Por eso, es aconsejable limitar el uso de variables globales y preferir scopes más restringidos siempre que sea posible.

Scope de función (function scope)

Variables declaradas dentro de una función usando var tienen scope de función. Esto significa que solo pueden ser accedidas dentro de aquella función.

Diferencia

La principal diferencia entre el scope global y de función es la accesibilidad. Mientras las variables de scope global son accesibles en todo el código, las de scope de función están restringidas a la función donde fueron declaradas. Con el advenimiento de ES6 y la introducción del let, también tenemos el scope de bloque, que limita el acceso a un determinado bloque de código, como loops o condicionales.

Función vs. Bloque: Visualizando Scopes

JavaScript ES6 introdujo let y const, que tienen scope de bloque. Veamos la diferencia entre scope de función y scope de bloque:

function testeFuncion() {
  var scopeFuncion = '¡Estoy en la función!';
  if (true) {
    let scopeBloque = '¡Estoy en el bloque!';
    console.log(scopeFuncion);
    // Retorna "¡Estoy en la función!"
    console.log(scopeBloque);
    // Retorna "¡Estoy en el bloque!"
  }
  console.log(scopeFuncion);
  // Retorna "¡Estoy en la función!"

  // console.log(scopeBloque);
  // Esto causaría un error
}

testeFuncion();

Conclusión

Pues bien HaWkers, como ustedes pueden percibir, entender variables es crucial para dominar JavaScript o cualquier otro lenguaje de programación. Al comprender las particularidades de declaración, hoisting y scope, estarás más preparado para escribir códigos limpios, eficientes y sin errores.

Volver al Roadmap JavaScript - TODO lo que necesitas Aprender 🦅.