Utilisez des design patterns en JavaScript

Vous ne devriez pas être surpris si je vous dis que le JavaScript est un langage orienté objet.

Un langage orienté objet signifie que chaque élément de base du langage, comme par exemple les types natifs, sont des objets. Chaque objet comprend :

• Des propriétés qui sont des variables existant au sein de l'objet ;

• Des méthodes qui sont les fonctions pouvant être exécutées à partir de cet objet.

Dans le code ci-dessous se trouve un objet de type natif : une chaîne de caractères (ou String, en anglais).

// myName est un objet de type String
const myName = "thomas"
// Propriété de l'objet myName - retourne la longueur de l'objet myName
myName.length
// Méthode de l'objet myName - convertit une string en majuscule
myName.toUpperCase()

Un objet, en programmation, correspond à un élément abstrait qui va regrouper (on dit aussi encapsuler) des propriétés ainsi que des méthodes.

Ces propriétés et méthodes ne vont exister qu’au travers de cet objet. Par exemple, la méthode  toUpperCase()  n’existe pas en dehors de l’objet String.

Il existe deux types d’objet en JavaScript :

• Ceux dits de type natif, comme les chaînes de caractères (String), les booléens (Boolean) et les tableaux (Array). Ces derniers sont directement implémentés dans le langage.

• Et les autres... Autrement dit, tous les objets créés via des librairies, des API, et bien sûr par vous-même. :)

Créez vos propres objets en JavaScript

Il existe en JavaScript plusieurs manières de créer un objet :

• Via un objet littéral

// L'objet littéral
const Me = {
   firstName: "Thomas",
   lastName: "Dimnet",
   getFullName: () => `${Me.firstName} ${Me.lastName}`,
   sayHello: () => console.log("Hello")
}

// Retourne mon prénom et mon nom
console.log(Me.getFullName())

// Dit bonjour
Me.sayHello()

• Via un prototype

function Me(firstName, lastName) {
   this._firstName = firstName
   this._lastName = lastName  
}

Me.prototype.getFullName = function() {
   return `${this._firstName} ${this._lastName}`
}

Me.prototype.sayHello = function() {
   console.log("Hello")
}

const Thomas = new Me("Thomas", "Dimnet")

// Retourne mon prénom et nom
console.log(Thomas.getFullName())

// Dit bonjour
Thomas.sayHello()

• Via le mot clé Class

class Me {
   constructor(firstName, lastName) {
       this._firstName = firstName
       this._lastName = lastName
   }

   getFullName() {
       return `${this._firstName} ${this._lastName}`
   }

   sayHello() {
       console.log("Hello")
   }
}

const Thomas = new Me("Thomas", "Dimnet")

// Retourne mon prénom et nom
console.log(Thomas.getFullName())

// Dit bonjour
Thomas.sayHello()

Dans le code ci-dessus, vous allez voir le mot clénew . Ce mot clé vous permet d’instancier un nouvel objet. Instancier signifie que vous allez créer un nouvel objet à partir de votre fonction ou de votre classe. :)

Les objets littéraux restent un moyen très simple et facile pour créer des objets, c’est d’ailleurs l’un des aspects que je préfère en JavaScript. Vous pouvez les utiliser pour, par exemple, gérer une connexion à une base de données ou pour simuler des énumérations.

Découvrez les différents facettes du  this

Si vous revenez sur le code de l’objet  Me  ci-dessus, vous pouvez apercevoir le mot clé  this  . Si vous avez déjà un peu d’expérience en JavaScript, vous pouvez déjà deviner de quoi je vais parler. Si ce n’est pas le cas, ce n’est pas grave, vous êtes là pour apprendre. :)

Commencez par regarder quelques snippets de code :

const $signInButton = document.querySelector('.sign-in-button')

$signInButton.addEventListener('click', function() {
   console.log(this)
})

Dans ce bout de code que nous venons de voir,  this  aura pour valeur le nœud sur lequel l’élément a été déclenché.

const $signInButton = document.querySelector('.sign-in-button')

$signInButton.addEventListener('click', () => {
   console.log(this)
})

Alors que dans ce second bout de code,  this  aura pour valeur l’objet global, à savoir l’élément window. D’ailleurs, si vous remarquez bien, le code est quasiment le même, sauf que :

• Dans le premier exemple, on crée une fonction callback avec le mot clé  function  ;

• Dans le deuxième exemple, on crée une fonction callback avec une fonction fléchée et pourtant, le résultat n’est pas le même !

Cette différence de résultat provient de l’implémentation même des fonctions fléchées (ou arrow functions).

Dans le snippet de code qui suit,  this  correspond au contexte d'exécution de la classe. Autrement dit, c’est ce qui me permet de récupérer l’attribut  firstName  dans la méthode  getFullName  . Si vous oubliez ce mot clé, vous ne serez pas capable de communiquer avec les méthodes et propriétés composant votre classe.

class Me {
   constructor(firstName, lastName) {
       this._firstName = firstName
       this._lastName = lastName
   }

   getFullName() {
       return `${this._firstName} ${this._lastName}`
   }

   sayHello() {
       console.log("Hello")
   }
}

const Thomas = new Me("Thomas", "Dimnet")

// Retourne mon prénom et mon nom
Thomas.getFullName()

// Dit bonjour
Thomas.sayHello()

En résumé

• Le JavaScript est un langage orienté objet et tous les types natifs (String, Array…) sont des objets.

• Vous pouvez créer vos propres objets via des objets littéraux ainsi que via le prototypage (avec ou sans le mot clé  Class  ).

Dans ce chapitre, vous venez de revoir les bases indispensables à la création et à la manipulation d’objets en JavaScript ; il est temps maintenant de vous intéresser aux concepts d’héritage et de prototypage.