DWEC

Appearance

Tipos de datos ​

La especificación oficial de ECMAScript define ocho tipos de datos del lenguaje: Undefined, Null, Boolean, String, Symbol, Number, BigInt y Object. Todo valor de JavaScript pertenece exactamente a uno de estos tipos.

"The ECMAScript language types are Undefined, Null, Boolean, String, Symbol, Number, BigInt, and Object. An ECMAScript language value is a value that is characterized by an ECMAScript language type."

— ECMAScript® 2027 Language Specification

Los tipos de datos de JavaScript se dividen en dos grandes grupos: tipos primitivos y objetos.

Los tipos primitivos representan valores simples que el lenguaje maneja directamente, mientras que los objetos permiten agrupar datos y funcionalidades relacionadas mediante pares clave–valor.

js
// primitive types
console.log(typeof undefined); // undefined
console.log(typeof null); // object (error histórico)
console.log(typeof true); // boolean
console.log(typeof "Hola"); // string
console.log(typeof Symbol("id")); // symbol
console.log(typeof 10); // number
console.log(typeof 123n); // bigint

// object type
console.log(
  typeof {
    title: "The Art of Computer Programming",
    author: "Donald E. Knuth",
    published: 1968,
  },
); // object

INFO

Aunque typeof null devuelve object, null es un tipo primitivo. Este comportamiento se debe a un error histórico de JavaScript que se ha mantenido por motivos de compatibilidad y no refleja su verdadero tipo de dato.

Undefined ​

El tipo Undefined tiene un único valor posible, denominado undefined.

js
let userName;

console.log(userName); // undefined
console.log(typeof userName); // undefined

Toda variable a la que aún no se le haya asignado un valor contiene, por defecto, el valor undefined.

Null ​

El tipo Null tiene exactamente un valor, denominado null.

js
let user = null;

console.log(user); // null
console.log(typeof user); // object (error histórico)

El valor null se utiliza para indicar explícitamente la ausencia de un valor. Aunque typeof null devuelve "object" por un error histórico de JavaScript, null es un tipo primitivo.

Boolean ​

El tipo Boolean representa una entidad lógica con dos únicos valores posibles: true y false.

js
let isStudent = true;
let hasLicense = false;

console.log(isStudent); // true
console.log(hasLicense); // false

console.log(typeof isStudent); // boolean
console.log(typeof hasLicense); // boolean

Los valores true y false se utilizan para representar el resultado de expresiones lógicas y constituyen la base de las estructuras de control del lenguaje, como las sentencias if, while y for.

String ​

El tipo String representa una secuencia ordenada de cero o más caracteres y se utiliza para almacenar texto.

Las cadenas pueden delimitarse mediante double quotes ("), single quotes (') o backticks (`).

js
let firstName = "Alice";
let lastName = "Smith";
let greeting = `Hello, world!`;

console.log(firstName); // Alice
console.log(lastName); // Smith
console.log(greeting); // Hello, world!

console.log(typeof firstName); // string
console.log(typeof lastName); // string
console.log(typeof greeting); // string

Las cadenas pueden estar vacías, en cuyo caso su longitud es cero.

js
let empty = "";

console.log(empty); // ""
console.log(empty.length); // 0
console.log(typeof empty); // string

TIP

Aunque String es un tipo primitivo, JavaScript permite acceder a propiedades y métodos como length o toUpperCase(). Internamente, el lenguaje crea de forma temporal un objeto envoltorio (wrapper object) para realizar estas operaciones.

js
console.log("Hola".length); // 4
console.log("Hola".toUpperCase()); // HOLA
console.log("Hola".includes("ol")); // true

Symbol ​

El tipo Symbol representa un valor único e inmutable.

js
const userId = Symbol("id");

console.log(userId); // Symbol(id)
console.log(typeof userId); // symbol

Aunque dos símbolos se creen con la misma descripción ("id"), siempre representan valores diferentes.

js
const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2); // false

Aunque Symbol forma parte de los tipos primitivos de JavaScript, su uso es poco frecuente en aplicaciones web convencionales y no se utilizará durante este módulo salvo en referencias puntuales.

TIP

