Tipos de datos en JavaScript: primitivos vs complejos

Clase 5 de 39 • Curso de Fundamentos de JavaScript

Contenido del curso

Fundamentos Javascript

Funciones, Scope y Estructuras de Datos

DOM y Experiencia en el Navegador

Modulos y Asincronía

Resumen

Domina los tipos de datos en JavaScript con ejemplos claros y buenas prácticas. Aquí verás cómo declarar variables con const y let, por qué diferenciar un número de un texto evita errores, y cómo usar typeof y console.log para identificar cada valor, incluido el caso especial de null.

¿Qué son los tipos de datos en JavaScript y cómo se clasifican?

En JavaScript existen siete tipos de datos primitivos: string, number, boolean, null, undefined, symbol y bigint. Son valores simples que puedes usar directamente. Además, hay tipos complejos: objetos, funciones y arrays, que permiten agrupar y estructurar datos.

Un texto entre comillas es un string. Ejemplo: "hola".
Un 42 sin comillas es un number. "42" es un string, no un number.
Un boolean solo puede ser true o false.
null expresa ausencia intencional de valor.
undefined indica que algo no fue definido.
symbol ayuda a crear identificadores únicos como un ID.
bigint representa números enteros muy grandes terminados en n.

¿Cómo declarar variables y comentarios en JavaScript de forma segura?

La mejor práctica: usar const para declarar valores que no cambiarán. Si un valor debe cambiar, usa let. Para documentar, agrega comentarios con //: JavaScript los ignora y ayudan a otras personas a entender el código.

// Tipos de datos primitivos
const texto = "hola";                 // string
const numero = 42;                      // number
const booleano = true;                  // boolean (también puede ser false)
const nulo = null;                      // null
const indefinido = undefined;           // undefined
const simbolo = Symbol('id');           // symbol
const grande = 123n;                    // bigint

Evita confundir "42" con 42: el primero es string, el segundo es number.
El editor suele ofrecer ayudas visuales para distinguir variables, funciones y tipos.
JavaScript es sensible a mayúsculas y minúsculas: cuidado con los nombres.
No uses palabras reservadas como nombres de variables: pueden causar errores.

¿Cómo identificar tipos con typeof y trabajar con datos complejos?

Puedes imprimir valores e identificar su tipo con console.log y la palabra reservada typeof. Además, verás cómo modelar datos complejos con objetos, arrays y funciones.

¿Cómo verificar tipos con typeof y console.log?

console.log(typeof texto, texto);         // 'string' "hola"
console.log(typeof numero, numero);       // 'number' 42
console.log(typeof booleano, booleano);   // 'boolean' true
console.log(typeof nulo, nulo);           // 'object' null  ← caso especial
console.log(typeof indefinido, indefinido); // 'undefined' undefined
console.log(typeof simbolo, simbolo);     // 'symbol' Symbol('id')
console.log(typeof grande, grande);       // 'bigint' 123n

Atención: typeof null devuelve 'object' por un error histórico. Conceptualmente, null expresa ausencia de valor, no es un objeto.
Usa typeof para confirmar el tipo antes de operar con un valor.

¿Qué incluyen los tipos de datos complejos: objetos, arrays y funciones?

// Tipos de datos complejos
const objeto = { nombre: "Juan", edad: 42 }; // propiedades internas con distintos tipos
const arreglo = [1, 2, "tres"];              // puede mezclar numbers y strings
const unaFuncion = function () {               // función como valor
  // acciones según sea el caso
};

Un objeto agrupa pares clave-valor.
Un array contiene listas de valores, incluso mezclados.
Una función es un valor que puedes asignar y ejecutar.
Evita nombrar variables con palabras reservadas: por ejemplo, no uses "function" como nombre.

¿Qué habilidades y keywords prácticas refuerzas?

Declarar con const y cambiar con let cuando sea necesario.
Comentar con // para documentar el código.
Distinguir string vs number al leer y escribir valores.
Identificar tipos con typeof y validar antes de usar.
Crear symbol para IDs únicos y usar bigint para números grandes.
Modelar datos con objetos, arrays y funciones.
Cuidar mayúsculas y minúsculas en nombres y evitar palabras reservadas.

¿Probaste tus propias variables y el resultado de typeof? Cuéntame en los comentarios tu solución y qué casos te sorprendieron.

