Día: 6 de agosto de 2023

Los tipos de datos son la base fundamental para almacenar y manipular información en cualquier lenguaje de programación. En JavaScript, existen varios tipos de datos básicos que se utilizan para representar diferentes tipos de valores. A continuación veremos los tipos de datos básicos en JavaScript, junto con ejemplos para cada uno de ellos.

Números

Los números representan valores numéricos y pueden ser enteros o decimales:

let edad = 25;
let temperatura = -10;
let precio = 99.99;
let distancia = 1000.75;

Valores booleanos

Los valores booleanos representan solo dos posibles estados: true (verdadero) o false (falso).

let esMayor = true;
let esMenor = false;
let validado = true;
let habilitado = false;

Como veremos en otra unidad, los valores booleanos son útiles para realizar comparaciones y tomar decisiones en el flujo de un programa.

Cadenas de texto

Cadenas de texto simples

Las cadenas de texto representan una secuencia de caracteres y se utilizan para almacenar información textual. En su forma más básica pueden crearse utilizando comillas dobles (") o comillas simples ('):

let nombre = "Juan";
let mensaje = 'Hola, ¿cómo estás?';
let direccion = "Calle 123, Ciudad";

Plantillas de cadenas

La interpolación en JavaScript es una técnica que permite combinar valores y cadenas de texto de una manera más clara y legible. Es una forma conveniente de construir cadenas de texto que incluyan variables y expresiones dentro de ellas. La interpolación se realiza utilizando plantillas de cadenas, también conocidas como «template literals».

Para crear una plantilla de cadena, se utilizan las comillas invertidas (backticks `) en lugar de las comillas simples o dobles que se utilizan para crear cadenas de texto regulares. Dentro de una plantilla de cadena, se pueden incluir expresiones dentro de llaves `${...}`. Cuando la plantilla se evalúa, las expresiones dentro de las llaves se resuelven y se insertan en la cadena final.

En el siguiente ejemplo utilizamos una plantilla de cadena con interpolación para crear la variable mensaje, que incluye las variables nombre y edad dentro de la cadena. Las expresiones ${nombre} y ${edad} se evalúan y se reemplazan con los valores de las variables correspondientes al momento de la creación de la cadena:

// Variables
let nombre = "Juan";
let edad = 25;

// Plantilla de cadena con interpolación
let mensaje = `Hola, mi nombre es ${nombre} y tengo ${edad} años.`;

console.log(mensaje);
// Salida: "Hola, mi nombre es Juan y tengo 25 años."

La interpolación también es útil para realizar cálculos dentro de las plantillas de cadenas:

let a = 5;
let b = 3;

// Plantilla de cadena con interpolación y cálculo
let resultado = `La suma de ${a} y ${b} es igual a ${a + b}.`;

console.log(resultado);
// Salida: "La suma de 5 y 3 es igual a 8."

Además de las variables y expresiones, también podemos incluir cualquier contenido de cadena dentro de las plantillas, e incluso podemos definir la plantilla en varias líneas:

let producto = "manzana";
let cantidad = 3;
let precio = 2.5;

// Plantilla de cadena con contenido adicional
let factura = `
Producto: ${producto}
Cantidad: ${cantidad}
Precio unitario: €${precio}
Total: €${cantidad * precio}
`;

console.log(factura);
/* Salida:
Producto: manzana
Cantidad: 3
Precio unitario: €2.5
Total: €7.5
*/

La interpolación a través de plantillas de cadenas hace que el código sea más legible, más mantenible y menos propenso a errores de concatenación de cadenas. Además, facilita la inclusión de valores dinámicos en las cadenas, lo que es especialmente útil cuando se construyen mensajes personalizados o se generan resultados basados en datos variables.

Es importante destacar que las plantillas de cadenas solo están disponibles a partir de ECMAScript 6 (ES6) y versiones posteriores de JavaScript. Si estás utilizando una versión anterior, es posible que necesites utilizar concatenación de cadenas o métodos como String.prototype.concat() para lograr resultados similares.

Valores "null" y "undefined"

Las palabras clave null y undefined son valores especiales que representan la ausencia de valor:

• null se utiliza cuando una variable está intencionalmente vacía o cuando queremos establecer un valor nulo.
• undefined se utiliza cuando una variable ha sido declarada pero no se le ha asignado ningún valor.

let valor1 = null;
let valor2 = undefined;
let edad; // esta variable es undefined ya que no se le ha asignado ningún valor

Conversión de tipos de datos

Las conversiones de tipos de datos son procesos en los que JavaScript cambia temporalmente el tipo de un valor para que pueda ser utilizado en una operación específica. JavaScript realiza conversiones implícitas (o automáticas) y explícitas de tipos de datos para facilitar la manipulación de valores en diferentes situaciones.

Conversiones implícitas o automáticas

JavaScript utiliza conversiones automáticas cuando intentamos realizar operaciones entre diferentes tipos de datos. Esto sucede de forma transparente, sin que el programador tenga que hacer nada explícitamente.

Conversión automática de números a cadenas de texto

En los siguientes ejemplos, la conversión automática de números a cadenas de texto ocurre cuando utilizamos el operador de concatenación (+) para combinar valores numéricos con cadenas de texto. Cuando se realiza una operación aritmética que involucra una cadena de texto y un número, JavaScript convierte automáticamente el número en una cadena de texto para que pueda concatenarse con la otra cadena:

// Conversión automática de números a cadenas de texto en concatenaciones
let num1 = 10;
let num2 = 3.14;
let concatenacion1 = "El número es: " + num1; // "El número es: 10"
let concatenacion2 = "El valor de PI es: " + num2; // "El valor de PI es: 3.14"

// Conversión automática de números a cadenas de texto en operaciones aritméticas
let a = 5;
let b = 2;
let resultado1 = "La suma es: " + (a + b); // "La suma es: 7"
let resultado2 = "El producto es: " + (a * b); // "El producto es: 10"

Es importante tener en cuenta que la conversión automática de números a cadenas de texto solo ocurre cuando se utilizan operadores de concatenación. Si utilizamos operadores aritméticos entre números y cadenas de texto, JavaScript tratará de realizar la operación matemática en lugar de convertir los números en cadenas de texto:

let num = 42;
let texto = "El número es: " + num; // "El número es: 42"

let suma = num + 5; // 47, porque es una operación aritmética
let resultado = "El resultado es: " + (num + 5); // "El resultado es: 47"

Recuerda que, aunque JavaScript realiza la conversión automática de números a cadenas de texto, es recomendable utilizar la interpolación de cadenas con plantillas (${...}) cuando sea posible, ya que hace que el código sea más legible y evita confusiones con el uso de operadores de concatenación. La interpolación de cadenas es una característica introducida en ECMAScript 6 y ofrece una forma más clara y sencilla de incluir valores dentro de cadenas de texto.

Conversión automática de cadenas de texto a números

En el siguiente ejemplo, JavaScript convierte automáticamente las cadenas "5" y "2" en valores numéricos antes de realizar la resta. Como resultado, obtenemos el número 3:

let a = "5";
let b = "2";
let resultado = a - b;
console.log(resultado); // Salida: 3

Conversión automática de valores booleanos a valores numéricos

En el siguiente ejemplo, JavaScript convierte automáticamente los valores booleanos true y false a valores numéricos (1 y 0, respectivamente) antes de realizar la suma. Esta conversión automática ocurre porque en una operación aritmética, JavaScript espera valores numéricos, y los valores booleanos se convierten implícitamente a números para que la operación sea válida:

let verdadero = true; // 1
let falso = false; // 0

let sumaBooleanos = verdadero + falso;
console.log(sumaBooleanos); // Salida: 

Conversión automática de booleanos a cadenas de texto

Cuando utiliza el operador de concatenación + para combinar un valor booleano con una cadena de texto, JavaScript realiza una conversión automática del valor booleano a su representación en forma de cadena de texto. Los valores booleanos true y false se convierten en las cadenas de texto "true" y "false", respectivamente. En el siguiente ejemplo, las variables esVerdadero y esFalso son valores booleanos. Cuando los concatenamos con cadenas de texto utilizando el operador +, JavaScript realiza la conversión automática de estos valores booleanos a sus representaciones de cadena de texto correspondientes:

let esVerdadero = true;
let esFalso = false;

let cadena1 = "El valor es: " + esVerdadero;
let cadena2 = "El resultado es: " + esFalso;

console.log(cadena1); // Salida: "El valor es: true"
console.log(cadena2); // Salida: "El resultado es: false"

Podemos utilizar también la conversión automática de booleanos a cadenas de texto para construir mensajes que contengan condicionales. En el siguiente ejemplo creamos mensajes que informan sobre si una persona es mayor de edad o si puede ingresar a algún lugar.

let edad = 17;
let mensaje1 = "¿Puede trabajar? " + (edad >= 16);
let mensaje2 = "¿Es mayor de edad? " + (edad >= 18);

console.log(mensaje1); // Salida: "¿Puede trabajar? true"
console.log(mensaje2); // Salida: "¿Es mayor de edad? false"

Ten en cuenta que, aunque la conversión automática de booleanos a cadenas de texto es útil en ciertas situaciones, es recomendable ser explícito cuando sea necesario para mejorar la legibilidad del código. Si deseas asegurarte de que la representación en forma de cadena de texto sea más específica, puedes utilizar funciones como toString() o plantillas de cadenas para lograr un resultado más claro:

let esVerdadero = true;
let cadena1 = "Es verdadero: " + esVerdadero.toString(); 
let cadena2 = `Es falso: ${false}`; 

console.log(cadena1); // Salida: "Es verdadero: true"
console.log(cadena2); // Salida: "Es falso: false"

Conversiones explícitas

La conversión explícita de tipos de datos ocurre cuando el programador decide cambiar manualmente el tipo de un valor a otro tipo específico. JavaScript proporciona varias funciones y métodos que permiten realizar estas conversiones explícitas.

Conversión explícita de números a cadenas de texto

En el siguiente ejemplo convertimos números en cadenas de texto utilizando la función String() y también mediante la concatenación con una cadena vacía. Ambos enfoques producen el mismo resultado:

let numero1 = 42;
let numero2 = 3.14;

// Utilizando la función String()
let textoNumero1 = String(numero1); // "42"
let textoNumero2 = String(numero2); // "3.14"

// Utilizando concatenación con una cadena vacía
let textoNumero3 = numero1 + ""; // "42"
let textoNumero4 = "" + numero2; // "3.14"

Conversión explícita de cadenas de texto a números

En el siguiente ejemplo realizamos conversiones explícitas de cadenas de texto a números utilizando la función Number() y el operador unario +. También vemos que al intentar convertir una cadena de texto no numérica, obtenemos NaN:

let textoNumero1 = "123";
let textoNumero2 = "3.14";
let textoNoNumerico = "hola";

// Utilizando la función Number()
let numero1 = Number(textoNumero1); // 123 (número entero)
let numero2 = Number(textoNumero2); // 3.14 (número decimal)
let noEsNumero = Number(textoNoNumerico); // NaN (no es un número)

// Utilizando el operador unario +
let numero3 = +textoNumero1; // 123 (número entero)
let numero4 = +textoNumero2; // 3.14 (número decimal)
let numero5 = +textoNoNumerico; // NaN (no es un número)

Debemos destacar que la función Number() es muy flexible y puede manejar una amplia variedad de tipos de datos, y sólo devolverá NaN si no puede realizar la conversión:

Number("42"); // 42
Number("3.14"); // 3.14
Number("123abc"); // NaN (caracteres no numéricos)
Number("hello"); // NaN (cadena no numérica)
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN

Podemos utilizar además las funciones parseInt() y parseFloat() para convertir una cadena de texto en un número entero o decimal respectivamente:

let cadena1 = "123";
let cadena2 = "3.14";
let cadena3 = "Hola123";
let cadena4 = "123Hola";

let numero1 = parseInt(cadena1); // 123 (número entero)
let numero2 = parseInt(cadena2); // 3 (solo se toma la parte entera)
let numero3 = parseInt(cadena3); // 123 (comienza con un número)
let numero4 = parseInt(cadena4); // NaN (no comienza con un número)

let cadena5 = "3.14";
let cadena6 = "0.12345";
let cadena7 = "3.14Hola";
let cadena8 = "Hola3.14";

let numero5 = parseFloat(cadena5); // 3.14 (número decimal)
let numero6 = parseFloat(cadena6); // 0.12345
let numero7 = parseFloat(cadena7); // 3.14 (comienza con un número)
let numero8 = parseFloat(cadena8); // NaN (no comienza con un número)

Consideraciones adicionales sobre la función Number():

• No se limita únicamente a conversiones de enteros o decimales, ya que también permite convertir booleanos, nulos o valores no definidos.
• Genera NaN si encuentra cualquier carácter no numérico en una cadena de texto, aunque esté al final (por ejemplo, «123abc»).

Consideraciones adicionales sobre las funciones parseInt() y parseFloat():

• Intentarán convertir la parte numérica inicial de la cadena y detendrán la conversión cuando encuentren un carácter no numérico.
• Si la cadena comienza con un espacio en blanco, también lo ignorarán y comenzarán la conversión desde el primer dígito numérico.
• Solo convierten la parte inicial numérica de la cadena. Si hay caracteres numéricos después de caracteres no numéricos (por ejemplo, «123abc»), solo se tomará la parte inicial numérica («123» en este caso).
• Si la cadena no contiene ningún dígito numérico, devolverán NaN.

Conversión explícita de cadenas de texto a booleanos

En el siguiente ejemplo convertimos cadenas de texto en valores booleanos utilizando la función Boolean() y también mediante comparaciones estrictas (===). Es importante destacar que cualquier cadena no vacía se evalúa como true al utilizar la función Boolean():

let cadenaVerdadera = "true";
let cadenaFalsa = "false";
let cadenaNoValida = "hola";

// Utilizando la función Boolean()
let booleano1 = Boolean(cadenaVerdadera); // true
let booleano2 = Boolean(cadenaFalsa); // false
let booleano3 = Boolean(cadenaNoValida); // true (cualquier cadena no vacía se evalúa como true)

// Utilizando comparación estricta (===)
let booleano4 = (cadenaVerdadera === "true"); // true
let booleano5 = (cadenaFalsa === "true"); // false

Conversión explícita de booleanos a cadenas de texto

En el siguiente ejemplo utilizamos las funciones String() y toString() para convertir los valores booleanos true y false en sus representaciones en forma de cadena de texto. Ambos enfoques producen el mismo resultado:

let esVerdadero = true;
let esFalso = false;

// Utilizando la función String()
let cadena1 = String(esVerdadero); // "true"
let cadena2 = String(esFalso); // "false"

// Utilizando el método toString()
let cadena3 = esVerdadero.toString(); // "true"
let cadena4 = esFalso.toString(); // "false"

Conversión explícita de valores no booleanos a valores booleanos

En este caso, utilizamos la función Boolean() y además el doble operador de negación (!!) para obtener los valores booleanos de cada una de las variables:

let valor1 = ""; // valor falso
let valor2 = 0; // valor falso
let valor3 = null; // valor falso
let valor4; // valor undefined, también falso
let valor5 = NaN; // valor falso
let valor6 = 25; // valor verdadero
let valor7 = "Hola"; // valor verdadero

let booleano1 = Boolean(valor1); // false
let booleano2 = Boolean(valor2); // false
let booleano3 = Boolean(valor3); // false
let booleano4 = Boolean(valor4); // false
let booleano5 = Boolean(valor5); // false
let booleano6 = Boolean(valor6); // true
let booleano7 = Boolean(valor7); // true

let booleano8 = !!valor1; // false
let booleano9 = !!valor2; // false
let booleano10 = !!valor3; // false
let booleano11 = !!valor4; // false
let booleano12 = !!valor5; // false
let booleano13 = !!valor6; // true
let booleano14 = !!valor7; // true

Al utilizar !!, el primer operador de negación convierte el valor a su inverso booleano, y el segundo operador de negación invierte nuevamente el resultado, restaurando el valor original como valor booleano. Es decir, la doble negación convierte los valores "", 0, null, undefined y NaN en false, y por otro lado convierte 25 y "Hola" en true:

Consideraciones

Es fundamental comprender las conversiones de tipos de datos en JavaScript para escribir código robusto y evitar resultados inesperados en nuestros programas. No debemos olvidar que JavaScript es un lenguaje de tipado dinámico, lo que significa que las variables pueden cambiar su tipo de dato durante la ejecución del programa.

En general, se recomienda ser explícito en las conversiones y utilizar con mucha precaución funciones y métodos específicos para cada tipo. No olvidemos que si intentamos convertir valores que no son compatibles, como una cadena de texto no numérica a un número, obtendremos NaN como resultado. Por ejemplo, si intentamos convertir la cadena de texto "hola" en un número utilizando la función Number() o el operador unario +, no podremos obtener un valor numérico válido, y ambas conversiones devolverán NaN:

let textoNoNumerico = "hola";

// Utilizando la función Number()
let numero1 = Number(textoNoNumerico);

// Utilizando el operador unario +
let numero2 = +textoNoNumerico;

console.log(numero1); // Salida: NaN
console.log(numero2); // Salida: NaN

O por ejemplo, también podemos obtener resultados inesperados si intentamos convertir una cadena de texto en un valor booleano. En este caso, como cualquier cadena no vacía se evalúa como true, si utilizamos la función Boolean() para convertir "hola" en booleano, el resultado de la conversión es true en lugar de NaN:

let textoNoNumerico = "hola";

// Utilizando la función Boolean()
let booleano = Boolean(textoNoNumerico);

console.log(booleano); // Salida: true (cualquier cadena no vacía se evalúa como true)

Recuerda que NaN (Not-a-Number) es un valor especial en JavaScript que representa el resultado de una operación matemática inválida o indeterminada. Se obtiene cuando intentamos realizar una operación aritmética con valores no numéricos o cuando una operación matemática no tiene un resultado definido, como por ejemplo, la división por cero. Es importante tener en cuenta estas situaciones al trabajar con conversiones explícitas para evitar obtener resultados inesperados.

Debemos considerar además que al trabajar con variables que puedan contener valores tales como una cadena vacía o null, podemos obtener resultados inesperados si intentamos realizar conversiones para obtener un valor numérico o booleano, ya que en vez de obtener NaN, dichas conversiones se realizarán sin generar ningún error:

let cadenaVacia = "";
let nulo = null;

let numero1 = Number(cadenaVacia); // 0 (conversión válida)
let numero2 = Number(nulo); // 0 (conversión válida)

let booleano1 = Boolean(cadenaVacia); // false (cadena vacía se evalúa como false)
let booleano2 = Boolean(nulo); // false (null se evalúa como false)

Test

Comprueba tus conocimientos con este test sobre tipos de datos y otros conceptos relacionados con esta unidad.

Los operadores son elementos fundamentales en cualquier lenguaje de programación, y JavaScript no es una excepción. Los operadores en JavaScript nos permiten realizar diferentes tipos de operaciones con valores, como aritmética, asignación, comparación y lógica, entre otros. A continuación explicaremos los distintos tipos de operadores disponibles en JavaScript, junto con muchos ejemplos para cada uno.

Operadores aritméticos

Los operadores aritméticos se utilizan para realizar operaciones matemáticas con números.

• Suma (+): Se utiliza para sumar dos valores numéricos.
• Resta (-): Se utiliza para restar un valor numérico de otro.
• Multiplicación (*): Se utiliza para multiplicar dos valores numéricos.
• División (/): Se utiliza para dividir un valor numérico entre otro.

let a = 5 + 3; // 8
let b = a + 10; // 18

let c = 10 - 4; // 6
let d = 8 - 3; // 5

let e = 3 * 4; // 12
let f = 5 * 2; // 10

let g = 15 / 5; // 3
let h = 20 / 4; // 5

• Módulo (%): Se utiliza para obtener el resto de la división de dos números.

let i = 17 % 5; // 2 (17 dividido por 5 es 3 con un resto de 2)
let j = 8 % 3; // 2 (8 dividido por 3 es 2 con un resto de 2)

• Incremento (++): Se utiliza para aumentar el valor de una variable en 1.
• Decremento (--): Se utiliza para disminuir el valor de una variable en 1.

let k = 10;
k++; // k se convierte en 11
let l = 3;
l++; // l se convierte en 4

let m = 7;
m--; // m se convierte en 6
let n = 9;
n--; // n se convierte en 8

Operadores de asignación

Los operadores de asignación se utilizan para asignar valores a variables.

• Asignación básica (=): Se utiliza para asignar un valor a una variable.

let x = 10;
let y = "Hola";

• Operadores de asignación combinados (+=, -=, *=, /=): Estos operadores combinan una operación aritmética con una asignación.

let a = 5;
a += 2; // a se convierte en 7 (a = a + 2)

let b = 8;
b -= 3; // b se convierte en 5 (b = b - 3)

let c = 3;
c *= 4; // c se convierte en 12 (c = c * 4)

let d = 20;
d /= 5; // d se convierte en 4 (d = d / 5)

let y = 5;
y += 2; // 'y' se convierte en 7 (y = y + 2)
y -= 3; // 'y' se convierte en 4 (y = y - 3)
y *= 2; // 'y' se convierte en 8 (y = y * 2)
y /= 4; // 'y' se convierte en 2 (y = y / 4)

Operadores de comparación

Los operadores de comparación se utilizan para comparar dos valores y devuelven un valor booleano (true o false).

• Igualdad (==): Compara si dos valores son iguales, sin considerar el tipo de datos.

let a = 5;
let b = "5";
console.log(a == b); // true (compara solo los valores)

let c = true;
let d = 1;
console.log(c == d); // true (true es igual a 1)

• Desigualdad (!=): Compara si dos valores no son iguales, sin considerar el tipo de datos.

let e = 10;
let f = "5";
console.log(e != f); // true (los valores son diferentes)

let g = false;
let h = 0;
console.log(g != h); // false (false es igual a 0)

• Igualdad estricta (===): Compara si dos valores son iguales, considerando también el tipo de datos.

let i = 5;
let j = "5";
console.log(i === j); // false (compara valores y tipos de datos)

let k = true;
let l = 1;
console.log(k === l); // false (true y 1 son diferentes tipos de datos)

• Desigualdad estricta (!==): Compara si dos valores no son iguales, considerando también el tipo de datos.

let m = 10;
let n = "10";
console.log(m !== n); // true (los valores son iguales, pero los tipos de datos son diferentes)

let o = true;
let p = 1;
console.log(o !== p); // true (true y 1 son diferentes tipos de datos)

• Mayor que (>): Compara si el valor del operando izquierdo es mayor que el valor del operando derecho.

let a = 5;
let b = 3;
console.log(a > b); // true (5 es mayor que 3)

let c = 10;
let d = 20;
console.log(c > d); // false (10 no es mayor que 20)

let e = "25";
let f = 15;
console.log(e > f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor que 15)

En este ejemplo, la comparación e > f evalúa si "25" es mayor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).

• Menor que (<): Compara si el valor del operando izquierdo es menor que el valor del operando derecho.

let a = 5;
let b = 10;
console.log(a < b); // true (5 es menor que 10)

let c = 15;
let d = 5;
console.log(c < d); // false (15 no es menor que 5)

let e = "10";
let f = 15;
console.log(e < f); // true (la comparación se realiza mediante la conversión a números, "10" es menor que 15)

En este ejemplo, la comparación e < f evalúa si "10" es menor que 15, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).

• Mayor o igual que (>=): Compara si el valor del operando izquierdo es mayor o igual que el valor del operando derecho.

let a = 5;
let b = 3;
console.log(a >= b); // true (5 es mayor o igual que 3)

let c = 10;
let d = 10;
console.log(c >= d); // true (10 es igual a 10)

let e = "25";
let f = 20;
console.log(e >= f); // true (la comparación se realiza mediante la conversión a números, "25" es mayor o igual que 20)

En este ejemplo, la comparación e >= f evalúa si "25" es mayor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "25" se convierte a 25, y la comparación resulta en verdadero (true).

• Menor o igual que (<=): Compara si el valor del operando izquierdo es menor o igual que el valor del operando derecho.

let a = 5;
let b = 10;
console.log(a <= b); // true (5 es menor o igual que 10)

let c = 15;
let d = 15;
console.log(c <= d); // true (15 es igual a 15)

let e = "10";
let f = 20;
console.log(e <= f); // true (la comparación se realiza mediante la conversión a números, "10" es menor o igual que 20)

En este ejemplo, la comparación e <= f evalúa si "10" es menor o igual que 20, pero como uno de los operandos es una cadena de texto, JavaScript intentará convertirlo a número y luego realizar la comparación. En este caso, "10" se convierte a 10, y la comparación resulta en verdadero (true).

Operadores lógicos

Los operadores lógicos se utilizan para combinar o negar valores booleanos (true o false).

• AND lógico (&&): Devuelve true si ambos operandos son true.

let a = true;
let b = false;
console.log(a && b); // false

let c = true;
let d = true;
console.log(c && d); // true

• OR lógico (||): Devuelve true si al menos uno de los operandos es true.

let e = true;
let f = false;
console.log(e || f); // true

let g = false;
let h = false;
console.log(g || h); // false

• Negación lógica (!): Devuelve el valor contrario del operando.

let i = true;
console.log(!i); // false

let j = false;
console.log(!j); // true

Otros operadores

Operador ternario

El operador ternario es una forma abreviada de escribir una declaración if...else en una sola línea.

let age = 25;
let result = (age >= 18) ? "Adulto" : "Menor de edad";
console.log(result); // "Adulto"

Operador de concatenación

Los operadores de concatenación se utilizan para unir cadenas de texto.

• Concatenación básica (+): Une dos cadenas de texto.

let firstName = "John";
let lastName = "Doe";

let fullName = firstName + " " + lastName;
console.log(fullName); // "John Doe"

Operador de tipo

• Operador typeof: Se utiliza para obtener el tipo de dato de una variable.

let x = 5;
let y = "Hola";
let z = true;

console.log(typeof x); // "number"
console.log(typeof y); // "string"
console.log(typeof z); // "boolean"

Test

Comprueba tus conocimientos con este test sobre operadores y otros conceptos relacionados con esta unidad.

Las variables son elementos fundamentales en cualquier lenguaje de programación, ya que nos permiten almacenar y manipular datos de diferentes tipos. En JavaScript, tenemos tres formas principales de declarar variables: var, let, y const. Cada una tiene sus características y usos específicos. A continuación veremos cómo declarar, asignar valores, y usar variables en JavaScript, junto con ejemplos para cada caso.

Declaración de variables con var

La palabra clave var fue la forma tradicional de declarar variables en JavaScript antes de la introducción de let y const. Aunque var sigue siendo compatible en versiones modernas de JavaScript, su uso ha disminuido debido a algunos problemas asociados con su alcance. Sin embargo, es importante comprender cómo funciona var y cuáles son sus características.

Para declarar una variable usando var, simplemente escribimos var seguido del nombre de la variable.

var x;

Asignación de valores a una variable con var

Podemos asignar un valor a la variable en el mismo paso de la declaración o en cualquier otro lugar del código:

var age = 25;
var name;
name = "John";

Alcance de función con var

Una característica importante de var es su alcance de función. Esto significa que la variable declarada con var es visible en toda la función en la que se declara, incluso si es declarada dentro de un bloque.

function exampleScope() {
  if (true) {
    var foo = "bar";
    console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
  }
  console.log(foo); // "bar" - 'foo' es accesible en toda la función 'exampleScope'
}

Problemas con var

Aunque var puede ser útil, tiene algunos problemas asociados con su alcance que pueden conducir a comportamientos inesperados y errores difíciles de detectar.

Hoisting (Elevación)

Una de las características más sorprendentes de var es el hoisting (elevación). Las declaraciones de variables con var se elevan hasta la parte superior del ámbito actual, lo que significa que la variable es «elevada» antes de su declaración real:

console.log(x); // undefined - La declaración de la variable se eleva, pero aún no tiene valor
var x = 10;
console.log(x); // 10 - Ahora 'x' tiene el valor asignado

El código anterior se interpreta como si hubiera sido escrito de la siguiente manera:

var x; // La declaración de 'x' se eleva
console.log(x); // undefined - 'x' existe, pero aún no tiene valor asignado
x = 10; // Asignamos el valor 10 a 'x'
console.log(x); // 10 - Ahora 'x' tiene el valor asignado

Este comportamiento puede conducir a confusiones, especialmente si se olvida declarar una variable antes de usarla, ya que no se producirá un error, sino que obtendremos undefined.

Reasignación en el mismo ámbito

El alcance de función de var permite que la variable sea reasignada dentro del mismo ámbito, lo que puede llevar a errores difíciles de rastrear. En el siguiente ejemplo el resultado es inesperado, ya que y es reasignada dentro del bloque ‘if’ y su valor cambia fuera del bloque:

var y = 5;
if (true) {
  var y = 10; // Esto reasigna la variable 'y' en el mismo ámbito
  console.log(y); // 10 - La variable 'y' interna tiene precedencia dentro del bloque 'if'
}
console.log(y); // 10 - La variable 'y' externa es reasignada dentro del bloque 'if'

¿Cuándo deberías usar var?

Aunque var tiene algunos problemas y se recomienda evitarlo en la mayoría de los casos, hay situaciones específicas en las que puede ser útil, especialmente en el contexto de versiones antiguas de JavaScript o en ciertos escenarios donde el comportamiento del hoisting es deseado. Sin embargo, en versiones modernas de JavaScript, se prefieren let y const debido a su alcance de bloque y su comportamiento más predecible.

En resumen, var es una palabra clave para declarar variables en JavaScript con alcance de función. Aunque ha sido reemplazado en gran medida por let y const, todavía es importante comprender su funcionamiento y cómo puede afectar el alcance de las variables. Es recomendable utilizar let y const en su lugar, ya que proporcionan un código más seguro y fácil de mantener, pero conocer var te permitirá comprender mejor el código existente y ser más versátil en tu desarrollo.

Declaración de variables con let

Podemos utilizar la palabra clave let para declarar variables con alcance de bloque. Antes solo teníamos var, que tiene un alcance de función y no de bloque. let resuelve algunos problemas asociados con el uso de var y proporciona un alcance más seguro y predecible.

Para declarar una variable usando let, simplemente escribimos let seguido del nombre de la variable. Por ejemplo:

let x;

Alcance de bloque

Una de las principales diferencias entre let y var es su alcance. Las variables declaradas con let tienen un alcance de bloque, lo que significa que solo son visibles dentro del bloque (puede ser un bloque de código dentro de una función, una declaración if, un bucle for, etc.) en el que se han declarado.

function exampleScope() {
  if (true) {
    let foo = "bar";
    console.log(foo); // "bar" - La variable es visible dentro del bloque 'if'
  }
  console.log(foo); // Error: 'foo' no está definido, ya que está fuera del bloque 'if'
}

Evita el problema de «hoisting»

Otro problema que resuelve let es el comportamiento de «hoisting» que se presenta con las variables declaradas con var. En el caso de let, las variables no son «elevadas» (hoisted) hasta la parte superior del bloque, lo que puede ayudar a evitar errores difíciles de detectar.

console.log(x); // Error: 'x' no está definido, no es elevado (hoisted)
let x = 10;

Redefinición de variables

Con let, no puedes redeclarar la misma variable en el mismo alcance, lo que ayuda a evitar errores y mantener un código más limpio:

let y = 5;
let y = 10; // Error: no se permite redeclarar 'y' en el mismo alcance

Ejemplos adicionales

Los siguientes ejemplos te brindan una visión completa del uso de let en JavaScript. Recuerda que let nos permite evitar problemas de alcance y nos ayuda a mantener un código más limpio y seguro:

function loopExample() {
  for (let i = 0; i < 5; i++) {
    console.log(i); // 0, 1, 2, 3, 4 - 'i' es visible solo dentro del bucle 'for'
  }
  console.log(i); // Error: 'i' no está definido, está fuera del alcance del bucle 'for'
}

function blockExample() {
  let a = 10;
  if (true) {
    let a = 20;
    console.log(a); // 20 - La variable 'a' interna tiene precedencia dentro del bloque 'if'
  }
  console.log(a); // 10 - La variable 'a' externa no se ve afectada por la interna del bloque 'if'
}

function lexicalScoping() {
  let x = 1;
  {
    let x = 2;
    console.log(x); // 2 - 'x' dentro del bloque tiene precedencia sobre el 'x' externo
  }
  console.log(x); // 1 - 'x' externo no se ve afectado por el 'x' dentro del bloque
}

function temporalDeadZone() {
  console.log(x); // Error: 'x' no está definido debido a la zona temporal de la variable (temporal dead zone)
  let x = 5;
}

function iterationExample() {
  let funcs = [];
  for (let i = 0; i < 5; i++) {
    funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
  }
  funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}

Declaración de constantes con const

La palabra clave const se utiliza para declarar constantes, es decir, variables cuyo valor no puede cambiar una vez que se hayan inicializado.

Para declarar una constante usando const, simplemente escribimos const seguido del nombre de la constante y luego asignamos un valor:

const pi = 3.14159;

Asignación de valores y reasignación

Una vez que una constante ha sido declarada y se le ha asignado un valor, no se puede cambiar su valor. Intentar reasignar una constante resultará en un error:

const name = "John";
name = "Jane"; // Error: No se puede reasignar una constante

Inmutabilidad de los valores

Es importante tener en cuenta que const solo evita la reasignación de la variable, no la inmutabilidad de los valores a los que hace referencia. Si la constante contiene un objeto, por ejemplo, el objeto en sí puede ser modificado, pero no se puede asignar una nueva referencia a la constante:

const person = { name: "John", age: 30 };
person.age = 31; // Esto es válido, ya que se modifica el objeto al que 'person' hace referencia
person = { name: "Jane", age: 25 }; // Error: No se puede reasignar una constante

Debe inicializarse al declarar

A diferencia de las variables declaradas con let, las constantes deben inicializarse al declararlas. No es posible declarar una constante sin asignarle un valor en el mismo paso:

const x; // Error: Las constantes deben inicializarse al declararlas

Ámbito de bloque

Al igual que let, las constantes también tienen un ámbito de bloque. Esto significa que solo son visibles dentro del bloque en el que se declaran.

function exampleScope() {
  if (true) {
    const foo = "bar";
    console.log(foo); // "bar" - La constante es visible dentro del bloque 'if'
  }
  console.log(foo); // Error: 'foo' no está definido, está fuera del bloque 'if'
}

Ejemplos adicionales

Los siguientes ejemplos te pueden ayudar a comprender cómo usar const en JavaScript. Recuerda que const se utiliza para declarar variables que no cambiarán su valor después de la inicialización, lo que proporciona inmutabilidad y ayuda a escribir un código más seguro y fácil de mantener:

function blockExample() {
  const a = 10;
  if (true) {
    const a = 20; // Es posible tener una constante con el mismo nombre en otro ámbito
    console.log(a); // 20 - La constante 'a' interna tiene precedencia dentro del bloque 'if'
  }
  console.log(a); // 10 - La constante 'a' externa no se ve afectada por la interna del bloque 'if'
}

function iterationExample() {
  const funcs = [];
  for (let i = 0; i < 5; i++) {
    funcs.push(() => console.log(i)); // Se captura el valor actual de 'i' en cada iteración
  }
  funcs.forEach(func => func()); // 0, 1, 2, 3, 4 - Cada función muestra el valor de 'i' en su iteración correspondiente
}

Resumiendo

En versiones modernas de JavaScript, como ES6 y posteriores, se recomienda utilizar let y const en lugar de var debido a los problemas asociados con su alcance y el «hoisting». Las declaraciones con let proporcionan un alcance de bloque más seguro y predecible, mientras que const se utiliza para declarar constantes inmutables. El uso adecuado de let y const mejora la legibilidad, el mantenimiento y la seguridad de tu código.

Recomendación de uso de let y const

let

• let es preferible sobre var debido a su alcance de bloque, lo que significa que una variable declarada con let solo es visible dentro del bloque en el que se declara.
• let ayuda a evitar problemas de hoisting y errores relacionados con la reasignación en el mismo ámbito.
• let proporciona un código más claro y más seguro en comparación con var.

const:

• Utiliza const para declarar constantes, es decir, valores que no cambiarán después de la inicialización.
• El uso de const ayuda a que tu código sea más seguro y más fácil de entender, ya que deja claro que el valor no cambiará.
• Sin embargo, ten en cuenta que const no hace que los objetos sean inmutables, solo evita la reasignación de la variable.

Ejemplo adicional con let y const

function blockExample() {
  let a = 10; // Usa 'let' para evitar problemas con 'var'
  const b = 20; // Usa 'const' para declarar una constante

  if (true) {
    let a = 100; // 'a' tiene un nuevo ámbito dentro del bloque 'if'
    const b = 200; // 'b' tiene un nuevo ámbito dentro del bloque 'if'
    console.log(a, b); // 100, 200
  }

  console.log(a, b); // 10, 20
}

Test

Comprueba tus conocimientos con este test sobre variables y otros conceptos relacionados con esta unidad.