Cómo crear objetos en JavaScript

Artículo original escrito por Kaashan Hussain
Artículo original How to create objects in JavaScript
Traducido y adaptado por Josué

Todos tratamos con objetos de una forma u otra al escribir código en un lenguaje de programación. En JavaScript, los objetos nos proporcionan una forma de almacenar, manipular y enviar datos a través de la red.

Hay muchas maneras en que los objetos en JavaScript difieren de los objetos en otros lenguajes de programación convencionales, como Java. Trataré de cubrir eso en otro tema. Aquí, vamos a centrarnos solo en las diversas formas en que JavaScript nos permite crear objetos.

En JavaScript, piensa en los objetos como una colección de pares 'clave:valor'. Esto nos lleva a la primera y más popular forma de crear objetos en JavaScript.

Empecemos con esto.

1. Creación de objetos mediante la sintaxis literal de objetos

Esto es realmente sencillo. Todo lo que tienes que hacer es lanzar tus pares clave-valor separados por ':' dentro de un conjunto de llaves ({ }) y tu objeto está listo para ser servido (o consumido), como abajo:

const person = {
  firstName: 'testFirstName',
  lastName: 'testLastName'
};

Esta es la forma más sencilla y popular de crear objetos en JavaScript.

2. Creación de objetos con la palabra clave "new"

Este método de creación de objetos se asemeja a la forma en que se crean los objetos en los lenguajes basados en clases, como Java. Por cierto, a partir de ES6, las clases son nativas de JavaScript también y veremos la creación de objetos mediante la definición de clases hacia el final de este artículo. Así que, para crear un objeto usando la palabra clave 'new', necesitas tener una función constructora.

Aquí hay 2 maneras de utilizar el patrón de la palabra clave "new" -

a) Uso de la palabra clave "new" con la función constructora de objetos incorporada

Para crear un objeto, utilice la palabra clave new con el constructor Object(), así:

const person = new Object();

Ahora, para añadir propiedades a este objeto, tenemos que hacer algo así:

person.firstName = 'testFirstName';
person.lastName = 'testLastName';

Puede que te hayas dado cuenta de que este método es un poco más largo de escribir. Además, esta práctica no es recomendable, ya que hay una resolución de ámbito que ocurre detrás de las escenas para encontrar si la función del constructor es incorporada o definida por el usuario.

b) Uso de 'new' con función constructora definida por el usuario

El otro problema con el enfoque de usar la función constructora 'Object' resulta del hecho de que cada vez que creamos un objeto, tenemos que añadir manualmente las propiedades al objeto creado.

¿Qué pasaría si tuviéramos que crear cientos de objetos persona? Puedes imaginar el dolor ahora. Así que, para librarnos de añadir manualmente las propiedades a los objetos, creamos funciones personalizadas (o definidas por el usuario). Primero creamos una función constructora y luego usamos la palabra clave 'new' para obtener objetos:

function Person(fname, lname) {
  this.firstName = fname;
  this.lastName = lname;
}

Ahora, cada vez que quieras un objeto Person, simplemente haz esto:

const personOne = new Person('testFirstNameOne', 'testLastNameOne');
const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');

3. Uso de Object.create() para crear nuevos objetos

Este patrón es muy útil cuando se nos pide crear objetos a partir de otros objetos existentes y no utilizar directamente la sintaxis de la palabra clave 'new'. Veamos cómo utilizar este patrón. Como se indica en MDN:

El método Object.create() crea un nuevo objeto, utilizando un objeto existente como prototipo del nuevo objeto creado.

Para entender el método Object.create, basta con recordar que toma dos parámetros. El primer parámetro es un objeto obligatorio que sirve como prototipo del nuevo objeto a crear. El segundo parámetro es un objeto opcional que contiene las propiedades que se añadirán al nuevo objeto.

No vamos a profundizar en los prototipos y las cadenas de herencia ahora para mantener nuestro enfoque en el tema. Pero como punto rápido, puedes pensar en los prototipos como objetos de los que otros objetos pueden tomar prestadas las propiedades/métodos que necesitan.

Imagina que tienes una organización representada por orgObject

const orgObject = { company: 'ABC Corp' };

Y quieres crear empleados para esta organización. Claramente, usted quiere todos los objetos de los empleados.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } });

console.log(employee); // { company: "ABC Corp" }
console.log(employee.name); // "EmployeeOne"

4. Uso de Object.assign() para crear nuevos objetos

¿Qué pasa si queremos crear un objeto que necesita tener propiedades de más de un objeto? Objeto.assign() nos ayuda.

Como se indica en MDN:

El Object.assign() se utiliza para copiar los valores de todas las propiedades propias enumerables de uno o más objetos de origen a un objeto de destino. Devolverá el objeto de destino.

El método Object.assign() puede tomar cualquier número de objetos como parámetros. El primer parámetro es el objeto que creará y devolverá. El resto de los objetos que se le pasen se utilizarán para copiar las propiedades en el nuevo objeto. Vamos a entenderlo extendiendo el ejemplo anterior que vimos.

Supongamos que tiene dos objetos como se muestra a continuación:

const orgObject = { company: 'ABC Corp' }
const carObject = { carName: 'Ford' }

Ahora, desea un objeto empleado de 'ABC Corp' que conduzca un automóvil 'Ford'. Puede hacerlo con la ayuda de Object.assign lo siguiente:

const employee = Object.assign({}, orgObject, carObject);

Ahora, obtienes un employeeobjeto que tiene companyy carNamecomo su propiedad.

console.log(employee); // { carName: "Ford", company: "ABC Corp" }

5. Usar clases de ES6 para crear objetos

Notará que este método es similar al uso de 'nuevo' con la función de constructor definida por el usuario. Las funciones del constructor ahora se reemplazan por clases, ya que son compatibles con las especificaciones de ES6. Veamos el código ahora.

class Person {
  constructor(fname, lname) {
    this.firstName = fname;
    this.lastName = lname;
  }
}

const person = new Person('testFirstName', 'testLastName');

console.log(person.firstName); // testFirstName
console.log(person.lastName); // testLastName

Estas son todas las formas que conozco para crear objetos en JavaScript. Espero que hayas disfrutado esta publicación y ahora entiendas cómo crear objetos.

¡Gracias por su tiempo para leer este artículo!