Objetos en JavaScript

Introducción

Bienvenido al laboratorio sobre Objetos en JavaScript. Los objetos son bloques de construcción fundamentales en JavaScript, utilizados para almacenar colecciones de datos relacionados y entidades más complejas. Consisten en pares clave-valor, donde las claves son cadenas (o Símbolos) y los valores pueden ser de cualquier tipo de dato, incluyendo otros objetos o funciones.

En este laboratorio, aprenderás a:

• Crear un objeto JavaScript utilizando la sintaxis de literal de objeto.
• Añadir propiedades (pares clave-valor) a un objeto.
• Acceder y actualizar los valores de las propiedades de un objeto.
• Añadir nuevas propiedades a un objeto existente.

Realizarás todo tu trabajo en el archivo script.js. Para ver la salida de tu código, necesitarás abrir la consola de desarrollador del navegador. Puedes hacerlo navegando a la pestaña Web 8080 y abriendo las herramientas de desarrollador (generalmente haciendo clic derecho y seleccionando "Inspeccionar", luego haciendo clic en la pestaña "Consola").

¡Empecemos!

Crear literal de objeto con llaves

En este paso, crearás tu primer objeto JavaScript. La forma más sencilla de crear un objeto es utilizando la sintaxis de literal de objeto, que es un par de llaves {}.

Primero, localiza el archivo script.js en el explorador de archivos en el lado izquierdo de tu WebIDE. Haz clic en él para abrirlo en el editor.

Ahora, añade el siguiente código a script.js para declarar una variable constante llamada car y asignarle un objeto vacío. También utilizaremos console.log() para imprimir el objeto en la consola y verificar su creación.

const car = {};

console.log(car);

Después de añadir el código, guarda el archivo. Para ver el resultado, haz clic en la pestaña Web 8080. Abre la consola de desarrollador (Clic derecho -> Inspeccionar -> Consola). Deberías ver un objeto vacío {} impreso en la consola.

Añadir pares clave-valor al objeto

Un objeto vacío no es muy útil. Los objetos están diseñados para contener datos, que añadimos como propiedades. Una propiedad es un par clave-valor. La clave es el nombre de la propiedad (una cadena de texto), y el valor son los datos asociados a esa clave.

En este paso, añadirás propiedades al objeto car directamente dentro de las llaves durante su creación. Definamos algunas propiedades para nuestro coche: su marca, modelo y año.

Modifica el código en script.js para que se vea así:

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

Aquí, make, model y year son las claves, mientras que 'Toyota', 'Camry' y 2021 son sus valores correspondientes. Observa que los valores de cadena de texto están encerrados entre comillas simples.

Guarda el archivo y vuelve a comprobar la consola de desarrollador en la pestaña Web 8080. Ahora verás el objeto impreso con sus propiedades.

Acceder a una propiedad con notación de punto

Una vez que tienes un objeto con propiedades, a menudo necesitarás recuperar el valor de una propiedad específica. La forma más común de hacerlo es con la notación de punto (.). La sintaxis es nombreObjeto.nombrePropiedad.

En este paso, accederás al model del objeto car y lo imprimirás en la consola.

Añade la siguiente línea al final de tu archivo script.js. Tu código existente debe permanecer.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

console.log(car);

// Acceder y registrar la propiedad model
console.log(car.model);

Guarda el archivo y actualiza la pestaña Web 8080. En la consola de desarrollador, ahora verás dos líneas de salida: el objeto car completo, seguido de la cadena Camry.

Actualizar asignación de valor de propiedad

Los datos en un objeto no son fijos. Puedes cambiar fácilmente el valor de una propiedad existente utilizando el operador de asignación (=). Esto se hace de la misma manera que asignarías un valor a una variable normal.

En este paso, actualizaremos el year de nuestro car de 2021 a 2022.

Añade las siguientes líneas al final de tu archivo script.js. Actualizaremos la propiedad y luego registraremos el objeto completo de nuevo para ver el cambio.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

// Actualizar la propiedad year
car.year = 2022;

console.log(car);

Para mayor claridad, puedes eliminar las sentencias console.log anteriores, pero no es obligatorio. Después de guardar el archivo, comprueba la consola en la pestaña Web 8080. La salida ahora mostrará el objeto car con el year actualizado a 2022.

Añadir nueva propiedad a objeto existente

Los objetos en JavaScript son dinámicos, lo que significa que puedes añadirles nuevas propiedades en cualquier momento después de haber sido creados. La sintaxis es la misma que al actualizar una propiedad: usa la notación de punto con el nuevo nombre de la propiedad y asígnale un valor.

En este paso final, añadirás una nueva propiedad color al objeto car.

Añade las siguientes líneas al final de tu archivo script.js. Esto añadirá la nueva propiedad y luego registrará el objeto para confirmar la adición.

const car = {
  make: "Toyota",
  model: "Camry",
  year: 2021
};

car.year = 2022;

// Añadir una nueva propiedad color
car.color = "blue";

console.log(car);

Guarda el archivo y comprueba la consola de desarrollador una última vez. El objeto car se mostrará ahora con cuatro propiedades: make, model, year, y el recién añadido color.

Resumen

¡Felicitaciones por completar el laboratorio de Objetos en JavaScript! Has aprendido con éxito las operaciones esenciales para trabajar con una de las estructuras de datos más importantes en JavaScript.

En este laboratorio, practicaste:

• Crear un objeto utilizando la sintaxis literal ({}).
• Poblar un objeto con pares clave-valor iniciales.
• Acceder a los valores de las propiedades utilizando la notación de punto (objeto.propiedad).
• Actualizar el valor de una propiedad existente.
• Añadir una nueva propiedad a un objeto dinámico.

Comprender los objetos es crucial para cualquier desarrollador de JavaScript, ya que se utilizan en todas partes, desde el almacenamiento de datos simple hasta la arquitectura de aplicaciones complejas. Sigue practicando estos conceptos para construir una base sólida en la programación con JavaScript.