Todos tratamos con objetos de una forma u otra mientras escribimos 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 formas en las 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í, centrémonos solo en las diversas formas en que JavaScript nos permite crear objetos.
En JavaScript, piense en los objetos como una colección de pares 'clave: valor'. Esto nos trae la primera y más popular forma en que creamos objetos en JavaScript.
Empecemos con esto.
1. Creación de objetos con sintaxis literal de objeto
Esto es realmente sencillo. Todo lo que tiene que hacer es colocar sus pares de valores clave separados por ':' dentro de un conjunto de llaves ({}) y su objeto está listo para ser servido (o consumido), como se muestra a continuación:
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 "nueva"
Este método de creación de objetos se asemeja a la forma en que se crean los objetos en lenguajes basados en clases, como Java. Por cierto, comenzando con ES6, las clases también son nativas de JavaScript y veremos la creación de objetos definiendo clases hacia el final de este artículo. Entonces, para crear un objeto usando la palabra clave 'nuevo', necesita tener una función de constructor.
A continuación, se muestran 2 formas en las que puede utilizar el patrón de palabras clave "nuevo":
a) Usar la palabra clave 'nueva' con la función constructora de objetos incorporada
Para crear un objeto, use la nueva palabra clave con Object()constructor, así:
const person = new Object();Ahora, para agregar propiedades a este objeto, tenemos que hacer algo como esto:
person.firstName = 'testFirstName'; person.lastName = 'testLastName';Es posible que haya pensado que este método es un poco más largo de escribir. Además, esta práctica no se recomienda ya que hay una resolución de alcance que ocurre detrás de escena para encontrar si la función constructora está incorporada o definida por el usuario.
b) Usar 'nuevo' con la función de constructor definida por el usuario
El otro problema con el enfoque de usar la función constructora 'Objeto' resulta del hecho de que cada vez que creamos un objeto, tenemos que agregar manualmente las propiedades al objeto creado.
¿Y si tuviéramos que crear cientos de objetos persona? Puedes imaginar el dolor ahora. Entonces, para deshacernos de agregar propiedades manualmente a los objetos, creamos funciones personalizadas (o definidas por el usuario). Primero creamos una función constructora y luego usamos la palabra clave 'nueva' para obtener objetos:
function Person(fname, lname) { this.firstName = fname; this.lastName = lname; }Ahora, cada vez que desee un objeto 'Persona', simplemente haga esto:
const personOne = new Person('testFirstNameOne', 'testLastNameOne'); const personTwo = new Person('testFirstNameTwo', 'testLastNameTwo');3. Usando Object.create () para crear nuevos objetos
Este patrón es muy útil cuando se nos pide que creemos objetos a partir de otros objetos existentes y no utilizando directamente la sintaxis de palabras clave "nueva". Veamos cómo usar este patrón. Como se indica en MDN:
ElObject.create()método crea un nuevo objeto, utilizando un objeto existente como prototipo del objeto recién creado.
Para comprender el Object.createmétodo, recuerde que se necesitan 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 agregarán al nuevo objeto.
No profundizaremos en prototipos y cadenas de herencia ahora para mantener nuestro enfoque en el tema. Pero como punto rápido, puede 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 desea crear empleados para esta organización. Claramente, desea todos los objetos de empleado.
const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"4. Usando Object.assign () para crear nuevos objetos
¿Qué pasa si queremos crear un objeto que necesita tener propiedades de más de un objeto? Object.assign()viene en nuestra ayuda.
Como se indica en MDN:
El método 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 objetivo.Object.assign()Object.assignEl método 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. Entendamos esto ampliando el ejemplo anterior que vimos.
Suponga que tiene dos objetos como se muestra a continuación:
const orgObject = { company: 'ABC Corp' } const carObject = { carName: 'Ford' }Ahora, quiere un empleado objeto de 'ABC Corp' que conduzca un automóvil 'Ford'. Puede hacerlo con la ayuda de Object.assignlo siguiente:
const employee = Object.assign({}, orgObject, carObject);
Ahora, obtienes un employeeobjeto que tiene companyy carNamecomo propiedad.
console.log(employee); // { carName: "Ford", company: "ABC Corp" }5. Usar clases de ES6 para crear objetos
You will notice that this method is similar to using ‘new’ with user defined constructor function. The constructor functions are now replaced by classes as they are supported through ES6 specifications. Let’s see the code now.
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 These are all the ways I know to create objects in JavaScript. I hope you enjoyed this post and now understand how to create objects.
Thanks for your time for reading this article. If you liked this post and it was helpful to you, please click the clap ? button to show your support. Keep learning more!