Steven Andres Moreno Melendez

student•

// ============================================
// Reto: Tipos de datos en JavaScript
// ============================================
// Completa cada función según las instrucciones.
// Ejecuta los tests con: npx vitest src/02-tipos-de-datos
// ============================================

// --- Reto 1: Identificar tipos primitivos ---
// Declara las siguientes constantes con los valores indicados:
//   texto = "hola"
//   numero = 42
//   booleano = true
//   nulo = null
//   indefinido = undefined
//   simbolo = Symbol("id")
//   grande = 123n
// Retorna un objeto con el typeof de cada una:
//   { texto, numero, booleano, nulo, indefinido, simbolo, grande }
// donde cada valor es el resultado de typeof sobre la variable.
function identificarPrimitivos() {
    const texto = "hola";
    const numero = 42;
    const booleano = true;
    const nulo = null;
    const indefinido = undefined;
    const simbolo = Symbol("id");
    const grande = 123n;
    return { texto: typeof texto, numero: typeof numero, booleano: typeof booleano, nulo: typeof nulo, indefinido: typeof undefined, simbolo: typeof simbolo, grande: typeof grande };
}
// --- Reto 2: Diferenciar string y number ---
// Recibe un parámetro "valor".
// Retorna un objeto con:
//   { tipo: typeof valor, esString: true/false, esNumber: true/false }
function diferenciarStringNumber(valor) {
    return { tipo: typeof valor, esString: typeof valor === "string", esNumber: typeof valor === "number" };
    // Tu código aquí
}

// --- Reto 3: El caso especial de null ---
// Declara una constante "nulo" con valor null.
// Retorna un objeto con:
//   { valor: nulo, tipo: typeof nulo, esNull: true/false }
// Pista: typeof null devuelve "object", pero debes verificar
// si realmente es null usando una comparación estricta (===).
function explorarNull() {
    const nulo = null;
    return { valor: nulo, tipo: typeof nulo, esNull: nulo === null };
    // Tu código aquí
}


// --- Reto 4: Undefined vs Null ---
// Declara una variable con let llamada "sinAsignar" (sin asignarle valor).
// Declara una constante "vacio" con valor null.
// Retorna un objeto con:
//   { sinAsignar, vacio, tipoSinAsignar: typeof sinAsignar, tipoVacio: typeof vacio, sonIguales: sinAsignar == vacio, sonEstrictamenteIguales: sinAsignar === vacio }
function compararNullUndefined() {
    let sinAsignar = undefined;
    const vacio = null;
    return { sinAsignar, vacio, tipoSinAsignar: typeof sinAsignar, tipoVacio: typeof vacio, sonIguales: sinAsignar == vacio, sonEstrictamenteIguales: sinAsignar === vacio };
    // Tu código aquí
}

// --- Reto 5: Symbol y BigInt ---
// Crea un Symbol con la descripción "miID".
// Crea un BigInt con el valor 9007199254740991n.
// Retorna un objeto con:
//   { tipoSymbol: typeof del symbol, tipoBigInt: typeof del bigint, descripcionSymbol: symbol.description, valorBigInt: el bigint creado }
function crearSymbolYBigInt() {
    const misimbolo = Symbol("miID");
    const miNumeroGrande = 9007199254740991n;
    return { tipoSymbol: typeof misimbolo, tipoBigInt: typeof miNumeroGrande, descripcionSymbol: misimbolo.description, valorBigInt: miNumeroGrande }
    // Tu código aquí
}

// --- Reto 6: Crear un objeto ---
// Crea un objeto "persona" con las propiedades:
//   nombre (string): "Juan"
//   edad (number): 42
//   activo (boolean): true
// Retorna un objeto con:
//   { persona, tipoPersona: typeof persona, propiedades: Object.keys(persona) }
function crearObjeto() {
    const persona = { nombre: "Juan", edad: 42, activo: true };
    return {persona, tipoPersona: typeof persona, propiedades: Object.keys(persona)};
    // Tu código aquí
}

