Variables de JavaScript explicadas: var vs let vs const, alcance y mejores prácticas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introducción

JavaScript es uno de los lenguajes de programación más utilizados en el desarrollo web. En particular, en el desarrollo front‑end, es esencial para crear páginas web interactivas. Dentro de ese contexto, las variables juegan un papel crucial en la gestión de datos en tus programas.

En este artículo explicaremos las variables de JavaScript en detalle, desde los fundamentos hasta temas más avanzados. Específicamente, aprenderás a declarar variables, comprender conceptos de alcance, seguir convenciones de nombres y prevenir errores comunes, todo con ejemplos de código prácticos.

1.1 Qué aprenderás en este artículo

Al leer este artículo, adquirirás los siguientes conocimientos y habilidades.

1. Entender el concepto básico y el rol de las variables en JavaScript
2. Conocer las diferencias entre var, let y const y cómo usarlos correctamente
3. Gestionar el alcance y la vida útil de las variables de forma eficaz
4. Aplicar variables con técnicas prácticas mediante ejemplos de código reales
5. Identificar causas comunes de errores y aprender a solucionarlos

1.2 A quién va dirigido este artículo

• Principiantes que desean aprender los conceptos básicos de JavaScript
• Aprendices intermedios que ya tienen experiencia programando pero quieren profundizar en las diferencias de variables y el alcance
• Cualquier persona que quiera reducir errores de codificación y diseñar programas de manera más eficiente

Esta guía explica los conceptos con ejemplos de código para que los principiantes no se queden atascados. También incluye consejos para prevenir errores y una sección de preguntas frecuentes, de modo que los usuarios intermedios puedan obtener conocimientos prácticos y aplicados.

En la siguiente sección, veamos más de cerca qué es una “variable” en primer lugar.

2. ¿Qué son las variables en JavaScript?

En JavaScript, una variable es un contenedor con nombre que se usa para almacenar datos temporalmente y reutilizarlos cuando sea necesario. El uso de variables hace que la gestión de datos dentro de un programa sea más eficiente.

2.1 ¿Cuál es el rol de una variable?

En programación, una variable es como una “caja” que almacena información. Al colocar datos dentro de la caja y sacarlos, puedes gestionar el estado del programa y realizar cálculos.

Por ejemplo, el siguiente código usa una variable para mostrar un mensaje.

let greeting = "Hello!";
console.log(greeting);

En este código:

• La variable greeting almacena la cadena "Hello!".
• console.log() muestra el contenido de esa variable.

Así es como las variables te permiten manipular datos de forma dinámica en tu programa.

2.2 Características clave de las variables en JavaScript

Las variables de JavaScript presentan las siguientes características.

1. Tipado dinámico

• En JavaScript, el tipo de la variable (número, cadena, arreglo, etc.) se determina automáticamente. No es necesario especificar un tipo al declarar una variable.
• Ejemplo:

  let number = 10;         // number
  let text = "Hello!";     // string
  let isTrue = true;       // boolean
  

2. Flexibilidad

• Puedes asignar valores de diferentes tipos a la misma variable (aunque no se recomienda para la legibilidad).
• Ejemplo:

  let data = 10;     // number
  data = "string";   // changed to string
  

3. Ámbito (visibilidad)

• El rango de uso de una variable depende de dónde se declare (detalles más adelante).

3. Reasignación y redeclaración

• Si se permite la reasignación o redeclaración depende de la palabra clave que utilices.
• Ejemplo:

  var x = 5;
  var x = 10; // redeclaration allowed (not recommended)
  
  let y = 5;
  // let y = 10; // Error (cannot redeclare)
  
  const z = 5;
  // z = 10; // Error (cannot reassign)
  

2.3 Beneficios de usar variables

1. Reutilización

• Si necesitas usar el mismo valor repetidamente, almacenarlo en una variable facilita su gestión.

1. Actualizaciones más sencillas

• Al actualizar el valor de una variable, los cambios se reflejan en todo el programa.

1. Mejor legibilidad y mantenibilidad

• Usar variables con nombres claros aclara la intención y ayuda a otros desarrolladores a entender tu código.

2.4 Un ejemplo sencillo usando variables

