Objetos en JavaScript: ¿Qué son, para que sirven? Ejemplos!

Los objetos en JavaScript son una estructura fundamental que permite almacenar y organizar datos en forma de clave-valor. ¿Qué son, para qué sirven y cómo funcionan? En esta guía, te explicaremos cómo crear un objeto, sus características esenciales y te mostraremos un ejemplo práctico para que los utilices de manera eficiente en tu código. ¡Descubre cómo dominar esta herramienta clave en JavaScript!

1. ¿Qué son los objetos en JavaScript?

1. ¿Cómo escribir un objeto? Con un ejemplo:
2. Clave (Key) en objetos JavaScript:
3. Valor (Value): El dato asociado a la clave.

En JavaScript, un objeto es una estructura de datos compleja que permite almacenar y organizar datos en forma de pares clave-valor.

Estos pares forman la base de cómo los objetos funcionan ya que no solo almacenan datos, sino que también puede incluir funciones que actúan como métodos para interactuar con esos datos

En otras palabras….

Imagina un objeto como una caja que contiene diferentes elementos, cada uno con su propia etiqueta. En JavaScript, esta caja es una estructura de datos que nos permite agruparlos en forma de pares clave-valor (las etiquetas) y métodos (las acciones que puede realizar la caja con dichos datos o elementos).

1.1. ¿Cómo escribir un objeto? Con un ejemplo:

La estructura o sintaxis para escribir o hacer un objeto en JavaScript es:

const objeto = {
    clave1: valor1,
    clave2: valor2,
    clave3: valor3
};Lenguaje del código: JavaScript (javascript)

Ahora, teniendo en cuenta esta sintaxis, vamos a crear un objeto que representa los detalles de un producto de una tienda:

const producto = {
    id: 101,
    nombre: "Laptop Gamer",
    precio: 1500,
    descripcion: "Laptop de alto rendimiento con procesador Intel i7 y 16GB RAM.",
    categoria: "Electrónica"
};Lenguaje del código: JavaScript (javascript)

Aquí dejamos un análisis de cada elemento que compone este objeto:

1. const
   • const es la palabra clave utilizada para declarar la variable producto.
   • Con const indicas que la referencia de la variable producto no puede cambiar. Es decir, no puedes reasignar la variable con otro valor, como:
   • Sin embargo, puedes modificar las propiedades internas del objeto (ampliaremos)
2. producto
   • producto es el nombre de la variable. Este nombre se utiliza para acceder al contenido del objeto, que en este caso representa la información de un producto.
3. Claves (o propiedades)
   • Las claves son id, nombre, precio, descripcion, stock, y categoria.
   • Estas claves son únicas dentro del objeto y actúan como identificadores para los valores asociados.
4. Valores
   • Los valores asociados a las claves son: 101, "Laptop Gamer", 1500, "Laptop de alto rendimiento con procesador Intel i7 y 16GB RAM.", y "Electrónica".
   • Los valores pueden ser de cualquier tipo de dato, como números, cadenas, booleanos, funciones, arrays, u otros objetos. En el ejemplo que proporcionamos, la relación clave-valor y sus respectivos tipos de datos son:
     • id: 101 → número.
     • nombre: "Laptop Gamer" → cadena de texto.
     • precio: 1500 → número.
     • descripcion: "Laptop de alto rendimiento con procesador Intel i7 y 16GB RAM." → cadena de texto.
     • stock: 25 → número.
     • categoria: "Electrónica" → cadena de texto.
5. Relación clave-valor
   • Como dijimos, cada par en el objeto sigue la relación clave: valor.
   • Ejemplo:
     • La clave nombre tiene asociado el valor "Laptop Gamer".
     • La clave precio tiene asociado el valor 1500.
6. Uso del objeto: El nombre de la variable (producto) se usa para acceder a las claves y valores. Esto se puede hacer de dos maneras (ampliamos en punto 3):
   • Notación de punto (.):
     • Se utiliza cuando conoces el nombre de la clave de antemano.

console.log(producto.nombre); // "Laptop Gamer"
console.log(producto.precio); // 1500Lenguaje del código: JavaScript (javascript)

1. Notación de corchetes ([]):
   • Se usa cuando el nombre de la clave está en una variable o no lo conoces de antemano. Las claves deben ir como cadenas de texto entre comillas.

console.log(producto["descripcion"]); // "Laptop de alto rendimiento con procesador Intel i7 y 16GB RAM."

let claveDinamica = "stock";
console.log(producto[claveDinamica]); // 25Lenguaje del código: JavaScript (javascript)

1.3. Clave (Key) en objetos JavaScript:

En JavaScript, una clave (también llamada propiedad o atributo) es el nombre que identifica un dato almacenado dentro de un objeto. Cada clave está asociada a un valor, formando un par clave-valor.

1.3.1. Características principales de las claves:

1. Son siempre cadenas de texto o símbolos:
   • Aunque se pueden escribir como nombres simples (sin comillas), internamente JavaScript las convierte en cadenas de texto.
   • También puedes usar Symbol como clave.
2. Permiten acceder a los valores asociados:
   • Las claves actúan como «nombres» que te permiten recuperar o modificar los valores dentro del objeto.
3. Un objeto puede tener múltiples claves:
   • Cada clave debe ser única dentro del objeto. Si defines una clave repetida, su valor más reciente sobrescribe al anterior.

1.3.2. Diferentes maneras de definir las claves:

Existen diferentes maneras en las que puedes definir y usar claves en los objetos. Vamos a hacer un resumen rápido para organizarlo mejor:

A- CLAVES SIMPLES (Nombres Válidos De Identificadores)

• Son claves sin comillas, y deben cumplir con las reglas de nombres válidos de identificadores en JavaScript (sin espacios, sin números al inicio y sin caracteres especiales).
• Método de acceso: Se puede usar la notación de punto . o la notación de corchetes []. (con método de acceso nos referimos a la manera en vamos a hacer uso del objeto en la práctica, en estos casos lo imprimimos en la consola usando console.log)

Ejemplo:

const persona = {
  nombre: "Ana",  // Clave simple: nombre
  edad: 30,       // Clave simple: edad
};
console.log(persona.nombre);   // Resultado: Ana (acceso con notación de punto)
console.log(persona["edad"]);  // Resultado: 30 (acceso con notación de corchetes)Lenguaje del código: JavaScript (javascript)

Explicación:

• nombre y edad son claves simples porque no tienen espacios ni caracteres especiales.
• Puedes acceder al valor de la clave nombre utilizando la notación de punto (persona.nombre).
• También puedes acceder al valor de la clave edad usando la notación de corchetes (persona["edad"]), que es útil si trabajas con claves como variables dinámicas.

B- CLAVES COMO CADENAS DE TEXTO:

