Modificando objetos

Generated avatar
javascript objetos

Analogía

Imagina que tienes un perfil en una red social.

Este perfil contiene información sobre ti, como tu nombre de usuario, edad y ubicación. Y habrá ocasiones donde necesites actualizar esta información.

Los objetos en JavaScript funcionan de manera similar.


🔄 Modificando datos existentes

Hay dos formas principales de modificar los datos de un objeto, así como tienes dos formas de referirte a las características de algo:

🔸 Usando la notación punto (.)

let tarjeta = {
nombre: "Ana",
edad: 25,
ciudad: "Madrid",
};
// Actualizamos la edad de Ana
tarjeta.edad = 26;
console.log(tarjeta);

Terminal window
{ nombre: "Ana", edad: 26, ciudad: "Madrid" }

🔹 Usando la notación de corchetes ([])

A veces necesitamos usar palabras con espacios o caracteres especiales, como “fecha de nacimiento”.

En estos casos usamos corchetes, como si fuera un diccionario donde buscamos una palabra específica.

let estudiante = {
"nombre completo": "María López",
"número de lista": 7,
};
estudiante["número de lista"] = 12;
console.log(estudiante);

Terminal window
{ "nombre completo": "María López", "número de lista": 12 }

➕ Agregando nuevos datos

También podemos agregar nueva información a nuestro objeto, como cuando agregas un nuevo sticker a tu tarjeta de identificación:

let perfil = {
usuario: "gamer123",
nivel: 5,
};
// Agregamos una nueva propiedad
perfil.puntos = 1000;
console.log(perfil);

Terminal window
{
usuario: "gamer123",
nivel: 5,
puntos: 1000
}

❌ Eliminando propiedades

Para eliminar una propiedad de un objeto usamos el operador delete:

let usuario = {
nombre: "Carlos",
edad: 30,
};
delete usuario.edad;
console.log(usuario);

Terminal window
{ nombre: "Carlos" }

🪆 Modificando objetos anidados

A veces tenemos objetos dentro de otros objetos. Para modificarlos, usamos la notación punto varias veces:

let videojuego = {
nombre: "Aventura Mágica",
personaje: {
nombre: "Mago",
poderes: ["Fuego", "Hielo"],
},
};
videojuego.personaje.nombre = "Hechicero";
videojuego.personaje.poderes[1] = "Rayo";
console.log(videojuego);

Terminal window
{
nombre: "Aventura Mágica",
personaje: {
nombre: "Hechicero",
poderes: ["Fuego", "Rayo"]
}
}

⚠️ Errores comunes

1. Intentar acceder a propiedades que no existen

let coche = { marca: "Toyota" };
console.log(coche.modelo); // undefined

2. Usar notación punto con nombres que tienen espacios

let persona = { "nombre completo": "Ana García" };
// ❌ Esto dará error
persona.nombre completo = "Luis López";
// ✅ Usar corchetes en su lugar
persona["nombre completo"] = "Luis López";

📝 Resumen
Notación Ejemplo Cuándo usarla
Punto (.) objeto.propiedad Para nombres simples sin espacios
Corchetes ([]) objeto["propiedad"] Para nombres con espacios o variables


☝️🤓
🚀 Extra
Busca información sobre el método Object.assign().

Comentarios

Compartir

Esta artículo aparece en estas rutas de aprendizaje

El curso más corto de programación (con JavaScript)

Conceptos fundamentales explicados de la manera más superficial para comenzar a entender de qué se trata la programación

Generated avatar