Tipos de Datos en JavaScript: Primitivos y Complejos

Clase 5 de 55 • Curso de Fundamentos de JavaScript

Resumen

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

JavaScript es un lenguaje poderoso y versátil con 10 tipos de datos diferentes agrupados en dos categorías principales: primitivos y complejos. Esta amplia gama de tipos permite a los desarrolladores trabajar con una variedad de datos, desde simples cadenas de texto hasta objetos y funciones más complejas. Comprender estos tipos de datos es esencial para cualquier programador que desee dominar JavaScript y aprovechar al máximo sus capacidades.

Tipos de datos primitivos

Los tipos de datos primitivos son los bloques de construcción esenciales de JavaScript. Estos son inmutables y no tienen métodos. Aquí te presentamos un desglose de cuáles son y cómo utilizarlos:

String: Cadenas de texto encerradas en comillas simples o dobles. Ejemplo:
```
let nombre = 'tere';
```
Number: Datos numéricos que permiten representar valores enteros o decimales. Ejemplo:
```
let edad = 25;
```
Boolean: Son valores lógicos que solamente pueden ser true o false. Ideal para verificar condiciones. Ejemplo:
```
let esMayorDeEdad = true;
```
Null: Representa intencionalmente la ausencia de un valor. Es útil para señalar que una variable está vacía. Ejemplo:
```
let sinValor = null;
```
Undefined: Indica que una variable ha sido declarada pero no tiene un valor asignado. Generalmente asignado por JavaScript.
```
let sinDefinir;
```
Symbol: Ofrece valores únicos, ideales para identificar propiedades de objetos de manera única. Ejemplo:
```
let idUsuario = Symbol('único');
```
BigInt: Permite representar números enteros grandes más allá de Number.MAX_SAFE_INTEGER. Ejemplo:
```
let numeroGrande = 9007199254740991n;
```

Tipos de datos complejos

Los tipos de datos complejos en JavaScript son más dinámicos y se utilizan para almacenar colección de valores y entidades más complejas. Esto incluye tanto objetos como arrays y funciones.

Objetos (Object): Permiten almacenar datos como pares clave-valor. Ideal para representar entidades. Ejemplo:
```
let carro = {
  marca: 'Tesla',
  modelo: 'Model S'
};
```
Arrays: Útiles para almacenar listas de valores. Pueden contener cualquier tipo de dato y son extensibles. Ejemplo:
```
let frutas = ['manzana', 'banano', 'uvas'];
```
Funciones (Function): Bloques de código reutilizables que ejecutan una tarea específica. Ejemplo de declaración:
```
function saludar(nombre) {
  console.log('Hola ' + nombre);
}
```

Cada tipo de dato ofrece características únicas que los hacen adecuados para diferentes tareas en la programación con JavaScript. Es importante practicar su uso a través de proyectos y la resolución de problemas para entender sus funcionalidades más avanzadas. Al dominar estos tipos, los desarrolladores pueden crear aplicaciones web más eficientes y sofisticadas.

Mantente curioso y siempre busca maneras de aplicar estos conceptos en tu código diario. ¡La programación es un viaje continuo de aprendizaje y evolución!

Gera Meraki

student•

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

student•

gracias ChatGPT ❤️✨🫶

William Ruiz

student•

gracias por tu aporte gerardo

Andrés Soret Chacin

student•

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 = "<https://example.com>"; - 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

student•

gracias

William Ruiz

student•

gracias por tu aporte andres

Miguel Jonathan Madrigal González

student•

¿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

student•

Amigo gracias, respondiste mi pregunta de la mejor forma

Dymon Zamora

student•

¿Qué significa 2n en BigInt?

Miguel Jonathan Madrigal González

student•

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

student•

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

student•

Tipos de Datos Primitivos:

Tipos de Datos Complejos:

Miguel Jonathan Madrigal González

student•

¿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

Miguel Jonathan Madrigal González

student•

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

Alfonso Neil Jiménez

student•

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

Paola Lorena Fraticola

student•

¿para que se utilizaria un bigint?

Dymon Zamora

student•

Christopher Andrés Guano Valencia

student•

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

student•

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

Alessandro Garcia

student•

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

student•

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

student•

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

student•

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}

Paola Arbelaez

student•

pense que este curso era para principiantes, no entiendo nadaa

Michael Alejandro Pimiento Uribe

student•

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

Emilio Flor

student•

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.

David Limon

student•

Comparto este articulo de la documentación de MDN sobre BigInt https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt

