Objetos

javascript Objetos

📦 ¿Qué son los objetos?

Los objetos son una forma de agrupar datos relacionados en un solo lugar.

Analogía

Piensa en un perfil de red social:

  • Contiene información organizada sobre una persona
  • Cada dato tiene su etiqueta (nombre de usuario, biografía, contacto)
  • Puedes acceder a cualquier información buscando su etiqueta

Los objetos en JavaScript funcionan de manera similar: organizan información relacionada con etiquetas (propiedades) para acceder fácilmente a ella.

🔬 Anatomía de un objeto

Los objetos están compuestos por elementos a los que llamamos entradas (entries).

A su vez, cada entrada tiene dos partes: una llave (key) y un valor (value).
INFO

A la llave o key también se le conoce como propiedad

👤 Creando un perfil de red social

Volviendo a la analogía principal, podemos crear un perfil con el código siguiente:

var perfilSocial = {
  nombreUsuario: "usuario1",
  biografia: "Apasionado por la programación",
  seguidores: 1250,
  verificado: true,
};

🔍 ¿Cómo acceder a los valores de un objeto?

🔸 Notación punto (.)

Para acceder a los datos que se encuentran dentro del objeto podemos usar algo que llamamos notación punto.

Si queremos acceder al nombreUsuario, haríamos algo como:

console.log(perfilSocial.nombreUsuario);

Terminal window
usuario1

🔸 Notación de corchetes ([])

También podemos usar la notación de corchetes:

console.log(perfilSocial["seguidores"]);

Terminal window
1250

Aunque esta notación la usamos para acceder a propiedades que tienen espacios o caracteres especiales en su nombre, como en este otro ejemplo:

let perfilSocial = {
  "información de contacto": "usuario@ejemplo.com",
  "redes-sociales": "@usuario1",
};


// Accediendo a las propiedades con corchetes
console.log(perfilSocial["información de contacto"]); // "usuario@ejemplo.com"
console.log(perfilSocial["redes-sociales"]); // "@usuario1"

📌 ¿Por qué usar corchetes en estos casos?

  • Si intentamos acceder con perfilSocial.información de contacto, JavaScript dará error porque los espacios no son válidos en notación de punto.

  • Con perfilSocial["información de contacto"] podemos acceder sin problemas.

💡 También podemos usar variables como llaves en la notación de corchetes:

let datoDeseado = "información de contacto";
console.log(perfilSocial[datoDeseado]); // "usuario@ejemplo.com"
☝️🤓
🏋️‍♂️ Ejercicio

Crea un objeto llamado producto que contenga las siguientes propiedades:

  • nombre: “Laptop”
  • precio: 1200
  • disponible: true
  • características: [“8GB RAM”, “256GB SSD”, “15.6 pulgadas”]

Luego, muestra el objeto completo en la consola.

Ver solución
let producto = {
  nombre: "Laptop",
  precio: 1200,
  disponible: true,
  características: ["8GB RAM", "256GB SSD", "15.6 pulgadas"]
};


console.log(producto);
🏋️‍♂️ Ejercicio

Usando el siguiente objeto:

let persona = {
  nombre: "Carlos",
  apellido: "Gómez",
  edad: 28,
  profesion: "Desarrollador"
};

Utiliza la notación punto para:

  1. Mostrar el nombre completo (nombre y apellido) en la consola
  2. Cambiar la edad a 29
  3. Mostrar la profesión en la consola
Ver solución
// 1. Mostrar nombre completo
console.log(persona.nombre + " " + persona.apellido);


// 2. Cambiar la edad
persona.edad = 29;


// 3. Mostrar profesión
console.log(persona.profesion);
🏋️‍♂️ Ejercicio

Dado el siguiente objeto con propiedades que contienen espacios:

let ficha = {
  "nombre completo": "Ana María López",
  "fecha de nacimiento": "15-05-1995",
  "lugar de residencia": "Barcelona"
};
  1. Utiliza la notación de corchetes para mostrar el nombre completo
  2. Crea una variable llamada propiedad con el valor “lugar de residencia” y úsala para acceder a esa propiedad
  3. Añade una nueva propiedad llamada “código postal” con el valor “08001”
Ver solución
// 1. Mostrar nombre completo
console.log(ficha["nombre completo"]);


// 2. Usar variable para acceder a propiedad
let propiedad = "lugar de residencia";
console.log(ficha[propiedad]);


// 3. Añadir nueva propiedad
ficha["código postal"] = "08001";
🚀 Extra
  • ¿Qué sucede si intentas acceder a una propiedad que no existe en un objeto?
  • ¿Cómo se puede verificar si una propiedad existe dentro de un objeto en JavaScript? - ¿Qué hace el método Object.keys(objeto) y para qué sirve?

Comentarios