Variables y tipos de datos — JavaScript

¿Qué es esto y para qué sirve?

Imagina que tu computadora es un enorme escritorio. Sobre él hay libros de texto, cuadernos, bolígrafos y, por supuesto, tu teléfono inteligente. Para encontrar rápidamente lo que necesitas, colocas cada cosa en su lugar. En programación es lo mismo: cuando un programa se ejecuta, necesita un lugar para almacenar números, palabras y otros datos. Para eso existen las variables.

Una variable es como una caja con una etiqueta. En la etiqueta escribes un nombre (por ejemplo, "miEdad"), y dentro pones un valor (por ejemplo, 12). Cuando necesites ese valor, simplemente dices: "Dame lo que está en la caja con el nombre miEdad".

Un tipo de dato es una regla que indica qué se puede poner exactamente en la caja. En una caja solo puedes poner números, en otra solo texto, en otra solo afirmaciones verdaderas o falsas (sí/no). Si intentas poner texto en una caja para números, la computadora se confundirá. Por eso es importante saber qué tipos existen y cómo usarlos correctamente.

En JavaScript (JS), los tipos de datos funcionan casi como en Python, pero hay diferencias importantes. Por ejemplo, en Python escribes age = 12, y Python deduce por sí mismo que 12 es un número. En JavaScript es lo mismo, pero hay matices: JS a veces es demasiado "deductivo" y puede hacer algo que no esperas. Por eso aprenderemos a indicar explícitamente lo que queremos.

¿Para qué sirve esto? Imagina que estás escribiendo un programa calculadora. Si confundes los tipos y sumas el número 5 con el texto "5", no obtendrás 10, sino "55" (cinco cincos seguidos). La computadora hará lo que le dijiste, no lo que pensaste. Por lo tanto, el conocimiento de los tipos de datos es un superpoder que ayuda a evitar errores tontos.

Ejemplos de código con explicación

Vamos directo a la práctica. Abre cualquier editor de código (por ejemplo, el integrado en el navegador presionando F12 y yendo a la pestaña Console) o usa un editor en línea como CodePen o JSFiddle. Escribe el código y observa qué sucede.

Ejemplo 1: Creando variables con números

// Creamos una variable con el nombre "myAge" y le asignamos el número 12
let myAge = 12;

// Creamos una variable "pi" y le asignamos el número decimal 3.14
let pi = 3.14;

// Creamos una variable "negativeNumber" y le asignamos el número negativo -5
let negativeNumber = -5;

// Mostramos los valores en pantalla
console.log("Mi edad:", myAge);   // Mostrará: Mi edad: 12
console.log("Número Pi:", pi);         // Mostrará: Número Pi: 3.14
console.log("Número negativo:", negativeNumber); // Mostrará: Número negativo: -5

// Ahora intentemos sumar dos números
let sum = myAge + pi;  // 12 + 3.14 = 15.14
console.log("Suma de edad y Pi:", sum); // Mostrará: Suma de edad y Pi: 15.14

// Observa: en JavaScript la parte decimal se separa con un punto, ¡no con una coma!
// Si escribes 3,14 será un error, porque la coma tiene otro significado.

Explicación: Usamos la palabra clave let. Le dice a JavaScript: "Crea una caja nueva". Después escribimos el nombre de la variable (myAge), el signo igual (=) y el valor (12). El signo igual aquí no significa "es igual a" en el sentido matemático. Significa "poner en la caja". En Python escribirías lo mismo: my_age = 12. La diferencia es solo que en JavaScript se usa camelCase (primera palabra en minúscula, cada siguiente con mayúscula inicial), y en Python se usa snake_case (palabras separadas por guion bajo).

Ejemplo 2: Cadenas de texto (String)

// Una cadena es cualquier texto. Debe ir entre comillas.
let myName = "Ana";      // Comillas dobles
let myCity = 'Madrid';    // Comillas simples — ¡también funciona!
let myHobby = `pintura`; // Comillas invertidas — forma moderna

// Mostramos las cadenas
console.log("Me llamo:", myName);          // Mostrará: Me llamo: Ana
console.log("Vivo en la ciudad de:", myCity);     // Mostrará: Vivo en la ciudad de: Madrid
console.log("Mi hobby:", myHobby);          // Mostrará: Mi hobby: pintura

// Las cadenas se pueden concatenar (unir)
let greeting = "Hola, " + myName + "! Vives en " + myCity + ".";
console.log(greeting); // Mostrará: Hola, Ana! Vives en Madrid.

// También se pueden insertar variables directamente en la cadena usando comillas invertidas
let greetingModern = `Hola, ${myName}! Vives en ${myCity}.`;
console.log(greetingModern); // Mostrará lo mismo: Hola, Ana! Vives en Madrid.