// --- Reto 7: Trabajar con arrays ---
// Crea un arreglo "mezcla" con los valores: 1, "dos", true, null
// Retorna un objeto con:
//   { arreglo: mezcla, esArreglo: Array.isArray(mezcla), largo: mezcla.length, tipos: [typeof de cada elemento] }
function trabajarConArreglos() {
    const mezcla = [1,"dos", true, null];
    return{arreglo:mezcla, esArreglo: Array.isArray(mezcla), largo: mezcla.length, tipos: [typeof mezcla[0], typeof mezcla[1], typeof mezcla[2], typeof mezcla[3]]};

    // Tu código aquí
}

// --- Reto 8: Funciones como valor ---
// Crea una constante "saludar" que sea una función que reciba un nombre
// y retorne "Hola, {nombre}!".
// Retorna un objeto con:
//   { tipoFuncion: typeof saludar, resultado: saludar("JavaScript") }
function funcionComoValor() {
   const saludar = function(nombre) {
    return "Hola, " + nombre + "!"
   }; // Tu código aquí
   return {tipoFuncion: typeof saludar, resultado: saludar("JavaScript")}
}

// --- Reto 9: Clasificar tipo de dato ---
// Recibe un parámetro "valor".
// Determina si es primitivo o complejo y retorna un objeto con:
//   { valor, tipo: typeof valor, clasificacion: "primitivo" | "complejo" }
// Reglas:
//   - Si es null, clasificación es "primitivo" (a pesar de typeof).
//   - Si typeof es "object" o "function", clasificación es "complejo".
//   - En cualquier otro caso, clasificación es "primitivo".
// Pista: primero verifica si es null, luego revisa typeof.
function clasificarTipo(valor) {
    let clasificacion ="";
    if (valor === null) {
        clasificacion = "primitivo";
    }
    else if (typeof valor === "object"|| typeof valor === "function"){
        clasificacion= "complejo";
    }
    else {
        clasificacion = "primitivo";
    }
    return {valor: valor, tipo: typeof valor, clasificacion: clasificacion};
    }
    // Tu código aquí

module.exports = {
    identificarPrimitivos,
    diferenciarStringNumber,
    explorarNull,
    compararNullUndefined,
    crearSymbolYBigInt,
    crearObjeto,
    trabajarConArreglos,
    funcionComoValor,
    clasificarTipo,
};

// ============================================

// Reto: Tipos de datos en JavaScript

// ============================================

// Completa cada función según las instrucciones.

// Ejecuta los tests con: npx vitest src/02-tipos-de-datos

// ============================================

// --- Reto 1: Identificar tipos primitivos ---

// Declara las siguientes constantes con los valores indicados:

// texto = "hola"

// numero = 42

// booleano = true

// nulo = null

// indefinido = undefined

// simbolo = Symbol("id")

// grande = 123n

// Retorna un objeto con el typeof de cada una:

// { texto, numero, booleano, nulo, indefinido, simbolo, grande }

// donde cada valor es el resultado de typeof sobre la variable.

function identificarPrimitivos() {

const texto = "hola";

const numero = 42;

const booleano = true;

const nulo = null;

const indefinido = undefined;

const simbolo = Symbol("id");

const grande = 123n;

return { texto: typeof texto, numero: typeof numero, booleano: typeof booleano, nulo: typeof nulo, indefinido: typeof undefined, simbolo: typeof simbolo, grande: typeof grande };

}

// --- Reto 2: Diferenciar string y number ---

// Recibe un parámetro "valor".

// Retorna un objeto con:

// { tipo: typeof valor, esString: true/false, esNumber: true/false }

function diferenciarStringNumber(valor) {

return { tipo: typeof valor, esString: typeof valor === "string", esNumber: typeof valor === "number" };

// Tu código aquí

}

// --- Reto 3: El caso especial de null ---

// Declara una constante "nulo" con valor null.

// Retorna un objeto con:

// { valor: nulo, tipo: typeof nulo, esNull: true/false }

// Pista: typeof null devuelve "object", pero debes verificar

// si realmente es null usando una comparación estricta (===).

function explorarNull() {

const nulo = null;

return { valor: nulo, tipo: typeof nulo, esNull: nulo === null };

// Tu código aquí

}

// --- Reto 4: Undefined vs Null ---

// Declara una variable con let llamada "sinAsignar" (sin asignarle valor).

// Declara una constante "vacio" con valor null.

// Retorna un objeto con:

