Tipos de datos

Hasta ahora hemos aprendido a crear variables con let y const, pero todavía no hemos hablado de qué información pueden almacenar.

El tipo de dato indica qué clase de valor contiene una variable. Gracias a los tipos de datos, JavaScript sabe cómo debe trabajar con cada valor.

Por ejemplo, no es lo mismo un número que un texto.

let edad = 20;
let nombre = "Ana";

En este ejemplo:

• edad almacena un número.
• nombre almacena un texto.

Aunque ambos son variables, contienen tipos de datos diferentes.

---

JavaScript y el tipado dinámico

JavaScript es un lenguaje de tipado dinámico.

Esto significa que no es necesario indicar el tipo de dato al crear una variable. El propio lenguaje lo detecta automáticamente.

let numero = 10;
let texto = "Hola";
let activo = true;

Además, una misma variable puede almacenar distintos tipos de datos durante la ejecución del programa.

let dato = 10;

dato = "Hola";

dato = false;

Aunque esto es posible, no suele ser una buena práctica, ya que puede hacer el código más difícil de entender.

---

Tipos de datos primitivos

Los tipos primitivos son los tipos de datos más sencillos de JavaScript.

Son los bloques básicos con los que construiremos programas más complejos.

JavaScript dispone de siete tipos primitivos:

Tipo	Ejemplo
string	"Hola"
number	25
boolean	true
undefined	undefined
null	null
symbol	Symbol()
bigint	123n

Los tres primeros (string, number y boolean) son, con diferencia, los más utilizados cuando estamos empezando.

---

String

Un string es una cadena de texto.

Puede contener una sola letra, una palabra o una frase completa.

let nombre = "Miguel";
let ciudad = "Madrid";
let mensaje = "Bienvenido al curso";

Los textos pueden escribirse utilizando comillas dobles o simples.

let texto1 = "Hola";
let texto2 = 'Hola';

Las dos opciones son válidas.

---

Concatenar textos

Podemos unir varios textos utilizando el operador +.

let nombre = "Ana";
let saludo = "Hola " + nombre; // Declara saludo como la unión de los textos "Hola" + "Ana" (nombre)

console.log(saludo);

Resultado:

Hola Ana

---

Number

El tipo number representa tanto números enteros como decimales. Hay que tener en cuenta que estos se escriben sin comillas.

let edad = 20;
let temperatura = 18.5;
let precio = 24.99;

Con los números podemos realizar operaciones matemáticas.

let suma = 5 + 3;
let resta = 10 - 4;
let producto = 6 * 2;
let division = 20 / 5;

---

Boolean

Un valor booleano solo puede tener dos posibles valores:

• true
• false

Se utilizan para representar situaciones de sí o no.

let esMayorDeEdad = true;
let tieneCarnet = false;

Más adelante veremos que los booleanos son fundamentales para tomar decisiones dentro de un programa.

---

Undefined

Una variable declarada pero sin valor tiene automáticamente el valor undefined.

let nombre; // se ha declarado pero no le hemos asociado ningún valor

console.log(nombre);

Resultado:

undefined

Esto significa que la variable existe, pero todavía no contiene ningún dato.

---

Null

null representa la ausencia intencionada de un valor.

Es decir, somos nosotros quienes indicamos que una variable no tiene contenido.

let usuario = null;

Por ejemplo, una aplicación podría utilizar null para indicar que todavía no hay ningún usuario conectado.

---

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

Aunque parecen similares, no significan lo mismo.

let a;
let b = null;

• a vale undefined porque nunca se le ha asignado un valor.
• b vale null porque nosotros hemos indicado que no contiene ningún valor.

Una forma sencilla de recordarlo es:

Valor	Significado
undefined	Todavía no tiene valor.
null	Hemos decidido dejarla vacía.

---

Symbol

symbol es un tipo de dato introducido en ES6.

Se utiliza para crear identificadores únicos.

const id = Symbol();

No suele utilizarse en los primeros programas, por lo que simplemente conviene saber que existe.

