Objetos y Propiedades

Introducción a los objetos

Los objetos son una de las estructuras de datos más importantes en JavaScript. Permiten almacenar colecciones de datos relacionados y funcionalidades en una sola variable. A diferencia de los arrays, que usan índices numéricos, los objetos utilizan propiedades con nombre para acceder a los valores.

Creación de objetos

Literal de objeto

La forma más común de crear un objeto es usando la notación literal:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

Constructor Object

También se pueden crear objetos usando el constructor Object():

const persona = new Object();
persona.nombre = "Ana";
persona.edad = 28;
persona.profesion = "Ingeniera";

Función constructora

Para crear múltiples objetos con la misma estructura:

function Persona(nombre, edad, profesion) {
  this.nombre = nombre;
  this.edad = edad;
  this.profesion = profesion;
}

const persona1 = new Persona("Ana", 28, "Ingeniera");
const persona2 = new Persona("Carlos", 32, "Médico");

Object.create()

Permite crear un objeto basado en un prototipo existente:

const personaPrototipo = {
  saludar: function() {
    return `Hola, mi nombre es ${this.nombre}`;
  }
};

const ana = Object.create(personaPrototipo);
ana.nombre = "Ana";
ana.edad = 28;

console.log(ana.saludar()); // "Hola, mi nombre es Ana"

Acceso y manipulación de propiedades

Existen dos formas principales de acceder a las propiedades de un objeto:

Notación de punto

const persona = {
  nombre: "Ana",
  edad: 28
};

console.log(persona.nombre); // "Ana"
persona.edad = 29;
console.log(persona.edad); // 29

Notación de corchetes

const persona = {
  nombre: "Ana",
  edad: 28
};

console.log(persona["nombre"]); // "Ana"
persona["edad"] = 29;
console.log(persona["edad"]); // 29

La notación de corchetes es especialmente útil cuando:

• El nombre de la propiedad está almacenado en una variable
• El nombre de la propiedad contiene espacios o caracteres especiales
• El nombre de la propiedad es dinámico

const propiedad = "nombre";
console.log(persona[propiedad]); // "Ana"

persona["fecha de nacimiento"] = "01/01/1995";
console.log(persona["fecha de nacimiento"]); // "01/01/1995"

Añadir propiedades

Puedes añadir propiedades a un objeto en cualquier momento:

const persona = {
  nombre: "Ana",
  edad: 28
};

persona.profesion = "Ingeniera";
persona["hobbies"] = ["lectura", "natación"];

console.log(persona);
// {
//   nombre: "Ana",
//   edad: 28,
//   profesion: "Ingeniera",
//   hobbies: ["lectura", "natación"]
// }

Eliminar propiedades

Para eliminar una propiedad, usa el operador delete:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

delete persona.profesion;
console.log(persona); // { nombre: "Ana", edad: 28 }

Verificar existencia de propiedades

Puedes comprobar si una propiedad existe en un objeto de varias formas:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: ""
};

// Usando el operador in
console.log("nombre" in persona); // true
console.log("direccion" in persona); // false

// Usando hasOwnProperty (solo propiedades directas, no heredadas)
console.log(persona.hasOwnProperty("nombre")); // true

// Comparando con undefined
console.log(persona.nombre !== undefined); // true
console.log(persona.direccion !== undefined); // false

// Cuidado con valores falsy
console.log(persona.profesion); // "" (string vacío, que es falsy)
console.log(Boolean(persona.profesion)); // false, pero la propiedad existe

Métodos de objetos

Los métodos son funciones almacenadas como propiedades de un objeto:

const persona = {
  nombre: "Ana",
  edad: 28,
  saludar: function() {
    return `Hola, mi nombre es ${this.nombre}`;
  },
  // Sintaxis abreviada (ES6)
  despedirse() {
    return `Adiós, ${this.nombre} se despide`;
  }
};

console.log(persona.saludar()); // "Hola, mi nombre es Ana"
console.log(persona.despedirse()); // "Adiós, Ana se despide"

El valor de this en los métodos

Dentro de un método, this se refiere al objeto que lo contiene:

const persona = {
  nombre: "Ana",
  presentarse() {
    console.log(`Me llamo ${this.nombre}`);
  }
};

persona.presentarse(); // "Me llamo Ana"

Sin embargo, el valor de this puede cambiar dependiendo de cómo se llame al método:

const persona = {
  nombre: "Ana",
  presentarse() {
    console.log(`Me llamo ${this.nombre}`);
  }
};

