Todo sobre variables

Una variable es un almacén con un nombre para guardar datos.

Variables y constantes

Una variable es un “almacén con un nombre” para guardar datos. Podemos usar variables para almacenar golosinas, personas, y otros datos.

Para generar una variable se usan una de las siguientes palabras clave: let, const y var.

Declarar variables

JavaScript distingue entre mayúsculas y minúsculas (es case-sensitive) y utiliza el conjunto de caracteres Unicode. Por ejemplo, la palabra «Perro» se podría usar como el nombre de una variable.

Pero, la variable perro no es la misma que Perro porque JavaScript distingue entre mayúsculas y minúsculas.

let Perro = "Nala";

En JavaScript, las instrucciones se denominan declaraciones y están separadas por punto y coma (;).

No es necesario un punto y coma después de una declaración si está escrita en su propia línea. Pero si se desea más de una declaración en una línea, entonces debes separarlas con punto y coma.

Sin embargo, se considera una buena práctica escribir siempre un punto y coma después de una declaración, incluso cuando no sea estrictamente necesario. Esta práctica reduce las posibilidades de que se introduzcan errores en el código.

El texto fuente del script JavaScript se escanea de izquierda a derecha y se convierte en una secuencia de elementos de entrada que son fragmentos, caracteres de control, terminadores de línea, comentarios o espacios en blanco. (Los espacios, tabulaciones y caracteres de nueva línea se consideran espacios en blanco).

Puedes declarar una variable de dos formas

• Con la palabra clave var. Por ejemplo, var x = 42. Esta sintaxis se puede utilizar para declarar variables locales y globales, dependiendo del contexto de ejecución.
• Con la palabra clave const o let. Por ejemplo, let y = 13. Esta sintaxis se puede utilizar para declarar una variable local con ámbito de bloque.

También puedes simplemente asignar un valor a una variable. Por ejemplo, x = 42. Esta forma crea una variable global no declarada. También genera una advertencia estricta de JavaScript. Las variables globales no declaradas a menudo pueden provocar un comportamiento inesperado. Por lo tanto, se desaconseja utilizar variables globales no declaradas.

Una analogía de la vida real

Podemos comprender fácilmente el concepto de una “variable” si nos la imaginamos como una “caja” con una etiqueta de nombre único pegada en ella.

Por ejemplo, podemos imaginar la variable message como una caja etiquetada "message" con el valor "Hola!" adentro:

Podemos introducir cualquier valor a la caja.

También la podemos cambiar cuantas veces queramos:

let message;
 
message = 'Hola!';
 
message = 'Mundo!'; // valor alterado
 
alert(message);

Cuando el valor ha sido alterado, los datos antiguos serán removidos de la variable:

También podemos declarar dos variables y copiar datos de una a la otra.

let hello = 'Hola mundo!';
 
let message;
 
// copia 'Hola mundo' de hello a message
message = hello;
 
// Ahora, ambas variables contienen los mismos datos
alert(hello); // Hola mundo!
alert(message); // Hola mundo!

let message = "This";
 
// 'let' repetidos lleva a un error
let message = "That"; // SyntaxError: 'message' ya fue declarado

Nombramiento de variables

Existen dos limitaciones de nombre de variables en JavaScript:

1. El nombre únicamente puede incluir letras, dígitos, o los símbolos $ y _.
2. El primer carácter no puede ser un dígito.

Ejemplos de nombres válidos:

let userName;
let test123;

Cuando el nombre contiene varias palabras, comúnmente se utiliza camelCase. Es decir: palabras van una detrás de otra, con cada palabra iniciando con letra mayúscula: miNombreMuyLargo.

Es interesante notar que el símbolo del dólar '$' y el guion bajo '_' también se utilizan en nombres. Son símbolos comunes, tal como las letras, sin ningún significado especial.

Los siguientes nombres son válidos:

let $ = 1; // Declara una variable con el nombre "$"
let _ = 2; // y ahora una variable con el nombre "_"
 
alert($ + _); // 3

Ejemplos de nombres incorrectos:

let 1a; // no puede iniciar con un dígito
 
let my-name; // los guiones '-' no son permitidos en nombres

let имя = '...';
let 我 = '...';

let let = 5; // no se puede le nombrar "let" a una variable  ¡Error!
let return = 5; // tampoco se le puede nombrar "return", ¡Error!

// nota: no se utiliza "use strict" en este ejemplo
 
num = 5; // se crea la variable "num" si no existe antes
 
alert(num); // 5

"use strict";
 
num = 5; // error: num no está definida

Nombrar cosas correctamente

Estando en el tema de las variables, existe una cosa de mucha importancia.

Una variable debe tener un nombre claro, de significado evidente, que describa el dato que almacena.

Nombrar variables es una de las habilidades más importantes y complejas en la programación. Un vistazo rápido a el nombre de las variables nos revela cuál código fue escrito por un principiante o por un desarrollador experimentado.

En un proyecto real, la mayor parte de el tiempo se pasa modificando y extendiendo una base de código en vez de empezar a escribir algo desde cero. Cuando regresamos a algún código después de hacer algo distinto por un rato, es mucho más fácil encontrar información que está bien etiquetada. O, en otras palabras, cuando las variables tienen nombres adecuados.

