Objetos

Objetos Fundamental

Tip

Los objetos son estructuras de datos fundamentales en JavaScript que permiten almacenar colecciones de datos relacionados.

Declaración y acceso Básico

Crear objetos

// Objeto literal
const persona = {
  nombre: "Juan",
  edad: 25,
  ciudad: "Madrid"
};

// Constructor Object
const usuario = new Object();
usuario.nombre = "María";
usuario.edad = 30;

// Factory function
function crearPersona(nombre, edad) {
  return {
      nombre,
      edad
  };
}

Acceso a propiedades

const persona = {
  nombre: "Juan",
  edad: 25
};

// Notación de punto
console.log(persona.nombre);  // "Juan"

// Notación de corchetes
console.log(persona["edad"]); // 25

// Propiedad que no existe
console.log(persona.apellido); // undefined

Métodos y propiedades Importante

Definir métodos

const persona = {
  nombre: "Juan",
  saludar() {
      return `Hola, soy ${this.nombre}`;
  },
  // Método con arrow function
  obtenerEdad: () => 25
};

console.log(persona.saludar()); // "Hola, soy Juan"

Propiedades computadas

const clave = "edad";
const persona = {
  nombre: "Juan",
  [clave]: 25  // Propiedad computada
};

console.log(persona.edad); // 25

Iteración con for…in y Object.keys() Importante

for…in

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

for (let propiedad in persona) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}

Object.keys()

const persona = {
  nombre: "Juan",
  edad: 25
};

// Obtener array de claves
const claves = Object.keys(persona);
// ["nombre", "edad"]

// Obtener array de valores
const valores = Object.values(persona);
// ["Juan", 25]

// Obtener array de pares [clave, valor]
const entradas = Object.entries(persona);
// [["nombre", "Juan"], ["edad", 25]]

Desestructuración de objetos Moderno

Tip

La desestructuración permite extraer propiedades de objetos de forma más elegante.

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

// Desestructuración básica
const { nombre, edad } = persona;
console.log(nombre); // "Juan"

// Renombrar variables
const { nombre: nombrePersona } = persona;
console.log(nombrePersona); // "Juan"

// Valores por defecto
const { apellido = "Pérez" } = persona;
console.log(apellido); // "Pérez"

// Desestructuración anidada
const usuario = {
  nombre: "Juan",
  direccion: {
      calle: "Principal",
      ciudad: "Madrid"
  }
};

const { direccion: { ciudad } } = usuario;
console.log(ciudad); // "Madrid"

Métodos de Object Avanzado

Object.assign()

const objetivo = { a: 1 };
const fuente = { b: 2 };
const resultado = Object.assign(objetivo, fuente);
// { a: 1, b: 2 }

Object.freeze() y Object.seal()

// Congelar objeto (no se puede modificar)
const configuracion = Object.freeze({
  api: "https://api.ejemplo.com"
});

// Sellar objeto (se pueden modificar propiedades existentes)
const usuario = Object.seal({
  nombre: "Juan",
  edad: 25
});

Mejores prácticas Recomendado

Usar nombres descriptivos

// ❌ Malo
const obj = { n: "Juan", e: 25 };

// ✅ Bueno
const persona = {
  nombre: "Juan",
  edad: 25
};

Usar shorthand properties

const nombre = "Juan";
const edad = 25;

// ❌ Malo
const persona = {
  nombre: nombre,
  edad: edad
};

// ✅ Bueno
const persona = { nombre, edad };

Usar métodos concisos

// ❌ Malo
const persona = {
  saludar: function() {
      return "Hola";
  }
};

// ✅ Bueno
const persona = {
  saludar() {
      return "Hola";
  }
};