Saltar al contenido principal

Objetos en JavaScript: Guía para Principiantes con Ejemplos

Objetos en JavaScript: Guía para Principiantes con Ejemplos

Los objetos en JavaScript son estructuras de datos que permiten almacenar múltiples valores y funcionalidades relacionadas en una sola entidad. Los objetos son fundamentales en la programación orientada a objetos y se utilizan ampliamente en JavaScript para organizar y gestionar datos complejos.

¿Qué es un objeto en JavaScript?​

Un objeto en JavaScript es una colección de propiedades, donde cada propiedad es una asociación entre un nombre (clave) y un valor. Los valores pueden ser de cualquier tipo de dato, incluyendo otros objetos y funciones (métodos). Los objetos permiten agrupar datos y comportamientos relacionados, facilitando la organización y manipulación de la información.

Creación de Objetos​

Puedes crear un objeto utilizando llaves {} y definiendo propiedades y métodos dentro de ellas. Aquí tienes un ejemplo básico:

let persona = {
  nombre: "Juan",
  edad: 30,
  saludar: function () {
    console.log("Hola, mi nombre es " + this.nombre);
  },
};

En este ejemplo, hemos creado un objeto llamado persona con dos propiedades (nombre y edad) y un método (saludar).

Propiedades de los objetos: definición y uso​

Las propiedades de un objeto son pares clave-valor que almacenan datos relacionados con el objeto. Puedes definir propiedades utilizando la notación de punto (.) o la notación de corchetes ([]).

let coche = {
  marca: "Toyota",
  modelo: "Corolla",
  año: 2020,
};

console.log(coche.marca); // Acceso a la propiedad 'marca' usando notación de punto

console.log(coche["modelo"]); // Acceso a la propiedad 'modelo' usando notación de corchetes

Acceso a Propiedades y Métodos​

Puedes acceder a las propiedades y métodos de un objeto utilizando la notación de punto (.) o la notación de corchetes ([]).

console.log(persona.nombre); // Acceso a la propiedad 'nombre'

persona.saludar(); // Llamada al método 'saludar'

console.log(persona["edad"]); // Acceso a la propiedad 'edad' usando corchetes

Modificación de Propiedades​

Puedes modificar las propiedades de un objeto asignándoles nuevos valores.

persona.edad = 31; // Modificación de la propiedad 'edad'

console.log(persona.edad); // Resultado: 31

Añadir Nuevas Propiedades y Métodos​

Puedes añadir nuevas propiedades y métodos a un objeto en cualquier momento.

persona.apellido = "Pérez"; // Añadir una nueva propiedad 'apellido'

persona.despedir = function () {
  console.log("Adiós, " + this.nombre);
}; // Añadir un nuevo método 'despedir'

persona.despedir(); // Llamada al nuevo método 'despedir'

Eliminación de Propiedades​

Puedes eliminar propiedades de un objeto utilizando la palabra clave delete.

delete persona.apellido; // Eliminar la propiedad 'apellido'

console.log(persona.apellido); // Resultado: undefined

Métodos en objetos: funciones como propiedades​

Los métodos son funciones que están asociadas a un objeto y se utilizan para definir comportamientos relacionados con ese objeto. Puedes definir métodos dentro de un objeto de la siguiente manera:

let calculadora = {
  sumar: function (a, b) {
    return a + b;
  },
  restar: function (a, b) {
    return a - b;
  },
};

console.log(calculadora.sumar(5, 3)); // Resultado: 8

console.log(calculadora.restar(5, 3)); // Resultado: 2

this en JavaScript: cómo funciona dentro de un objeto​

El valor de this dentro de un método de un objeto se refiere al objeto mismo. Esto permite que los métodos accedan a las propiedades y otros métodos del objeto.

let persona = {
  nombre: "Ana",
  edad: 25,
  presentarse: function () {
    console.log(
      "Hola, soy " + this.nombre + " y tengo " + this.edad + " años."
    );
  },
};

persona.presentarse(); // Resultado: Hola, soy Ana y tengo 25 años.

Recorrer un objeto con for...in y Object.keys​

Puedes recorrer las propiedades de un objeto utilizando el bucle for...in o el método Object.keys().

let libro = {
  titulo: "1984",
  autor: "George Orwell",
  año: 1949,
};