// Observa: ${...} es una sintaxis especial que solo funciona con comillas invertidas.
// ¡Es muy práctico, no necesitas estar poniendo signos de más todo el tiempo!

Explicación: En Python, las cadenas también se pueden crear con comillas simples o dobles. Pero en JavaScript hay un tipo adicional: las comillas invertidas (`` ` ``). Permiten insertar variables directamente en el texto usando ${}. Esto se llama plantillas de cadenas (template strings). En Python se usan las f-strings: f"Hola, {my_name}!". El principio es el mismo, solo que la sintaxis es diferente.

Ejemplo 3: Tipo booleano (Boolean) — verdadero o falso

// El tipo booleano solo puede tener dos valores: true (verdadero) o false (falso)
let isStudent = true;      // Soy estudiante — es verdadero
let hasPets = false;       // No tengo mascotas — es falso

console.log("¿Soy estudiante?", isStudent);  // Mostrará: ¿Soy estudiante? true
console.log("¿Tengo mascotas?", hasPets); // Mostrará: ¿Tengo mascotas? false

// Los valores booleanos a menudo se obtienen como resultado de comparaciones
let myAge = 12;
let drivingAge = 18;

let canDrive = myAge >= drivingAge;  // ¿12 >= 18? ¡Esto es falso!
console.log("¿Puedo conducir?", canDrive); // Mostrará: ¿Puedo conducir? false

// Más ejemplos de comparaciones:
let number1 = 10;
let number2 = 20;

console.log("¿10 es mayor que 20?", number1 > number2); // Mostrará: ¿10 es mayor que 20? false
console.log("¿10 es menor que 20?", number1 < number2); // Mostrará: ¿10 es menor que 20? true

// También podemos comparar si dos valores son iguales
console.log("¿10 es igual a 20?", number1 === number2); // Mostrará: ¿10 es igual a 20? false
console.log("¿10 es igual a 10?", number1 === 10);      // Mostrará: ¿10 es igual a 10? true

// ¡Importante! En JavaScript se usa === para comparar igualdad estricta.
// El simple == también funciona, pero puede dar resultados inesperados.
// Por ejemplo:
console.log("5 == '5'?", 5 == '5');   // Mostrará: true (porque JS convierte tipos automáticamente)
console.log("5 === '5'?", 5 === '5'); // Mostrará: false (porque son tipos diferentes: número vs cadena)

Explicación: El tipo booleano es la base de toda la lógica en programación. Las comparaciones devuelven true o false. En Python también existe el tipo booleano (True/False), pero se escriben con mayúscula inicial. En JavaScript se escriben completamente en minúscula (true/false). La diferencia clave está en la comparación: en Python, == compara valores (y puede convertir tipos), mientras que === no existe. En JavaScript, se recomienda usar siempre === para evitar conversiones automáticas inesperadas.

Ejemplo 4: Tipo especial — undefined y null

// undefined significa que una variable ha sido declarada pero no tiene valor asignado
let futureVariable;
console.log("Valor de futureVariable:", futureVariable); // Mostrará: Valor de futureVariable: undefined

// null significa "vacío intencionalmente" — el programador asigna explícitamente "nada"
let emptyBox = null;
console.log("Valor de emptyBox:", emptyBox); // Mostrará: Valor de emptyBox: null

// Diferencia importante:
// undefined — JavaScript lo asigna automáticamente cuando olvidas dar un valor
// null — lo asignas tú mismo cuando quieres decir "aquí no hay nada"

// Ejemplo práctico:
let userAnswer = null;  // El usuario aún no ha respondido
let userScore;          // Olvidamos asignar un valor

console.log("Respuesta del usuario:", userAnswer); // Mostrará: Respuesta del usuario: null
console.log("Puntuación del usuario:", userScore); // Mostrará: Puntuación del usuario: undefined

Explicación: undefined y null son dos tipos de datos especiales en JavaScript que significan "ausencia de valor". En Python no hay un análogo directo. En su lugar, se usa None. Pero None en Python es más parecido a null en JavaScript: es un valor que el programador asigna intencionalmente para indicar "nada". undefined en JavaScript es único: aparece automáticamente cuando declaras una variable pero no le asignas un valor. En Python, si intentas usar una variable no asignada, obtendrás un error NameError.

¿Qué sigue?

Ahora ya conoces los tipos de datos principales en JavaScript:

• Number — para números (enteros y decimales)
• String — para texto
• Boolean — para verdadero/falso
• undefined — cuando una variable no tiene valor
• null — cuando el programador indica explícitamente "sin valor"

En el próximo artículo hablaremos sobre cómo convertir tipos entre sí (por ejemplo, convertir el texto "123" en el número 123) y sobre operadores interesantes que te ayudarán a escribir código más inteligente. ¡No te lo pierdas!