Estructuras de Datos en JavaScript

Una estructura de datos es un formato para organizar, gestionar y almacenar datos de una manera que permita un acceso y modificación eficientes .

Más precisamente, una estructura de datos es una colección de valores de datos , las relaciones entre ellos y las funciones u operaciones que se pueden aplicar a esos datos.

A continuación, se presentan ejemplos de algunas de las estructuras de datos más comunes en JavaScript:

Arrays

Un array es una colección de elementos almacenados en ubicaciones de memoria contiguas. Los arrays son útiles para almacenar múltiples valores del mismo tipo y permiten acceder a los elementos mediante índices.

const frutas = ["manzana", "banana", "cereza"]; // manzana -> posición:0 banana -> posición:1 cereza -> posición:2
console.log(frutas[0]); // Accede al primer elemento: 'manzana'

frutas.push("peras"); // Añade "peras" al final del array
frutas.pop(); // Elimina el elemento del final.
frutas.unshift("Fresa"); // Añade "Fresa" al inicio
frutas.shift(); // Eliminar el primer elmento del array

Desestructuración de arrays básica

La desestructuración permite extraer los elementos directamente en la declaración de las variables, haciendo el código más limpio y evitando la repetición

const frutas = ["manzana", "banana", "cereza"];

const [primeraFruta, segundaFruta] = frutas;

console.log(primeraFruta); // Imprime "manzana"
console.net(segundaFruta); // Imprime "banana"

Con desestructuración de array con alias

const frutas = ["manzana", "banana", "cereza"];

const [frutaPrincipal, ...resto] = frutas;

console.log(frutaPrincipal); // Imprime "manzana"

Spread operators de array

Spread operators (…) en JavaScript es una herramienta poderosa para trabajar con arrays. Te permite expandir los elementos de un array en diferentes contextos, como:

Concatenar arrays: Combina fácilmente dos o más arrays en uno solo.
Copiar arrays: Crea una copia independiente de un array para evitar modificaciones accidentales en el original.
Agregar elementos a arrays existentes: Incorpora nuevos elementos al final de un array existente.
Pasar elementos de arrays como argumentos a funciones: Desempaqueta los elementos de un array para pasarlos como argumentos individuales a una función.

Veamos algunos ejemplos para ilustrar su funcionamiento:

Para mas información visitar Documentación de Array

Objetos

Los objetos en JavaScript son colecciones de pares clave-valor, donde cada clave es única. Son útiles para representar entidades con propiedades y métodos.

const persona = {
  nombre: "Juan",
  edad: 30,
  bio: function () {
    alert(`${this.nombre} tiene ${this.edad} años.`);
  },
  saludar: function () {
    console.log("Hola, mi nombre es " + this.nombre);
  },
};

console.log(persona.nombre); // Accede a la propiedad 'nombre': 'Juan'

persona.saludar(); // Llama al método 'saludar'

persona["altura"] = "1.75m"; // Añadimos una nueva propiedad al objeto persona "altura" con un valor de "1.75m

Desestructuración de objetos

La desestructuración de objetos en JavaScript es una poderosa herramienta que permite extraer y asignar propiedades de un objeto a variables de forma individual. A continuación, se describen algunos de los beneficios y usos de la desestructuración:

Beneficios

Mejora la legibilidad del código: Al desestructurar un objeto, se pueden extraer las propiedades que se necesitan y asignarlas a variables con nombres significativos, lo que hace que el código sea más fácil de leer y comprender.
Evita la escritura repetitiva: En lugar de acceder a las propiedades de un objeto mediante la notación de puntos o corchetes, la desestructuración proporciona una sintaxis más concisa y elegante.
Facilita el trabajo con objetos anidados: La desestructuración permite acceder a propiedades de objetos anidados de forma más sencilla y eficiente.

Usando la desestructuración en Objetos

Existen varias formas de desestructurar objetos en JavaScript:

Asignación básica

const persona = {
  nombre: "Ana",
  edad: 25,
  ciudad: "Madrid",
};

const { nombre, edad } = persona;

