Cómo usar métodos de objetos en JavaScript

Introducción

Los objetos de JavaScript son grupos de pares clave-valor. Los valores pueden consistir en propiedades y métodos, y pueden contener todos los demás tipos de datos de JavaScript, como cadenas, números y booleanos.

Todos los objetos de JavaScript derivan del constructor del Objectprincipal.Object tiene muchos métodos incorporados útiles a los cuales podemos acceder y recurrir para simplificar el trabajo con objetos individuales. A diferencia de los métodos Array.prototype, como sort() y reverse() que se usan en la instancia de Array, los métodos Object se usan directamente en el constructor Object y emplean la instancia del objeto como parámetro. Esto se conoce como método estático.

En este tutorial, se detallarán importantes métodos de objeto incorporados, y en cada sección posterior se abordará un método específico y sxe proporcionará un ejemplo de uso.

Requisitos previos

Para aprovechar al máximo de este tutorial, debería estar familiarizado con la creación, la modificación y el funcionamiento de los objetos, aspectos que podrá ver en el artículo “Comprensión de objetos en JavaScript”.

Para obtener orientación adicional sobre JavaScript en general, puede revisar nuestra serie Cómo producir código en JavaScript.

Object.create()

El método Object.create() se usa para crear un nuevo objeto y vincularlo al prototipo de un objeto existente.

Podemos crear una instancia de objeto job y ampliarla para obtener un objeto más específico.

// Initialize an object with properties and methods
const job = {
    position: 'cashier',
    type: 'hourly',
    isAvailable: true,
    showDetails() {
        const accepting = this.isAvailable ? 'is accepting applications' : "is not currently accepting applications";

        console.log(`The ${this.position} position is ${this.type} and ${accepting}.`);
    }
};

// Use Object.create to pass properties
const barista = Object.create(job);

barista.position = "barista";
barista.showDetails();

Output
The barista position is hourly and is accepting applications.

El objeto barista ahora tiene una propiedad, position, pero las propiedades y los métodos de job que restan están disponibles a través del prototipo. Object.create() es útil para que el código siga siendo DRY mediante la reducción de la duplicación.

Object.keys()

Object.keys() crea una matriz que contiene las claves de un objeto.

Podemos crear un objeto e imprimir la matriz de claves.

// Initialize an object
const employees = {
	boss: 'Michael',
	secretary: 'Pam',
	sales: 'Jim',
	accountant: 'Oscar'
};

// Get the keys of the object
const keys = Object.keys(employees);

console.log(keys);

Output
["boss", "secretary", "sales", "accountant"]

Object.keys puede usarse para generar repeticiones a través de las claves y los valores de un objeto.

// Iterate through the keys
Object.keys(employees).forEach(key => {
    let value = employees[key];

	 console.log(`${key}: ${value}`);
});

Output
boss: Michael
secretary: Pam
sales: Jim
accountant: Oscar

Object.keys también es útil para verificar la extensión de un objeto.

// Get the length of the keys
const length = Object.keys(employees).length;

console.log(length);

Output
4

Mediante la propiedad length, pudimos contar las 4 propiedades de employees.

Object.values()

Object.values() crea una matriz que contiene los valores de un objeto.

// Initialize an object
const session = {
    id: 1,
    time: `26-July-2018`,
    device: 'mobile',
    browser: 'Chrome'
};

// Get all values of the object
const values = Object.values(session);

console.log(values);

Output
[1, "26-July-2018", "mobile", "Chrome"]

Object.keys() y Object.values() le permiten mostrar los datos de un objeto.

Object.entries()

Object.entries()crea una matriz anidada con los pares clave-valor de un objeto.

// Initialize an object
const operatingSystem = {
    name: 'Ubuntu',
    version: 18.04,
    license: 'Open Source'
};

// Get the object key/value pairs
const entries = Object.entries(operatingSystem);

console.log(entries);

Output
[
    ["name", "Ubuntu"]
    ["version", 18.04]
    ["license", "Open Source"]
]

Una vez que contemos con las matrices de pares claves-valor, podremos usar el método forEach() para repetir los resultados y trabajar con ellos.