const presentacion = persona.presentarse;
presentacion(); // "Me llamo undefined" (this ya no es persona)

Para solucionar esto, puedes usar bind, call, apply o funciones flecha:

const persona = {
  nombre: "Ana",
  // Usando bind
  getPresentacion() {
    return function() {
      console.log(`Me llamo ${this.nombre}`);
    }.bind(this);
  },
  // Usando función flecha (que no tiene su propio this)
  getPresentacionFlecha() {
    return () => {
      console.log(`Me llamo ${this.nombre}`);
    };
  }
};

const fn1 = persona.getPresentacion();
fn1(); // "Me llamo Ana"

const fn2 = persona.getPresentacionFlecha();
fn2(); // "Me llamo Ana"

Objetos anidados

Los objetos pueden contener otros objetos como propiedades:

const persona = {
  nombre: "Ana",
  edad: 28,
  direccion: {
    calle: "Av. Principal",
    numero: 123,
    ciudad: "Madrid",
    pais: "España"
  },
  contacto: {
    email: "ana@ejemplo.com",
    telefono: "+34 123 456 789"
  }
};

console.log(persona.direccion.ciudad); // "Madrid"
console.log(persona.contacto.email); // "ana@ejemplo.com"

Acceso seguro a propiedades anidadas

Para evitar errores al acceder a propiedades que podrían no existir:

// Forma tradicional (propenso a errores)
let ciudad;
if (persona && persona.direccion) {
  ciudad = persona.direccion.ciudad;
}

// Operador de encadenamiento opcional (ES2020)
const ciudad = persona?.direccion?.ciudad;

Desestructuración de objetos

La desestructuración permite extraer propiedades de un objeto de forma concisa:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

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

// Asignación a variables con nombres diferentes
const { nombre: nombrePersona, profesion: trabajo } = persona;
console.log(nombrePersona); // "Ana"
console.log(trabajo); // "Ingeniera"

// Valores predeterminados
const { nombre, salario = "No especificado" } = persona;
console.log(salario); // "No especificado"

Desestructuración anidada

const persona = {
  nombre: "Ana",
  direccion: {
    ciudad: "Madrid",
    pais: "España"
  }
};

const { nombre, direccion: { ciudad } } = persona;
console.log(nombre); // "Ana"
console.log(ciudad); // "Madrid"

Desestructuración en parámetros de función

function mostrarInfo({ nombre, edad = "No especificada" }) {
  console.log(`Nombre: ${nombre}, Edad: ${edad}`);
}

mostrarInfo({ nombre: "Ana", edad: 28 }); // "Nombre: Ana, Edad: 28"
mostrarInfo({ nombre: "Carlos" }); // "Nombre: Carlos, Edad: No especificada"

El operador spread con objetos

El operador spread (...) permite:

Copiar objetos

const persona = {
  nombre: "Ana",
  edad: 28
};

// Copia superficial
const copia = { ...persona };
copia.edad = 29;

console.log(persona.edad); // 28 (no se modifica)
console.log(copia.edad); // 29

Fusionar objetos

const datosPersonales = {
  nombre: "Ana",
  edad: 28
};

const datosProfesionales = {
  profesion: "Ingeniera",
  empresa: "Tech Inc."
};

// Fusionar objetos
const persona = { ...datosPersonales, ...datosProfesionales };
console.log(persona);
// {
//   nombre: "Ana",
//   edad: 28,
//   profesion: "Ingeniera",
//   empresa: "Tech Inc."
// }

Sobrescribir propiedades

const persona = {
  nombre: "Ana",
  edad: 28
};

// Sobrescribir edad y añadir profesión
const personaActualizada = { ...persona, edad: 29, profesion: "Ingeniera" };
console.log(personaActualizada);
// {
//   nombre: "Ana",
//   edad: 29,
//   profesion: "Ingeniera"
// }

Métodos Object.keys, values y entries

Estos métodos estáticos de Object permiten trabajar con las propiedades de un objeto:

Object.keys()

Devuelve un array con los nombres de las propiedades enumerables del objeto:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

const propiedades = Object.keys(persona);
console.log(propiedades); // ["nombre", "edad", "profesion"]

// Útil para iterar sobre un objeto
for (const propiedad of Object.keys(persona)) {
  console.log(`${propiedad}: ${persona[propiedad]}`);
}

Object.values()

Devuelve un array con los valores de las propiedades enumerables:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

const valores = Object.values(persona);
console.log(valores); // ["Ana", 28, "Ingeniera"]

Object.entries()