A continuación se muestra un programa básico de cálculo que utiliza variables.

let price = 500;              // item price
let quantity = 3;             // quantity
let total = price * quantity; // calculate total
console.log(`Total is ${total} yen.`);

En este ejemplo, el precio y la cantidad se almacenan en variables, y el monto total se calcula de forma dinámica y se muestra. Así es como las variables aumentan la flexibilidad y la eficiencia en tus programas.

3. Cómo Declarar Variables y Diferencias Entre Palabras Clave

En JavaScript, utilizas tres palabras clave para declarar variables: var, let y const. Comprender sus características y saber elegir entre ellas ayuda a prevenir errores y mejora la legibilidad.

3.1 Diferencias Básicas Entre var, let y const

1. var – La Declaración Legada

var se ha usado desde las primeras versiones de JavaScript.

Características:

• Permite redeclaración y reasignación.
• Tiene alcance de función (se ignora el alcance de bloque).
• El hoisting mueve la declaración al inicio de su alcance.

Ejemplo:

var x = 10;
console.log(x); // 10

var x = 20; // redeclaration allowed
console.log(x); // 20

if (true) {
  var y = 30; // ignores block scope
}
console.log(y); // 30

Notas:

• Al ignorar el alcance de bloque, puede provocar comportamientos no deseados.
• Se considera obsoleta en JavaScript moderno; evítala en código nuevo.

2. let – La Opción Recomendada para Reasignación

let se introdujo en ES6 (2015) y ahora se usa ampliamente.

Características:

• No puede redeclararse, pero sí reasignarse.
• Tiene alcance de bloque.
• El hoisting ocurre, pero usarla antes de la inicialización genera un error (Temporal Dead Zone).

Ejemplo:

let a = 10;
console.log(a); // 10

a = 20; // reassignment allowed
console.log(a); // 20

if (true) {
  let b = 30; // valid only inside this block
  console.log(b); // 30
}
// console.log(b); // Error: b is out of scope

Notas:

• Usa let cuando la reasignación sea necesaria, pero prefiere const cuando no necesites reasignar.

3. const – Para Constantes

const también se introdujo en ES6 y se usa para declarar constantes (valores que no deben reasignarse).

Características:

• No puede redeclararse ni reasignarse.
• Tiene alcance de bloque.
• Debe inicializarse en el momento de la declaración.

Ejemplo:

const pi = 3.14;
console.log(pi); // 3.14

// pi = 3.1415; // Error: cannot reassign

if (true) {
  const gravity = 9.8;
  console.log(gravity); // 9.8
}
// console.log(gravity); // Error: out of scope

Notas:

• No puedes reasignar la variable en sí, pero si es un objeto o un arreglo, aún puedes modificar sus propiedades/elementos.

Ejemplo:

const user = { name: "Alice" };
user.name = "Bob"; // property mutation is allowed
console.log(user.name); // Bob

3.2 Tabla Comparativa: var vs let vs const

3.3 Cómo Elegir Correctamente

1. Usa const por defecto
   * Si no necesitas reasignación, usa const para aumentar la seguridad.

2. Usa let solo cuando la reasignación sea requerida
   * Úsalo para contadores de bucles o variables de estado que deban cambiar con el tiempo.

3. Evita var
   * Puede aparecer en código legado, pero no se recomienda para bases de código modernas.

3.4 Resumen Rápido de Uso

const PI = 3.14;           // constant
let count = 0;             // value that changes
for (let i = 0; i < 5; i++) {
  count += i;
}
console.log(count);        // display total

let userName = "Alice";
console.log(userName); // "Alice"
userName = "Bob";
console.log(userName); // "Bob"

4. Alcance y Tiempo de Vida de las Variables

En JavaScript, comprender el alcance de una variable (dónde puede ser accedida) y su tiempo de vida (cuánto tiempo permanece en memoria) es extremadamente importante. Al dominar estos conceptos, puedes evitar errores inesperados y escribir código más eficiente.

4.1 ¿Qué es el Alcance?

El alcance se refiere al rango en el que una variable puede ser accedida. En JavaScript, el alcance varía según cómo se declare la variable.

1. Alcance Global

El alcance global significa un alcance que puede ser accedido desde cualquier parte del programa.