Se utiliza principalmente como identificador de propiedades de un objeto para evitar conflictos entre nombres.

js
const id = Symbol("id");

const user = {
  name: "Alice",
  [id]: 123,
};

La propiedad name utiliza una cadena (String) como clave, mientras que [id] utiliza un Symbol, garantizando que su identificador sea único.

Number ​

El tipo Number representa valores numéricos, tanto enteros como de coma flotante. También incluye los valores especiales NaN, Infinity y -Infinity.

js
console.log(typeof 0); // number
console.log(typeof 10); // number
console.log(typeof -10); // number
console.log(typeof 10.45); // number
console.log(typeof 8e100); // number
console.log(typeof NaN); // number
console.log(typeof Infinity); // number
console.log(typeof -Infinity); // number

TIP

Aunque NaN significa Not a Number, su tipo es number. Esto se debe a que representa el resultado de una operación numérica cuyo resultado no es un número válido.

js
console.log(typeof NaN); // number
console.log(0 / 0); // NaN
console.log(Number("Hola")); // NaN

BigInt ​

El tipo BigInt representa números enteros de tamaño arbitrario. Se utiliza cuando un valor entero supera el rango que puede representar con precisión el tipo Number.

Los valores BigInt se escriben añadiendo el sufijo n al final del número.

Ejemplo

js
console.log(typeof 123n); // bigint
console.log(typeof 9007199254740993n); // bigint

Los valores BigInt solo representan números enteros y no pueden mezclarse directamente con valores de tipo Number.

TIP

Las operaciones entre BigInt y Number producen un error.

js
const a = 10n;
const b = 5;

// console.log(a + b); // TypeError
console.log(a + BigInt(b)); // 15n

Object ​

El tipo Object representa colecciones de datos organizadas mediante pares clave–valor. A diferencia de los tipos primitivos, los objetos pueden almacenar múltiples valores y describir entidades más complejas.

Ejemplo

js
const book = {
  title: "The Art of Computer Programming",
  author: "Donald E. Knuth",
  year: 1968,
};

console.log(typeof book); // object

Los objetos constituyen uno de los pilares del lenguaje y se estudiarán con detalle en unidades posteriores.

Resumen ​

Solución propuesta
html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Types</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="main.js"></script>
  </body>
</html>
js
/* ========================================
 * INITIALIZATION
 * ======================================== */
const app = document.querySelector("#app");

/* ========================================
 * TEST CODE
 * ======================================== */
const result = `
<h1>Tipos de datos primitivos en Javascript</h1>
<h2>number</h2>
<p>El valor <b>0</b> es de tipo <b>${typeof 0}</b></>;
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></>;
<p>El valor <b>-10</b> es de tipo <b>${typeof -10}</b></>;
<p>El valor <b>10.45</b> es de tipo <b>${typeof 10.45}</b></>;
<p>El valor <b>8e100</b> es de tipo <b>${typeof 8e100}</b></>;
<p>El valor <b>NaN</b> es de tipo <b>${typeof NaN}</b></>;
<p>El valor <b>Infinity</b> es de tipo <b>${typeof Infinity}</b></>;
<p>El valor <b>-Infinity</b> es de tipo <b>${typeof -Infinity}</b></>;
<h2>string</h2>
<p>El valor <b>"a"</b> es de tipo <b>${typeof "a"}</b></>;
<p>El valor <b>'a'</b> es de tipo <b>${typeof "a"}</b></>;
<p>El valor <b>"palabra"</b> es de tipo <b>${typeof "palabra"}</b></>;
<p>El valor <b>'palabra'</b> es de tipo <b>${typeof "palabra"}</b></>;
<p>El valor <b>"Una frase completa entre comillas dobles."</b> es de tipo <b>${typeof "Una frase completa entre comillas dobles."}</b></>;
<p>El valor <b>'Otra frase completa entre comillas simples.'</b> es de tipo <b>${typeof "Otra frase completa entre comillas simples."}</b></>;
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></>;
<p>El valor <b>10</b> es de tipo <b>${typeof 10}</b></>;
`;

/* ========================================
 * BROWSER OUTPUT
 * ======================================== */
app.innerHTML = result;