Jesús Patricio Pereira Matus

student•

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

Jonathan Garcia

student•

Jonatan Martin

student•

estaba anotando en un script con los ejemplos de la clase, desde que Microsoft implementó a Copilot de manera gratuita para todos, solo es darle TAB TAB TAB, literalmente me hizo mi script solo, facinante.

Ricardo Gomez

student•

// TIPOS DE VARIABLES EN JAVASCRIPT

// 1. VARIABLES PRIMITIVAS
// Estas variables almacenan valores simples, inmutables y no referenciales.

// a. Números
let edad = 25; // Puede cambiar el valor.
const pi = 3.1416; // Constante, se utiliza con valores que no cambian.
console.log(`Edad: ${edad}, PI: ${pi}`);

// b. Cadenas de texto (Strings)
let nombre = "Juan"; // Usando comillas dobles.
const saludo = 'Hola'; // Usando comillas simples.
let frase = `Hola, ${nombre}`; // Usando backticks para interpolación.
console.log(frase);

// c. Booleanos
let esMayor = true; // Almacena verdadero o falso.
let tieneLicencia = false;
console.log(`Es mayor: ${esMayor}, Tiene licencia: ${tieneLicencia}`);

// d. Undefined
let variableSinValor; // No se le asignó ningún valor, por defecto es undefined.
console.log(`Variable sin valor: ${variableSinValor}`);

// e. Null
let sinDato = null; // Representa la ausencia intencional de valor.
console.log(`Sin dato: ${sinDato}`);

// f. Símbolos (Symbols)
const idUnico = Symbol("id"); // Siempre es único, aunque el texto sea el mismo.
const otroId = Symbol("id");
console.log(`¿Son iguales? ${idUnico === otroId}`); // Devuelve false

// 2. VARIABLES COMPLEJAS (OBJETOS)
// Pueden almacenar colecciones de datos o funcionalidades.

// a. Objetos
let persona = {
  nombre: "Ana",
  edad: 30,
  profesion: "Ingeniera"
};
console.log(`Nombre: ${persona.nombre}, Edad: ${persona.edad}`);

// b. Arrays
let colores = ["rojo", "verde", "azul"];
console.log(`Primer color: ${colores[0]}`);

// c. Funciones
function sumar(a, b) {
  return a + b;
}
console.log(`Suma: ${sumar(2, 3)}`);

// 3. VARIABLES ESPECIALES

// a. BigInt: Para números enteros extremadamente grandes.
let numeroGrande = 123456789012345678901234567890n; // Añadir "n" al final del número.
console.log(`Número grande: ${numeroGrande}`);

// b. Fechas
let hoy = new Date(); // Clase para trabajar con fechas y horas.
console.log(`Hoy es: ${hoy.toDateString()}`);

// EJEMPLO DE VARIABLES CON DIFERENTES ALCANCES

// var: Tiene alcance global o de función. (Poco recomendado en ES6+)
var globalVar = "Soy global";
if (true) {
  var varPrueba = "Soy accesible fuera del bloque";
}
console.log(varPrueba); // Accesible

// let: Tiene alcance de bloque.
if (true) {
  let bloqueLet = "Solo existo aquí";
  console.log(bloqueLet); // Accesible aquí
}
// console.log(bloqueLet); // Error: no está definida.

// const: Igual que let, pero no se puede reasignar.
const constante = "No puedo cambiar";
// constante = "Intento cambiar"; // Error: Assignment to constant variable.
console.log(constante);