Ejemplo:

var globalVar = "Global variable";

function showGlobalVar() {
  console.log(globalVar); // Accessible
}

showGlobalVar();
console.log(globalVar); // Accessible

Notas:
Debido a que las variables globales pueden ser accedidas desde cualquier lugar, son propensas a colisiones de nombres y sobrescrituras no intencionadas. Debes mantenerlas al mínimo.

2. Alcance Local

El alcance local se refiere a un alcance que solo es válido dentro de una función o bloque específico.

Ejemplo:

function localExample() {
  let localVar = "Local variable";
  console.log(localVar); // Accessible
}

// console.log(localVar); // Error: out of scope

En este ejemplo, la variable localVar solo puede ser accedida dentro de la función y no puede ser referenciada fuera de ella.

3. Alcance de Bloque

Las variables declaradas con let y const son válidas solo dentro de un bloque (la sección envuelta en {}).

Ejemplo:

{
  let blockVar = "Block scope";
  console.log(blockVar); // Accessible
}
// console.log(blockVar); // Error: out of scope

Importante:
Si declaras una variable usando var, el alcance de bloque se ignora, así que ten cuidado.

{
  var blockVar = "Block scope ignored";
}
console.log(blockVar); // Accessible (not recommended)

4.2 ¿Qué es la Duración?

La duración se refiere a cuánto tiempo una variable continúa existiendo en la memoria.

1. Duración de las variables globales

• Existen desde el inicio del programa hasta que termina.

1. Duración de las variables locales

• Existen solo desde que se llama a una función hasta que la función finaliza.

Ejemplo:

function showMessage() {
  let message = "Temporary message";
  console.log(message);
}

showMessage();
// console.log(message); // Error: message is not accessible after the function ends

En este ejemplo, una vez que la función termina, la variable message se destruye y ya no puede ser referenciada.

4.3 ¿Qué es la Cadena de Alcance?

Cuando se forman alcances anidados (como funciones anidadas), JavaScript busca variables usando un mecanismo llamado cadena de alcance.

Ejemplo:

let outerVar = "Outside";

function outerFunction() {
  let innerVar = "Inside";

  function innerFunction() {
    console.log(outerVar); // Accesses outer scope
    console.log(innerVar); // Accesses inner scope
  }

  innerFunction();
}

outerFunction();

En este ejemplo, innerFunction busca variables primero en su propio alcance, luego en el alcance padre y, finalmente, en el alcance global si es necesario. Este proceso de búsqueda es la cadena de alcance.

4.4 Entendiendo las Clausuras

Una clausura es una característica donde una función interna continúa manteniendo acceso a variables de una función externa.

Ejemplo:

function createCounter() {
  let count = 0; // Outer variable

  return function () {
    count++; // Accesses outer variable
    return count;
  };
}

const counter = createCounter();
counter(); // 1
counter(); // 2

En este ejemplo, la función interna sigue accediendo a la variable externa count, lo que le permite preservar el estado. Las clausuras son útiles para contadores, gestión de configuraciones y más.

4.5 Puntos Clave para Usar Alcance y Duración de Forma Efectiva

1. Mantener las variables globales al mínimo

• Para prevenir colisiones de nombres y sobrescrituras accidentales, evita usar variables globales innecesariamente.

1. Aprovechar bien el alcance local

• Gestionar variables dentro de funciones o bloques ayuda a prevenir errores inesperados.

1. Preferir const

• Si no necesitas reasignación, usa const para mejorar la seguridad.

1. Entender cuándo son útiles las clausuras

• Usa clausuras de forma proactiva cuando necesites gestión de estado o encapsulamiento de funciones.

5. Inicialización de Variables y Manejo de Undefined

En JavaScript, inicializar correctamente las variables es importante. Las variables sin inicializar y los valores undefined pueden provocar errores inesperados, por lo que es necesario comprender su comportamiento.

5.1 ¿Qué es la inicialización de variables?

La inicialización consiste en asignar el primer valor a una variable después de declararla.

Ejemplo:

let count = 0;  // initialized
let message;    // uninitialized

En este ejemplo, count se inicializa de forma segura a 0. Mientras tanto, message no tiene ningún valor asignado, lo que puede causar un comportamiento inesperado más adelante.