---

BigInt

Normalmente JavaScript trabaja con números utilizando el tipo number.

Sin embargo, cuando necesitamos representar números extremadamente grandes podemos utilizar bigint.

const numeroMuyGrande = 123456789012345678901234567890n;

Al igual que symbol, no es un tipo de dato que vayamos a utilizar habitualmente al comenzar.

---

¿Cómo saber el tipo de una variable?

JavaScript incluye el operador typeof, que devuelve el tipo de dato de una variable.

let nombre = "Ana";

console.log(typeof nombre);

Resultado:

string

Más ejemplos:

console.log(typeof 25);

number

console.log(typeof true);

boolean

console.log(typeof undefined);

undefined

---

Resumen

Los tipos primitivos son los datos más básicos de JavaScript.

Los utilizarás constantemente para almacenar información.

Tipo	Uso
string	Texto
number	Números
boolean	Verdadero o falso
undefined	Variable sin valor
null	Ausencia intencionada de valor
symbol	Identificadores únicos
bigint	Números muy grandes

Recuerda que puedes utilizar typeof para conocer el tipo de una variable.

---

Ejercicios

Ejercicio 1

Indica el tipo de dato de cada una de las siguientes variables.

let nombre = "Laura";
let edad = 30;
let aprobado = false;
let ciudad;
let profesor = null;

---

Ejercicio 2

Crea una variable para almacenar:

• Tu nombre.
• Tu edad.
• Si te gusta JavaScript.
• Tu comida favorita.

¿Qué tipo de dato tiene cada una?

---

Ejercicio 3

¿Qué mostrará por pantalla?

let numero = 12;

console.log(typeof numero);

---

Ejercicio 4

¿Qué valor tendrá cada variable?

let a;
let b = null;

---

Ejercicio 5

Crea una variable llamada mensaje con el texto "Hola, me llamo" y otra llamada nombre con tu nombre.

Únelas para obtener el siguiente resultado:

Hola me llamo Sara

(Sustituye Sara por tu nombre).

---

Ejercicio 6

Crea una variable numero1 y dale un valor, luego crea una variable llamada numero2 y dale otro valor. Suma ambas variables y guarda el resultado en la variable suma.

---

Conversión de tipos

En JavaScript es muy habitual trabajar con datos que proceden de distintas fuentes: un formulario, una API o un archivo. En muchas ocasiones, estos datos no tienen el tipo que necesitamos.

Por ejemplo, cuando un usuario escribe su edad en un formulario, el valor recibido suele ser un texto, aunque represente un número.

Por eso es importante conocer cómo convertir un valor de un tipo de dato a otro.

No es lo mismo:

let edad = "25";

Que esto:

let edad = 25;

En este ejemplo, la primera edad contiene el texto "25", y la segunda el número 25.

---

Conversión implícita

La conversión implícita ocurre cuando es JavaScript quien convierte automáticamente un valor de un tipo a otro.

En algunas situaciones esto resulta muy útil, aunque también puede producir resultados inesperados.

De número a texto

Si utilizamos el operador + junto a una cadena de texto, JavaScript convierte automáticamente el número en un texto.

let resultado = "Tengo " + 20 + " años";

console.log(resultado);

Resultado:

Tengo 20 años

En este caso, el número 20 se convierte automáticamente en un string por el uso del +.

---

Cuidado con el operador +

El operador + puede comportarse de dos formas diferentes:

• Suma números.
• Une cadenas de texto.

5 + 3

Resultado:

8

Pero:

"5" + 3

Resultado:

53

Como uno de los valores es un texto, JavaScript convierte el otro también en texto y los concatena.

Este es uno de los errores más frecuentes cuando se empieza a programar.

Importante: Antes de realizar una operación, asegúrate de que los valores tienen el tipo de dato correcto. Lo vemos ahora en Conversión explícita.

---

Conversión explícita

La conversión explícita ocurre cuando somos nosotros quienes indicamos a JavaScript que cambie el tipo de un valor.

