Estructuras de Datos en JavaScript 🌟
¿Qué son las estructuras de datos? 📊
Son formas de organizar y almacenar datos en un programa de manera eficiente para
realizar operaciones sobre ellos de forma óptima. En otras palabras, son herramientas que
usamos para manejar datos de manera lógica y estructurada.
Ejemplo sencillo: 🛒
Sin estructura: Escribes todo en un papel sin orden.
Con estructura: Usas una lista donde cada elemento representa un artículo.
¿Por qué se usan las estructuras de datos? 🤔
📂 Organización: Hacen que los datos sean fáciles de manejar y entender.
⚡ Eficiencia: Permiten realizar operaciones (buscar, agregar, eliminar datos)
1.
2.
📈 Escalabilidad: Facilitan trabajar con grandes volúmenes de datos.
rápidamente.
💡 Resolución de problemas complejos: Ayudan a implementar algoritmos para
3.
4.
resolver problemas de manera eficiente.
Ejemplo en programación 👨💻
Sin estructura: Guardas datos sueltos en variables separadas:
let item1 = 'Manzanas';
let item2 = 'Naranjas';
let item3 = 'Plátanos';
Con estructura (lista o arreglo):
let listaDeCompras = ['Manzanas', 'Naranjas', 'Plátanos'];
¿Qué son los arreglos? 📋
Un arreglo (array) es una colección ordenada de elementos. Los elementos pueden ser de
cualquier tipo de datos: números, cadenas, objetos, e incluso otros arreglos.
Características clave 📝
📌 Ordenados: Cada elemento tiene una posición o índice, que comienza en 0.
📐 Dinámicos: En JavaScript, los arreglos pueden cambiar de tamaño; puedes
1.
2.
🔀 Homogéneos o heterogéneos: Aunque suelen contener datos del mismo tipo,
agregar o eliminar elementos en cualquier momento.
3.
en JavaScript pueden mezclar tipos de datos.
Sintaxis básica 🖋️
Declaración de un arreglo vacío:
let arregloVacio = [];
Declaración de un arreglo con elementos:
let frutas = ['Manzana', 'Naranja', 'Banana'];
Acceso a los elementos: Usa corchetes [] y el índice:
console.log(frutas[0]); // Imprime "Manzana"
console.log(frutas[2]); // Imprime "Banana"
Modificar un elemento:
frutas[1] = 'Fresa'; // Cambia "Naranja" por "Fresa"
console.log(frutas); // ["Manzana", "Fresa", "Banana"]
Agregar un elemento:
frutas.push('Kiwi');
console.log(frutas); // ["Manzana", "Fresa", "Banana", "Kiwi"]
Cómo usar arreglos 🤹♂️
Almacenar datos relacionados: Úsalos para manejar colecciones de elementos que
comparten un propósito común.
let numeros = [1, 2, 3, 4, 5];
Recorrer un arreglo: Para procesar cada elemento, usa un bucle:
for (let i = 0; i < frutas.length; i++) {
console.log(frutas[i]);
}
Cómo no usar arreglos
❌ No mezclar datos sin relación:
🚫
let datos = ['Manzana', 42, true, null]; // No recomendado, no
es claro.
❌ Evitar modificar la longitud manualmente:
let arreglo = [1, 2, 3];
arreglo.length = 1; // Acorta el arreglo, pierde elementos.
console.log(arreglo); // [1]
❌ No tratar arreglos como objetos genéricos:
let arreglo = [];
arreglo['clave'] = 'valor'; // No recomendado.
console.log(arreglo['clave']); // Funciona, pero no es buena
práctica.
¿Qué son los objetos? 🗂️
Un objeto en JavaScript es una colección de pares clave-valor. Las claves son cadenas (o
símbolos), y los valores pueden ser cualquier tipo de dato, incluyendo funciones o incluso
otros objetos.
Características clave 📝
● No ordenados: A diferencia de los arreglos, los objetos no tienen un orden
específico.
● Pares clave-valor: Cada valor está asociado con una clave única.
● Extensibles: Puedes agregar o eliminar propiedades dinámicamente.
Sintaxis básica ✍️
Declarar un objeto vacío:
let objetoVacio = {};
Declarar un objeto con propiedades:
let persona = {
nombre: 'Juan',
edad: 30,
profesion: 'Ingeniero'
};
Acceder a los valores de un objeto:
● Notación de punto:
console.log(persona.nombre); // "Juan"
● Notación de corchetes:
console.log(persona['edad']); // 30
Agregar o modificar propiedades:
persona.nacionalidad = 'Mexicana'; // Agrega una nueva
propiedadpersona.edad = 31; // Modifica una propiedad
existente
Eliminar propiedades:
delete persona.profesion;
console.log(persona); // { nombre: "Juan", edad: 31,
nacionalidad: "Mexicana" }
Cómo usar objetos 💡
Representar entidades o conceptos:
Los objetos son ideales para representar algo que tiene múltiples características.
let libro = {
titulo: '1984',
autor: 'George Orwell',
paginas: 328,
disponible: true
};
Almacenar y procesar datos estructurados:
Los objetos se utilizan comúnmente para estructurar datos y acceder a ellos fácilmente.
Cómo no usar objetos ❌
⚠️ Evitar errores comunes
No usar claves numéricas como índices:
Los arreglos son mejores para datos indexados numéricamente.
let datos = {
0: 'Manzana',
1: 'Naranja'
}; // Es posible, pero no recomendable.
Evitar mezclar tipos de datos no relacionados:
Mantén las propiedades coherentes y relacionadas con el propósito del objeto.
let persona = {
nombre: 'Ana',
edad: 25,
coloresFavoritos: ['rojo', 'azul'], // OK
funcionInutil: function () { console.log('¡Hola!'); } //
No relacionado
};
No abusar de las propiedades dinámicas:
Aunque es posible agregar propiedades según sea necesario, hacerlo en exceso puede
dificultar el mantenimiento.
Arreglos vs Objetos: Comparación ⚔️
1. Estructura 🏗️
Arreglo:
Una colección ordenada de elementos indexados numéricamente.
let frutas = ['Manzana', 'Naranja', 'Banana'];
Objeto:
Una colección no ordenada de pares clave-valor.
let persona = { nombre: 'Ana', edad: 25 };
2. Acceso a los datos 🔑
Arreglo:
Accedes a los elementos usando índices (números enteros).
console.log(frutas[0]); // "Manzana"
Objeto:
Accedes a los valores usando claves (cadenas).
console.log(persona.nombre); // "Ana"
3. Uso típico 🎯
Arreglo:
Ideal para listas de datos homogéneos o secuenciales.
Ejemplo: Lista de productos, números o tareas.
let numeros = [1, 2, 3, 4];
Objeto:
Ideal para representar datos estructurados con múltiples atributos.
Ejemplo: Información de un usuario, configuraciones, etc.
let usuario = { id: 1, nombre: 'Carlos', activo: true };
4. Métodos comunes 🛠️
Arreglo:
Tiene muchos métodos integrados como push, pop, forEach, etc.
let frutas = ['Manzana'];
frutas.push('Naranja'); // ["Manzana", "Naranja"]
Objeto:
No tiene métodos específicos como los arreglos, pero puedes usar métodos genéricos
como Object.keys o Object.values.
let persona = { nombre: 'Ana', edad: 25 };
console.log(Object.keys(persona)); // ["nombre", "edad"]
5. Orden 🗂️
Arreglo:
Los elementos están ordenados en la secuencia en que se agregan.
let numeros = [10, 20, 30];
console.log(numeros[1]); // 20
Objeto:
El orden de las propiedades no está garantizado (aunque en la práctica, JavaScript
mantiene el orden de inserción).
let datos = { b: 2, a: 1 };
console.log(datos); // { b: 2, a: 1 }
6. Iteración 🔄
Arreglo:
Puedes recorrerlo con bucles como for, forEach, o for...of.
for (let fruta of frutas) {
console.log(fruta);
}
Objeto:
Usa for...in o métodos como Object.entries para iterar.
for (let clave in persona) {
console.log(`${clave}: ${persona[clave]}`);
}
¿Cuándo usar arreglos vs objetos? 🤔
Escenario Usar arreglo Usar objeto
Lista de elementos ✔️ ❌
Datos con relaciones clave-valor ❌ ✔️
Necesidad de orden ✔️ ❌ No garantizado
Agregar o quitar elementos ✔️ (usando ❌ (se requiere más lógica)
secuenciales push)
Iterar fácilmente ✔️ ❌ Más complicado
En JavaScript, todo es un objeto 🌍
En JavaScript, la mayoría de los datos y estructuras se comportan como objetos porque:
● Pueden tener propiedades: Son características asociadas al dato.
● Pueden tener métodos: Son funciones asociadas al dato.
Ejemplo práctico 💻
1. Arreglos son objetos
Aunque los arreglos son una estructura de datos separada, internamente son un subtipo de
objeto.
let frutas = ['Manzana', 'Naranja'];
console.log(typeof frutas); // "object" (es un subtipo de objeto)
console.log(frutas.length); // 2 (propiedad)
frutas.push('Banana'); // Método para agregar un elemento
console.log(frutas); // ["Manzana", "Naranja", "Banana"]
2. Funciones son objetos
Las funciones también son objetos. Tienen propiedades como name y length.
function saludar(nombre) {
return `Hola, ${nombre}!`;
}
console.log(typeof saludar); // "function" (pero también un objeto)
console.log(saludar.name); // "saludar" (propiedad)
console.log(saludar.length); // 1 (número de parámetros esperados)
3. Cadenas, números y booleanos como objetos
Aunque son datos primitivos, JavaScript los trata como objetos temporalmente.
Cadenas:
let texto = 'Hola';
console.log(texto.length); // 4 (propiedad)
console.log(texto.toUpperCase()); // "HOLA" (método)
Números:
let numero = 42;
console.log(numero.toString()); // "42" (convierte a cadena)
Booleanos:
let verdad = true;
console.log(verdad.toString()); // "true"
¿Por qué todo es un objeto? 🧐
● Extensibilidad: Puedes agregar propiedades o métodos personalizados a casi
cualquier dato.
let frutas = ['Manzana'];
frutas.miMetodo = () => 'Soy un método agregado!';
console.log(frutas.miMetodo()); // "Soy un método
agregado!"
● Consistencia: Todos los tipos comparten características similares, como tener
propiedades y métodos.
● Herencia prototípica: Todos los objetos (incluyendo arreglos, funciones y otros
tipos) heredan de Object, la raíz de la jerarquía de objetos en JavaScript.
¿Qué significa esto en la práctica? 💡
● Flexibilidad: Puedes tratar casi todo como un objeto, pero no siempre es
recomendable.
● Estructura adecuada: Usa objetos, arreglos u otros tipos de datos para sus
propósitos específicos, incluso si JavaScript te permite mezclarlos.
Métodos útiles en Strings y Arreglos en JavaScript 🎯
Métodos de Strings 🔤
1. split() ✂️
Función: Divide una cadena en un arreglo según un separador.
Ejemplo:
let texto = "manzana,naranja,banana";
let frutas = texto.split(','); // Separa por comas
console.log(frutas); // ["manzana", "naranja", "banana"]
📝 Resultado: Una lista de frutas separada por comas.
2. join() 🔗
Función: Une los elementos de un arreglo en una cadena, usando un separador.
Ejemplo:
let frutas = ['manzana', 'naranja', 'banana'];
let texto = frutas.join(' - ');
console.log(texto); // "manzana - naranja - banana"
📝 Resultado: ¡Las frutas están unidas por un guion!
3. slice() 🍰
Función: Extrae una parte de una cadena o arreglo sin modificar el original.
Ejemplo:
let texto = "Hola mundo";
let subCadena = texto.slice(0, 4);
console.log(subCadena); // "Hola"
📝 Resultado: Obtienes una "rebanada" del texto.
4. substring() 📏
Función: Similar a slice, pero no admite índices negativos.
Ejemplo:
let texto = "JavaScript";
let subCadena = texto.substring(4, 10);
console.log(subCadena); // "Script"
📝 Resultado: ¡Un segmento perfecto del texto!
Métodos de Arreglos 🧩
1. push() ➕
Función: Agrega uno o más elementos al final del arreglo.
Ejemplo:
let frutas = ['Manzana', 'Naranja'];
frutas.push('Banana');
console.log(frutas); // ["Manzana", "Naranja", "Banana"]
📝 Resultado: Se añadió una 🍌 al final.
2. pop() ➖
Función: Elimina y devuelve el último elemento del arreglo.
Ejemplo:
let frutas = ['Manzana', 'Naranja', 'Banana'];
let ultimaFruta = frutas.pop();
console.log(frutas); // ["Manzana", "Naranja"]
console.log(ultimaFruta); // "Banana"
📝 Resultado: Se quitó la 🍌 del final.
3. shift() ⬅️
Función: Elimina y devuelve el primer elemento del arreglo.
Ejemplo:
let frutas = ['Manzana', 'Naranja', 'Banana'];
let primeraFruta = frutas.shift();
console.log(frutas); // ["Naranja", "Banana"]
console.log(primeraFruta); // "Manzana"
📝 Resultado: Se quitó la 🍎 del inicio.
4. unshift() ⬅️
Función: Agrega uno o más elementos al inicio del arreglo.
Ejemplo:
let frutas = ['Naranja', 'Banana'];
frutas.unshift('Manzana');
console.log(frutas); // ["Manzana", "Naranja", "Banana"]
📝 Resultado: Se añadió una 🍎 al inicio.
Resumen práctico 🛠️
Combinemos varios métodos de strings y arreglos:
// String inicial
let frase = "Aprender JavaScript paso a paso es divertido";
// Dividir en palabras ✂️
let palabras = frase.split(' ');
console.log(palabras); // ["Aprender", "JavaScript", "paso",
"a", "paso", "es", "divertido"]
// Tomar las primeras 3 palabras 🍰
let primerasPalabras = palabras.slice(0, 3);
console.log(primerasPalabras); // ["Aprender", "JavaScript",
"paso"]
// Unirlas en una frase con guiones 🔗
let nuevaFrase = primerasPalabras.join('-');
console.log(nuevaFrase); // "Aprender-JavaScript-paso"
Práctica con Arreglos 🧩
// Lista inicial de tareas
let tareas = ['Estudiar', 'Hacer ejercicio'];
// Agregar tareas ➕
tareas.push('Leer');
tareas.unshift('Desayunar');
console.log(tareas); // ["Desayunar", "Estudiar", "Hacer
ejercicio", "Leer"]
// Eliminar tareas ➖
let ultimaTarea = tareas.pop();
let primeraTarea = tareas.shift();
console.log(tareas); // ["Estudiar", "Hacer ejercicio"]
console.log(ultimaTarea); // "Leer"
console.log(primeraTarea); // "Desayunar"
Bucles en JavaScript 🔄
1. for...of 🎯
● ¿Qué hace?
Recorre valores de objetos iterables como arreglos, cadenas, mapas (Map),
conjuntos (Set) y más.
Ideal para trabajar con los valores directamente en lugar de índices o claves.
Sintaxis:
for (variable of iterable) {
// Código para cada valor
}
Ejemplo con un arreglo:
let numeros = [10, 20, 30, 40];
for (let numero of numeros) {
console.log(numero);
}
// Salida:
// 10
// 20
// 30
// 40
✅ Resultado: Recorremos directamente los valores.
Ejemplo con una cadena:
let palabra = "Hola";
for (let letra of palabra) {
console.log(letra);
}
// Salida:
// H
// o
// l
// a
📌
● ¿Cuándo usarlo?
✔️
Cuando trabajas con valores en objetos iterables.
Más legible y menos propenso a errores si no necesitas índices.
2. for...in 🗂️
● ¿Qué hace?
Recorre las propiedades enumerables de un objeto o los índices de un arreglo.
Sintaxis:
for (variable in objetoOArreglo) {
// Código para cada propiedad o índice
}
Ejemplo con un objeto:
let persona = { nombre: 'Juan', edad: 30, ciudad: 'Madrid' };
for (let clave in persona) {
console.log(`${clave}: ${persona[clave]}`);
}
// Salida:
// nombre: Juan
// edad: 30
// ciudad: Madrid
Ejemplo con un arreglo:
Aunque funciona, no es la mejor opción porque recorre índices y no valores.
let frutas = ['Manzana', 'Naranja', 'Banana'];
for (let indice in frutas) {
console.log(`Fruta en posición ${indice}:
${frutas[indice]}`);
}
// Salida:
// Fruta en posición 0: Manzana
// Fruta en posición 1: Naranja
// Fruta en posición 2: Banana
📌
● ¿Cuándo usarlo?
Para recorrer objetos y acceder a claves o propiedades.
3. forEach() ✨
● ¿Qué hace?
Es un método moderno que ejecuta una función por cada elemento en un arreglo.
Sintaxis:
arreglo.forEach((elemento, indice, arreglo) => {
// Código para cada elemento
});
○ elemento: Valor actual.
○ índice (opcional): Posición actual.
○ arreglo (opcional): El arreglo que se recorre.
Ejemplo básico:
let numeros = [1, 2, 3, 4];
numeros.forEach((numero) => {
console.log(numero);
});
// Salida:
// 1
// 2
// 3
// 4
Ejemplo con índice:
let frutas = ['Manzana', 'Naranja', 'Banana'];
frutas.forEach((fruta, indice) => {
console.log(`Fruta en posición ${indice}: ${fruta}`);
});
// Salida:
// Fruta en posición 0: Manzana
// Fruta en posición 1: Naranja
// Fruta en posición 2: Banana
Comparativa rápida 📊
Supongamos que tienes un arreglo:
let numeros = [10, 20, 30];
Bucle Devuelve Uso común
for...of 🎯 Valores (10, 20, 30) Trabajar con valores.
for...in 🗂️ Índices (0, 1, 2) Acceder a índices/propiedades.
forEach() ✨ Valores e indices (10, 20, 30), (0, 1, 2) Operaciones en elementos.
Práctica combinada 🧩
Usando forEach() con un arreglo:
let estudiantes = [
{ nombre: 'Ana', edad: 20 },
{ nombre: 'Luis', edad: 22 },
{ nombre: 'Sofía', edad: 19 }
];
estudiantes.forEach((estudiante) => {
console.log(`${estudiante.nombre} tiene ${estudiante.edad}
años.`);
});
// Salida:
// Ana tiene 20 años.
// Luis tiene 22 años.
// Sofía tiene 19 años.
Usando for...in para un objeto:
let estudiante = { nombre: 'Carlos', edad: 25, carrera:
'Ingeniería' };
for (let propiedad in estudiante) {
console.log(`${propiedad}: ${estudiante[propiedad]}`);
}
// Salida:
// nombre: Carlos
// edad: 25
// carrera: Ingeniería