5.2 Trabajando con undefined

1. ¿Qué es undefined?

undefined es un valor especial que se asigna automáticamente en los siguientes casos:

• Variables sin inicializar
• Propiedades de objetos o elementos de arreglos inexistentes
• Funciones que no devuelven un valor

Ejemplo:

let value; // uninitialized variable
console.log(value); // undefined

let obj = {};
console.log(obj.property); // undefined (property does not exist)

function noReturn() {}
console.log(noReturn()); // undefined (no return value)

Notas:

• Dado que undefined suele aparecer de forma no intencional, es necesario manejarlo adecuadamente en tu código.

2. Cómo comprobar undefined

A continuación se presentan formas seguras de verificar si una variable o propiedad es undefined.

Ejemplo:

let data;

// Method 1: typeof operator
if (typeof data === "undefined") {
  console.log("The variable is undefined");
}

// Method 2: strict comparison
if (data === undefined) {
  console.log("The variable is undefined");
}

Usar typeof es más seguro porque no lanzará un error aunque la variable nunca haya sido declarada.

5.3 Trabajando con null

1. ¿Qué es null?

null representa un valor “intencionalmente vacío”. A diferencia de undefined, se establece manualmente por el desarrollador.

Ejemplo:

let value = null;
console.log(value); // null

2. Diferencias entre undefined y null

Ejemplo:

console.log(undefined == null);  // true
console.log(undefined === null); // false

Notas:

• Utiliza null para indicar explícitamente un “valor vacío”.
• Diferenciarlo de undefined aclara tu intención en el código.

5.4 Buenas prácticas para la inicialización

1. Siempre inicializar

Asigna un valor en el momento de la declaración para evitar estados undefined.

Ejemplo:

let count = 0;     // initialized
let message = "";  // initialized with an empty string

2. Usa null para hacer la intención explícita

Si los datos aún no están determinados, inicialízalos con null para indicar que los establecerás más adelante.

Ejemplo:

let result = null; // will be assigned later

3. Verifica si los valores están inicializados

Comprueba si los argumentos de una función o los valores de retorno son undefined.

Ejemplo:

function greet(name) {
  if (name === undefined || name === null) {
    console.log("No name provided");
  } else {
    console.log(`Hello, ${name}!`);
  }
}

greet();        // No name provided
greet("Taro");  // Hello, Taro!

5.5 Errores comunes y cómo solucionarlos

1. ReferenceError

Causa: Acceder a una variable que nunca fue declarada.
Ejemplo:

console.log(name); // Error: name is not defined

Solución:
Declara e inicializa la variable antes de usarla.

2. TypeError

Causa: Intentar acceder a una propiedad de null o undefined.
Ejemplo:

let obj = null;
console.log(obj.property); // Error: cannot read properties

Solución:
Comprueba el valor con antelación.

if (obj !== null && obj !== undefined) {
  console.log(obj.property);
}

5.6 Resumen

La inicialización de variables y el manejo de valores undefined son habilidades fundamentales en JavaScript. Al inicializar correctamente y realizar comprobaciones seguras, puedes evitar errores inesperados.

6. Reglas y buenas prácticas para nombrar variables

En JavaScript, la forma en que nombras las variables tiene un impacto significativo en la legibilidad y mantenibilidad del código. Al seguir convenciones de nomenclatura adecuadas, la intención de tu código se vuelve más clara y los errores son más fáciles de evitar. Esta sección explica en detalle las reglas y buenas prácticas para nombrar variables.

6.1 Reglas básicas para nombres de variables

En JavaScript, los nombres de variables deben cumplir estas reglas.

1. Caracteres permitidos

• Letras del alfabeto ( a–z , A–Z )
• Números ( 0–9 )
• Guion bajo ( _ )
• Signo de dólar ( $ )

2. Patrones no permitidos

• Los nombres de variables no pueden comenzar con un número. Ejemplo:

  let 1name = "Error"; // Error
  let name1 = "Correct";
  

• No se pueden usar palabras reservadas de JavaScript (p. ej., let , const , class ). Ejemplo:

  let const = "Error"; // Error
  let value = "Correct";
  