Devuelve un array de arrays, donde cada subarray es un par propiedad, valor:

const persona = {
  nombre: "Ana",
  edad: 28,
  profesion: "Ingeniera"
};

const entradas = Object.entries(persona);
console.log(entradas);
// [
//   ["nombre", "Ana"],
//   ["edad", 28],
//   ["profesion", "Ingeniera"]
// ]

// Útil para transformar objetos
const personaMap = new Map(Object.entries(persona));
console.log(personaMap.get("nombre")); // "Ana"

JSON y serialización

JSON (JavaScript Object Notation) es un formato de texto para intercambiar datos. Se parece a la notación de objetos de JavaScript, pero con algunas diferencias:

• Las propiedades deben estar entre comillas dobles
• Solo admite valores simples (strings, números, booleanos, null, arrays y objetos)
• No admite funciones, undefined, ni referencias circulares

Convertir objeto a JSON

const persona = {
  nombre: "Ana",
  edad: 28,
  hobbies: ["lectura", "natación"],
  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
};

const json = JSON.stringify(persona);
console.log(json);
// {"nombre":"Ana","edad":28,"hobbies":["lectura","natación"]}
// Nota: el método saludar no aparece en el JSON

Convertir JSON a objeto

const json = '{"nombre":"Ana","edad":28,"hobbies":["lectura","natación"]}';
const persona = JSON.parse(json);

console.log(persona.nombre); // "Ana"
console.log(persona.hobbies[0]); // "lectura"

Personalizar la serialización

Puedes controlar qué propiedades se incluyen en el JSON:

const persona = {
  nombre: "Ana",
  edad: 28,
  _password: "secreto"
};

// Segundo parámetro: función replacer
const json = JSON.stringify(persona, (key, value) => {
  // Excluir propiedades privadas (que empiezan con _)
  if (key.startsWith('_')) return undefined;
  return value;
});

console.log(json); // {"nombre":"Ana","edad":28}

También puedes controlar el formato:

const persona = {
  nombre: "Ana",
  edad: 28,
  direccion: {
    ciudad: "Madrid",
    pais: "España"
  }
};

// Tercer parámetro: espaciado
const jsonFormateado = JSON.stringify(persona, null, 2);
console.log(jsonFormateado);
// {
//   "nombre": "Ana",
//   "edad": 28,
//   "direccion": {
//     "ciudad": "Madrid",
//     "pais": "España"
//   }
// }

Propiedades computadas

ES6 introdujo la capacidad de usar expresiones como nombres de propiedades:

const propNombre = "nombre";
const propEdad = "edad";

const persona = {
  [propNombre]: "Ana",
  [propEdad]: 28,
  [`info_${propNombre}`]: "Información sobre el nombre"
};

console.log(persona.nombre); // "Ana"
console.log(persona.info_nombre); // "Información sobre el nombre"

Getters y setters

Permiten definir comportamientos especiales al acceder o modificar propiedades:

const persona = {
  nombre: "Ana",
  apellido: "García",
  
  // Getter
  get nombreCompleto() {
    return `${this.nombre} ${this.apellido}`;
  },
  
  // Setter
  set nombreCompleto(valor) {
    const partes = valor.split(' ');
    this.nombre = partes[0];
    this.apellido = partes[1];
  }
};

console.log(persona.nombreCompleto); // "Ana García"

persona.nombreCompleto = "María López";
console.log(persona.nombre); // "María"
console.log(persona.apellido); // "López"

Mejores prácticas

1. Preferir notación literal para crear objetos:

   // Preferir
   const obj = { a: 1, b: 2 };
   
   // En lugar de
   const obj = new Object();
   obj.a = 1;
   obj.b = 2;
   

2. Usar sintaxis abreviada para métodos:

   // Preferir
   const obj = {
     metodo() { /* código */ }
   };
   
   // En lugar de
   const obj = {
     metodo: function() { /* código */ }
   };
   

3. Usar desestructuración para extraer propiedades:

   // Preferir
   const { nombre, edad } = persona;
   
   // En lugar de
   const nombre = persona.nombre;
   const edad = persona.edad;
   

4. Usar el operador spread para copiar objetos:

   // Preferir
   const copia = { ...original };
   
   // En lugar de
   const copia = Object.assign({}, original);
   

5. Usar el operador de encadenamiento opcional para acceso seguro:

   // Preferir
   const ciudad = persona?.direccion?.ciudad;
   
   // En lugar de
   const ciudad = persona && persona.direccion ? persona.direccion.ciudad : undefined;