Por favor pasa tiempo pensando en el nombre adecuado para una variable antes de declararla. Hacer esto te da un retorno muy sustancial.

Algunas reglas buenas para seguir:

• Use términos legibles para humanos como userName p shoppingCart.
• Evite abreviaciones o nombres cortos a, b, c, al menos que en serio sepa lo que está haciendo.
• Cree nombres que describen al máximo lo que son y sean concisos. Ejemplos que no son adecuados son data y value. Estos nombres no nos dicen nada. Estos solo está bien usarlos en el contexto de un código que deje excepcionalmente obvio cuál valor o cuales datos está referenciando la variable.
• Acuerda en tu propia mente y con tu equipo cuáles términos se utilizarán. Si a un visitante se le llamara “user”, debemos llamar las variables relacionadas currentUser o newUser en vez de currentVisitor o newManInTown.

¿Suena simple? De hecho lo es, pero no es tan fácil crear nombres de variables descriptivos y concisos a la hora de practicar.

Hoisting

Hoisting es uno de esos términos que todos los desarrolladores de JS han oído hablar porque buscaste en Google tu molesto error y terminaste en StackOverflow, donde esta persona te dijo que este error fue causado por hoisting.

Variables

En el caso de las variables declaradas con var, el hoisting hace que la declaración se mueva al principio del bloque, pero su inicialización se mantiene donde está en el código. Esto significa que, aunque puedas acceder a una variable antes de su declaración, su valor será undefined hasta que se asigne.

console.log(miVariable); // undefined (la declaración se ha "elevado", pero no la asignación)
 
var miVariable = 5; 
 
console.log(miVariable); // 5

Con las variables declaradas usando let o const, el comportamiento es diferente. Aunque la declaración también se "eleva", no puedes acceder a la variable antes de su declaración debido al Temporal Dead Zone (TDZ), lo que produce un error si intentas usarla antes de tiempo.

console.log(miVariable); // Error: Cannot access 'miVariable' before initialization
 
let miVariable = 5;

Funciones

En el caso de las funciones declaradas, todo el bloque de código de la función se eleva, lo que te permite invocarla antes de su declaración.

saludar(); // Funciona correctamente
 
function saludar() {
  console.log('Hola');
}

Sin embargo, si declaras funciones mediante expresiones de función asignadas a variables (const o let), el comportamiento es diferente, ya que el hoisting solo afectará a la declaración de la variable, pero no a la asignación de la función. Esto significa que no podrás invocar la función antes de que se asigne.

saludar(); // Error: Cannot access 'saludar' before initialization
 
const saludar = function() {
  console.log('Hola');
};

Alcance

El alcance o ámbito de una variable en JavaScript se refiere al contexto en el que dicha variable es accesible dentro del código. Hay dos tipos principales de alcance:

Alcance global

El alcance global es el ámbito de las variables que se declaran fuera de cualquier función. Las variables globales se pueden acceder desde cualquier parte del código, incluidas otras funciones, objetos y propiedades.

Declarar variables globales

Para declarar una variable global, se puede utilizar la palabra clave var. Por ejemplo:

// Variable global
var nombre = "Matias Petenatti";

También se puede declarar una variable global sin usar la palabra clave var. Sin embargo, esto se considera una mala práctica, ya que puede causar errores y dificultar el mantenimiento del código.

Acceso a variables globales

Para acceder a una variable global, se puede utilizar su nombre sin ningún modificador de alcance. Por ejemplo:

// Variable global
var nombre = "Matias Petenatti";
 
// Acceso a la variable global
console.log(nombre); // Matias Petenatti

Ejemplos de alcance global

El alcance global se puede utilizar para compartir datos entre funciones y objetos. Por ejemplo:

// Variable global
var nombre = "Matias Petenatti";
 
// Función que utiliza la variable global
function saludar() {
  console.log("Hola, " + nombre); // Hola, Matias Petenatti
}
 
// Objeto que utiliza la variable global
var persona = {
  nombre: nombre,
  saludar: function() {
    console.log("Hola, " + nombre); // Hola, Matias Petenatti
  }
};
 
saludar();
persona.saludar();

En este ejemplo, la variable nombre se declara globalmente. La función saludar() utiliza la variable nombre para saludar al usuario. El objeto persona también utiliza la variable nombre para almacenar el nombre de la persona.

Alcance local

En JavaScript, el alcance local se puede dividir en dos tipos:

Alcance de bloque

Este tipo de alcance se aplica a las variables declaradas con let o const dentro de cualquier bloque delimitado por llaves {}, como en condicionales (if), bucles (for, while) o simplemente bloques anidados. Las variables definidas dentro de estos bloques no son accesibles fuera de ellos.

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

Alcance de función

Es un tipo más específico de alcance local que se refiere a las variables declaradas dentro de una función. Estas variables, incluso si se usan var, let o const, son accesibles solo dentro de la función donde se declaran y no pueden ser accedidas desde fuera de ella.

function miFuncion() {
  var y = 20;
  console.log(y); // 20
}
miFuncion();
console.log(y); // Error: y no esta definida