JavaScript – Objetos

Que encontrarás aquí?

Aquí encontraras mis apuntes sobre objetos en JavaScript, y además, links hacia documentación oficial.

• Qué es un objeto?
• Agregar o eliminar propiedades a un objeto.
• Destructuring – Extraer el valor de un objeto.
• Freeze – Como congelar un objeto.
• Seal – Sellar un objeto.
• Copiar las propiedades de objetos en un nuevo objeto.
• Funciones en Objetos “métodos” y acceder a sus valores.
• Object Constructor.
• Como devolver las claves y valores en arrays.
• Mas información

Qué es un objeto?

Los objetos en JavaScript son una pieza principal en su programación y podemos entender los objetos como una agrupación de variables, funciones o incluso otros objetos.

Estas variables o funciones son conocidas como propiedades y una propiedad es una asociación entre un nombre (o clave) y un valor. Además el valor de una propiedad podría ser una función, pero en este caso son llamadas métodos.

const producto = {

    nombre: "eric",
    apellido: "sanchez",
    dataNacimiento: "27/10/1990",
    
}


// El siguiente objeto contiene otro objeto que contiene otro objeto.
const llibre = {

    nom: "los 7 pilars",
    edicio: 3,
    editorial: "magenta-lyrics",
    preu: 43,
    fechaPublicacio: "27/10/1970",
    autor: "Eric",
    detalles: {
        nuevo: true,
        reacondicionado: false,
        NumeroID: "A134152DD4",
        fabricacion: {
            pais: "china",
            industria: "papeleria-wuhan",

        }
    }

}

⠀⠀⠀⢀⣤⣴⣶⣤⣀⠀  Un objeto puede ser como
⠀⠀⠀⣾⠛⠉⠉⠙⢿⡆⠀una⠀Matryoshka
⠀⠀⠀⡇⠀⠀⠀⠀⠀⡇⠀⢀⣴⠶⠶⢦⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣿⣄⣀⣀⣠⣾⡇⠀⢸⠃⠀⠀⠀⢿⠀⠀⡴⠶⠶⡄⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⣿⣿⣿⣿⣿⣿⣿⡀⢸⣦⣀⣀⣠⣇⠀⠀⠀⠀⠀⡹⠀⢀⡴⠶⡄⠀⠀
⠀⠀⠻⠿⢿⣿⣿⣿⠿⠿⠃⢸⣿⣿⣿⣿⣿⡄⢠⣷⣶⣾⣧⠀⢸⣀⢀⡇⠀⠀
⠀⠐⣷⣶⣤⣤⣤⣤⣶⣶⣿⠀⣉⣉⣉⣉⣩⣄⠈⠿⠿⠿⠟⠂⢸⣿⣿⣧⠀⠀
⠀⠀⢻⣿⣿⣿⣿⣿⣿⣿⠇⢸⣿⣿⣿⣿⣿⡏⢠⣶⣶⣶⣶⡇⢠⣄⣀⣤⠀⠀
⠀⠀⠀⠻⠿⠿⠿⠿⠿⠋⠀⠘⠿⠿⠿⠿⠟⠀⠘⠿⠿⠿⠟⠀⠸⠿⠿⠏⠀

Agregar o eliminar propiedades a un objeto

En un objeto podemos añadir o eliminar mas propiedades según la necesidad.

const producto = {

    nombre: "eric",
    apellido: "sanchez",
    dataNacimiento: "27/10/1990",
}


// Agregar una nueva propiedad

producto.mote = "ericsama";


// Eliminar propietats de un objecte
delete producto.dataNacimiento;

console.log(producto)
console.log(producto.dataNaixement)
console.log(producto.dataNaixement)

Destructuring – Extraer el valor de un objeto

La sintaxis de asignación de desestructuración es una expresión de JavaScript que hace posible descomprimir valores de matrices o propiedades de objetos en distintas variables.

Developer.Mozilla

Freeze – Como congelar un objeto

