10 Ejercicios resueltos de objetos en JavaScript

Ejercicios resueltos de objetos en JavaScript (Propiedades y métodos) 10 ejercicios resueltos + aprendizaje teorico

Descubre cómo dominar las propiedades y métodos de los objetos en JavaScript con ejercicios prácticos, explicaciones claras y respuestas para potenciar tus habilidades de programación.

Aprendizaje teórico

En JavaScript, un objeto es una estructura que nos permite agrupar propiedades (datos) y métodos (funciones asociadas) en un mismo lugar. Esto facilita la organización y reutilización del código, ya que podemos representar entidades del mundo real (como un usuario, un producto o un automóvil) de manera clara y ordenada. Algunos puntos clave a entender son:

• Propiedades: Son valores asignados a un objeto; pueden ser de cualquier tipo (números, cadenas, arreglos, otros objetos, etc.).
• Métodos: Son funciones que pertenecen a un objeto. Se utilizan para realizar acciones o cálculos relacionados con ese objeto.
• this: Dentro de un método, la palabra clave this hace referencia al objeto que contiene el método.
• Manipulación de propiedades: Se pueden agregar, modificar o eliminar propiedades de un objeto de forma dinámica en tiempo de ejecución.

Con estos conceptos en mente, ¡estás listo para adentrarte en la práctica!

Intento de resolución antes de la solución

Antes de que revises las respuestas, te invitamos a intentar resolver cada ejercicio por tu cuenta. De esta manera, reforzarás tus habilidades de razonamiento y te familiarizarás con la sintaxis de JavaScript. Una vez que hayas tratado de hallar la solución, podrás comparar tu resultado con las propuestas que presentamos a continuación.

10 ejercicios resueltos

Ejercicio 1: Creación y acceso a propiedades

Descripción del problema:
Crea un objeto que represente a un estudiante con las propiedades nombre, edad y curso. Muestra cada propiedad por consola.

// Creamos un objeto "estudiante" con tres propiedades
const estudiante = {
  nombre: "Ana",
  edad: 20,
  curso: "Desarrollo Web"
};

// Accedemos a las propiedades y las mostramos en consola
console.log(estudiante.nombre); // "Ana"
console.log(estudiante.edad);   // 20
console.log(estudiante.curso);  // "Desarrollo Web"

Explicación:

• Definimos el objeto estudiante con llaves {}.
• Cada propiedad se declara como clave: valor.
• Para acceder a cada propiedad, usamos la notación de punto (por ejemplo, estudiante.nombre).

Ejercicio 2: Agregar un método a un objeto

Descripción del problema:
Agrega un método a un objeto estudiante que devuelva un mensaje con el nombre y el curso. Luego, llama a ese método y muestra el resultado por consola.

// Partimos del objeto estudiante creado anteriormente (puedes reutilizarlo o crearlo de nuevo)
const estudiante = {
  nombre: "Ana",
  edad: 20,
  curso: "Desarrollo Web",
  // Agregamos un método que devuelve un mensaje de presentación
  presentarse: function() {
    return `Hola, soy ${this.nombre} y estoy en el curso de ${this.curso}.`;
  }
};

// Llamamos al método y mostramos el resultado
console.log(estudiante.presentarse());

Explicación:

• Hemos añadido la propiedad presentarse, que es una función.
• Dentro de la función, usamos this para acceder a nombre y curso del mismo objeto.
• Al llamar a estudiante.presentarse(), se ejecuta la función y se imprime el mensaje.

Ejercicio 3: Agregar y eliminar propiedades dinámicamente

Descripción del problema:
Crea un objeto auto con propiedades marca y modelo. Agrega dinámicamente la propiedad anio, muéstrala por consola y luego elimínala. Verifica que ya no exista.

const auto = {
  marca: "Toyota",
  modelo: "Corolla"
};

// Agregamos la propiedad "anio"
auto.anio = 2021;
console.log(auto.anio); // 2021

// Eliminamos la propiedad "anio"
delete auto.anio;

// Verificamos que "anio" ya no existe
console.log(auto.anio); // undefined

Explicación:

• Para agregar propiedades, basta con asignar un valor: auto.anio = 2021.
• Para eliminar propiedades, utilizamos la palabra clave delete.
• Al imprimir auto.anio tras la eliminación, obtenemos undefined porque la propiedad ya no existe.

Ejercicio 4: Verificar la existencia de una propiedad

Descripción del problema:
Verifica si el objeto auto creado en el ejercicio anterior contiene la propiedad anio. Muestra un mensaje distinto según exista o no exista la propiedad.

const auto = {
  marca: "Toyota",
  modelo: "Corolla"
};

// Verificamos si "anio" existe en "auto"
if ("anio" in auto) {
  console.log("La propiedad 'anio' existe en el objeto.");
} else {
  console.log("La propiedad 'anio' no existe en el objeto.");
}

Explicación:

• El operador in verifica si el objeto contiene una propiedad con el nombre especificado.
• Al no haber agregado auto.anio, el resultado será “La propiedad ‘anio’ no existe en el objeto.”
• Si la hubiéramos agregado antes, el resultado cambiaría.

Ejercicio 5: Iterar sobre todas las propiedades de un objeto