• Cuando las claves contienen espacios, números al inicio o caracteres especiales, deben escribirse entre comillas simples (') o dobles (").
• Método de acceso: Solo se puede acceder usando la notación de corchetes [].

Ejemplo:

const libro = {
  "título del libro": "JavaScript Profesional", // Clave con espacios
  "2024": "Año de publicación",               // Clave que comienza con un número
};
console.log(libro["título del libro"]); // Resultado: JavaScript Profesional
console.log(libro["2024"]);             // Resultado: Año de publicaciónLenguaje del código: JavaScript (javascript)

Explicación:

• La clave "título del libro" contiene un espacio, por lo que debe ir entre comillas.
• La clave "2024" comienza con un número, por lo que también necesita comillas.
• No puedes usar la notación de punto para acceder a estas claves, porque JavaScript la reserva solo para claves válidas como identificadores. Por eso, usamos la notación de corchetes.

C- CLAVES DINÁMICAS (Computed Property Names)

• Permiten definir claves dinámicamente usando expresiones dentro de corchetes []. Las claves se generan en tiempo de ejecución.
• Método de acceso: Se accede con la notación de corchetes [].

Ejemplo:

const claveDinamica = "apellido";
const persona = {
  nombre: "Luis",
  [claveDinamica]: "Gómez", // Clave generada dinámicamente
};
console.log(persona["apellido"]); // Resultado: Gómez
console.log(persona.nombre);      // Resultado: LuisLenguaje del código: JavaScript (javascript)

Explicación:

• La variable claveDinamica tiene el valor "apellido". Al usar [claveDinamica] como clave dentro del objeto, JavaScript evalúa el valor de la variable y lo convierte en una clave ("apellido").
• Para acceder a esta clave dinámica (apellido), debes usar la notación de corchetes:javascriptCopiar códigopersona["apellido"];
• Este enfoque es muy útil cuando necesitas claves personalizadas o dependientes de variables en tu código.

D- CLAVES COMO Symbol

• Puedes usar un valor del tipo Symbol como clave. Symbol garantiza que las claves sean únicas, lo cual evita conflictos con otras propiedades del objeto.
• Método de acceso: Debes usar la notación de corchetes [].

Ejemplo:

const claveUnica = Symbol("id");
const usuario = {
  nombre: "Carlos",
  [claveUnica]: 12345, // Clave con Symbol
};
console.log(usuario.nombre);         // Resultado: Carlos
console.log(usuario[claveUnica]);    // Resultado: 12345
console.log(usuario);                // Resultado: { nombre: "Carlos", [Symbol(id)]: 12345 }Lenguaje del código: JavaScript (javascript)

Explicación:

• La clave claveUnica es un Symbol creado con Symbol("id").
• Cuando usas [claveUnica] para definir una propiedad, JavaScript la trata como una clave única y no la colisiona con otras propiedades (aunque tengan el mismo nombre de descripción).
• Para acceder a la clave Symbol, debes usar la notación de corchetes (usuario[claveUnica]).
• Si inspeccionas el objeto, verás que la clave se representa como [Symbol(id)], lo cual indica que es única.

¿Por qué es importante esto?

• Estas diferentes formas te dan flexibilidad total al trabajar con objetos.
• Te permiten personalizar claves según tus necesidades, incluso en tiempo de ejecución.
• Saber cómo y cuándo usar cada una te ayuda a escribir un código más limpio, seguro y dinámico.

Resumen en cuadro final:

Forma de Definir Claves	Ejemplo	Acceso
Claves Simples	nombre: "Ana"	objeto.nombre o objeto["nombre"]
Claves Como Cadenas De Texto	"título del libro": "JavaScript Profesional"	objeto["título del libro"]
Claves Dinámicas (Computed)	[claveDinamica]: "valor"	objeto["claveDinamica"]
Claves Como Symbol	[claveUnica]: 12345	objeto[claveUnica]

1.4. Valor (Value): El dato asociado a la clave.

En JavaScript, los valores (values) en los objetos son los datos asociados a cada clave. Un valor puede ser cualquier tipo de dato válido en JavaScript, incluyendo:

• Tipos complejos, como objetos, arrays o funciones.
• Tipos de datos primitivos (números, cadenas, booleanos, null, undefined, Symbol, etc.).

1.4.1. Cuadro resumen: Tipos de valores en objetos:

Tipo de Valor	Ejemplo	Descripción
Número	precio: 1500	Valores numéricos.
String	nombre: "Juan"	Cadenas de texto.
Booleano	activo: true	Valores true o false.
null y undefined	descripcion: null, stock: undefined	Representan ausencia de valor.
Objeto	direccion: { calle: "A", ciudad: "B" }	Permite anidar más objetos.
Array	estudiantes: ["Ana", "Luis"]	Almacena listas ordenadas de valores.
Función	sumar: function(a, b) { return a + b; }	Métodos que se pueden ejecutar.

1.4.2. Importancia de comprender los valores:

1. Permite manejar datos complejos y organizarlos dentro de objetos.
2. Facilita la creación de estructuras dinámicas y reutilizables.
3. El uso de funciones como valores te da flexibilidad para realizar operaciones directamente dentro de los objetos.

2. ¿Para que sirven los objetos en JavaScript?

1. Representar entidades del mundo real:
2. Manipular listas de datos complejos
3. Trabajar con datos dinámicos o API
4. Agrupar funcionalidad relacionada
5. Facilitar la reutilización del código
6. Resumen de los beneficios de los objetos:

Los objetos en JavaScript sirven para organizar, almacenar y manipular datos de una forma estructurada y eficiente.

Son una herramienta fundamental porque permiten agrupar datos relacionados y comportamientos (métodos) dentro de una misma entidad.

Aquí dejamos algunos ejemplos prácticos:

2.1. Representar entidades del mundo real:

Los objetos son perfectos para representar cosas del mundo real con características y comportamientos.

Ejemplo: Representar una persona:

const persona = {
    nombre: "Manuel",
    edad: 36,
    profesion: "Programador",
    saludar: function() {
        console.log(`Hola, soy ${this.nombre} y tengo ${this.edad} años.`);
    }
};

persona.saludar();Lenguaje del código: JavaScript (javascript)

Explicación:

• nombre, edad, y profesion son propiedades (datos que describen a la persona).
• saludar es un método (función dentro del objeto) que realiza una acción relacionada con la persona.
• this se refiere al objeto actual (persona), permitiendo acceder a sus propiedades.

¿Por qué usar un objeto aquí?

• Toda la información de la persona está agrupada en una única estructura (persona).
• Es fácil acceder a los datos y ejecutar comportamientos relacionados.

2.2. Manipular listas de datos complejos

Cuando trabajas con múltiples elementos similares, puedes usar arrays de objetos.

Ejemplo: Lista de productos en una tienda

const productos = [
    { id: 1, nombre: "Laptop", precio: 1200 },
    { id: 2, nombre: "Teclado", precio: 50 },
    { id: 3, nombre: "Ratón", precio: 25 }
];

// Mostrar el nombre y precio de cada producto
productos.forEach(producto => {
    console.log(`Producto: ${producto.nombre}, Precio: $${producto.precio}`);
});Lenguaje del código: JavaScript (javascript)

Explicación:

• Cada elemento del array productos es un objeto con propiedades id, nombre y precio.
• El método forEach recorre el array y accede a cada objeto.
• Se imprime el nombre y precio de cada producto.

¿Por qué usar objetos aquí?

• Cada producto tiene múltiples características (id, nombre, precio).
• Es más práctico y legible manejar datos complejos como objetos que como variables sueltas.

2.3. Trabajar con datos dinámicos o API

Los objetos son esenciales cuando trabajas con datos dinámicos provenientes de una API o base de datos.

Ejemplo: Recibir datos de un usuario desde una API

const usuario = {
    id: 101,
    nombre: "Manuel",
    email: "[email protected]",
    rol: "editor"
};

// Mostrar la información del usuario
console.log(`ID: ${usuario.id}`);
console.log(`Nombre: ${usuario.nombre}`);
console.log(`Email: ${usuario.email}`);
console.log(`Rol: ${usuario.rol}`);Lenguaje del código: JavaScript (javascript)

Explicación:

• Las API usualmente envían datos en formato JSON, que es muy similar a los objetos de JavaScript.
• Puedes almacenar esos datos directamente en un objeto y acceder a ellos con notación de punto o corchetes.

¿Por qué usar un objeto aquí?

• Representar datos estructurados de forma ordenada.
• Facilita la interacción con información proveniente de fuentes externas.

2.4. Agrupar funcionalidad relacionada

Los objetos permiten encapsular funciones relacionadas con los datos.

Ejemplo: Objeto para manejar una cuenta bancaria

const cuentaBancaria = {
    titular: "Manuel",
    saldo: 1000,
    depositar: function(cantidad) {
        this.saldo += cantidad;
        console.log(`Depósito de $${cantidad}. Nuevo saldo: $${this.saldo}`);
    },
    retirar: function(cantidad) {
        if (cantidad <= this.saldo) {
            this.saldo -= cantidad;
            console.log(`Retiro de $${cantidad}. Saldo restante: $${this.saldo}`);
        } else {
            console.log("Fondos insuficientes.");
        }
    }
};

cuentaBancaria.depositar(500);
cuentaBancaria.retirar(300);
cuentaBancaria.retirar(1500);Lenguaje del código: JavaScript (javascript)

Explicación:

• titular y saldo son propiedades (estado de la cuenta).
• depositar y retirar son métodos (acciones que se pueden realizar sobre la cuenta).
• Usamos this para referirnos al objeto actual y acceder a saldo.

¿Por qué usar un objeto aquí?

• Encapsula datos y funciones relacionados en una única entidad.
• Facilita la manipulación del estado del objeto (saldo, titular) de forma segura y ordenada.

2.5. Facilitar la reutilización del código

Los objetos son ideales cuando quieres reutilizar plantillas para crear múltiples instancias con datos similares.

Ejemplo: Crear múltiples usuarios con una función constructora

function Usuario(id, nombre, email) {
    this.id = id;
    this.nombre = nombre;
    this.email = email;
    this.mostrarInfo = function() {
        console.log(`ID: ${this.id}, Nombre: ${this.nombre}, Email: ${this.email}`);
    };
}

const usuario1 = new Usuario(1, "Manuel", "[email protected]");
const usuario2 = new Usuario(2, "Ana", "[email protected]");

usuario1.mostrarInfo();
usuario2.mostrarInfo();Lenguaje del código: JavaScript (javascript)

Explicación:

• La función Usuario actúa como una plantilla para crear múltiples usuarios.
• this asigna valores únicos a cada propiedad.
• Creamos usuario1 y usuario2 con datos distintos.

¿Por qué usar un objeto aquí?

• Reutilizas una plantilla (función constructora) para evitar repetir código.
• Cada objeto creado es independiente y almacena datos únicos.

2.6. Resumen de los beneficios de los objetos:

1. Organización: Agrupan datos relacionados en una sola estructura.
2. Reutilización: Facilitan la creación de plantillas para datos repetitivos.
3. Escalabilidad: Pueden crecer agregando propiedades o métodos según se necesite.
4. Interactividad: Permiten representar entidades del mundo real y manipular sus datos.
5. Dinamicidad: Trabajan bien con datos externos (APIs, JSON, bases de datos).
6. Encapsulamiento: Agrupan datos y comportamiento relacionado, mejorando la estructura del código.

En la práctica real, los objetos son fundamentales porque hacen que el código sea más limpio, organizado y eficiente al manejar información compleja o dinámica.

3. ¿Cómo acceder a las propiedades (pares clave-valor) de los objetos.?

1. ¿Qué significa acceder a las propiedades de un objeto?
2. Notación de punto (objeto.propiedad):
3. Notación de corchetes (objeto[«propiedad»]):
4. Ejemplo comparativo: N. de Punto VS. N. de Corchetes:
5. Cuándo usar cada notación:

3.1. ¿Qué significa acceder a las propiedades de un objeto?

Acceder a las propiedades de un objeto significa obtener, modificar o utilizar los valores asociados a las claves (keys) de ese objeto.

Acceder a las propiedades nos permite interactuar con la información que contiene el objeto para realizar acciones concretas. Alguna de estas acciones pueden ser:

1. Manipulación de Datos
   Para leer, actualizar o eliminar información que el objeto almacena.
   • Ejemplo: Obtener la edad de un usuario, cambiar el precio de un producto, etc.
2. Reutilización de Información
   Facilita el uso de la información del objeto en funciones, cálculos, o en la interfaz de usuario.
   • Ejemplo: Mostrar el nombre de un cliente en una página web.
3. Iterar sobre los Datos
   Es común acceder a las propiedades cuando trabajamos con muchos datos (por ejemplo, en arrays de objetos o bucles).
   • Ejemplo: Mostrar una lista de productos en una tienda en línea.
4. Condiciones y Lógica de Negocios
   Permite ejecutar lógica basada en los valores de las propiedades.
   • Ejemplo: Verificar si un usuario tiene permisos o aplicar un descuento según el valor de una propiedad.
5. Interactividad en Aplicaciones
   En aplicaciones dinámicas, acceder y modificar propiedades permite cambiar el estado y comportamiento de la app en tiempo real.
   • Ejemplo: Actualizar los datos de un carrito de compras.

¿Cómo acceder a estas propiedades (clave – valor) de un objeto?

Para acceder a los valores de estas propiedades, se pueden usar dos formas principales:

1. Notación de punto: objeto.propiedad
2. Notación de corchetes: objeto["propiedad"]

Ambas sintaxis son válidas, pero cada una es útil en distintos contextos. A continuación, te explico cada una con ejemplos claros y detallados.

3.2. Notación de punto (objeto.propiedad):

La notación de punto se utiliza cuando la clave (propiedad) que queremos acceder es conocida y cumple con las reglas de nombres de identificadores en JavaScript:

• Debe comenzar con una letra, $, o un guion bajo (_).
• No puede contener espacios ni caracteres especiales (excepto _ y $).
• No debe ser un número o una palabra reservada.

3.2.1. Ejemplo básico notación de punto:

const persona = {
  nombre: "Ana",
  edad: 30,
};

console.log(persona.nombre); // Resultado: Ana
console.log(persona.edad);   // Resultado: 30Lenguaje del código: JavaScript (javascript)

Explicación:

• El objeto persona tiene dos propiedades: nombre y edad.
• Para acceder al valor de nombre, usamos la notación de punto: persona.nombre. Esto devuelve "Ana".
• Para acceder al valor de edad, usamos persona.edad, lo cual devuelve 30.

3.2.2. Ejemplo notación de punto con propiedad no existente:

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

console.log(auto.modelo); // Resultado: undefinedLenguaje del código: JavaScript (javascript)

Explicación:

• El objeto auto tiene una propiedad marca, pero no tiene una propiedad llamada modelo.
• Si intentas acceder a auto.modelo, obtendrás undefined porque esa propiedad no existe.

3.3. Notación de corchetes (objeto["propiedad"]):

La notación de corchetes se utiliza en los siguientes casos:

1. La clave contiene caracteres especiales, espacios, o no cumple con las reglas de identificadores.
2. La clave se obtiene de forma dinámica (por ejemplo, a partir de una variable).

3.3.1. Ejemplo notación de corchetes con claves especiales

const libro = {
  "titulo del libro": "El Principito",  // Clave con espacios
  "año-publicación": 1943,             // Clave con guion
};

console.log(libro["titulo del libro"]);  // Resultado: El Principito
console.log(libro["año-publicación"]);   // Resultado: 1943Lenguaje del código: JavaScript (javascript)

Explicación:

• Las claves "titulo del libro" y "año-publicación" contienen espacios y guiones, lo cual no es válido con la notación de punto.
• Por eso, usamos la notación de corchetes: libro["titulo del libro"] y libro["año-publicación"].
• Acceder de otra forma (como libro.titulo del libro) causaría un error de sintaxis.

3.3.2. Ejemplo notación de corchetes con clave dinámica (Variable)

const usuario = {
  nombre: "Carlos",
  edad: 25,
};

const clave = "nombre"; // Clave almacenada en una variable
console.log(usuario[clave]); // Resultado: CarlosLenguaje del código: JavaScript (javascript)

Explicación:

• La variable clave contiene la cadena "nombre".
• Usamos usuario[clave] para acceder al valor de la propiedad nombre. Esto devuelve "Carlos".
• La notación de corchetes permite dinamismo, ya que puedes acceder a las claves según valores variables.

3.4. Ejemplo comparativo: N. de Punto VS. N. de Corchetes:

const producto = {
  nombre: "Laptop",
  precio: 1200,
  "descuento especial": 10,  // Clave con espacio
};

console.log(producto.nombre);            // Notación de punto -> Resultado: Laptop
console.log(producto["precio"]);         // Notación de corchetes -> Resultado: 1200
console.log(producto["descuento especial"]); // Clave con espacio -> Resultado: 10Lenguaje del código: JavaScript (javascript)

Explicación:

1. producto.nombre usa notación de punto para acceder a la clave nombre. Es sencillo y directo.
2. producto["precio"] usa notación de corchetes para acceder a la clave precio. Funciona igual que la notación de punto, pero con corchetes.
3. producto["descuento especial"] requiere notación de corchetes porque la clave contiene un espacio.

3.5. Cuándo usar cada notación:

Situación	Notación Recomendada
La clave es simple (sin caracteres especiales).	Notación de punto (objeto.propiedad)
La clave tiene espacios, guiones o caracteres especiales.	Notación de corchetes (objeto["propiedad"])
La clave se almacena en una variable.	Notación de corchetes
Accedes a propiedades de forma dinámica.	Notación de corchetes

4. Agregar, modificar y eliminar propiedades de un objeto.

1. ¿Qué significa agregar, modificar y eliminar estas propiedades?
2. Casos comunes en los que se aplica:
3. ¿Cómo agregar propiedades?
4. ¿Cómo modificar propiedades?
5. ¿Cómo eliminar propiedades?
6. Práctica combinada: Crear, modificar y eliminar propiedades

4.1. ¿Qué significa agregar, modificar y eliminar estas propiedades?

En JavaScript, los objetos son estructuras dinámicas. Esto significa que puedes:

• Agregar propiedades: Introducir nuevas claves y valores al objeto.
• Modificar propiedades: Cambiar el valor asociado a una clave existente.
• Eliminar propiedades: Quitar pares clave-valor del objeto.

4.2. Casos comunes en los que se aplica:

1. Agregar propiedades
   Se usa cuando necesitas ampliar la información que un objeto contiene.
   • Ejemplo: Añadir un campo «descuento» a un objeto de producto en una tienda.
2. Modificar propiedades
   Es común cuando los valores de un objeto cambian debido a alguna acción o evento.
   • Ejemplo: Actualizar el estado de un pedido (de «pendiente» a «completado»).
3. Eliminar propiedades:
   Se aplica cuando un dato ya no es relevante o debe ser removido para simplificar la estructura del objeto.
   • Ejemplo: Eliminar el número de tarjeta de un usuario después de procesar un pago.

4.3. ¿Cómo agregar propiedades?

Puedes agregar una nueva propiedad a un objeto utilizando:

• Notación de punto (.)
• Notación de corchetes ([])

Ejemplo:

const persona = {
    nombre: "Manuel",
    edad: 36
};

// Agregar propiedad usando notación de punto
persona.profesion = "Programador";

// Agregar propiedad usando notación de corchetes
persona["nacionalidad"] = "Argentina";

console.log(persona);Lenguaje del código: JavaScript (javascript)

Explicación:

• Antes: El objeto persona tiene las propiedades nombre y edad.
• Después:
  • Usamos persona.profesion = "Programador"; para añadir la propiedad profesion con el valor "Programador".
  • Usamos persona["nacionalidad"] = "Argentina"; para añadir la propiedad nacionalidad con el valor "Argentina".

Resultado en consola:

{
  nombre: "Manuel",
  edad: 36,
  profesion: "Programador",
  nacionalidad: "Argentina"
}Lenguaje del código: CSS (css)

4.4. ¿Cómo modificar propiedades?

Puedes modificar el valor de una propiedad existente utilizando:

• Notación de punto (.)
• Notación de corchetes ([])

Ejemplo:

persona.edad = 37; // Modificar usando notación de punto
persona["nombre"] = "Alejandro"; // Modificar usando notación de corchetes

console.log(persona);Lenguaje del código: JavaScript (javascript)

Explicación:

• Usamos persona.edad = 37; para cambiar el valor de edad de 36 a 37.
• Usamos persona["nombre"] = "Alejandro"; para cambiar el valor de nombre de "Manuel" a "Alejandro".

Resultado en consola:

{
  nombre: "Alejandro",
  edad: 37,
  profesion: "Programador",
  nacionalidad: "Argentina"
}Lenguaje del código: CSS (css)

4.5. ¿Cómo eliminar propiedades?

Puedes eliminar una propiedad de un objeto utilizando el operador delete.

Ejemplo:

delete persona.nacionalidad; // Eliminar propiedad

console.log(persona);Lenguaje del código: JavaScript (javascript)

Explicación:

• Usamos delete persona.nacionalidad; para eliminar la propiedad nacionalidad del objeto persona.

Resultado en consola:

{
  nombre: "Alejandro",
  edad: 37,
  profesion: "Programador"
}Lenguaje del código: CSS (css)

4.6. Práctica combinada: Crear, modificar y eliminar propiedades

Código completo:

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

// Agregar propiedades
producto.stock = 25;
producto["categoria"] = "Electrónica";

// Modificar propiedades
producto.precio = 1400; // Cambiar precio
producto["nombre"] = "Laptop Profesional"; // Cambiar nombre

// Eliminar propiedades
delete producto.stock;

console.log(producto);Lenguaje del código: JavaScript (javascript)

Explicación:

1. Agregar:
   • Se añaden stock y categoria al objeto producto.
2. Modificar:
   • Cambiamos el valor de precio a 1400.
   • Cambiamos el valor de nombre a "Laptop Profesional".
3. Eliminar:
   • Usamos delete producto.stock; para eliminar la propiedad stock.

Resultado en consola:

{
  id: 101,
  nombre: "Laptop Profesional",
  precio: 1400,
  categoria: "Electrónica"
}Lenguaje del código: CSS (css)

5. Iterar las propiedades de un objeto en JavaScript.

1. ¿Qué significa iterar las propiedades de un objeto?
2. ¿Cómo se puede hacer?
3. Iterar usando for…in:
4. Iterar usando Object.keys()
5. Iterar usando Object.values()
6. Iterar usando Object.entries()
7. ¿Cuándo usar cada técnica?

5.1. ¿Qué significa iterar las propiedades de un objeto?

Iterar las propiedades de un objeto significa recorrer cada clave (key) del objeto y, opcionalmente, acceder o manipular su valor. Es una forma de trabajar dinámicamente con los datos del objeto, especialmente cuando no conoces las claves de antemano.

5.2. ¿Cómo se puede hacer?

En JavaScript, puedes iterar sobre las propiedades de un objeto utilizando varias técnicas:

1. Usar for...in:
   Este bucle recorre todas las claves (propiedades enumerables) del objeto.
2. Métodos de Object:
   • Object.keys(): Obtiene un array con las claves del objeto.
   • Object.values(): Obtiene un array con los valores del objeto.
   • Object.entries(): Obtiene un array de pares [clave, valor].

5.3. Iterar usando for...in:

const usuario = {
  nombre: "Ana",
  edad: 25,
  correo: "[email protected]",
};

for (let clave in usuario) {
  console.log(`Clave: ${clave}, Valor: ${usuario[clave]}`);
}Lenguaje del código: JavaScript (javascript)

Explicación:

• El bucle for...in recorre cada clave del objeto usuario.
• clave contiene el nombre de cada propiedad (nombre, edad, correo).
• usuario[clave] accede al valor asociado a esa clave.
• Resultado:
  • Se imprimen las claves y sus valores:

Clave: nombre, Valor: Ana
Clave: edad, Valor: 25
Clave: correo, Valor: [email protected]Lenguaje del código: HTTP (http)

Nota:
for...in también recorre propiedades heredadas, por lo que debes usarlo con cuidado en objetos que tienen prototipos personalizados.

5.4. Iterar usando Object.keys()

const producto = {
  nombre: "Laptop",
  precio: 1000,
  disponible: true,
};

const claves = Object.keys(producto);
console.log(claves); // Resultado: ['nombre', 'precio', 'disponible']Lenguaje del código: JavaScript (javascript)

Explicación:

• Object.keys(producto) devuelve un array con las CLAVES del objeto (nombre, precio, disponible).
• Útil cuando necesitas trabajar solo con las claves.

5.5. Iterar usando Object.values()

const producto = {
  nombre: "Laptop",
  precio: 1000,
  disponible: true,
};

const valores = Object.values(producto);
console.log(valores); // Resultado: ['Laptop', 1000, true]Lenguaje del código: JavaScript (javascript)

Explicación:

• Object.values(producto) devuelve un array con los VALORES del objeto ('Laptop', 1000, true).
• Ideal para acceder directamente a los datos sin preocuparte por las claves.

5.6. Iterar usando Object.entries()

const producto = {
  nombre: "Laptop",
  precio: 1000,
  disponible: true,
};

const entradas = Object.entries(producto);
console.log(entradas);
/* Resultado:
[
  ['nombre', 'Laptop'],
  ['precio', 1000],
  ['disponible', true]
]
*/

// Iteramos sobre los pares clave-valor
entradas.forEach(([clave, valor]) => {
  console.log(`Clave: ${clave}, Valor: ${valor}`);
});Lenguaje del código: JavaScript (javascript)

Explicación:

• Object.entries(producto) devuelve un array de arrays, donde cada sub-array contiene una clave y su valor correspondiente.
• Puedes usar forEach para recorrer los pares clave-valor.
• Resultado:

Clave: nombre, Valor: Laptop
Clave: precio, Valor: 1000
Clave: disponible, Valor: trueLenguaje del código: HTTP (http)

5.7. ¿Cuándo usar cada técnica?

1. for...in:
   • Útil para recorrer todas las claves, especialmente en objetos pequeños y simples.
   • Precaución: También recorre propiedades heredadas.
2. Object.keys():
   • Cuando solo necesitas trabajar con las claves.
   • Ejemplo: Contar el número de propiedades (Object.keys(obj).length).
3. Object.values():
   • Ideal para obtener todos los valores y procesarlos directamente.
   • Ejemplo: Sumar valores numéricos en un objeto.
4. Object.entries():
   • Excelente para recorrer pares clave-valor.
   • Útil en funciones como forEach, map, o reduce.

CONCLUSIÓN:

Iterar las propiedades de un objeto te permite trabajar dinámicamente con sus datos, ya sea para mostrar, manipular o calcular información. Cada técnica tiene su propósito específico y elegir la correcta depende del caso de uso.

6. Diferencia entre objetos referenciados y valores primitivos.

1. Valores primitivos:
2. Objetos referenciados:
3. Diferencias clave con ejemplos:

En JavaScript, los datos se dividen en valores primitivos y objetos referenciados. La diferencia radica en cómo se almacenan, acceden y manejan en memoria.

6.1. Valores primitivos:

Características:

• Inmutables: No se pueden modificar. Si parece que cambian, lo que sucede realmente es que se crea un nuevo valor en memoria.
• Copia por valor: Cuando asignas un primitivo a otra variable, se copia el valor directamente.
• Comparación por valor: La comparación evalúa si los valores son exactamente iguales.

Tipos de datos primitivos:

• Number (e.g., 42)
• String (e.g., "Hola")
• Boolean (e.g., true)
• Undefined
• Null
• Symbol
• BigInt

Ejemplo de datos primitivos y sus características:

let a = 10; // `a` almacena el valor 10
let b = a;  // Se copia el valor de `a` en `b`

b = 20; // Cambiamos el valor de `b`
console.log(a); // 10 (el valor de `a` no cambia porque `b` es independiente)
console.log(b); // 20Lenguaje del código: JavaScript (javascript)

Explicación detallada:

• let a = 10;
  • Aquí declaras una variable llamada a y le asignas el valor 10, que es un valor primitivo del tipo Number.
  • Este valor se almacena directamente en la variable a.
• let b = a;
  • Ahora declaras otra variable llamada b y le asignas el valor de a.
  • Lo importante: Como 10 es un valor primitivo, lo que ocurre aquí es una copia del valor de a (10) a b.
  • A partir de este momento, a y b son independientes, aunque inicialmente tengan el mismo valor.
• b = 20;
  • Aquí cambias el valor de la variable b a 20.
  • Esto no afecta a a, porque al ser valores primitivos, b tiene su propio espacio de memoria independiente del de a.
• console.log(a);
  • Imprime el valor de a, que sigue siendo 10, ya que no se modificó.
• console.log(b);
  • Imprime el valor de b, que ahora es 20, porque lo cambiaste directamente en la línea anterior.

¿Por qué sucede esto?

• Copia por valor:
  • Cuando asignas una variable con un valor primitivo (como a) a otra (como b), se realiza una copia del valor en un nuevo espacio de memoria. No se comparte el mismo espacio entre ambas variables.
• Inmutabilidad:
  • Los valores primitivos no pueden ser alterados. Si cambias el valor de b, lo que realmente ocurre es que reemplazas el valor almacenado en la variable b con uno nuevo (20), pero esto no tiene impacto en a.

6.2. Objetos referenciados:

Características:

• Mutables: Puedes cambiar sus propiedades o contenido sin necesidad de reasignar la variable.
• Copia por referencia: Cuando asignas un objeto o array a otra variable, se copia la referencia al mismo espacio de memoria, no el valor.
• Comparación por referencia: Evalúa si dos variables apuntan al mismo objeto en memoria, no si tienen el mismo contenido.

Tipos de datos por referencia:

• Objetos (e.g., { nombre: "Manuel" })
• Arrays (e.g., [1, 2, 3])
• Funciones (e.g., function saludar() {})
• Otros (e.g., Map, Set, etc.)

Ejemplo con un objeto y sus características:

let objeto1 = { nombre: "Manuel" };
let objeto2 = objeto1; // Se copia la referencia al mismo objeto

objeto2.nombre = "Alejandro"; // Modificamos el objeto a través de `objeto2`

console.log(objeto1.nombre); // "Alejandro" (se ve afectado porque ambos apuntan al mismo objeto)
console.log(objeto2.nombre); // "Alejandro"Lenguaje del código: JavaScript (javascript)

Explicación detallada:

• Línea: let objeto1 = { nombre: "Manuel" };
  • Aquí se crea un objeto literal con una propiedad nombre cuyo valor es "Manuel".
  • La variable objeto1 no almacena directamente el objeto, sino una referencia al espacio de memoria donde está guardado el objeto.
• Línea: let objeto2 = objeto1;
  • Ahora declaras la variable objeto2 y le asignas el valor de objeto1.
  • IMPORTANTE: No se copia el contenido del objeto, sino la referencia al mismo espacio de memoria.
  • Esto significa que tanto objeto1 como objeto2 apuntan al mismo objeto en memoria.
• Línea: objeto2.nombre = "Alejandro";
  • Modificas la propiedad nombre del objeto utilizando la referencia objeto2.
  • Como objeto2 y objeto1 apuntan al mismo objeto en memoria, cualquier cambio hecho a través de objeto2 también será visible al acceder al objeto a través de objeto1.
• Línea: console.log(objeto1.nombre);
  • Al acceder a la propiedad nombre de objeto1, verás el valor "Alejandro", porque el cambio realizado a través de objeto2 afectó al objeto compartido.
• Línea: console.log(objeto2.nombre);
  • Muestra también "Alejandro", ya que objeto2 sigue apuntando al mismo objeto que objeto1.

¿Por qué sucede esto?:

• Copia por referencia:
  • Cuando asignas un objeto (o array) a otra variable, no estás creando una copia independiente del objeto, sino que ambas variables apuntan al mismo lugar en memoria.
  • Este comportamiento permite que los objetos sean eficientes en términos de memoria, pero también introduce el riesgo de efectos colaterales.
• Mutabilidad:
  • Los objetos en JavaScript son mutables, lo que significa que puedes modificar su contenido (como agregar, cambiar o eliminar propiedades) sin cambiar la referencia al objeto.
• Comparación por referencia (punto 7 ampliamos):
  • Si comparas objeto1 y objeto2 con ===, el resultado será true porque ambas variables apuntan al mismo objeto en memoria:javascriptCopiar código

console.log(objeto1 === objeto2); // trueLenguaje del código: JavaScript (javascript)

6.3. Diferencias clave con ejemplos:

Aspecto	Primitivos	Referenciados
Almacenamiento	Directamente en la variable.	Como una referencia a un espacio en memoria.
Inmutabilidad	No pueden cambiar.	Pueden modificarse (sus propiedades).
Copia	Se copia el valor directamente.	Se copia la referencia, no el contenido.
Comparación	Compara el valor directamente.	Compara si son la misma referencia.

7. Comparar objetos en JavaScript.

1. Ejemplo comparando referencias iguales:
2. Comparando referencias diferentes (Mismo contenido)

En JavaScript, los operadores de comparación === (estricto) y == (igualdad suelta) no comparan los valores internos de los objetos, sino las referencias en memoria. Esto significa que dos objetos diferentes con el mismo contenido no son considerados iguales porque apuntan a ubicaciones distintas en memoria.

¿Qué significa esto?

1. Comparación de Referencias:
   • Si dos variables apuntan al mismo objeto en memoria, son consideradas iguales.
   • Si dos variables apuntan a objetos diferentes (aunque tengan el mismo contenido), son consideradas distintas.
2. Importancia:
   • Esto puede llevar a resultados inesperados si estás esperando comparar el contenido de los objetos y no su referencia.
   • Para comparar el contenido de dos objetos, necesitas hacerlo de manera explícita (por ejemplo, recorriendo sus propiedades).

7.1. Ejemplo comparando referencias iguales:

const obj1 = { saludo: "Hola" };
const obj2 = obj1;

console.log(obj1 === obj2); // Resultado: true
console.log(obj1 == obj2);  // Resultado: trueLenguaje del código: JavaScript (javascript)

Explicación:

• obj1 y obj2 apuntan al mismo objeto en memoria.
• Los operadores === y == consideran iguales las referencias, por lo que el resultado es true.

7.2. Comparando referencias diferentes (Mismo contenido)

const obj1 = { saludo: "Hola" };
const obj2 = { saludo: "Hola" };

console.log(obj1 === obj2); // Resultado: false
console.log(obj1 == obj2);  // Resultado: falseLenguaje del código: JavaScript (javascript)

Explicación:

• Los operadores === y == comparan las referencias, no los valores internos, por lo que el resultado es false.
• Aunque obj1 y obj2 tienen el mismo contenido, son objetos diferentes en memoria (tienen diferentes referencias).

8. Métodos en objetos en JavaScript.

1. ¿Qué es un método en un objeto?
2. Funciones como métodos en objetos:
3. Uso de this en objetos con JS:

8.1. ¿Qué es un método en un objeto?

Un método es simplemente una función que está asociada a un objeto. Estas funciones se definen como propiedades del objeto, donde el valor de la propiedad es una función.

Los métodos permiten que un objeto realice acciones o manipule sus propiedades.

¿Cómo se usan?

Los métodos se invocan utilizando la notación de punto (objeto.metodo()) o la notación de corchetes (objeto["metodo"]()).

8.2. Funciones como métodos en objetos:

Podemos utilizar una función como valor de una propiedad (clave) en un objeto, y en este caso, a esta función aplicada de dicha manera se lo denomina como un método.

¿Cómo se aplica?

1. Declaración:
   • Un método se define como una propiedad cuyo valor es una función.
   • La sintaxis es similar a la de cualquier función, pero está contenida dentro de un objeto.
2. Uso del this:
   • Dentro de un método, la palabra clave this se refiere al objeto al que pertenece el método.
   • Esto es útil para acceder a las propiedades del objeto desde dentro del método.
3. Invocación:
   • Los métodos se invocan utilizando la notación de punto o corchetes: objeto.metodo().

Ejemplo básico:

const persona = {
    nombre: "Manuel",
    edad: 36,
    saludar: function() {
        return `Hola, me llamo ${this.nombre} y tengo ${this.edad} años.`;
    }
};

// Invocación del método
console.log(persona.saludar());Lenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Definición del método saludar:
   • saludar es una propiedad del objeto persona, y su valor es una función.
   • Dentro de esta función, usamos this.nombre y this.edad para acceder a las propiedades nombre y edad del objeto.
2. Invocación del método:
   • Cuando llamamos persona.saludar(), la función se ejecuta en el contexto del objeto persona, permitiendo que this haga referencia a dicho objeto.
3. Resultado:
   • El método devuelve la cadena: "Hola, me llamo Manuel y tengo 36 años.".

8.3. Uso de this en objetos con JS:

El contexto de this en JavaScript es clave para comprender cómo interactuar con los objetos. Dependiendo de cómo se invoque una función, this puede referirse a distintos contextos.

Comprendamos su uso básico……

En un objeto, this hace referencia al propio objeto al que pertenece el método. Esto permite acceder a las propiedades del objeto desde dentro de sus métodos.

EJEMPLO:

const coche = {
    marca: "Toyota",
    getMarca() {
        return this.marca; // `this` se refiere al objeto `coche`
    }
};

console.log(coche.getMarca()); // "Toyota"Lenguaje del código: JavaScript (javascript)

Explicación:

1. Definición del objeto:
   • El objeto coche tiene una propiedad marca y un método getMarca.
2. Uso de this:
   • Dentro del método getMarca, this.marca accede a la propiedad marca del objeto coche.
3. Resultado:
   • Cuando llamamos a coche.getMarca(), this se refiere al objeto coche, y devuelve "Toyota".

9. Clonar y fusionar objetos en JavaScript.

1. Clonar un objeto:
   • ¿Cómo clonar un objeto?
   • Diferencias entre Object.assign() y …
   • Importante: Clonación superficial vs. Clonación profunda.
   • ¿Cuándo usar clonar objetos?
2. Fusionar objetos en JavaScript.
   • ¿Qué significa fusionar objetos?
   • ¿Cómo fusionar objetos?:
   • Manejo de claves repetidas:

9.1. Clonar un objeto:

Clonar un objeto significa crear una copia independiente de dicho objeto. La copia tiene las mismas propiedades y valores que el objeto original, pero es un objeto completamente diferente en memoria.

Esto es útil cuando necesitas trabajar con una copia del objeto sin afectar el original. Si trabajas directamente con el original, cualquier cambio impactará ambas referencias.

91.1. ¿Cómo clonar un objeto?

Se puede hacer de la siguiente manera:

A- Usar Object.assign()

Object.assign() es un método que copia las propiedades de uno o más objetos a un objeto destino.

Sintaxis:

Object.assign(destino, ...fuentes)Lenguaje del código: CSS (css)

• destino: El objeto que recibirá las propiedades.
• fuentes: Uno o más objetos cuyas propiedades serán copiadas.

Ejemplo con Explicación:

const original = { nombre: "Laura", edad: 25 };
const copia = Object.assign({}, original);

console.log(copia); // Salida: { nombre: "Laura", edad: 25 }

copia.nombre = "Ana";
console.log(original.nombre); // Salida: "Laura" (no se modifica el original)Lenguaje del código: JavaScript (javascript)

Explicación:

• Creamos una copia del objeto original pasando {} como el destino vacío.
• Las propiedades del objeto original se copian al nuevo objeto.
• Cambiar copia.nombre no afecta el objeto original porque son independientes.

B- Usar el Operador de Propagación (...)

El operador de propagación (...) es una forma más moderna y concisa de clonar objetos. Descompone todas las propiedades de un objeto y las coloca en un nuevo objeto.

Sintaxis:

const copia = { ...objetoOriginal };Lenguaje del código: JavaScript (javascript)

Ejemplo con Explicación:

const original = { nombre: "Carlos", profesion: "Ingeniero" };
const copia = { ...original };

console.log(copia); // Salida: { nombre: "Carlos", profesion: "Ingeniero" }

copia.profesion = "Doctor";
console.log(original.profesion); // Salida: "Ingeniero" (no se modifica el original)Lenguaje del código: JavaScript (javascript)

Explicación:

• Al usar { ...original }, creamos un nuevo objeto y copiamos todas las propiedades del objeto original.
• Los dos objetos son independientes, por lo que modificar copia no afecta a original.

9.1.2. Diferencias entre Object.assign() y ...

Aspecto	Object.assign()	Operador de Propagación (...)
Compatibilidad	Compatible con ES5 y versiones modernas.	Requiere ES6 o posterior.
Legibilidad	Más verboso.	Más conciso y fácil de leer.
Uso con Prototipos	Copia el prototipo si el destino no es vacío.	No maneja prototipos.

9.1.3. Importante: Clonación superficial vs. Clonación profunda.

Ambos métodos (Object.assign y ...) realizan una clonación superficial. Esto significa que las propiedades que son objetos o arrays no se copian por completo; solo se copia su referencia.

Ejemplo de clonación superficial:

const original = { datos: { nombre: "Eva" } };
const copia = { ...original };

copia.datos.nombre = "Luis";

console.log(original.datos.nombre); // Salida: "Luis" (afecta el original)Lenguaje del código: JavaScript (javascript)

Explicación:

• Aunque copia parece independiente, datos sigue siendo una referencia al mismo objeto dentro de original.

Solución: Clonación profunda:

Para hacer una clonación profunda, se necesitan herramientas adicionales como JSON.parse(JSON.stringify(objeto)) o bibliotecas como Lodash.

9.1.4. ¿Cuándo usar clonar objetos?

1. Evitación de Efectos Colaterales: Si necesitas modificar un objeto pero quieres conservar el original.
2. Crear Versiones de Trabajo: Cuando necesitas probar cambios en un objeto sin alterar los datos originales.
3. Compartir Estados: En aplicaciones con estado, como React, donde los datos son inmutables.

Conclusión:

• Elegir uno u otro depende de tus preferencias de estilo y requisitos de compatibilidad del proyecto.
• Usar Object.assign() y el operador de propagación (...) son formas eficientes de clonar objetos en JavaScript.
• Ambos métodos tienen limitaciones en objetos complejos, por lo que es necesario tener cuidado con referencias compartidas.

9.2. Fusionar objetos en JavaScript.

9.2.1. ¿Qué significa fusionar objetos?

Fusionar objetos significa combinar las propiedades de dos o más objetos en un solo objeto. Durante este proceso:

1. Se copian las claves y valores de cada objeto en un nuevo objeto.
2. Si hay claves repetidas, el valor del objeto más a la derecha (en el orden de fusión) reemplaza a los anteriores.

Fusionar objetos es útil cuando necesitas combinar configuraciones, datos o estados de diferentes fuentes en una única estructura.

9.2.2. ¿Cómo fusionar objetos?:

Método 1: Operador de Propagación (...)

El operador de propagación descompone las propiedades de los objetos y las coloca en un nuevo objeto.

Ejemplo:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const fusion = { ...obj1, ...obj2 };

console.log(fusion); // Salida: { a: 1, b: 2 }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Entrada:
   • obj1 tiene la propiedad a: 1.
   • obj2 tiene la propiedad b: 2.
2. Proceso:
   • Usamos { ...obj1, ...obj2 } para combinar ambas propiedades en un nuevo objeto.
3. Salida:
   • El resultado es un objeto fusion que contiene todas las propiedades de obj1 y obj2.

Método 2: Object.assign()

El método Object.assign() copia las propiedades de uno o más objetos fuente a un objeto destino.

Ejemplo:

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const fusion = Object.assign({}, obj1, obj2);

console.log(fusion); // Salida: { a: 1, b: 2 }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Entrada:
   • obj1 y obj2 son los objetos fuente.
2. Proceso:
   • Pasamos {} como el objeto destino vacío.
   • Object.assign() copia las propiedades de obj1 y obj2 al destino.
3. Salida:
   • El objeto fusion contiene todas las propiedades de los objetos fuente.

9.2.3. Manejo de claves repetidas:

Si los objetos tienen claves repetidas, el valor del último objeto en la fusión reemplaza los valores anteriores.

Ejemplo:

const obj1 = { a: 1, b: 3 };
const obj2 = { b: 2, c: 4 };
const fusion = { ...obj1, ...obj2 };

console.log(fusion); // Salida: { a: 1, b: 2, c: 4 }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Entrada:
   • obj1 tiene b: 3.
   • obj2 tiene b: 2.
2. Proceso:
   • La clave b está presente en ambos objetos.
   • El valor de b en obj2 (2) reemplaza el valor de b en obj1 (3).
3. Salida:
   • El objeto fusion resulta en { a: 1, b: 2, c: 4 }.

10. Prototipos y herencia en objetos con JavaScript.

1. ¿Qué es el prototipo de un objeto?
2. Secuencia de acceso a propiedades/métodos heredados:
3. Métodos útiles en relación a los prototipos y la herencia:
   • Object.getPrototypeOf()
   • Object.setPrototypeOf()
4. ¿Cuándo usar prototipos y métodos relacionados?

10.1. ¿Qué es el prototipo de un objeto?

El prototipo de un objeto es un objeto del cual otro objeto «hereda» propiedades y métodos. En JavaScript, todos los objetos tienen un prototipo, que es la base para implementar la herencia prototípica.

¿Pero que es la herencia prototípica?

• La herencia prototípica permite que un objeto acceda a propiedades y métodos definidos en otro objeto. Esto se logra mediante una cadena de prototipos conocida como prototype chain.
• Cuando intentamos acceder a una propiedad o método en un objeto, JavaScript busca en el objeto primero y luego en su prototipo, y así sucesivamente hasta encontrarlo o llegar al final de la cadena.

EJEMPLO:

const animal = {
  respirar: true,
};

const perro = Object.create(animal);
perro.ladrar = true;

console.log(perro.respirar); // Salida: true
console.log(perro.ladrar);   // Salida: trueLenguaje del código: JavaScript (javascript)

Explicación del ejemplo:

1. Entrada:
   • animal es un objeto con la propiedad respirar.
   • Creamos perro como un nuevo objeto basado en animal usando Object.create(animal).
   • Añadimos la propiedad ladrar al objeto perro.
2. Proceso:
   • Cuando accedemos a perro.respirar, JavaScript no encuentra la propiedad en perro, por lo que la busca en el prototipo (animal).
3. Salida:
   • perro tiene acceso a respirar gracias a la herencia prototípica.

10.2. Secuencia de acceso a propiedades/métodos heredados:

Cuando se accede a una propiedad/método, JavaScript sigue esta secuencia:

1. Busca en el objeto directamente.
2. Si no lo encuentra, busca en el prototipo del objeto.
3. Repite hasta llegar a null, el final de la cadena prototípica.

Ejemplo:

const gato = Object.create(animal);
console.log(gato.respirar); // Salida: true

gato.respirar = false;      // Sobrescribe la propiedad en 'gato'
console.log(gato.respirar); // Salida: false
console.log(animal.respirar); // Salida: trueLenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Entrada:
   • gato hereda de animal.
   • Inicialmente, gato.respirar devuelve true porque se encuentra en el prototipo (animal).
2. Proceso:
   • Asignamos gato.respirar = false, lo que crea una propiedad propia en gato, sin afectar al prototipo.
3. Salida:
   • gato.respirar devuelve false porque ahora tiene su propia propiedad.
   • animal.respirar permanece intacto.

10.3. Métodos útiles en relación a los prototipos y la herencia:

1. Object.getPrototypeOf()

Este método devuelve el prototipo de un objeto.

Ejemplo:

const prototipoDePerro = Object.getPrototypeOf(perro);
console.log(prototipoDePerro); // Salida: { respirar: true }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

• Object.getPrototypeOf(perro) devuelve el objeto prototipo de perro, que es animal.

2. Object.setPrototypeOf()

Este método asigna un nuevo prototipo a un objeto.

Ejemplo:

const ave = {
  volar: true,
};

Object.setPrototypeOf(perro, ave);

console.log(perro.volar);   // Salida: true
console.log(perro.respirar); // Salida: undefinedLenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Entrada:
   • ave es un nuevo objeto con la propiedad volar.
   • Cambiamos el prototipo de perro a ave usando Object.setPrototypeOf(perro, ave).
2. Proceso:
   • perro ahora hereda propiedades de ave, no de animal.
3. Salida:
   • perro.volar devuelve true.
   • perro.respirar devuelve undefined porque ya no hereda de animal.

10.4. ¿Cuándo usar prototipos y métodos relacionados?

1. Modelado de Herencia:
   • Para definir jerarquías entre tipos de objetos (por ejemplo, Animal -> Perro).
2. Extender Funcionalidades:
   • Añadir métodos a objetos o prototipos existentes.
3. Optimización de Memoria:
   • Los métodos en prototipos se comparten entre todas las instancias, reduciendo el uso de memoria.

Conclusión:

Prototipos y herencia prototípica son fundamentales en JavaScript para modelar relaciones entre objetos. Usar métodos como Object.create(), Object.getPrototypeOf(), y Object.setPrototypeOf() te permite manipular prototipos de manera eficiente, habilitando la reutilización y extensión de funcionalidad en tus programas.

11. Métodos avanzados en objetos de JavaScript.

1. Object.freeze()
2. Object.seal()
3. Object.defineProperty()
4. Object.defineProperties()
5. ¿Por qué usar estos métodos?

11.1. Object.freeze()

Este método congela un objeto para que no se pueda modificar, agregar ni eliminar propiedades. En otras palabras, hace que el objeto sea completamente inmutable. No se pueden cambiar los valores de sus propiedades, agregar nuevas ni eliminarlas.

Ejemplo:

const usuario = {
  nombre: "Ana",
  edad: 25,
};

Object.freeze(usuario);

// Intentamos modificar el objeto
usuario.edad = 30; // No tiene efecto
usuario.direccion = "Córdoba"; // No tiene efecto
delete usuario.nombre; // No tiene efecto

console.log(usuario); // Salida: { nombre: "Ana", edad: 25 }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Object.freeze(usuario) congela el objeto usuario.
2. Intentos de modificar, agregar o eliminar propiedades no tienen efecto.
3. El objeto permanece igual.

11.2. Object.seal()

Este método permite modificar las propiedades existentes, pero evita agregar o eliminar propiedades.

Ejemplo:

const producto = {
  nombre: "Lapicera",
  precio: 100,
};

Object.seal(producto);

// Modificar propiedades existentes
producto.precio = 120; // Funciona

// Intentar agregar o eliminar propiedades
producto.stock = 50; // No tiene efecto
delete producto.nombre; // No tiene efecto

console.log(producto); // Salida: { nombre: "Lapicera", precio: 120 }Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Object.seal(producto) sella el objeto.
2. Se permite cambiar el valor de precio.
3. Intentos de agregar stock o eliminar nombre son ignorados.

11.3. Object.defineProperty()

Agrega o modifica una propiedad con descriptores.

Un descriptor define el comportamiento de una propiedad:

• writable: Si el valor puede ser modificado.
• enumerable: Si la propiedad aparece en iteraciones (for...in o Object.keys()).
• configurable: Si la propiedad puede ser eliminada o su descriptor modificado.
• value: El valor de la propiedad.
• get y set: Funciones para obtener y establecer valores.

Ejemplo:

const persona = {};

Object.defineProperty(persona, "nombre", {
  value: "Juan",
  writable: false, // No se puede modificar
  enumerable: true, // Aparece en iteraciones
  configurable: false, // No se puede eliminar ni redefinir
});

console.log(persona.nombre); // Salida: "Juan"

persona.nombre = "Carlos"; // No tiene efecto
delete persona.nombre; // No tiene efecto

console.log(Object.keys(persona)); // Salida: ["nombre"]Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. Se define la propiedad nombre en persona con características específicas.
2. writable: false: Impide cambios en el valor.
3. enumerable: true: Permite que nombre aparezca en Object.keys().

11.4. Object.defineProperties()

Define múltiples propiedades a la vez.

Ejemplo:

const auto = {};

Object.defineProperties(auto, {
  marca: {
    value: "Toyota",
    writable: true,
    enumerable: true,
    configurable: true,
  },
  modelo: {
    value: "Corolla",
    writable: false,
    enumerable: true,
    configurable: false,
  },
});

console.log(auto); // Salida: { marca: "Toyota", modelo: "Corolla" }

auto.marca = "Honda"; // Funciona
auto.modelo = "Civic"; // No tiene efecto

delete auto.marca; // Funciona
delete auto.modelo; // No tiene efecto

console.log(auto); // Salida: {}Lenguaje del código: JavaScript (javascript)

Explicación del Ejemplo:

1. marca:
   • Es modificable, aparece en iteraciones y puede eliminarse.
2. modelo:
   • No es modificable ni eliminable.
3. Los descriptores permiten controlar cada aspecto de las propiedades.

11.5. ¿Por qué usar estos métodos?

1. Control Preciso: Permiten definir propiedades con comportamientos personalizados.
2. Seguridad: Protegen objetos importantes contra cambios accidentales.
3. Optimización: Mejoran la claridad y estructura de datos complejos.

12. Buenas prácticas al trabajar con objetos en JS.

Trabajar con objetos de manera eficiente y profesional requiere seguir ciertas buenas prácticas. Estas no solo mejoran la legibilidad y el mantenimiento del código, sino que también ayudan a evitar errores.

1. Usar nombres descriptivos para las claves:
2. Mantener el diseño del objeto consistente:
3. Evitar modificar el prototipo directamente:

12.1. Usar nombres descriptivos para las claves:

• Las claves en un objeto deben ser claras y descriptivas, indicando su propósito o contenido.
• Esto facilita que otros desarrolladores (o tú mismo) entiendan rápidamente para qué sirve cada propiedad.

12.2. Mantener el diseño del objeto consistente:

• Los objetos similares deben seguir una estructura uniforme.
• Esto facilita iteraciones, validaciones y manejo de datos a escala.

Ejemplo y explicación:

// Diseño inconsistente
const producto1 = {
  nombre: "Laptop",
  precio: 1000,
  categoria: "Electrónica",
};

const producto2 = {
  name: "Teclado",
  cost: 50,
  type: "Accesorios",
};

// Diseño consistente
const producto3 = {
  nombre: "Laptop",
  precio: 1000,
  categoria: "Electrónica",
};

const producto4 = {
  nombre: "Teclado",
  precio: 50,
  categoria: "Accesorios",
};

console.log(producto3.categoria); // Salida: "Electrónica"
console.log(producto4.precio); // Salida: 50Lenguaje del código: JavaScript (javascript)

Explicación:

1. En el diseño inconsistente, las claves no siguen un patrón uniforme (nombre vs. name, precio vs. cost).
2. El diseño consistente asegura que las claves sean uniformes en todos los objetos, facilitando su manipulación.

12.3. Evitar modificar el prototipo directamente:

Aunque puedes modificar el prototipo de los objetos (por ejemplo, Object.prototype), esto puede causar problemas inesperados:

• Sobrescribir métodos existentes.
• Afectar todos los objetos en el programa.
• Introducir errores difíciles de depurar.

Ejemplo y explicación:

// Modificación peligrosa del prototipo
Object.prototype.saludar = function () {
  return `Hola, soy un ${this}`;
};

const animal = { tipo: "perro" };
console.log(animal.saludar()); // Salida: "Hola, soy un [object Object]"

const numero = 42;
console.log(numero.saludar()); // Salida: "Hola, soy un 42"Lenguaje del código: JavaScript (javascript)

Problemas del ejemplo:

1. La función saludar se añade al prototipo de Object, afectando a todos los objetos, incluso a tipos no relacionados.
2. Puede llevar a comportamientos inesperados y errores en bibliotecas o frameworks que dependen del prototipo.

Alternativa segura:

Si necesitas extender la funcionalidad de un objeto, utiliza una función o un método propio:

// Alternativa segura
const miObjeto = {
  nombre: "Juan",
  saludar: function () {
    return `Hola, soy ${this.nombre}`;
  },
};

console.log(miObjeto.saludar()); // Salida: "Hola, soy Juan"Lenguaje del código: JavaScript (javascript)

Explicación:

1. saludar se define dentro del objeto miObjeto, sin modificar el prototipo global.
2. Esto limita el alcance de la funcionalidad a un contexto específico, evitando efectos secundarios.

Resumen de beneficios:

1. Nombres descriptivos mejoran la legibilidad y reducen errores.
2. Diseños consistentes facilitan el trabajo con objetos similares.
3. Evitar modificar el prototipo previene problemas a gran escala y garantiza un código más seguro.

13. Preguntas frecuentes y resumen sobre los objetos en JS.