// Usando for...in

for (let clave in libro) {
  console.log(clave + ": " + libro[clave]);
}

// Usando Object.keys()

let claves = Object.keys(libro);

claves.forEach(function (clave) {
  console.log(clave + ": " + libro[clave]);
});

Objetos anidados: trabajar con estructuras complejas​

Los objetos pueden contener otros objetos como propiedades, lo que permite crear estructuras de datos más complejas.

let estudiante = {
  nombre: "Carlos",
  edad: 22,
  direccion: {
    calle: "Calle Falsa 123",
    ciudad: "Springfield",
    pais: "USA",
  },
};

console.log(estudiante.direccion.calle); // Acceso a la propiedad 'calle' del objeto anidado 'direccion'

Comparación de objetos: igualdad y referencias​

En JavaScript, los objetos se comparan por referencia, no por valor. Esto significa que dos objetos son iguales solo si apuntan a la misma ubicación en memoria.

let obj1 = { clave: "valor" };

let obj2 = obj1; // obj2 apunta a la misma referencia que obj1

let obj3 = { clave: "valor" }; // obj3 es un objeto diferente con el mismo contenido

console.log(obj1 === obj2); // Resultado: true (misma referencia)

console.log(obj1 === obj3); // Resultado: false (diferentes referencias)

Copiar y clonar objetos: Object.assign y spread operator​

Puedes copiar y clonar objetos utilizando Object.assign() o el operador de propagación (spread operator).

let original = { a: 1, b: 2 };

// Usando Object.assign()

let copia1 = Object.assign({}, original);

// Usando spread operator

let copia2 = { ...original };

console.log(copia1); // Resultado: { a: 1, b: 2 }

console.log(copia2); // Resultado: { a: 1, b: 2 }

Convertir objetos en arrays y viceversa​

Puedes convertir un objeto en un array utilizando Object.entries(), Object.keys() o Object.values(). Para convertir un array en un objeto, puedes usar el método reduce().

let objeto = { a: 1, b: 2, c: 3 };

// Convertir objeto en array de pares clave-valor

let entries = Object.entries(objeto);
console.log(entries);
// Resultado: [['a', 1], ['b', 2], ['c', 3]]

// Convertir objeto en array de claves

let keys = Object.keys(objeto);
console.log(keys);
// Resultado: ['a', 'b', 'c']

// Convertir objeto en array de valores

let values = Object.values(objeto);
console.log(values);
// Resultado: [1, 2, 3]

// Convertir array de pares clave-valor en objeto

let arrayDePares = [
  ["x", 10],
  ["y", 20],
  ["z", 30],
];
let nuevoObjeto = Object.fromEntries(arrayDePares);
console.log(nuevoObjeto);
// Resultado: { x: 10, y: 20, z: 30 }

// Convertir array en objeto usando reduce()

let array = ["manzana", "pera", "naranja"];
let objetoDesdeArray = array.reduce((acc, valor, indice) => {
  acc[indice] = valor;
  return acc;
}, {});
console.log(objetoDesdeArray);
// Resultado: { 0: 'manzana', 1: 'pera', 2: 'naranja' }

Objetos integrados en JavaScript (Math y Date)​

JavaScript proporciona varios objetos integrados que ofrecen funcionalidades útiles. Algunos de los más comunes incluyen:

  • Math: Proporciona propiedades y métodos para realizar operaciones matemáticas.
console.log(Math.PI); // Resultado: 3.141592653589793

console.log(Math.sqrt(16)); // Resultado: 4
  • Date: Permite trabajar con fechas y horas.
let fechaActual = new Date();

console.log(fechaActual); // Resultado: Fecha y hora actual

console.log(fechaActual.getFullYear()); // Resultado: Año actual

Buenas prácticas al trabajar con objetos en JavaScript​

  • Usa nombres descriptivos para las propiedades y métodos.

  • Evita modificar objetos globales para prevenir conflictos.

  • Utiliza const para declarar objetos que no deben ser reasignados.

  • Considera usar Object.freeze() para hacer un objeto inmutable si no deseas que sus propiedades sean modificadas.

Recursos
Ejercicios

💻 Prueba estos ejercicios básicos sobre Objetos en JavaScript:

Creando un Objeto de Persona con JavaScript

Función que Retorna un Objeto