Entendiendo el uso de variables en JavaScript

Las variables en JavaScript son espacios de memoria que permiten almacenar valores de distintos tipos, como números, cadenas de texto, valores booleanos, etc. Estos valores pueden ser modificados o accedidos a lo largo del código según sea necesario. Las variables se utilizan para representar información que puede cambiar en el curso de la ejecución de un programa. En JavaScript, existen distintos tipos de variables, cada uno con sus propias características y usos específicos. Algunos de los tipos de variables más comunes en JavaScript son: variables de tipo primitivo (como números, cadenas de texto y valores booleanos), variables de tipo objeto (que representan estructuras de datos más complejas) y variables de tipo función (que representan funciones que pueden ser invocadas en el código).

Tipos de variables en JavaScript

En JavaScript existen 6 tipos de variables primitivas:

1. Number: puede ser un número entero o un número con decimales (también conocido como número flotante).
2. String: una cadena de texto.
3. Boolean: puede tener un valor de true o false.
4. Null: un valor que representa la ausencia de valor.
5. Undefined: un valor que se asigna automáticamente a una variable que no ha sido inicializada.
6. Symbol: un valor único e inmutable que se utiliza para identificar a objetos.

Además de estos tipos de variables primitivas, también existen las variables de tipo objeto en JavaScript. Los objetos son estructuras de datos que pueden almacenar una colección de pares clave-valor. Los objetos son muy útiles para representar conceptos reales de manera más precisa en el código. Por ejemplo, un objeto Persona podría tener propiedades como nombre, edad, altura, etc.

Ejemplos de variables de tipo primitivas

// Número
const edad = 30;

// Cadena de texto
const nombre = 'Juan';

// Boolean
const esMayorDeEdad = true;

// Null
const vehiculo = null;

// Undefined
let apellido;

// Symbol
const id = Symbol('id');

Ejemplo de variables de tipo objeto

// Objeto Persona
const persona = {
  nombre: 'Juan',
  edad: 30,
  altura: 1.75,
  peso: 75
};

Declaración de variables en JavaScript

En JavaScript existen 3 formas de declarar variables: var, let y const. A continuación te explico en qué se diferencian:

Con var

Es la forma más antigua de declarar variables en JavaScript. La variable declarada con var tiene un alcance global o local en función de si está dentro o fuera de una función. Además, la variable declarada con var puede ser reasignada y redefinida.

Con let

Es una forma más moderna de declarar variables en JavaScript. Al igual que var, la variable declarada con let tiene un alcance global o local en función de si está dentro o fuera de una función. Sin embargo, a diferencia de var, la variable declarada con let no puede ser redefinida, pero sí puede ser reasignada.

Con const

Es también una forma moderna de declarar variables en JavaScript. Al igual que let, la variable declarada con const tiene un alcance global o local en función de si está dentro o fuera de una función. Además, a diferencia de let, la variable declarada con const no puede ser ni redefinida ni reasignada.

Es importante tener en cuenta que el uso adecuado de var, let y const dependerá del contexto en el que se esté trabajando. En general, se recomienda usar const siempre que sea posible y reservar el uso de let para aquellas variables que necesiten ser reasignadas. El uso de var se debe evitar en la medida de lo posible.

Ejemplo de declaración de variables en JavaScript

// Declaración con var

var numero = 1;

console.log(numero); // 1

numero = 2;

console.log(numero); // 2

var numero = 3;

console.log(numero); // 3

// Declaración con let

let texto = 'Hola';

console.log(texto); // Hola

texto = 'Adiós';

console.log(texto); // Adiós

//let texto = 'Chau'; // Uncaught SyntaxError: Identifier 'texto' has already been declared

// Declaración con const

const PI = 3.14;

console.log(PI); // 3.14

//PI = 3.14159; // Uncaught TypeError: Assignment to constant variable.

//const PI = 3.14159; // Uncaught SyntaxError: Identifier 'PI' has already been declared

Alcance de las variables en JavaScript

El alcance de una variable en JavaScript se refiere a la visibilidad y accesibilidad de la variable en distintas partes del código. En JavaScript existen 3 tipos de alcance:

1. Alcance global: las variables declaradas con var o con las palabras clave let y const fuera de cualquier función tienen un alcance global. Esto significa que estas variables son visibles y accesibles desde cualquier parte del código, incluyendo dentro de funciones.

2. Alcance de bloque: las variables declaradas con let o const dentro de un bloque de código (es decir, entre llaves {}) tienen un alcance de bloque. Esto significa que estas variables son visibles y accesibles únicamente dentro del bloque en el que han sido declaradas.

3. Alcance de función: las variables declaradas con var dentro de una función tienen un alcance de función. Esto significa que estas variables son visibles y accesibles únicamente dentro de la función en la que han sido declaradas.

Es importante tener en cuenta que el alcance de las variables es un concepto clave en JavaScript y es importante comprenderlo bien para poder escribir código correcto y mantenible

Ejemplos del alcance de las variables en JavaScript

// Alcance global
let numero = 1;

function sumar() {
  console.log(numero);  // 1
  let numero = 2;
  console.log(numero);  // 2
}

sumar();
console.log(numero);  // 1

// Alcance de bloque
if (true) {
  let texto = 'Hola';
  console.log(texto);  // Hola
}
//console.log(texto);  // Uncaught ReferenceError: texto is not defined

// Alcance de función
function saludar() {
  var mensaje = 'Hola';
  console.log(mensaje);  // Hola
}

saludar();
//console.log(mensaje);  // Uncaught ReferenceError: mensaje is not defined

Hoisting de variables en JavaScript

El hoisting es una característica de JavaScript que consiste en mover la declaración de una variable al principio del alcance en el que está contenida (ya sea global, de bloque o de función). Esto significa que, independientemente de dónde se haya declarado una variable, esta siempre estará disponible al principio del alcance en el que esté contenida.

El hoisting se aplica de manera diferente a las variables declaradas con var y a las declaradas con let y const. A continuación te explico cómo funciona el hoisting en cada caso:

1. Hoisting con var: cuando se declara una variable con var, la declaración se mueve al principio del alcance en el que esté contenida, pero el valor de la variable no se mueve. Esto significa que, si se intenta acceder a la variable antes de su declaración, se obtendrá el valor undefined.

2. Hoisting con let y const: al igual que con var, la declaración de una variable con let o const se mueve al principio del alcance en el que esté contenida. Sin embargo, a diferencia de var, el valor de la variable también se mueve al principio del alcance, lo que significa que, si se intenta acceder a la variable antes de su declaración, se obtendrá un error de referencia.

Es importante tener en cuenta que el hoisting es una característica de JavaScript que puede generar confusión y errores si no se entiende bien cómo funciona. Por eso es recomendable siempre declarar las variables al principio del alcance en el que se vayan a utilizar.

Algunos ejemplos de cómo funciona el hoisting en JavaScript

Trate de ser lo mas claro posible, espero que les gusten mis pequeños artículos y como siempre los espero en el próximo!!!!

Anterior: Cómo incluir JavaScript en una página web

Siguiente: JavaScript prompt: Mostrar mensajes y cuadros de diálogo en JS