```// TIPOS DE VARIABLES EN JAVASCRIPT
// 1. VARIABLES PRIMITIVAS// Estas variables almacenan valores simples, inmutables y no referenciales.
// a. Númeroslet edad = 25; // Puede cambiar el valor.const pi = 3.1416; // Constante, se utiliza con valores que no cambian.console.log(`Edad: ${edad}, PI: ${pi}`);
// b. Cadenas de texto (Strings)let nombre = "Juan"; // Usando comillas dobles.const saludo = 'Hola'; // Usando comillas simples.let frase = `Hola, ${nombre}`; // Usando backticks para interpolación.console.log(frase);
// c. Booleanoslet esMayor = true; // Almacena verdadero o falso.let tieneLicencia = false;console.log(`Es mayor: ${esMayor}, Tiene licencia: ${tieneLicencia}`);
// d. Undefinedlet variableSinValor; // No se le asignó ningún valor, por defecto es undefined.console.log(`Variable sin valor: ${variableSinValor}`);
// e. Nulllet sinDato = null; // Representa la ausencia intencional de valor.console.log(`Sin dato: ${sinDato}`);
// f. Símbolos (Symbols)const idUnico = Symbol("id"); // Siempre es único, aunque el texto sea el mismo.const otroId = Symbol("id");console.log(`¿Son iguales? ${idUnico === otroId}`); // Devuelve false
// 2. VARIABLES COMPLEJAS (OBJETOS)// Pueden almacenar colecciones de datos o funcionalidades.
// a. Objetoslet persona = {  nombre: "Ana",  edad: 30,  profesion: "Ingeniera"};console.log(`Nombre: ${persona.nombre}, Edad: ${persona.edad}`);
// b. Arrayslet colores = \["rojo", "verde", "azul"];console.log(`Primer color: ${colores\[0]}`);
// c. Funcionesfunction sumar(a, b) {  return a + b;}console.log(`Suma: ${sumar(2, 3)}`);
// 3. VARIABLES ESPECIALES
// a. BigInt: Para números enteros extremadamente grandes.let numeroGrande = 123456789012345678901234567890n; // Añadir "n" al final del número.console.log(`Número grande: ${numeroGrande}`);
// b. Fechaslet hoy = new Date(); // Clase para trabajar con fechas y horas.console.log(`Hoy es: ${hoy.toDateString()}`);
// EJEMPLO DE VARIABLES CON DIFERENTES ALCANCES
// var: Tiene alcance global o de función. (Poco recomendado en ES6+)var globalVar = "Soy global";if (true) {  var varPrueba = "Soy accesible fuera del bloque";}console.log(varPrueba); // Accesible
// let: Tiene alcance de bloque.if (true) {  let bloqueLet = "Solo existo aquí";  console.log(bloqueLet); // Accesible aquí}// console.log(bloqueLet); // Error: no está definida.
// const: Igual que let, pero no se puede reasignar.const constante = "No puedo cambiar";// constante = "Intento cambiar"; // Error: Assignment to constant variable.console.log(constante);

Platzi Team

student•

Tipos de datos (Primitivos y Complejos)

En JavaScript, los tipos de datos se dividen en dos categorías principales: primitivos y complejos (o no primitivos). Vamos a detallar cada uno de ellos.

Primitivos

Tipos de datos primitivos

Los tipos de datos primitivos son los más básicos y se accede a ellos por valor. Esto significa que cuando se asigna una variable a otra, se copia el valor. Los tipos de datos primitivos en JavaScript son:

Number
Null
Symbol
String
Boolean
Undefined
Bigint

Tipos de datos complejos (o no primitivos)

Los tipos de datos complejos en JavaScript son aquellos que se accede a ellos por referencia. Esto significa que cuando se asigna una variable a otra, se copia la referencia al valor, no el valor en sí. Los principales tipos de datos complejos son

Object
Array
Map
Set
Function

Ejemplo de usabilidada // Datos primitivos (inmutables)

let a = 5;

let b = a; // Se copia el valor

b = 10;

console.log(a); // Salida: 5 (el valor original permanece inalterado)

console.log(b); // Salida: 10 (b tiene una copia independiente del valor)

let str1 = 'Hola';

let str2 = str1; // Se copia el valor

str2 = 'Adiós';

console.log(str1); // Salida: 'Hola' (el valor original permanece inalterado)

console.log(str2); // Salida: 'Adiós' (str2 tiene una copia independiente del valor)

// Datos complejos (mutables)

let arr1 = [1, 2, 3];

let arr2 = arr1; // Se copia la referencia

arr2.push(4);

console.log(arr1); // Salida: [1, 2, 3, 4] (arr1 se ve afectado por el cambio en arr2)

console.log(arr2); // Salida: [1, 2, 3, 4] (arr2 refleja el cambio)

let obj1 = { nombre: 'Ana' };

let obj2 = obj1; // Se copia la referencia

obj2.edad = 25;

console.log(obj1); // Salida: { nombre: 'Ana', edad: 25 } (obj1 se ve afectado por el cambio en obj2)

console.log(obj2); // Salida: { nombre: 'Ana', edad: 25 } (obj2 refleja el cambio)

Andres Calderon

student•

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.

Roger Natividad Pantoja

student•

Aunque ambos representan la ausencia de valor, null es un valor que un programador asigna intencionalmente para indicar un vacío. Por otro lado, undefined es un valor que JavaScript asigna automáticamente cuando una variable se declara pero no se inicializa, o cuando se intenta acceder a una propiedad inexistente.