console.log(nombre); // Imprime "Ana"
console.log(edad); // Imprime 25

Asignación con alias:

const persona = {
  nombre: "Ana",
  edad: 25,
  ciudad: "Madrid",
};

const { nombre: nombreCompleto, edad } = persona;

console.log(nombreCompleto); // Imprime "Ana"
console.log(edad); // Imprime 25

Desestructuración anidada

const persona = {
  nombre: "Ana",
  edad: 25,
  direccion: {
    calle: "Mayor",
    numero: 12,
  },
};

const {
  nombre,
  edad,
  direccion: { calle },
} = persona;

console.log(nombre); // Imprime "Ana"
console.log(edad); // Imprime 25
console.log(calle); // Imprime Mayor

Casos de uso

La desestructuración de objetos se puede usar en una variedad de situaciones, como:

Extraer datos de una API
Procesar formularios
Trabajar con objetos JSON
Mostrar información de objetos en una interfaz de usuario

En resumen, la desestructuración de objetos es una herramienta valiosa que puede mejorar la legibilidad, la eficiencia y la facilidad de uso del código JavaScript.

Para más información

Mapas

Los mapas son colecciones de pares clave-valor, similares a los objetos, pero con algunas diferencias clave, como permitir claves de cualquier tipo y mantener el orden de inserción.

const mapa = new Map();
mapa.set("nombre", "Juan");
mapa.set(1, "uno");

console.log(mapa.get("nombre")); // Accede al valor asociado a la clave 'nombre': 'Juan'

Sets

Los sets son colecciones de valores únicos, similares a los arrays pero sin permitir duplicados.

const conjunto = new Set();
conjunto.add("manzana");
conjunto.add("banana");
conjunto.add("manzana"); // Este valor no se añadirá porque ya existe en el set
console.log(conjunto.has("manzana")); // Verifica si 'manzana' está en el set: true

Class

Plantillas para crear objetos con propiedades y métodos específicos.

class Persona {
  constructor(nombre, edad) {
    this.nombre = nombre;
    this.edad = edad;
  }

  hablar() {
    console.log(`Hola, mi nombre es ${this.nombre} y tengo ${this.edad} años.`);
  }
}

const persona = new Persona("Ana", 30);
persona.hablar();

Stacks

Las pilas son estructuras de datos lineales que siguen el principio LIFO (Last In, First Out), donde el último elemento añadido es el primero en ser eliminado.

class Pila {
  constructor() {
    this.elementos = [];
  }

  push(elemento) {
    this.elementos.push(elemento);
  }

  pop() {
    if (this.elementos.length === 0) return undefined;
    return this.elementos.pop();
  }
}

let pila = new Pila();
pila.push("manzana");
pila.push("banana");
console.log(pila.pop()); // Elimina y devuelve el último elemento añadido: 'banana'

Queues

Las colas, también conocidas como queues, son estructuras de datos que siguen el principio LIFO (último en entrar, primero en salir). Son como una fila de espera, donde el primer elemento que entra es el primero en salir.

Las colas se pueden implementar en JavaScript de diversas maneras, pero la más común es utilizando un array.

class Queue {
  constructor() {
    this.items = [];
  }

  // Agregar un elemento al final de la cola
  enqueue(element) {
    this.items.push(element);
  }

  // Eliminar un elemento del principio de la cola
  dequeue() {
    return this.items.shift();
  }

  // Ver el primer elemento de la cola sin eliminarlo
  peek() {
    return this.items[0];
  }

  // Comprobar si la cola está vacía
  isEmpty() {
    return this.items.length === 0;
  }
}

// Ejemplo de uso
const queue = new Queue();

queue.enqueue("Ana");
queue.enqueue("Juan");
queue.enqueue("Pedro");

console.log(queue.peek()); // Salida: "Ana"

const primerElemento = queue.dequeue();
console.log(primerElemento); // Salida: "Ana"

console.log(queue.isEmpty()); // Salida: false

queue.dequeue();
queue.dequeue();

console.log(queue.isEmpty()); // Salida: true