// { sinAsignar, vacio, tipoSinAsignar: typeof sinAsignar, tipoVacio: typeof vacio, sonIguales: sinAsignar == vacio, sonEstrictamenteIguales: sinAsignar === vacio }

function compararNullUndefined() {

let sinAsignar = undefined;

const vacio = null;

return { sinAsignar, vacio, tipoSinAsignar: typeof sinAsignar, tipoVacio: typeof vacio, sonIguales: sinAsignar == vacio, sonEstrictamenteIguales: sinAsignar === vacio };

// Tu código aquí

}

// --- Reto 5: Symbol y BigInt ---

// Crea un Symbol con la descripción "miID".

// Crea un BigInt con el valor 9007199254740991n.

// Retorna un objeto con:

// { tipoSymbol: typeof del symbol, tipoBigInt: typeof del bigint, descripcionSymbol: symbol.description, valorBigInt: el bigint creado }

function crearSymbolYBigInt() {

const misimbolo = Symbol("miID");

const miNumeroGrande = 9007199254740991n;

return { tipoSymbol: typeof misimbolo, tipoBigInt: typeof miNumeroGrande, descripcionSymbol: misimbolo.description, valorBigInt: miNumeroGrande }

// Tu código aquí

}

// --- Reto 6: Crear un objeto ---

// Crea un objeto "persona" con las propiedades:

// nombre (string): "Juan"

// edad (number): 42

// activo (boolean): true

// Retorna un objeto con:

// { persona, tipoPersona: typeof persona, propiedades: Object.keys(persona) }

function crearObjeto() {

const persona = { nombre: "Juan", edad: 42, activo: true };

return {persona, tipoPersona: typeof persona, propiedades: Object.keys(persona)};

// Tu código aquí

}

// --- Reto 7: Trabajar con arrays ---

// Crea un arreglo "mezcla" con los valores: 1, "dos", true, null

// Retorna un objeto con:

// { arreglo: mezcla, esArreglo: Array.isArray(mezcla), largo: mezcla.length, tipos: [typeof de cada elemento] }

function trabajarConArreglos() {

const mezcla = [1,"dos", true, null];

return{arreglo:mezcla, esArreglo: Array.isArray(mezcla), largo: mezcla.length, tipos: [typeof mezcla[0], typeof mezcla[1], typeof mezcla[2], typeof mezcla[3]]};

// Tu código aquí

}

// --- Reto 8: Funciones como valor ---

// Crea una constante "saludar" que sea una función que reciba un nombre

// y retorne "Hola, {nombre}!".

// Retorna un objeto con:

// { tipoFuncion: typeof saludar, resultado: saludar("JavaScript") }

function funcionComoValor() {

const saludar = function(nombre) {

return "Hola, " + nombre + "!"

}; // Tu código aquí

return {tipoFuncion: typeof saludar, resultado: saludar("JavaScript")}

}

// --- Reto 9: Clasificar tipo de dato ---

// Recibe un parámetro "valor".

// Determina si es primitivo o complejo y retorna un objeto con:

// { valor, tipo: typeof valor, clasificacion: "primitivo" | "complejo" }

// Reglas:

// - Si es null, clasificación es "primitivo" (a pesar de typeof).

// - Si typeof es "object" o "function", clasificación es "complejo".

// - En cualquier otro caso, clasificación es "primitivo".

// Pista: primero verifica si es null, luego revisa typeof.

function clasificarTipo(valor) {

let clasificacion ="";

if (valor === null) {

clasificacion = "primitivo";

}

else if (typeof valor === "object"|| typeof valor === "function"){

clasificacion= "complejo";

}

else {

clasificacion = "primitivo";

}

return {valor: valor, tipo: typeof valor, clasificacion: clasificacion};

}

// Tu código aquí

module.exports = {

identificarPrimitivos,

diferenciarStringNumber,

explorarNull,

compararNullUndefined,

crearSymbolYBigInt,

crearObjeto,

trabajarConArreglos,

funcionComoValor,

clasificarTipo,

};

Tipos de datos en JavaScript: primitivos vs complejos

Fundamentos Javascript

Primeras líneas de JavaScript en la consola del navegador

Construye un editor de notas Markdown con JavaScript

Configuración del entorno para JavaScript

Var, let y const: qué cambia en JavaScript