Tipos de datos primitivos y complejos en JS

Contenido del curso

Introducción a JavaScript

Estructuras de Control y Lógica

Funciones y This

Manipulación de Arrays

Programación Orientada a Objetos

Asincronía en JavaScript

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:007:59

Tipos de datos primitivos y complejos en JS

Curso de Fundamentos de JavaScript

Clase 5 de 55

Clase 5 / 55

Recursos

JavaScript organiza la información en 10 tipos de datos que se dividen en dos grandes grupos: primitivos y complejos. Entender esta clasificación es la base para escribir código limpio, declarar variables correctamente y evitar errores comunes cuando trabajas con cadenas, números, listas, objetos o funciones.

Los primitivos guardan un solo valor, mientras que los complejos permiten almacenar estructuras con múltiples propiedades o elementos. Vamos a ver cómo se escriben uno por uno, con la sintaxis exacta que usarías en tu editor.

¿Cuáles son los tipos de datos primitivos en JavaScript?

Los primitivos son siete y cada uno cumple una función específica al momento de declarar variables [0:08].

¿Cómo se escriben strings, numbers y booleans?

Estos tres son los que más vas a usar en tu día a día como desarrollador. El string representa cadenas de caracteres y se escribe entre comillas simples o dobles. Por ejemplo, puedes guardar un nombre así: let nombre = 'Tere'. Y aquí algo útil: puedes ignorar el punto y coma porque JavaScript lo agrega por ti [0:55].

El tipo number almacena valores numéricos sin necesidad de comillas. Si quieres registrar la edad de Tere, escribes let edad = 25. Y el boolean solo acepta dos valores, true o false, lo que lo hace perfecto para responder preguntas binarias como si alguien es mayor de edad [1:30].

¿Para qué sirve un boolean en JavaScript? Sirve para representar dos estados posibles: verdadero o falso. Lo usas cuando necesitas validar condiciones, como si un usuario está activo o si cumple un requisito.

¿Qué diferencia hay entre null y undefined?

Ambos representan ausencia de valor, pero su origen es distinto. El null lo asignas tú como programador para indicar de forma intencional que algo está vacío. En cambio, undefined lo entrega JavaScript automáticamente cuando una variable existe pero no tiene un valor definido [2:45].

Esta diferencia es clave al depurar código: si ves un undefined, probablemente olvidaste asignar un valor; si ves null, alguien decidió que ese espacio quedara vacío a propósito [3:30].

¿Cuándo uso null y cuándo undefined? Usas null cuando quieres declarar explícitamente que no hay valor. Undefined lo asigna JavaScript solo cuando una variable no recibió ningún valor.

¿Qué hacen symbol y bigInt?

Estos dos son menos comunes, pero resuelven problemas muy específicos. El symbol genera un valor único e irrepetible, ideal para identificadores como un ID de usuario. Se escribe envolviendo el valor en la función symbol: let simboloUnico = symbol('unico') [4:20].

El bigInt permite almacenar números enteros enormes que superan los límites del tipo number tradicional. Lo identificas porque lleva una N al final del valor, como en let numeroGrande = 2N [5:30].

¿Cuáles son los tipos de datos complejos en JavaScript?

Los complejos agrupan información estructurada y son tres: objetos, arrays y funciones [6:00].

¿Cómo declaro un objeto con varias propiedades?

Un object sirve cuando necesitas asociar varias características a una misma entidad. Imagina que quieres describir un carro con marca, modelo y color: abres llaves y defines cada propiedad con su valor.

javascript let carro = { marca: 'Tesla', modelo: 'Model S' }

Cada propiedad se separa por comas y describe un atributo del objeto principal [6:40].

¿Cómo creo un array y para qué se usa?

Los arrays, conocidos en otros lenguajes como listas, almacenan grupos de elementos relacionados. Se escriben entre corchetes y los elementos se separan por comas.

javascript let frutas = ['manzana', 'banano', 'uvas']

