logo

6 formas de crear un objeto en JavaScript

Un objeto de JavaScript es una colección de pares clave-valor conocidos como propiedades. Los objetos se utilizan comúnmente para almacenar, manipular y enviar datos a través de la red.

Hay varias formas disponibles para crear un objeto en JavaScript. Puedes usar:

  • Objeto literal
  • Object Constructor
  • Función constructora
  • Object.create() Método
  • Object.assign() Método
  • Clases ES6

1 — Objeto literal

La forma más sencilla y popular de crear objetos en JavaScript es mediante la sintaxis literal de objetos. Todo lo que necesita hacer es poner todos sus pares clave-valor separados por dos puntos (: ) dentro de llaves como se muestra a continuación:

const fruits = {
    mango: '🥭️',
    apple: '🍎',
    lemon: '🍋',
    cherry: '🍒'
};

2 — Object Constructor

La segunda forma de crear un objeto en JavaScript es usando el Object() incorporado constructor. Puedes usar el new palabra clave para inicializar una instancia de Object :

const fruits = new Object();

Ahora, para agregar propiedades al objeto anterior, debe usar el punto (. ) notación como se muestra a continuación:

const fruits = new Object();

fruits.mango = '🥭️';
fruits.apple = '🍎';
fruits.lemon = '🍋';
fruits.cherry = '🍒';

3 — Función constructora

El new La palabra clave también se puede usar con una función de constructor definida por el usuario para crear un objeto. Una función constructora no es más que una simple función de JavaScript que, cuando se llama con un new palabra clave, actúa como constructor y devuelve un objeto.

Aquí hay un ejemplo:

function User(name, age) {
    this.name = name;
    this.age = age;
};

const user = new User('John Doe', 45);

En el User anterior función, el this palabra clave se refiere al objeto que se está creando, por lo que el name y age se convierten en las propiedades del objeto recién creado.

Este enfoque es mejor que el Object incorporado inicialización del constructor. Nos permite crear rápidamente múltiples objetos del mismo tipo sin agregar manualmente propiedades a cada objeto.

4 — Object.create() Método

El Object.create() El método nos permite crear un nuevo objeto, utilizando un objeto existente como prototipo del objeto recién creado. Este método es especialmente útil cuando desea crear un nuevo objeto a partir de un objeto ya existente.

El Object.create() El método toma hasta dos parámetros. El primer parámetro obligatorio es el objeto que sirve como prototipo para el objeto recién creado. El segundo parámetro es un objeto opcional que contiene las propiedades que se agregarán al nuevo objeto.

Digamos que tiene el siguiente objeto existente:

const Vehicle = {
    maker: 'BMW',
    color: 'Black'
};

Para crear un nuevo objeto usando el Vehicle prototipo de, puede hacer lo siguiente:

const vehicle = Object.create(Vehicle);

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red

También puede especificar propiedades adicionales para el nuevo objeto como un segundo parámetro para Object.create() con opciones de atributo como configurable , enumerables , escribible y valor como se muestra a continuación:


const vehicle = Object.create(Vehicle, {
    type: {
        value: 'Electric',
        writable: true,
        configurable: true,
        enumerable: false
    }
});

console.log(vehicle.maker); // Tesla
console.log(vehicle.color); // Red
console.log(vehicle.type); // Electric

Eche un vistazo a este artículo de MDN para obtener más información sobre el Object.create() método.

5 — Object.assign() Método

La quinta forma de crear un objeto en JavaScript es usando el Object.assign() método. Este método toma uno o más objetos de origen como entrada y copia todas las propiedades enumerables en el objeto de destino.

Puede pasar cualquier cantidad de objetos a Object.assign() como parámetros. El primer parámetro es el objetivo objeto. El resto de los parámetros son fuente objetos que contienen propiedades que desea aplicar al objeto de destino.

Supongamos que tiene los siguientes dos objetos:

const car = {
    maker: 'Model X',
    color: 'Black'
};

const maker = {
    name: 'Tesla'
};

Ahora quieres combinar ambos car y maker objetos para crear un vehicle objeto. Solo usa Object.assign() para fusionar ambos objetos existentes para crear un nuevo objeto como se muestra a continuación:

const vehicle = Object.assign({}, maker, car);

console.log(vehicle);

// { name: 'Tesla', maker: 'Model X', color: 'Black' }

Eche un vistazo a esta guía para obtener más información sobre el Object.assign() método.

6 — Clases ES6

ES6 (ECMAScript 2015) introdujo, por primera vez, el concepto de clases en JavaScript. Puedes usar el class palabra clave para definir una nueva clase en JavaScript en lugar de un constructor de funciones, y luego use el new palabra clave para crear una instancia de ella.

Veamos el siguiente ejemplo:

class User {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    sayHi() {
        return `Hi ${this.name} 👋`;
    }
}

const user = new User('Atta', 30);

console.log(user.sayHi()); // Hi Atta 👋
console.log(user.age); // 30

Conclusión

Eso es todo amigos para crear objetos en JavaScript. Aprendimos sobre 6 formas distintas de crear un objeto, incluida la sintaxis literal del objeto, Object constructor, funciones constructoras, Object.create() , Object.assign() y clases ES6.

Todos estos métodos son útiles en diferentes escenarios. El método comúnmente utilizado por los desarrolladores de JavaScript para definir un objeto es el literal de objeto. Es una forma sencilla y rápida de definir un objeto con todos los pares clave-valor requeridos en JavaScript.