Comment créer des objets en JavaScript

Nous traitons tous des objets d'une manière ou d'une autre en écrivant du code dans un langage de programmation. En JavaScript, les objets nous permettent de stocker, manipuler et envoyer des données sur le réseau.

Il existe de nombreuses façons dont les objets en JavaScript diffèrent des objets dans d'autres langages de programmation traditionnels, comme Java. Je vais essayer de couvrir cela dans un autre sujet. Ici, concentrons-nous uniquement sur les différentes manières dont JavaScript nous permet de créer des objets.

En JavaScript, considérez les objets comme une collection de paires «clé: valeur». Cela nous amène à la première et la plus populaire façon de créer des objets en JavaScript.

Commençons cela.

1. Création d'objets à l'aide de la syntaxe littérale d'objet

C'est vraiment simple. Tout ce que vous avez à faire est de jeter vos paires de valeurs clés séparées par ':' à l'intérieur d'un ensemble d'accolades ({}) et votre objet est prêt à être servi (ou consommé), comme ci-dessous:

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

C'est le moyen le plus simple et le plus populaire de créer des objets en JavaScript.

2. Création d'objets à l'aide du mot-clé «nouveau»

Cette méthode de création d'objets ressemble à la façon dont les objets sont créés dans des langages basés sur des classes, comme Java. À propos, à partir de ES6, les classes sont également natives de JavaScript et nous examinerons la création d'objets en définissant des classes vers la fin de cet article. Donc, pour créer un objet en utilisant le mot-clé 'new', vous devez avoir une fonction constructeur.

Voici deux façons d'utiliser le modèle de mot-clé «nouveau» -

a) Utilisation du mot-clé 'new' avec la fonction de constructeur d'objet intégrée

Pour créer un objet, utilisez le nouveau mot-clé avec Object()constructeur, comme ceci:

const person = new Object();

Maintenant, pour ajouter des propriétés à cet objet, nous devons faire quelque chose comme ceci:

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

Vous avez peut-être pensé que cette méthode est un peu plus longue à taper. En outre, cette pratique n'est pas recommandée car il existe une résolution de portée qui se produit en arrière-plan pour déterminer si la fonction de constructeur est intégrée ou définie par l'utilisateur.

b) Utilisation de 'new' avec la fonction constructeur définie par l'utilisateur

L'autre problème avec l'approche d'utilisation de la fonction constructeur 'Object' résulte du fait qu'à chaque fois que nous créons un objet, nous devons ajouter manuellement les propriétés à l'objet créé.

Et si nous devions créer des centaines d'objets de personne? Vous pouvez imaginer la douleur maintenant. Ainsi, pour se débarrasser de l'ajout manuel de propriétés aux objets, nous créons des fonctions personnalisées (ou définies par l'utilisateur). Nous créons d'abord une fonction constructeur, puis utilisons le mot-clé 'new' pour obtenir des objets:

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

Maintenant, chaque fois que vous voulez un objet 'Person', faites simplement ceci:

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

3. Utilisation d'Object.create () pour créer de nouveaux objets

Ce modèle est très pratique lorsque l'on nous demande de créer des objets à partir d'autres objets existants et non directement en utilisant la syntaxe de mot-clé «nouveau». Voyons comment utiliser ce modèle. Comme indiqué sur MDN:

La Object.create()méthode crée un nouvel objet, en utilisant un objet existant comme prototype de l'objet nouvellement créé.

Pour comprendre la Object.createméthode, rappelez-vous simplement qu'elle prend deux paramètres. Le premier paramètre est un objet obligatoire qui sert de prototype du nouvel objet à créer. Le deuxième paramètre est un objet facultatif qui contient les propriétés à ajouter au nouvel objet.

Nous n'allons pas approfondir maintenant les prototypes et les chaînes d'héritage pour rester concentrés sur le sujet. Mais en bref, vous pouvez considérer les prototypes comme des objets auxquels d'autres objets peuvent emprunter les propriétés / méthodes dont ils ont besoin.

Imaginez que vous avez une organisation représentée par orgObject

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

Et vous voulez créer des employés pour cette organisation. De toute évidence, vous voulez tous les objets employés.

const employee = Object.create(orgObject, { name: { value: 'EmployeeOne' } }); console.log(employee); // { company: "ABC Corp" } console.log(employee.name); // "EmployeeOne"

4. Utilisation d'Object.assign () pour créer de nouveaux objets

Que faire si nous voulons créer un objet qui doit avoir des propriétés de plusieurs objets? Object.assign()vient à notre aide.

Comme indiqué sur MDN:

La méthode est utilisée pour copier les valeurs de toutes les propriétés propres énumérables d'un ou plusieurs objets source vers un objet cible. Il renverra l'objet cible.Object.assign()

Object.assignLa méthode peut prendre n'importe quel nombre d'objets comme paramètres. Le premier paramètre est l'objet qu'il créera et retournera. Le reste des objets qui lui sont passés sera utilisé pour copier les propriétés dans le nouvel objet. Comprenons-le en prolongeant l'exemple précédent que nous avons vu.

Supposons que vous ayez deux objets comme ci-dessous:

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

Maintenant, vous voulez un objet employé de «ABC Corp» qui conduit une voiture «Ford». Vous pouvez le faire à l'aide de Object.assigncomme ci-dessous:

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

Maintenant, vous obtenez un employeeobjet qui a companyet carNamecomme sa propriété.

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

5. Utilisation des classes ES6 pour créer des objets

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!