La idea es que cada vez que tengas un conjunto de algo, los arrays sean tu primera opción [7:30].

¿Cómo escribo una función en JavaScript?

Las funciones también son tipos de datos complejos. Su sintaxis básica usa la palabra clave function, seguida de un nombre, paréntesis con parámetros y llaves con el cuerpo del código.

javascript function saludar(nombre) { // cuerpo de la función }

Los paréntesis reciben la información que la función necesita para trabajar, como el nombre de la persona a saludar. Existen otras formas de escribir funciones, pero esta estructura es la base que debes dominar primero [8:30].

Ahora que conoces los 10 tipos de datos, ¿cuál te ha generado más dudas al usarlo en tus proyectos? Cuéntame en los comentarios.

Andrés Soret Chacin

Hace 2 años

Variables en JavaScript

Las variables en JavaScript son contenedores que permiten almacenar información.
Es crucial saber qué tipo de información se puede almacenar en estas variables.
Conceptos importantes relacionados: inmutabilidad, mutabilidad y tipado dinámico.

Tipos de datos en JavaScript

En JavaScript existen 10 tipos de datos, divididos en dos grupos: primitivos y complejos.

Tipos de datos primitivos

String: Almacena cadenas de texto.
Number: Almacena números.
Boolean: Almacena valores true o false.
Null: Representa un valor nulo.
Undefined: Representa un valor no definido.
Symbol: Almacena valores únicos.
BigInt: Almacena números muy grandes.

Tipos de datos complejos

Object: Almacena colecciones de datos.
Array: Almacena listas ordenadas de datos, técnicamente un tipo de objeto.
Function: Almacena funciones, que son bloques de código reutilizables.

Características de los tipos de datos

Primitivos:
- Inmutables: No cambian el valor original.
- Se pasan por valor: Se copian al asignarse a otra variable.
Complejos:
- Mutables: Pueden cambiar el valor original.
- Se pasan por referencia: Referencian la misma ubicación en memoria.

Mutabilidad e inmutabilidad

Datos primitivos (Inmutables)

Ejemplo con números:

let numero = 23;
numero = numero + 10; // Nuevo valor: 33
console.log(numero); // Imprime 33

Ejemplo con booleanos:

let esVerdadero = true;
esVerdadero = false; // Nuevo valor: false
console.log(esVerdadero); // Imprime false

Datos complejos (Mutables)

Ejemplo con objetos:

let usuario = {
  nombre: "Pepito",
  edad: 15
};
usuario.edad = 20; // Modifica el valor original
console.log(usuario); // Imprime { nombre: "Pepito", edad: 20 }

Ejemplo con arrays:

let frutas = ["manzana", "pera"];
frutas[0] = "sandía"; // Modifica el valor original
console.log(frutas); // Imprime ["sandía", "pera"]

Funciones y mutabilidad

Ejemplo de función que modifica un objeto:

function cambiarNombre(objeto) {
  objeto.nombre = "Nuevo Nombre";
}

let persona = {
  nombre: "Antonio"
};

cambiarNombre(persona);
console.log(persona); // Imprime { nombre: "Nuevo Nombre" }

Buenas prácticas en nombramiento de variables

Evitar nombres ambiguos como C, D, A.
Usar nombres descriptivos y claros.
Utilizar abreviaciones conocidas y aceptadas como URL o ID.

Ejemplos no permitidos:

let C = "Woody"; - No descriptivo.
let CDA = "Caja de Andy"; - Puede ser ambiguo.

Ejemplos permitidos:

let primerTrasteoDeAndy = "Caja de Andy"; - Descriptivo y claro.
let urlUsuario = ""; - Abreviación conocida.
let idUsuario = 12345; - Abreviación conocida.

Conclusión

Utilizar let para variables que cambian con el tiempo.
Utilizar const para variables constantes.
Seguir buenas prácticas en el nombramiento de variables para mantener un código claro y comprensible.

Sergio Eyzhan Del Castillo

Hace 2 años

gracias

William Ruiz

Hace un año

gracias por tu aporte andres

Comentarios (61)61 comentarios

Gera Meraki

Si a alguno de ustedes no les queda claro el tipo de dato Symbol, a continuación les comparto esta información que quizá pueda ser de utilidad.

¿Qué es un Symbol?

Un Symbol es un tipo de dato especial en JavaScript que se usa para crear identificadores únicos. Piensa en él como una etiqueta única que puedes usar para identificar cosas sin preocuparte de que se dupliquen.

¿Para qué se usa?

Los Symbol son útiles cuando quieres asegurarte de que una propiedad de un objeto sea única y no se mezcle con otras propiedades que puedan tener el mismo nombre.

En Resumen

Imagina que tienes un objeto y quieres agregarle propiedades, pero quieres estar seguro de que esas propiedades sean únicas y no interfieran con otras.

Yamid Horacio Rodríguez

gracias ChatGPT ❤️✨🫶

gracias por tu aporte gerardo

Miguel Jonathan Madrigal González

¿Cúal es la diferencia entre un array y un objeto?

Array: Se utiliza cuando necesitas una lista de elementos donde el orden importa y puedes acceder a ellos por su posición (índice). También es util cuando necesitas iterar sobre una colección de datos.
Objeto: Se utiliza para representar datos estructurados en un formato clave-valor. Es ideal para describir entidades o cosas con varias propiedades, donde cada propiedad tiene un nombre (clave) y un valor asociado.

Diferencias clave: En un array el acceso a los datos se realiza por su posición (índice numérico), mientras que en un objeto, el acceso se realiza por una clave (nombre de propiedad). Usa array cuando el orden es importante y necesitas listas. Usa objeto cuando trabajes con datos estructurados y propiedades con significado especifico.

Manuel Felipe Acuña

Amigo gracias, respondiste mi pregunta de la mejor forma

Daniela Angulo Ruiz

Hace 10 meses

César Francisco Ramírez Chávez

Hace 9 meses

gracias jejeje

Dymon Zamora

¿Qué significa 2n en BigInt?

El tipo de dato bigint se utiliza para representar números enteros más grandes (o más pequeños) que los que el tipo number puede manejar de manera segura. Al añadir la n a un número, JavaScript lo trata como un bigint en lugar de un number. Esto permite realizar cálculos con números enteros extremadamente grandes o pequeños sin pérdida de precisión.

Angel Javier Sanchez Tenjo

En JavaScript, 2n representa un valor de tipo BigInt, que es un tipo de dato especial para trabajar con números enteros muy grandes.

Desglose:

2: Es un número entero.
n: Indica que el número es de tipo BigInt.

¿Qué es BigInt?

BigInt es un tipo de dato que permite representar enteros más grandes que el límite de precisión que tiene el tipo Number en JavaScript (que es hasta 2⁵³ - 1, aproximadamente 9.007 × 10¹⁵). Esto permite trabajar con números de cualquier tamaño sin perder precisión.

let bigNumber = 2n; // Esto es un BigInt

console.log(bigNumber); // 2n

En este caso, 2n es un BigInt, mientras que si simplemente escribieras 2, sería un Number.

¿Por qué usar n?

El sufijo n se utiliza para crear un BigInt en lugar de un Number. Esto es útil cuando necesitas trabajar con números extremadamente grandes, como en cálculos de criptografía, astronomía o algunas aplicaciones financieras.

Jeremy Orellana

Tipos de Datos Primitivos:

Tipos de Datos Complejos:

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

Básicamente cuando creas una variable o una constante sin algún valor, lo que sucede es que JavaScript indicará que su valor es undefined.

let miNombre;
console.log(miNombre);
//output: undefined

Null se utiliza a propósito o de manera intencionada para declarar variables cuyo valor indique la falta de valor.

let precioDelProducto = null;
console.log(null);
//output: null

Cometi un error en el ejemplo de null, en el console.log deberia llamar a la variable precioDelProducto.

Alfonso Neil Jiménez Casallas

comparto este artículo en la documentación de MDN sobre el objeto Symbol en JavaScript Symbol - JavaScript | MDN

Paola Lorena Fraticola

¿para que se utilizaria un bigint?

Christopher Andrés Guano Valencia

Un BigInt en JavaScript se utiliza para representar números enteros que son demasiado grandes para ser manejados por el tipo de dato Number, que tiene un límite de aproximadamente 2^53−1 (o 9007199254740991), tanto positivo como negativo. Fuera de estos límites puede que los resultados sean erróneos.

Entonces 2n es igual que 2 pero en notación bigInt.

¡Nunca pares de aprender! 🚀🚀

Patricia Vera

Cuál es la diferencia de usar comillas simples o dobles?

Alessandro Garcia

Por lo que entiendo en Js, es cuestión de gustos nada más ya que no afecta, no se si aplica para otros lenguajes. 👍

Sebastián Echeverri Flórez

Es correcto, como menciona Alessandro no hay una diferencia particular en js, sólo a tener en cuenta que sirve en casos en los que debas "escapar" es decir mostrar en el texto o usar en el string una de las comillas, puedes usar la otra como delimitador del string y así el lenguaje no se confunde. Por ejemplo

let texto = ' este texto tiene comillas dobles por dentro """ ';

let texto2 = " este texto tiene comillas simples por dentro ''' ";

Hay otros lenguajes donde sí hay diferencia como en php en donde las comillas dobles permiten interpretar variables dentro de una string mientras que las comillas simples no, así un string con comillas simples en php que incluya una variable la mostrará de manera literal, mientras que con las comillas dobles reemplazará la variable dentro del string por su correspondiente valor guardado

Jonathan Emmanuel Pumares Chab

En JavaScript tenemos 10 tipos de datos, y se agrupan en 2, los primitivos y los complejos:

Primitivos

string
number
boolean
null
undefined

symbol
bigint

Complejos

object
array
function

Por lo general el valor "null" lo asignamos nosotros y el valor "undefined" lo asigna JavaScript.

Josue David Lossada Salas

Hola, aqui les dejo los código para que lo copien y peguen en VSC, un pequeño aporte.

// PRIMITIVOS // stringlet nombre = 'Tere' // numberlet edad = 25 // booleanlet esmayordeedad = true //nulllet nohayvalor = null // undefinedlet nodefinido = undefined // symbollet simbolounico = Simbol('unico') // bigintlet numerogrande = 2n // COMPLEJOS // objectlet carro = { marca: 'Tesla' modelo: 'Model S'} // arraylet frutas = ['manzanas', 'banana', 'uvas'] // funtionfunction saludar (informacion para la funcion) {el cuerpo de la funcion}

Daniel Vergel

Hace 4 meses

Manuel Alfonso Illidge Ramírez

porque no mencionas VAR?

Manuel Alfonso, en JavaScript moderno usamos let y const para evitar errores de alcance. var es una forma antigua de declarar variables. Puedes profundizar en esto en la clase "Variables y Buenas Prácticas en JavaScript".

Paola Arbelaez

pense que este curso era para principiantes, no entiendo nadaa

Michael Alejandro Pimiento Uribe

Claro que es para principiantes, estamos conociendo los tipos de datos ¿En que estás perdida?

Emilio Flor

Hola Paola, es para principiantes y te aseguro que están yendo paso a paso, de todas formas si sos muy nueva en esto es normal que tengas esa sensación de "estar perdida" ¿alguna vez te relacionaste con este mundo de la programación?

porque si no has tenido contacto previo y no sabes por ejemplo informática básica sería bueno que empieces por ahí, luego html, css y después venís a javascript con un poco más de base.

Por que no menciona VAR? junto con LET y CONST son las 3 formas de nombrar variables.

SERGIO CHACON JOVEN

Este código no tiene respuesta cuando voy a la terminal, ¿estoy cometiendo algún error: //Primitivos

//String (cadenas de caracteres)

let nombre = 'Tereza'

console.log ("Tipos-de-datos.js")

//Number (ó numéricos)

let edad = '38'

//Boolean

let esMayorDeEdad = 'true / false'

//null

let noHayValor = 'null'

// Undefine

let noDefinido = 'undefine'

//Symbol

let simboloUnico = Symbol ('unico')

//Bigint

let numeroGrande = '2n'

//Datos Complejos

//Objet

let carro = {

marca : 'Tesla',

modelO : 'Clase E'

}

//Array (Listas)

let frutas = ['banana', 'manzanas', 'peras']

//FUNCIONES

//function

function saludar (aquiVaAquienVoyAsaludar) {aqui-va-el-cuero-de-toda-la-funcion}

console.log ("Tipos-de-datos")

Juan Antonio Gonzalez Erazo

Hace 8 meses•editado

Talvez es muy tarde pero igual dare mi rspuesta, segun lo que pienso tu terminal no te responde por estas razones 1.En la parte de las Funciones, tienes esto: {aqui-va-el-cuero-de-toda-la-funcion} jvs toma el simbolo - como una resta y como esas palabras no existen como variables el codigo lanza error y se detiene antes de llegar al console log final

2. Los Booleanos y Nulls no llevan comillas, si pones algo en comillas jvs lo interpreta como string.

otros pequeños errores que tienes son de ortografia por asi decirlo, uno es que pusiste undefine cuando es undefined tembien va sin comillas y no es necesario que tu lo escribas ya que jvs lo pone por ti el unico que esnecesario que los escribas tu mismo es null ya que es un vacio intensional que tu dejas, otro seria las comillas que le pusiste a: let numeroGrande = '2n'

y por ultimo al llamar a la function saludar (aquiVaAquienVoyAsaludar) {aqui-va-el-cuero-de-toda-la-funcion}, se hace de esta manera: function saludar(persona) { console.log("Hola " + persona); }

ya si quires comprobar si funciona las llamas asi:

// --- VERIFICACIÓN EN TERMINAL --- console.log(" El archivo Tipos-de-datos.js se cargó correctamente"); console.log("Nombre del usuario:", nombre); console.log("¿Es mayor de edad?:", esMayorDeEdad);

Andres Calderon

Utilizamos null cuando queremos indicar explícitamente que una variable o propiedad no tiene valor, pero es una ausencia intencional definida por el programador. En cambio, undefined lo asigna JavaScript por defecto cuando una variable se declara sin inicializar o una propiedad no existe en un objeto, señalando una ausencia de valor no especificada.

David Limon

Comparto este articulo de la documentación de MDN sobre BigInt

Jesús Patricio Pereira Matus

Resumen existen 10 tipos de datos que se dividen en 2 partes los primitivos y los complejos las diferencias son muy claras los primitivos son datos que se declaran solos en una variable y los complejos son los que aceptan mas de 1 tipo de dato en los primitivos tenemos strings que se distinguen por escribirse entre comillas simples o dobles como por ejemplo "nombre" o 'perro' los numeros que basicamente son numeros cabe recalcar que los enteros y los punto flotante son del mismo tipo de dato en JS por lo cual 12 y 3.14 es number boolean solo tiene dos valores true o false y se utilizan para hacer preguntas o comparaciones Null es la ausencia de valor sirve para señalar que una variable esta vacia undefined es para decir que una variable no esta definida aunque esto lo hace de por si JS y no es necesario que lo coloquemos nosotros Symbol es una forma de asegurarnos que no se va a repetir algo como un identificador unico de usuario su declaracion se hace de la siguiente forma let id = Symbol(id del usuario) Bigint es para representar numeros enormes con Exponentes o elevaciones muy grandes ahora tenemos que ver los complejos Object son como diccionarios a que me refiero pues que es clave: valor porque un dato se llama por clave y recibimos valor como un diccionario buscamos palabra recibimos significado se identifica por las llaves { } Array o listas son listas de datos como numeros frutas usuarios nombres apellidos lo que uno quiera se representa con corchetes [ ] y por ultimo las funciones que son bloques de codigo que ejecutan acciones especifica algo a aclarar es que nosotros le pasamos los parametros al momento de crear la funcion es decir function suma (parametros) { } y al invocarla le pasamos argumentos para ejecutar dicha funcion

Introducción a JavaScript

Fundamentos de JavaScript para Principiantes

Instalación y Configuración de JavaScript en Visual Studio Code

Instalación y configuración de Visual Studio Code y Node.js en Windows

Variables y Buenas Prácticas en JavaScript

Tipos de datos primitivos y complejos en JS

Manipulación de Strings en JavaScript: Escritura, Concatenación y Substrings

Números y Operaciones Matemáticas en JavaScript

Conversión de Tipos en JavaScript: Implícita y Explícita

Conversión de Tipos en JavaScript: Explícita e Implícita

Estructuras de Control y Lógica

Operadores de Comparación en JavaScript: Igualdad y Desigualdad

Operadores Lógicos en Programación: AND, OR y NOT

Estructuras Condicionales: Uso de IF, ELSE y ELSE IF en JavaScript

Juego de Adivinanza: Programación con Estructuras Condicionales

Cómo funciona switch en JavaScript

Ciclo For: Iteración de Listas y Uso de Console.log en JavaScript

Cómo usar for of con arrays en JavaScript

Iteración sobre Objetos con forIn en JavaScript

Uso del ciclo while para iteración en programación

Ciclos doWhile: Estructura y Diferencias con While

Funciones y This

Funciones en JavaScript: Cómo Calcular Precios con Descuentos

Diferencias entre Funciones y Métodos en JavaScript

Funciones Puras e Impuras en Programación: Conceptos y Ejemplos

Arrow functions y lexical binding en JS

Scope chain y contextos en JavaScript

Closures y Ámbito Léxico en JavaScript

Fundamentos del Desarrollo Web: Frontend y Backend

Manipulación de Arrays

Arrays: Propiedades, Acceso y Creación en Programación

Mutabilidad e inmutabilidad en arrays JS

Mutabilidad en arrays con push y pop

Métodos map y forEach en JavaScript: Uso y Ejemplos Prácticos

Métodos Filter y Reduce en JavaScript: Uso y Ejemplos Prácticos

Métodos find y findIndex en JavaScript: Uso y ejemplos prácticos

Uso del método slice para extraer porciones de un array en JavaScript

Uso del Spread Operator en JavaScript: Copia, Combinación y Más

Programación Orientada a Objetos

Objetos en JavaScript: propiedades y métodos

Creación y Manipulación de Objetos en JavaScript

Función constructora y gestión de instancias en JavaScript

Clases en JavaScript con sintaxis moderna

Herencia y prototipos en JavaScript

Prototipos y Herencia en JavaScript: Construcción y Uso Práctico

Métodos y herencia prototípica en JavaScript

Uso de "this" en Clases y Funciones Constructoras

Validación de Usuarios en una Red Social: Algoritmo Básico

Cómo el return false dentro del for rompe tu login

Asincronía en JavaScript

Programación Síncrona y Asíncrona en JavaScript

Promesas en JavaScript: estados y métodos

Uso de Async/Await para Promesas Asíncronas en JavaScript

Peticiones asíncronas con for await en JavaScript

Fundamentos de HTTP: Cliente-Servidor y Métodos de Petición

Peticiones HTTP en Frontend: Uso de Fetch y Análisis en Network

Función reutilizable para peticiones fetch

Enviar un POST con Fetch API y formularios

Cómo borrar posts con fetch y delegation pattern

Manejo de IDs en JavaScript para eliminar artículos del DOM

Actualizaciones y Nuevas Funciones en JavaScript

Tipos de datos primitivos y complejos en JS