Objets JavaScript. Partie 8 du cours JavaScript de Débutant à Avancé en 10 articles de blog

Ceci est la partie 8 de la série d’articles de blog sur JavaScript qui vous fera passer de débutant à avancé. Si vous n’avez pas lu l’article de blog précédent sur les fonctions JavaScript, vous pouvez le consulter ici. À la fin de cette série, vous connaîtrez toutes les bases nécessaires pour commencer à coder en JavaScript. Sans plus tarder, commençons avec le huitième tutoriel.

Objets JavaScript – table des matières :

1. Objets JavaScript
2. Fonctions constructrices d’objets

Objets JavaScript

Les objets JavaScript jouent un rôle important. Bien que ce soit un sujet relativement vaste, il peut également être relativement facile de développer une compréhension de ceux-ci. L’une des manières les plus courantes de comprendre les objets est de penser que vous recréez une voiture en code. Nous aurons deux concepts principaux lorsque nous traiterons des objets. Ils auront des propriétés et des méthodes. Les propriétés sont les choses que les objets JavaScript possèdent et les méthodes sont les choses que les objets peuvent effectuer. Voyons cela avec quelques exemples.

// définissons plusieurs objets pour mieux comprendre
const plane = {
    numberOfWings: 2, 
    canFly: true, 
    takeOff: function(){return "L'avion commence à décoller..."},
    land: function(){return "L'avion commence à atterrir..."} 
    }
const car = {
    brand: "Tesla",
    isElectric: true,
    numberOfDoors: 4,
    moveForward: function(){return "La voiture avance..."},
    smartSummon: function(){return "La voiture commence à se diriger vers vous..."}
}

// nous pouvons accéder et afficher dans la console les propriétés qu'ils ont :
console.log("Les propriétés de l'avion :");
console.log("Peut voler : " + plane.canFly);
console.log("Nombre total d'ailes : " + plane.numberOfWings);
// nous pouvons également faire en sorte que l'avion effectue des actions
console.log(plane.takeOff());
console.log(plane.land());
// si vous regardez de plus près, vous pouvez voir que 
// nous ne faisons pas directement console.log des actions à l'intérieur des méthodes
// au lieu de cela, nous les retournons depuis les fonctions
// et dans ce cas, nous les affichons dans la console
// de cette façon, si nous le souhaitons, nous pouvons également donner à l'utilisateur une alerte
// qui indique que l'avion décolle
alert(plane.takeOff());
// nous pouvons également apprendre les propriétés que la voiture a 
// et les afficher dans la console pour un exercice supplémentaire
console.log("Est-ce une voiture électrique ? " + car.isElectric);
console.log("Quelle est la marque de la voiture : " + car.brand);
console.log("Combien de portes a-t-elle ? " + car.numberOfDoors);
console.log(car.smartSummon());
console.log(car.moveForward());

Lorsque nous exécutons le code ci-dessus, nous devrions obtenir la sortie suivante :

Nous venons de voir deux exemples principaux d’objets JavaScript : un avec un avion et un avec une voiture. Tout comme les avions et les voitures ont différentes propriétés et différentes choses qu’ils peuvent faire, différents objets que nous créons peuvent faire différentes choses et avoir différentes propriétés. Si vous regardez de plus près, vous pouvez commencer à voir un schéma dans la façon dont nous définissons des objets, des propriétés et des méthodes.

Nous commençons à définir des objets tout comme nous définissons des variables ou des constantes, dans ce cas, il est généralement suffisant d’utiliser des constantes lors de la définition d’objets JavaScript. Mais plutôt que d’assigner simplement cette constante à une valeur, tout comme nous l’avons fait avec des constantes régulières, nous ouvrons et fermons un ensemble d’accolades et fournissons essentiellement les données sous forme de paires clé-valeur. Notez que la définition des propriétés et des méthodes est assez similaire. La principale différence est que lors de la définition des propriétés, nous assignons les noms à une valeur que nous récupérerons plus tard. Cependant, lorsque nous définissons une méthode, nous devons fournir une fonction que nous exécuterons plus tard. Cette différence se reflète également dans la façon dont nous les appelons par la suite. Par exemple :

// lorsque nous récupérons une propriété, nous n'utilisons pas de crochets à la fin
console.log("Peut voler : " + plane.canFly);
// lorsque nous récupérons des méthodes, 
// nous les exécutons également en ajoutant des crochets après elles
// les méthodes ici sont essentiellement des fonctions qui 
// appartiennent à un objet spécifique
console.log(plane.takeOff());

Il est important que nous ajoutions les parenthèses après les méthodes, tout comme nous l’avons fait avec des fonctions régulières. Sinon, nous aurons simplement la fonction elle-même plutôt que d’exécuter la fonction.

// pour exécuter la méthode de l'objet, nous devrions
// ajouter les parenthèses juste après le nom de la méthode
// sinon, nous obtiendrons la définition de la méthode 
// comme dans cet exemple
alert(plane.takeOff);