• No se permiten espacios ni caracteres especiales. Ejemplo:

  let user name = "Error"; // Error
  let userName = "Correct";
  

6.2 Estilos de nomenclatura comunes

Existen varios estilos de nomenclatura frecuentemente usados en JavaScript.

1. camelCase (Recomendado)

La primera palabra comienza con minúscula y las palabras siguientes empiezan con mayúscula.

Ejemplo:

let userName = "Taro";      // Recommended
let totalAmount = 500;     // Recommended

2. snake_case (Uso limitado)

Las palabras se separan con guiones bajos (_). Este estilo se usa a menudo para constantes o en código relacionado con bases de datos.

Ejemplo:

let user_name = "Taro"; // Allowed but not common in JavaScript

3. PascalCase (Para clases y constructores)

Cada palabra comienza con mayúscula. Se usa comúnmente para nombres de clases y funciones constructoras.

Ejemplo:

class UserProfile {
  constructor(name) {
    this.name = name;
  }
}

4. UPPER_SNAKE_CASE para constantes

Las constantes se escriben típicamente en mayúsculas con guiones bajos.

Ejemplo:

const MAX_VALUE = 100;
const DEFAULT_TIMEOUT = 5000;

6.3 Buenas prácticas

1. Usa nombres descriptivos

Los nombres de variables deben describir claramente su propósito.

Ejemplo incorrecto:

let x = 10; // Meaning unclear

Ejemplo correcto:

let itemCount = 10; // Clearly represents the number of items

2. Evita abreviaturas excesivas

Abreviar demasiado reduce la legibilidad.

Ejemplo incorrecto:

let nm = "Taro"; // Unclear

Ejemplo correcto:

let userName = "Taro"; // Clear intent

3. Mantén la consistencia

Utiliza la misma convención de nombres en todo tu código.

Ejemplo incorrecto:

let user_name = "Taro"; // snake_case
let userAge = 25;       // camelCase (inconsistent)

Ejemplo correcto:

let userName = "Taro";
let userAge = 25; // Consistent camelCase

4. Usa nombres lógicos para banderas booleanas

Las variables booleanas deben describir una condición o estado.

Ejemplo incorrecto:

let flag = true; // Ambiguous

Ejemplo correcto:

let isLoggedIn = true; // Clearly represents state

5. Aclara números y unidades

Cuando las variables representan valores numéricos o unidades, hazlo explícito.

Ejemplo incorrecto:

let size = 10; // Unit unclear

Ejemplo correcto:

let fontSizePx = 10; // Font size in pixels

6.4 Directrices y notas sobre la nomenclatura

1. Usa inglés La programación utiliza el inglés como idioma estándar. Evita usar nombres de variables en japonés o romanizados.

Ejemplo incorrecto:

let namae = "Taro"; // Avoid romanized Japanese

Ejemplo correcto:

let userName = "Taro"; // Use English

2. Usa prefijos y sufijos cuando sea útil Añadir prefijos o sufijos puede aclarar el rol de una variable.

Ejemplo:

let btnSubmit = document.getElementById("submit"); // Button element
let arrUsers = ["Taro", "Hanako"];                 // Array

7. Errores comunes y cómo solucionarlos

En JavaScript, los errores relacionados con la declaración y el uso aparecen con frecuencia. Estos errores pueden detener la ejecución del código o provocar comportamientos no deseados. Esta sección explica los errores más comunes y cómo manejarlos.

7.1 ReferenceError

Causa

Un ReferenceError ocurre cuando intentas acceder a una variable que no existe o que está fuera de su alcance.

Ejemplo: Acceder a una variable no declarada

console.log(value); // Error: value is not defined

Cómo solucionarlo

1. Declara las variables antes de usarlas.

   let value = 10;
   console.log(value); // 10
   

2. Verifica el alcance de la variable.

   function test() {
     let localVar = "Local variable";
   }
   // console.log(localVar); // Error: out of scope
   

7.2 TypeError

Causa

Un TypeError ocurre cuando un valor no es del tipo esperado.

Ejemplo: Acceder a una propiedad de undefined

let obj;
console.log(obj.property); // Error: Cannot read properties of undefined

Cómo solucionarlo