// Loop through the results
entries.forEach(entry => {
    let key = entry[0];
    let value = entry[1];

    console.log(`${key}: ${value}`);
});

Output
name: Ubuntu
version: 18.04
license: Open Source

El método Object.entries() solo mostrará las propiedades de la instancia del objeto. No mostrará ninguna propiedad que pueda heredarse a través de su prototipo.

Object.assign()

Object.assign() se usa para copiar valores de un objeto a otro.

Podemos crear dos objetos y fusionarlos con Object.assign().

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the objects
const character = Object.assign(name, details);

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

También es posible usar el operador de propagación (...) para realizar la misma tarea. En el siguiente código, modificaremos la forma en que declaramos character mediante la fusión de los objetos name y details.

// Initialize an object
const name = {
    firstName: 'Philip',
    lastName: 'Fry'
};

// Initialize another object
const details = {
    job: 'Delivery Boy',
    employer: 'Planet Express'
};

// Merge the object with the spread operator
const character = {...name, ...details}

console.log(character);

Output
{firstName: "Philip", lastName: "Fry", job: "Delivery Boy", employer: "Planet Express"}

Esta sintaxis de propagación en literales de objeto también se conoce como “clonación superficial”.

Object.freeze()

Object.freeze() impide la modificación de propiedades y valores de un objeto, y evita que se agreguen propiedades a un objeto o que se eliminen de él.

// Initialize an object
const user = {
	username: 'AzureDiamond',
	password: 'hunter2'
};

// Freeze the object
const newUser = Object.freeze(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "hunter2"}

En el ejemplo anterior, intentamos anular la contraseña hunter2 con *******, pero la propiedad password siguió siendo la misma. También intentamos agregar una nueva propiedad, active, pero no fue posible.

Object.isFrozen() está disponible para determinar si un objeto se congeló o no, y muestra un booleano.

Object.seal()

Object.seal() impide la adición de nuevas propiedades a un objeto, pero permite la modificación de propiedades existentes. Este método es similar a Object.freeze(). Actualice su consola antes de implementar el código siguiente para evitar un error.

// Initialize an object
const user = {
	username: 'AzureDiamond',
	password: 'hunter2'
};

// Seal the object
const newUser = Object.seal(user);

newUser.password = '*******';
newUser.active = true;

console.log(newUser);

Output
{username: "AzureDiamond", password: "*******"}

La nueva propiedad active no se agregó al objeto sellado, pero la propiedad password se cambió de forma correcta.

Object Object.getPrototypeOf()

Object.getPrototypeOf() se usa para obtener la propiedad interna oculta [[Prototype]] de un objeto, también accesible a través de la propiedad __proto__.

En este ejemplo, podemos crear una matriz que tenga acceso al prototipo Array.

const employees = ['Ron', 'April', 'Andy', 'Leslie'];

Object.getPrototypeOf(employees);

Output
[constructor: ƒ, concat: ƒ, find: ƒ, findIndex: ƒ, pop: ƒ, …]

Podemos ver en el resultado que el prototipo de la matriz employees tiene acceso a pop, find y otros métodos de prototipo Array. Podemos confirmarlo probando el prototipo employees en comparación con Array.prototype.

Object.getPrototypeOf(employees) === Array.prototype;

Output
true

Este método puede ser útil para obtener más información sobre un objeto o asegurarse de que tenga acceso al prototipo de otro objeto.

También existe un método Object.setPrototypeOf() asociado, que agregará un prototipo a otro objeto. Se recomienda usar Object.create() en su lugar, ya que es más rápido y tiene mejor rendimiento.

Conclusión

Los objetos tienen muchos métodos útiles que nos ayudan a modificarlos, protegerlos y generar repeticiones de ellos. En este tutorial, abordamos la forma de crear y asignar nuevos objetos, repetir las claves y los valores de estos y a congelarlos o sellarlos.

Si necesita consultar material sobre los objetos de JavaScript, puede leer “Información sobre objetos de JavaScript”. Si desea familiarizarse con la cadena de prototipos, puede consultar “Información sobre los prototipos y la herencia en JavaScript”.