Tes fonctions JavaScript sont parfois comme ce salarié dévoué d’une startup : un véritable couteau suisse ! Il pond des user stories le matin, conçoit des maquettes à midi et passe l’après-midi à coder. Polyvalent, oui, mais à force de vouloir tout faire, il finit par marcher sur les plates-bandes des autres et perdre en efficacité.

C’est exactement ce qui arrive aux fonctions ordinaires en JavaScript.

Le dilemme de la fonction ordinaire “couteau suisse”

Une fonction JavaScript dite ordinaire est incroyablement flexible. Elle peut endosser plusieurs rôles :

1. Être une fonction classique : exécuter une tâche spécifique.
2. Servir de méthode : agir au sein d’un objet.
3. Agir comme constructeur : créer de nouvelles instances d’objets.

Voici un exemple illustrant ces trois casquettes :

// Les trois rôles des fonctions ordinaires

// 1. Fonction classique
function greet(name) {
  return `Hello, ${name}!`;
}
console.log(greet('Bakate')); // 'Hello, Bakate!'

// 2. Méthode d'un objet
const person = {
  name: 'Bakate',
  greet() {
    return `Hello, ${this.name}!`;
  },
};
console.log(person.greet()); // 'Hello, Bakate!'

// 3. Constructeur (avec une syntaxe de classe pour la clarté, mais l'idée est la même pour les fonctions constructeurs pré-ES6)
class PersonConstructor {
  name;
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}!`;
  }
}
const person2 = new PersonConstructor('Bakate');
console.log(person2.greet()); // 'Hello, Bakate!'

Mais cette polyvalence a un coût. À force de vouloir tout faire, une fonction ordinaire peut perdre en clarté et devenir une source de confusion. Un peu comme ce CEO qui est également CTO, CMO, et parfois même stagiaire café.

L’avènement des fonctions spécialisées avec ES6

Heureusement, avec l’émergence d’ECMAScript 6 (ES6), JavaScript a introduit (ou popularisé) des formes de fonctions plus spécialisées, chacune avec un rôle bien défini :

• Les Fonctions Fléchées (Arrow Functions) : Idéales pour les fonctions courtes et anonymes, et surtout, elles ont un comportement lexical du mot-clé this, ce qui simplifie grandement la vie dans de nombreux contextes, notamment avec les callbacks.
• Les Méthodes dédiées : Clairement définies au sein des objets ou des classes, leur rôle est d’agir sur l’instance ou l’objet auquel elles appartiennent.
• Les Classes : Bien que principalement du sucre syntaxique par-dessus le système prototypal de JavaScript, les classes offrent une syntaxe claire et dédiée pour la création d’objets et la gestion de l’héritage, avec des constructor bien identifiés.

Voici des exemples de ces fonctions spécialisées :

// Fonctions spécialisées

// Le rôle d'une fonction fléchée : une vraie fonction, souvent concise
const greetArrow = (username) => `Hello, ${username}`;
console.log(greetArrow('Bakate')); // "Hello, Bakate"

// Le rôle d'une méthode : attachée à un objet
const specializedPerson = {
  name: 'Bakate',
  greet() {
    // Syntaxe concise de méthode
    return `Hello, ${this.name}`;
  },
};
console.log(specializedPerson.greet()); // "Hello, Bakate"

// Le rôle d'une classe : principalement un constructeur de fonctions et un conteneur de méthodes
class Vehicle {
  constructor(type) {
    this.type = type;
  }
  displayType() {
    console.log(`This vehicle is a ${this.type}`);
  }
}
const myCar = new Vehicle('Car');
myCar.displayType(); // "This vehicle is a Car"

Les bénéfices : clarté et maintenabilité

Le résultat de cette spécialisation ?

• Un code plus lisible : Chaque type de fonction a un rôle plus clair, ce qui facilite la compréhension du code.
• Moins de maux de tête avec this : Surtout pour ceux et celles qui font de la Programmation Orientée Objet, les fonctions fléchées et les méthodes de classe standardisent le comportement de this.
• Une meilleure architecture : Encourager l’utilisation de la bonne construction pour le bon travail mène à des designs logiciels plus robustes.