Es la forma más recomendable de trabajar, ya que hace el código más claro y evita errores.

Las funciones más utilizadas son:

• Number()
• String()
• Boolean()

---

Convertir a número

La función Number() intenta transformar un valor en un número.

let edad = "25"; // aquí el "25" es un texto

let numero = Number(edad); // aquí tras la transformación ya es un 25 numérico

console.log(numero);

Resultado:

25

Ahora la variable contiene un valor de tipo number.

También podemos comprobarlo con typeof.

console.log(typeof numero);

Resultado:

number

---

¿Qué ocurre si no puede convertirse?

Si el texto no representa un número, JavaScript devuelve NaN.

let numero = Number("Hola");

console.log(numero); 

Resultado:

NaN

NaN significa Not a Number ("no es un número"), ya que no puede usarse la función Number() si el contenido a transformar no es un número, puesto que el programa no sabe cómo transformar la palabra "Hola" en un número.

---

Convertir a texto

La función String() convierte cualquier valor en una cadena de texto.

let edad = 25;

let texto = String(edad);

console.log(texto);

Resultado:

"25"

Ahora el tipo de dato es:

console.log(typeof texto);

Resultado:

string

---

Convertir a booleano

La función Boolean() convierte un valor en true o false.

Boolean(1)

Resultado:

true

Boolean(0)

Resultado:

false

Algunos valores se consideran verdaderos (truthy) y otros falsos (falsy).

Los valores falsy más importantes son:

false
0
""
null
undefined
NaN

Todos los demás valores se consideran true.

Por ejemplo:

Boolean("Hola")

Resultado:

true

Boolean(15)

Resultado:

true

---

Conversión con parseInt() y parseFloat()

Además de Number(), JavaScript dispone de otras funciones para convertir textos en números.

parseInt()

Convierte un texto en un número entero.

let numero = parseInt("25");

console.log(numero);

Resultado:

25

Si el texto contiene decimales, estos se eliminan.

parseInt("18.9")

Resultado:

18

---

parseFloat()

Convierte un texto en un número decimal.

parseFloat("18.9")

Resultado:

18.9

---

¿Qué función debo utilizar?

En la mayoría de los casos:

Función	Uso recomendado
Number()	Convertir un valor a número.
String()	Convertir un valor a texto.
Boolean()	Convertir un valor a verdadero o falso.
parseInt()	Obtener un número entero a partir de un texto.
parseFloat()	Obtener un número decimal a partir de un texto.

---

Resumen

JavaScript puede convertir automáticamente algunos valores, pero esto no siempre produce el resultado esperado.

Siempre que sea posible, es recomendable realizar la conversión de forma explícita utilizando funciones como:

• Number()
• String()
• Boolean()

De esta forma el código resulta más fácil de leer y es menos probable cometer errores.

---

Ejercicios de Tipos de datos primitivos

Ejercicio 1

¿Qué mostrará por pantalla?

console.log("10" + 5);

---

Ejercicio 2

¿Qué mostrará por pantalla?

console.log("10" - 5);

---

Ejercicio 3

Convierte las siguientes variables al tipo indicado.

let edad = "30";      // number
let precio = 15;      // string
let valor = 0;        // boolean

---

Ejercicio 4

¿Qué resultado obtendremos?

Number("45")
Number("Hola")
String(20)
Boolean("")
Boolean("JavaScript")

---

Ejercicio 5

Convierte el texto "18.75" utilizando:

• Number()
• parseInt()
• parseFloat()

¿En qué se diferencian los resultados?

---

Ejercicio 6

Observa el siguiente código.

let precio = "20";
let iva = "4";

console.log(precio + iva);

Modifícalo para que el resultado sea 24 en lugar de 204.

---

Ejercicio 7

Escribe un programa que almacene dos números como texto:

let numero1 = "12";
let numero2 = "8";

Conviértelos al tipo adecuado y muestra la suma de ambos.