Objetos y JSON en JavaScript: propiedades, métodos y destructuring

Los objetos permiten agrupar datos relacionados mediante pares de propiedad y valor.

Crear un objeto

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

Acceder a propiedades

Podemos acceder a una propiedad con notación de punto o con corchetes. Los corchetes son útiles cuando el nombre de la propiedad está guardado en una variable.

console.log(persona.nombre);
console.log(persona["edad"]);

Modificar y agregar propiedades

Los objetos pueden cambiar después de crearse: podemos actualizar propiedades existentes o agregar nuevas.

persona.edad = 29;
persona.ciudad = "Santa Rosa";

Métodos

Cuando una propiedad contiene una función, solemos llamarla método. En el ejemplo, saludar() pertenece al objeto usuario.

const usuario = {
    nombre: "Luis",

    saludar() {
        return `Hola, soy ${this.nombre}`;
    }
};

console.log(usuario.saludar());

Objetos anidados

Una propiedad también puede contener otro objeto. Esto permite representar información más compleja manteniendo los datos agrupados.

const alumno = {
    nombre: "María",
    contacto: {
        email: "maria@example.com",
        telefono: "123456"
    }
};

console.log(alumno.contacto.email);

Arrays de objetos

const cursos = [
    { id: 1, nombre: "HTML", activo: true },
    { id: 2, nombre: "CSS", activo: true },
    { id: 3, nombre: "JavaScript", activo: false }
];

const activos = cursos.filter(curso => curso.activo);

Destructuring de objetos

El destructuring permite extraer propiedades y guardarlas directamente en variables, evitando repetir el nombre del objeto.

const producto = {
    nombre: "Monitor",
    precio: 250000
};

const { nombre, precio } = producto;

console.log(nombre, precio);

Renombrar al desestructurar

const { nombre: nombreProducto } = producto;

console.log(nombreProducto);

Spread en objetos

El operador spread ... copia las propiedades de un objeto en otro. Es muy útil para crear una nueva versión con algunos valores modificados.

const original = {
    nombre: "Ana",
    edad: 30
};

const actualizado = {
    ...original,
    edad: 31
};

console.log(actualizado);

¿Qué es JSON?

JSON significa JavaScript Object Notation. Es un formato de texto utilizado para intercambiar datos entre sistemas.

{
    "nombre": "Ana",
    "edad": 30,
    "activo": true
}

Aunque se parece a la sintaxis de objetos de JavaScript, JSON es un formato de texto con reglas propias.

JSON.stringify()

JSON.stringify() convierte un objeto JavaScript en texto JSON. Esto es útil para enviarlo por una API o guardarlo en almacenamiento local.

const usuario = {
    nombre: "Ana",
    edad: 30
};

const texto = JSON.stringify(usuario);

console.log(texto);

JSON.parse()

JSON.parse() hace el proceso inverso: recibe texto JSON válido y lo convierte en un valor JavaScript utilizable.

const texto = '{"nombre":"Ana","edad":30}';

const usuario = JSON.parse(texto);

console.log(usuario.nombre);

Optional chaining

El operador ?. permite acceder de forma segura a propiedades que podrían no existir, evitando que ese acceso lance un error.

const usuario = {
    nombre: "Ana"
};

console.log(usuario.contacto?.email);

Si una parte de la cadena no existe, devuelve undefined en lugar de generar un error en ese acceso.

Ejercicio

Creá un array de productos con id, nombre, precio y stock. Buscá uno por id, actualizá su stock usando spread y convertí el resultado a JSON.

Errores comunes

• confundir objeto JavaScript con JSON;
• intentar usar métodos dentro de JSON;
• acceder a propiedades anidadas que no existen;
• modificar objetos compartidos sin querer;
• usar JSON.parse() sobre texto que no es JSON válido.

Seguí aprendiendo JavaScript

← Arrays en JavaScript: métodos, recorridos, map, filter, find y reduce

DOM en JavaScript: seleccionar, modificar y crear elementos HTML →