1. Comprueba la inicialización y los tipos de datos con antelación.

   let obj = {};
   console.log(obj.property); // undefined (no error)
   

2. Usa el operador de encadenamiento opcional ( ?. ).

   let obj;
   console.log(obj?.property); // undefined (no error)
   

7.3 SyntaxError

Causa

Un SyntaxError ocurre cuando hay un error gramatical en el código.

Ejemplo: Falta de punto y coma

let x = 10
let y = 20;

Cómo solucionarlo

1. Utiliza un editor de código o herramientas de linting (p. ej., ESLint) para detectar problemas de sintaxis.
2. Ejecuta tu código y revisa los mensajes de error en las herramientas de desarrollo del navegador o en Node.js.

7.4 Uncaught Error

Causa

Un Uncaught Error aparece cuando una excepción se lanza sin ser manejada por try...catch.

Ejemplo:

throw new Error("Something went wrong!");

Cómo solucionarlo

1. Añade manejo de excepciones.

   try {
     throw new Error("Error occurred!");
   } catch (error) {
     console.log(error.message); // Error occurred!
   }
   

2. Registra los mensajes de error de forma adecuada para facilitar la depuración.

7.5 RangeError

Causa

Un RangeError ocurre cuando un valor está fuera del rango permitido.

**Ejemplo 1: Índice de array fuera de rango

let arr = [1, 2, 3];
console.log(arr[5]); // undefined (not an error, but unintended)

Ejemplo 2: Longitud array no válida

new Array(-1); // Error: Invalid array length

Cómo solucionarlo

1. Verifica los índices antes de acceder a los arrays.

   let arr = [1, 2, 3];
   if (arr[5] !== undefined) {
     console.log(arr[5]);
   } else {
     console.log("Out of range");
   }
   

2. Controla correctamente las condiciones de los bucles y las longitudes de los arrays.

7.6 Otros errores comunes

1. NaN

Causa: Ocurre cuando una operación numérica produce un valor que no es un número.
Ejemplo:

let result = parseInt("abc"); // NaN

Cómo solucionarlo

• Usa isNaN() para comprobarlo.

  if (isNaN(result)) {
    console.log("Invalid number");
  }
  

2. Infinity

Causa: Ocurre al dividir por cero o al realizar cálculos extremadamente grandes.
Ejemplo:

let value = 1 / 0; // Infinity

Cómo solucionarlo

• Valida los valores antes de realizar cálculos.

  let value = 10;
  if (value !== 0) {
    console.log(100 / value);
  } else {
    console.log("Cannot divide by zero");
  }
  

7.7 Resumen

Los errores son inevitables en el desarrollo con JavaScript, pero al comprender sus causas y aplicar técnicas de manejo adecuadas, puedes mantener tus programas estables. Anticipar las áreas propensas a errores e implementar un manejo de excepciones apropiado es esencial para un código fiable.

8. Ejemplos prácticos: Programas que usan variables en JavaScript

En esta sección aplicamos lo aprendido sobre variables en JavaScript construyendo ejemplos de programas concretos. Los revisaremos paso a paso, desde casos simples hasta otros ligeramente más avanzados.

8.1 Ejemplo 1: Una aplicación de cálculo

Problema:

Create a program that stores a product’s price and quantity in variables, then calculates and displays the total cost.

Code Example:

const pricePerItem = 500;        // price per item (constant)
let quantity = 3;               // quantity (variable)
let totalPrice = pricePerItem * quantity; // calculate total

console.log(`The total price is ${totalPrice} yen.`);

Explanation:

1. La constante pricePerItem representa el precio del artículo, que no cambia.
2. La variable quantity almacena la cantidad de artículos y puede ser actualizada.
3. El resultado del cálculo se almacena en totalPrice y se muestra usando una plantilla literal.

8.2 Ejemplo 2: Cálculo de descuento con lógica condicional

Problema:

Crea un programa que aplique un descuento basado en el monto total de la compra.

Code Example:

let totalAmount = 1200; // total purchase amount
let discount = 0;       // discount rate (initialized)

if (totalAmount >= 1000) {
  discount = 0.1; // 10% discount
} else if (totalAmount >= 500) {
  discount = 0.05; // 5% discount
}