Le résultat affiché est exactement ce que nous avons défini lors de la création de la méthode. Vous pouvez également voir que nous définissons une fonction en cours de route. Dans ce cas, nous définissons la fonction sans nom, ce qui est possible en JavaScript. Ce n’est pas toujours préférable, car donner un nom à la fonction la rend plus claire lorsque nous la voyons affichée. Dans ce cas cependant, nous n’utilisons pas la fonction ailleurs en dehors de la définition de l’objet, nous n’avons donc pas besoin de lui donner directement un nom. Au lieu de cela, nous pouvons nous référer à la fonction depuis l’intérieur de l’objet avec le nom de la méthode que nous lui assignons.

Une autre chose que vous devriez savoir sur la récupération des propriétés ou des méthodes d’un objet est qu’il existe plus d’une manière d’y parvenir. Nous avons utilisé l’une des pratiques les plus courantes dans les exemples ci-dessus, qui est d’utiliser la notation par points. Mais il existe également une autre manière couramment utilisée d’obtenir le même résultat que vous devriez connaître. Cette seconde notation utilise des crochets et des guillemets.

// les deux sont également valides et 
// nous donnent les mêmes résultats
console.log(plane.numberOfWings);
console.log(plane["numberOfWings"]);
// consultez la console JavaScript pour les résultats

Il est formidable que nous puissions stocker de nombreuses propriétés détaillées et actions que nous pouvons effectuer en utilisant des objets, mais que faire si nous devions utiliser des objets, non pas pour 1 voiture, mais disons pour 20 voitures, 100 voitures, ou même 1 000 000 de voitures, chacune avec un ID unique et des valeurs de propriété variées. Devrions-nous taper tout ce code depuis le début pour chaque voiture ? La réponse est non. Au lieu de cela, nous pouvons tirer parti de quelque chose appelé la fonction constructeur d’objet.

Fonctions constructrices d’objets

Les constructeurs d’objets peuvent considérablement accélérer votre processus de codage et rendre votre code beaucoup plus DRY. Avec les fonctions constructrices d’objets, nous définissons essentiellement un plan pour l’objet. Une fois que nous avons un plan pour l’objet, nous pouvons créer autant d’instances de cet objet de manière beaucoup plus claire, avec beaucoup moins de répétition. Voyons cela avec quelques exemples.

// voici comment nous définissons un plan pour les objets
function Car(id, color, isElectric, numberOfDoors){
    this.id = id;
    this.color = color;
    this.isElectric = isElectric;
    this.numberOfDoors = numberOfDoors;
}
// voici comment nous pouvons instancier les 
// objets JavaScript que nous voulons créer à partir 
// du plan que nous avons défini ci-dessus
// dans ce cas, nous créons 3 objets voiture 
// avec des valeurs différentes pour les propriétés
const car1 = new Car(1, "blanc", true, 4);
const car2 = new Car(2, "noir", true, 2);
const car3 = new Car(3, "rouge", false, 4);
// nous pouvons accéder aux propriétés de l'objet tout comme nous l'avons fait auparavant
console.log("La couleur de la première voiture est : " + car1.color);
console.log("La couleur de la deuxième voiture est : " + car2.color);
console.log("La couleur de la troisième voiture est : " + car3.color);

Exécuter le code ci-dessus nous donnerait la sortie suivante :

Comme vous pouvez le voir dans le code ci-dessus, une fois que nous avons un plan, nous pouvons simplement passer différentes valeurs pour créer différents objets JavaScript à partir du plan initial. Une chose que vous avez probablement remarquée est que la convention de nommage pour les constructeurs d’objets est d’avoir la première lettre en majuscule. Dans ce cas, au lieu de le définir comme “car”, nous l’avons nommé “Car”. Si nous devions créer une classe d’avion, nous l’appellerions “Plane”.

Lorsque nous voulons créer des objets à partir de notre plan défini, nous utilisons le mot-clé “new” et écrivons ensuite le nom de la fonction constructeur d’objet que nous voulons utiliser. Après le nom, nous ouvrons et fermons un ensemble de parenthèses et passons les arguments avec lesquels nous voulons créer notre objet. Notez que nous ne répétons pas les noms des paramètres, nous passons simplement les valeurs dans le même ordre que les paramètres. Vous avez peut-être également remarqué que lors de la création du plan, nous utilisons un mot-clé appelé “this”. Pour l’instant, ce que vous devez savoir, c’est que le mot-clé “this” permet de faire référence à l’objet lui-même, et il fait partie du code standard que nous devrions écrire lorsque nous créons le plan pour l’objet.

Lorsque vous apprenez à coder, vous pouvez entendre le terme “code standard”, c’est en fait assez courant, surtout dans le développement web. Cela signifie essentiellement qu’il y a des parties de code que nous écrivons pour mettre en place certains réglages. Même s’il n’y a pas de solution unique que nous fournissons avec le code, nous devons écrire ces parties pour avoir un code fonctionnel. Selon le code standard, certains IDE fournissent même des raccourcis pour fournir ces codes standards.

Les objets JavaScript que nous venons d’apprendre sont un sujet vaste et comportent de nombreux détails à mesure que nous approfondissons. Mais à un niveau fondamental, vous devez savoir que nous pouvons imiter des objets de la vie réelle avec du code en utilisant des objets. Ces objets JavaScript peuvent avoir différentes propriétés et méthodes que nous pouvons accéder et exécuter.

Dans le prochain tutoriel, nous découvrirons d’autres sujets et concepts qui sont assez importants et couramment utilisés en JavaScript.