Guide de style

Comment est-ce qu'on écrit une fonction (arrow function vs function declaration)

Javascript permet la définition de "arrow functions". Bien qu'ayant des différences non négligeables avec leurs consœurs, on utilise l'une ou l'autre syntaxe en fonction des préférences personnelles.

On DEVRAIT utiliser la déclaration de fonction seulement dans le cas où la fonction est au premier niveau (comme souvent avec les utils ou les composants) :

Attention

On ne DEVRAIT jamais avoir de déclaration de fonction dans une déclaration de fonction ! Une fois la déclaration de fonction faite au premier niveau, les fonctions qu'elle contient DEVRAIENT être des "arrow functions".

/src/utils/foo.js
function foo(callback) {
const value = callback();
const getUser = () => {
// Do something
};
if (value === true) {
getUser();
}
}
/src/components/Content.js
function Content() {
const handleClick = () => {
// Do something
};
return <button onClick={handleClick}>DO NOT PRESS</button>;
}

On DEVRAIT utiliser les "arrow functions" dans tous les autres cas :

  • Dans des "callback" :
list
.map((entity) => entity.id)
.filter((id) => id > 5)
.some((id) => id % 2 === 0);
<button onClick={() => setVisible(true)}>show</button>;
  • Si sa définition ne fait qu'une seule ligne, avec un seul retour possible :
const isValid = (entity) => entity.itemList.some((item) => item.isValid);
À lire aussi

Le guide JavaScript de AirBnB sur les arrow functions donne des informations intéressantes sur la façon d'utiliser les arrow functions. Ils définissent pour leur part les cas suivants:

Lorsque vous devez utiliser des fonctions anonymes (comme pour passer une fonction de retour en-ligne), utilisez la notation "arrow-function"

Pourquoi ? Cela crée une version de la fonction qui s'execute dans le contexte actuel (this), qui est habituellement ce que l'on souhaite, et la syntaxe est plus concise.

Constantes & Enums

On DEVRAIT utiliser des constantes lorsqu'on utilise une donnée simple (string | number | boolean...) en tant que valeur de configuration (d'une fonction ou autre).

const TIMEOUT_DELAY = 1000;
setTimeout(doSomething, TIMEOUT_DELAY);
const EVENT_DATE_BY_LIST = "list";
const EVENT_DATE_BY_DATE = "date";
// ...
const [selectedTab, setSelectedTab] = useState(EVENT_DATE_BY_LIST);

Dans le cas où plusieurs constantes sont utilisées à plusieurs endroits, on privilégiera de les regrouper sous un enum TypeScript. Cela rend également le typage beaucoup plus simple.

export enum MODULE_TYPE {
INFORMATION = "information",
RECOMMENDATION = "recommendation",
PROMOTE = "promote",
}
function generateModule(moduleType: MODULE_TYPE) {
if (moduleType === MODULE_TYPE.INFORMATION) {
// do something
}
// do something else
}
Attention

On DEVRAIT toujours assigner une valeur à la clé de l'enum afin d'éviter des effets indésirables (voir pourquoi dans cet article (En)).

Convention

On DEVRAIT écrire les constantes de configuration et enums en MAJUSCULE.

Espacements entre les types de déclarations

Afin de gagner en lisibilité dans la lecture du code, on DOIT ajouter une ligne vide au-dessus d'un type de déclaration quand le précédent est différent.

function Foo() {
const { t } = useTranslation();
const [loading, setLoading] = useState(true);
let name = "JD";
if (!loading) {
name = "Chris";
}
useEffect(() => {
const timeout = setTimeout(() => setLoading(false), 500);
return () => clearTimeout(timeout);
}, []);
if (loading) {
return <MpdLoader />;
}
return <div>{t("hello", { name })}</div>;
}

Dans l'exemple ci-dessus, on remarque la construction suivante :

  • Un espace est présent entre les variables et le if ;
  • Un espace est présent entre le if et le useEffect ;
  • À l'intérieur du useEffect, un espace est présent entre la variable et le return ;
  • Un espace est présent entre le useEffect et le if ;
  • Le return dans le if n'a pas d'espacement car il est tout seul ;
  • Un espace est présent entre le if et le return ;
Eslint

La règle eslint padding-line-between-statements est disponible sur les projets pour détecter une erreur si ce schéma n'est pas respecté.

"Array destructuring"

On DEVRAIT utiliser le "array destructuring" quand on affecte des variables

const [counter, setCounter] = useState(0);

On ne DEVRAIT PAS utiliser le array destructuring si l'on n'a pas les mots clés const ou let devant le tableau.

let counter = 0;
[counter] = generateCounter();
Pourquoi ?

Cette syntaxe est difficilement compréhensible car on ne comprends pas directement que l'on est en train d'affecter des variables (on dirait que l'on crée un tableau).

Extension de fichier dans les imports

On NE DEVRAIT PAS avoir le nom de l'extension dans les imports

```tsx import Component from './components'; ```
Edit this page