let discountedAmount = totalAmount - totalAmount * discount;
console.log(`The discounted price is ${discountedAmount} yen.`);

Explanation:

1. Inicializar discount evita errores incluso si ninguna condición coincide.
2. La tasa de descuento se determina usando sentencias condicionales.
3. Usar variables facilita modificar condiciones o valores.

8.3 Ejemplo 3: Gestión de datos con arreglos y bucles

Problema:

Gestiona una lista de productos y sus precios usando arreglos, luego calcula el costo total.

Code Example:

const items = ["Apple", "Banana", "Orange"]; // item names
const prices = [100, 200, 150];              // prices
let totalCost = 0;                           // total cost

for (let i = 0; i < items.length; i++) {
  console.log(`${items[i]}: ${prices[i]} yen`);
  totalCost += prices[i];
}

console.log(`Total cost: ${totalCost} yen`);

Explanation:

1. Los arreglos permiten gestionar múltiples datos relacionados de manera eficiente.
2. Un bucle procesa cada elemento sin duplicar código.
3. La variable totalCost acumula la suma.

8.4 Ejemplo 4: Cálculos reutilizables con funciones

Problema:

Crea una función reutilizable para calcular el impuesto.

Code Example:

function calculateTax(price, taxRate = 0.1) {
  return price + price * taxRate;
}

let itemPrice = 1000;                 // item price
let finalPrice = calculateTax(itemPrice); // price including tax
console.log(`Price with tax: ${finalPrice} yen`);

Explanation:

1. La función calculateTax devuelve un precio con impuesto incluido.
2. Un parámetro por defecto permite que la función funcione sin especificar una tasa de impuesto.
3. Las funciones reutilizables mejoran la mantenibilidad y la eficiencia.

8.5 Ejemplo 5: Manejo de entrada del usuario

Problema:

Crea un programa que solicite al usuario su nombre y edad, y luego determine si es mayor de edad.

Code Example:

let userName = prompt("Please enter your name:");
let age = parseInt(prompt("Please enter your age:"), 10);

if (age >= 18) {
  console.log(`${userName} is an adult.`);
} else {
  console.log(`${userName} is a minor.`);
}

Explanation:

1. prompt se usa para recopilar la entrada del usuario.
2. parseInt convierte la entrada de texto en un número.
3. Nombres de variables claros hacen que el código sea más fácil de entender.

8.6 Resumen

En esta sección, exploramos ejemplos prácticos usando variables de JavaScript.

Puntos clave:

1. Aplicaciones de cálculo: Implementar aritmética básica y gestión de variables.
2. Descuentos condicionales: Cambiar valores dinámicamente según condiciones.
3. Arreglos y bucles: Gestionar y procesar múltiples datos de manera eficiente.
4. Funciones: Mejorar la reutilización y la mantenibilidad.
5. Entrada del usuario: Construir programas interactivos usando variables.

9. Preguntas frecuentes (FAQ)

Esta sección responde preguntas comunes sobre variables de JavaScript, cubriendo errores comunes de principiantes y preocupaciones más avanzadas.

Q1: ¿Cuál debo usar: var, let o const?

A:

En la mayoría de los casos, use const por defecto.

• Evita la reasignación y la redeclaración, haciendo el código más seguro.
• Expresa claramente la intención de que el valor no cambie.

Use let solo cuando sea requerida la reasignación.

Evite var en JavaScript moderno porque ignora el ámbito de bloque y puede causar errores inesperados.

Q2: ¿Necesito declarar tipos de variables en JavaScript?

A:

No. JavaScript es un lenguaje dinámicamente tipado, por lo que los tipos de variables se determinan automáticamente por los valores asignados.

Ejemplo:

let value = 10;     // number
value = "string";  // string (no error)

Sin embargo, el tipado dinámico puede causar errores no intencionados, así que sea cuidadoso. Usar TypeScript puede mejorar la seguridad de tipos.

Q3: ¿Puedo modificar propiedades de objetos declarados con const?

A:

Sí. const previene la reasignación de la variable en sí, pero las propiedades de objetos aún pueden ser modificadas.

Ejemplo:

const user = { name: "Alice" };
user.name = "Bob"; // property update allowed
console.log(user);

// user = {}; // Error: reassignment not allowed

Q4: ¿Cuál es la diferencia entre undefined y null?

A:

• undefined: Una variable ha sido declarada pero no se le ha asignado un valor.
• null: Un valor “vacío” asignado explícitamente.

Ejemplo:

let a;        // undefined
let b = null; // explicitly empty

Q5: ¿Por qué se deben evitar las variables globales?

A:

Las variables globales pueden causar varios problemas:

1. Colisiones de nombres: Mayor riesgo de nombres conflictivos.
2. Menor mantenibilidad: Más difícil rastrear dónde cambian los valores.
3. Dificultad en depuración: Los valores pueden ser sobrescritos inesperadamente.

Solución:
Si es necesario, agrupe las globales en un objeto de espacio de nombres.

Ejemplo:

const App = {
  userName: "Alice",
  userAge: 25
};

console.log(App.userName);

Q6: ¿Qué convenciones de nomenclatura debo usar?

A:

Las convenciones recomendadas incluyen:

1. camelCase: Para variables y funciones.

   let userName = "Alice";
   

2. PascalCase: Para clases y constructores.

   class UserProfile {}
   

3. UPPER_SNAKE_CASE: Para constantes.

   const MAX_COUNT = 100;
   

Q7: ¿Qué es un cierre?

A:

Un cierre es una característica donde una función retiene acceso a variables de su ámbito exterior.

Ejemplo:

function counter() {
  let count = 0;

  return function () {
    count++;
    return count;
  };
}

const increment = counter();
console.log(increment()); // 1
console.log(increment()); // 2

Los cierres son útiles para la gestión de estado y encapsulación.

10. Conclusión

En este artículo, cubrimos las variables de JavaScript de manera integral, desde conceptos básicos hasta uso avanzado. Las variables son fundamentales para gestionar datos y escribir programas flexibles y eficientes.

10.1 Resumen de Puntos Clave

1. Conceptos Básicos de Variables

• Las variables almacenan temporalmente datos para reutilización.
• El tipado dinámico ofrece flexibilidad pero requiere una gestión cuidadosa.

2. Métodos de Declaración

• var: Ámbito de función, redeclarable, pero no recomendado.
• let: Ámbito de bloque, reasignable.
• const: Ámbito de bloque, la elección más segura para la mayoría de los casos.

3. Ámbito y Vida Útil

• El ámbito define dónde las variables son accesibles.
• Minimice las variables globales y aproveche el ámbito local/de bloque.

4. Inicialización y Manejo de Undefined

• undefined: Asignado automáticamente cuando no se establece un valor.
• null: Representa explícitamente un valor vacío.

5. Nomenclatura y Mejores Prácticas

• Use nombres significativos y consistentes (prefiera camelCase).
• Use UPPER_SNAKE_CASE para constantes.

6. Errores Comunes

• Entender errores comunes (ReferenceError, TypeError, etc.) mejora la eficiencia en depuración.
• El manejo adecuado de errores aumenta la estabilidad del programa.

7. Ejemplos Prácticos de Código

• Ejemplos prácticos que demuestran cálculos, condicionales, arreglos, funciones y entrada de usuario.

10.2 Próximos Pasos

1. Pasar a Temas Avanzados

• Funciones y métodos: Mejorar la modularidad y la reutilización.
• Objetos y clases: Trabajar con estructuras de datos complejas.
• Características modernas de ES6+: Literales de plantilla, funciones flecha, desestructuración y más.

2. Practicar con Proyectos Reales

Aplicar variables en proyectos reales profundizará tu comprensión.

Ejemplos:

• Construir una aplicación simple de tareas (ToDo).
• Crear una calculadora o una herramienta de calendario.
• Implementar validación de formularios.

10.3 Reflexiones Finales

Las variables de JavaScript son un bloque de construcción fundamental de la programación. Al declararlas y gestionarlas correctamente, puedes escribir código seguro, eficiente y mantenible.

Con el conocimiento estructurado adquirido en este artículo—desde lo básico hasta el uso avanzado—estás bien preparado para seguir practicando y consolidando tus habilidades en JavaScript mediante la codificación práctica.