Muy probablemente te hayas dado cuenta de que por ahora estamos declarando los objetos con const y estos no siguen las normas de las variables como explico en la entrada: JavaScript – Variables y tipos de datos.

Entonces que podemos hacer para que el valor de una clave sea constante?
Para ello debemos invocar el modo estricto:

/* 
Modo estricto, este va a exigir que se cumplan ciertas medidas de seguridad en JavaScript y nos desbloqueara un par de métodos de objetos que nos permitirá controlarlos mejor.
*/

"use strict"; 

Seal – Sellar un objeto

Sellar un objeto evita las extensiones y hace que las propiedades existentes no sean configurables. Un objeto sellado tiene un conjunto fijo de propiedades: no se pueden agregar nuevas propiedades, no se pueden eliminar las propiedades existentes, no se puede cambiar su numerabilidad y configuración, y su prototipo no se puede reasignar, pero, los valores de las propiedades existentes aún se pueden cambiar siempre que se puedan escribir.

"use strict";

const producto = {
    nombre: 'monitor de 20 Pulgadas',
    precio: 300,
    disponible: true,
}

Object.seal(producto);


producto.disponible = false;
console.log(producto);


// Podemos comprobar si un objeto esta sellado.
console.log(Object.isSealed(producto));

Copiar las propiedades de objetos en un nuevo objeto

Tenemos 2 formas para poder copiar las propiedades de uno o varios objetos a un nuevo objeto. Las dos formas nos permitirán lograr el mismo resultado.

Con el method object assign:

const producto = {
    nombre: 'monitor de 20 Pulgadas',
    precio: 300,
    disponible: true,
}

const medidas = {
    preso: '1kg',
    altura: '1m',
    anchura: '50cm',
}



// Object.assign nos permite elegir entre un objeto ya creado o varios y concatenar sus propiedades en un nuevo objeto

const resultado = Object.assign(producto, medidas);

console.log(resultado);

Funciones en Objetos “metodos” y acceder a sus valores.

Los objetos pueden tener de por si funciones anidadas. estas son llamadas métodos.

Con estas funciones podemos interactuar con los valores de las claves internas del objeto:

const nombre = "Hola";
const precio = 50;
const producto = {
    nombre: "monitor de 20 Pulgadas",
    precio: 300,
    disponible: true,
    mostrarInfo: function (){
        console.log(`El producto: ${this.nombre} tiene un precio de: ${precio} `)
    }
}

// this.nombre indica que el valor es propio del objeto.
// Observa como el valor de precio no equivale al precio real del monitor.

// Ejecutamos el method object creado por nosotros
producto.mostrarInfo();

// Object literal
const producto = {
    nombre: "monitor de 20 Pulgadas",
    precio: 300,
    disponible: true,
}


// OBJECT CONSTRUCTOR
function Producto(nombre, precio) {
    this.nombre = nombre;
    this.precio = precio;
    this.disponible = true;
}

//Creamos 2 nuevos objetos a partir del object constructor llamado producto
const producto2 = new Producto('Monitor 24 Pulgadas', 500);
const producto3 = new Producto('LCD DISCK', 120);



// El tipo de dato se llamara Producto a diferencia del objeto literal que no tendrá "titulo"
console.log(producto);
console.log(producto2);
console.log(producto3);

Como devolver las claves y valores en arrays.

De un objeto podemos extraer en formato de cadena los nombres de las claves, de sus valores, o de ambos.
Para esto tenemos a nuestra disposición 3 métodos de objeto:

const producto = {
    nombre: "monitor de 20 Pulgadas",
    precio: 300,
    disponible: true,
}



// Devuelve las keys de un objecto
console.log(Object.keys(producto));

// Devuelve el valor de las keys del objeto
console.log(Object.values(producto));

// Devuelve las keys i sus valores
console.log(Object.entries(producto));

Mas información

JavaScript contiene en su código bastantes mas métodos de objetos, propiedades de instancia, métodos de instancia… para mas información consultar este link!

Puede interesarte:

HTML
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.

CSS
CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML.

Javascript
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web.

Quieres saber mas?