Descripción del problema:
Utiliza un bucle para imprimir cada propiedad y valor de un objeto persona que contenga nombre, apellido y edad.

const persona = {
  nombre: "Carlos",
  apellido: "García",
  edad: 30
};

// Recorremos el objeto con un bucle "for...in"
for (let clave in persona) {
  console.log(clave + ": " + persona[clave]);
}

Explicación:

• El bucle for...in nos permite iterar sobre todas las propiedades enumerables de un objeto.
• Accedemos a cada valor con la sintaxis de corchetes (persona[clave]) para mostrar el contenido dinámicamente.

Ejercicio 6: Uso de this dentro de un objeto

Descripción del problema:
Crea un objeto producto con propiedades nombre, precio y un método mostrarInfo que muestre por consola el nombre y el precio usando this.

const producto = {
  nombre: "Laptop",
  precio: 1500,
  mostrarInfo: function() {
    // Usamos "this" para acceder a las propiedades del objeto
    console.log(`El producto ${this.nombre} cuesta $${this.precio}.`);
  }
};

// Llamamos al método para ver el resultado
producto.mostrarInfo();

Explicación:

• El objeto producto agrupa la información de la laptop.
• El método mostrarInfo emplea this.nombre y this.precio para referirse a las propiedades del mismo objeto.

Ejercicio 7: Clonar un objeto

Descripción del problema:
Clona el objeto producto y asigna la copia a una variable nueva llamada productoClonado. Modifica el precio en la copia para comprobar que el original no se ve afectado.

const producto = {
  nombre: "Laptop",
  precio: 1500
};

// Hacemos una copia superficial usando Object.assign
const productoClonado = Object.assign({}, producto);

// Modificamos el precio solo en la copia
productoClonado.precio = 2000;

console.log("Producto original:", producto); 
// { nombre: "Laptop", precio: 1500 }

console.log("Producto clonado:", productoClonado); 
// { nombre: "Laptop", precio: 2000 }

Explicación:

• Object.assign permite crear una copia superficial de un objeto.
• Cambiar productoClonado.precio no afecta al objeto original, ya que ahora son objetos independientes.

Ejercicio 8: Crear un objeto mediante una función constructora

Descripción del problema:
Crea una función constructora Persona que reciba nombre y edad como parámetros. Genera dos instancias diferentes y muéstralas por consola.

// Definimos la función constructora Persona
function Persona(nombre, edad) {
  this.nombre = nombre;
  this.edad = edad;
}

// Creamos dos instancias de Persona
const persona1 = new Persona("Laura", 25);
const persona2 = new Persona("David", 40);

console.log(persona1); // Persona { nombre: "Laura", edad: 25 }
console.log(persona2); // Persona { nombre: "David", edad: 40 }

Explicación:

• Las funciones constructoras se utilizan como “plantillas” para crear varios objetos con las mismas propiedades.
• Usamos la palabra clave new para instanciar el objeto.

Ejercicio 9: Métodos de objeto para obtener claves y valores

Descripción del problema:
Crea un objeto ciudad con propiedades nombre y poblacion. Utiliza Object.keys y Object.values para mostrar las claves y los valores del objeto.

const ciudad = {
  nombre: "Madrid",
  poblacion: 3200000
};

// Obtenemos las claves con Object.keys
const claves = Object.keys(ciudad);
console.log(claves); // ["nombre", "poblacion"]

// Obtenemos los valores con Object.values
const valores = Object.values(ciudad);
console.log(valores); // ["Madrid", 3200000]

Explicación:

• Object.keys(objeto) devuelve un arreglo con las claves del objeto.
• Object.values(objeto) devuelve un arreglo con los valores correspondientes.

Ejercicio 10: Combinar objetos con el operador spread

Descripción del problema:
Tienes dos objetos usuarioInfo y usuarioExtra. Combina ambos en un nuevo objeto usuarioCompleto utilizando el operador spread (...). Muestra el resultado final.

const usuarioInfo = {
  nombre: "Sofia",
  edad: 28
};

const usuarioExtra = {
  ciudad: "Lima",
  profesion: "Ingeniera"
};

// Usamos el operador spread para fusionar propiedades
const usuarioCompleto = {
  ...usuarioInfo,
  ...usuarioExtra
};

console.log(usuarioCompleto);
// {
//   nombre: "Sofia",
//   edad: 28,
//   ciudad: "Lima",
//   profesion: "Ingeniera"
// }

Explicación:

• El operador spread (...) permite extraer las propiedades de un objeto y fusionarlas con otro de forma sencilla.
• El resultado es un nuevo objeto usuarioCompleto que combina todas las propiedades de usuarioInfo y usuarioExtra.

Preguntas frecuentes (FAQs) Sobre Objetos en JavaScript

¡Enhorabuena! Has aprendido a crear objetos, manipular propiedades y métodos, usar this y hasta emplear funciones constructoras. Estos son pilares fundamentales para tu progreso en JavaScript. Continúa practicando e integrando estos conceptos en proyectos reales para ganar confianza y habilidad.

¿Deseas seguir mejorando tus destrezas de programación? Visita nuestro blog para descubrir más tutoriales, tips avanzados y prácticas recomendadas que te ayudarán a convertirte en un experto en JavaScript. ¡Te esperamos para seguir aprendiendo juntos!