path: root/files/fr/mdn/guidelines/code_guidelines/javascript/index.html

---
title: Lignes directrices pour JavaScript
slug: MDN/Guidelines/Code_guidelines/JavaScript
tags:
  - Code
  - Guide
  - Directives
  - JavaScript
  - MDN Meta
translation_of: MDN/Guidelines/Code_guidelines/JavaScript
---
<div>{{MDNSidebar}}</div>

<p>Les directives suivantes couvrent la manière d'écrire le JavaScript pour les exemples de code MDN.</p>

<p>Ce qui suit est un ensemble assez simple de directives JavaScript. Nous pourrions aller beaucoup plus en profondeur sur ce sujet, mais nous voulons essentiellement fournir des directives simples pour écrire des exemples concis qui seront compréhensibles par le plus grand nombre de personnes possible, plutôt que des directives détaillées pour écrire des applications web complexes. Si vous voulez quelque chose qui entre dans plus de détails, nous vous recommandons le <a href="https://github.com/airbnb/javascript">guide stylistique JavaScript d'AirBnB</a>, qui est généralement compatible avec nos directives.</p>

<h2 id="In_this_article">Dans cet article</h2>

<ul>
  <li><a href="#general_javascript_guidelines">Directives générales sur le JavaScript</a>
    <ul>
      <li><a href="#use_expanded_syntax">Utiliser une syntaxe étendue</a></li>
      <li><a href="#javascript_comments">Commentaires JavaScript</a></li>
      <li><a href="#use_es6_features">Utiliser les fonctions ES6</a></li>
    </ul>
  </li>
  <li><a href="#variables">Variables</a>
    <ul>
      <li><a href="#variable_naming">Nommage des variables</a></li>
      <li><a href="#declaring_variables">Déclaration des variables</a></li>
    </ul>
  </li>
  <li><a href="#operators_and_comparison">Opérateurs et comparaison</a>
    <ul>
      <li><a href="#ternary_operators">Opérateurs ternaires</a></li>
      <li><a href="#use_strict_equality">Utiliser l'égalité stricte</a></li>
      <li><a href="#use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</a></li>
    </ul>
  </li>
  <li><a href="#control_statements">Instructions de contrôle</a></li>
  <li><a href="#strings">Chaînes de caractères</a>
    <ul>
      <li><a href="#use_template_literals">Utiliser des modèles littéraux</a></li>
      <li><a href="#use_textcontent_not_innerhtml">Utiliser textContent, et non innerHTML</a></li>
    </ul>
  </li>
  <li><a href="#conditionals">Conditions</a>
    <ul>
      <li><a href="#general_purpose_looping">Usage général des boucles</a></li>
      <li><a href="#switch_statements">Les instructions switch</a></li>
    </ul>
  </li>
  <li><a href="#functions_and_objects">Fonctions et objets</a>
    <ul>
      <li><a href="#function_naming">Nommage des fonctions</a></li>
      <li><a href="#defining_functions">Définition des fonctions</a></li>
      <li><a href="#creating_objects">Création d'objets</a></li>
      <li><a href="#object_classes">Classes d'objets</a></li>
      <li><a href="#object_naming">Nommage des objets</a></li>
    </ul>
  </li>
  <li><a href="#arrays">Tableaux</a>
    <ul>
      <li><a href="#creating_arrays">Création de tableaux</a></li>
      <li><a href="#adding_to_an_array">Ajout à un tableau</a></li>
    </ul>
  </li>
  <li><a href="#error_handling">Traitement des erreurs</a></li>
</ul>

<h2 id="General_JavaScript_guidelines">Directives générales sur le JavaScript</h2>

<h3 id="Use_expanded_syntax">Utiliser une syntaxe étendue</h3>

<p>Pour JavaScript, nous utilisons une syntaxe étendue, chaque ligne de JS étant placée sur une nouvelle ligne, l'accolade d'ouverture d'un bloc sur la même ligne que l'instruction associée et l'accolade de fermeture sur une nouvelle ligne. Cela permet d'optimiser la lisibilité et de favoriser la cohérence sur le MDN.</p>

<p>Faites ceci</p>

<pre class="brush: js example-good">function myFunc() {
  console.log('Hello!');
};</pre>

<p>Évitez cela</p>

<pre class="brush: js example-bad">function myFunc() { console.log('Hello!'); };</pre>

<p>Nous avons également quelques règles spécifiques concernant l'espacement à l'intérieur des caractéristiques du langage. Vous devez inclure des espaces entre les opérateurs et les opérandes, les paramètres, etc.</p>

<p>C'est plus lisible</p>

<pre class="brush: js example-good">if(dayOfWeek === 7 &amp;&amp; weather === 'soleil') {
  goOnTrip('plage', 'voiture', ['crême glacée', 'pelle et sceau', 'serviette de plage']);
}</pre>

<p>que ceci</p>

<pre class="brush: js example-bad">if(dayOfWeek===7&amp;&amp;weather==='soleil'){
  goOnTrip('plage','voiture',['crême glacée','pelle et sceau','serviette de plage']);
}</pre>

<p>En outre, gardez ces spécificités à l'esprit :</p>

<ul>
  <li>N'incluez pas d'espaces de remplissage après les parenthèses ouvrantes ou avant les parenthèses fermantes - <code>(myVar)</code>, et non <code>( myVar )</code>.</li>
  <li>Toutes les instructions doivent se terminer par un point-virgule (";"). Nous les exigeons dans tous nos exemples de code, même s'ils sont techniquement facultatifs en JavaScript, car nous pensons que cela permet d'obtenir un code plus clair et plus précis quant à la fin de chaque instruction.</li>
  <li>Utilisez des guillemets simples en JavaScript, chaque fois que des guillemets simples sont nécessaires dans la syntaxe.</li>
  <li>Il ne doit pas y avoir d'espace entre un mot-clé d'instruction, une fonction ou une boucle et sa parenthèse ouvrante (par exemple, <code>if() { .... }</code>, <code>fonction myFunc() { ... }, for(...) { ... }</code>).</li>
  <li>Il doit y avoir un espace entre les parenthèses et l'accolade ouvrante dans les cas décrits au point précédent.</li>
</ul>

<h3 id="JavaScript_comments">Commentaires JavaScript</h3>

<p>Utilisez des commentaires de style JS pour commenter le code qui n'est pas auto-documenté :</p>

<pre class="brush: js example-good">// This is a JavaScript-style comment</pre>

<p>Mettez vos commentaires sur des lignes séparées précédant le code auquel ils se réfèrent :</p>

<pre class="brush: js example-good">function myFunc() {
  // Affiche la chaîne de caractères "Bonjour" dans la console JS du navigateur.
  console.log('Bonjour');
  // Crée un nouveau paragraphe, le remplit de contenu et l'ajoute au &lt;body&gt;
  let para = document.createElement('p');
  para.textContent = 'Mon nouveau paragraphe';
  document.body.appendChild(para);
}</pre>

<p>Notez également que vous devez laisser un espace entre les barres obliques et le commentaire, dans chaque cas.</p>

<h3 id="Use_ES6_features">Utiliser les fonctions ES6</h3>

<p>Pour un usage général*, vous pouvez utiliser les fonctionnalités ES6 courantes (telles que les <a href="/fr/docs/Web/JavaScript/Reference/Functions/Arrow_functions">fonctions fléchées</a>, <a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Promise">promesses</a>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code>/<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, <a href="/fr/docs/Web/JavaScript/Reference/Template_literals">littéraux de gabarits</a>, et le <a href="/fr/docs/Web/JavaScript/Reference/Operators/Spread_syntax">syntaxe de décomposition</a>) dans les exemples MDN. Nous les incluons à de nombreux endroits dans ces directives, car nous pensons que l'industrie du Web a généralement atteint un point où ces fonctionnalités sont suffisamment familières pour être compréhensibles. Et pour ceux qui ne les utilisent pas encore, nous aimerions jouer notre rôle en aidant les gens à développer leurs compétences.</p>

<p>Cependant, nous ne recommandons pas encore l'utilisation générale des nouvelles fonctionnalités ES telles que <a href="/fr/docs/Web/JavaScript/Reference/Statements/async_function">async</a>/<a href="/fr/docs/Web/JavaScript/Reference/Operators/await">await</a>, les virgules de fin sur les listes d'arguments, etc. Nous préférerions que vous ne les utilisiez pas, sauf si cela est strictement nécessaire, et si vous les utilisez, incluez une explication dans votre exemple pour dire ce qu'ils font, avec un lien vers le matériel de référence approprié.</p>

<div class="note">
  <p><strong>Note :</strong> Par "usage général", nous entendons la rédaction d'exemples généraux. Les pages de référence couvrant des fonctionnalités spécifiques de l'ES moderne doivent évidemment utiliser les fonctionnalités qu'elles documentent !</p>
</div>

<h2 id="Variables">Variables</h2>

<h3 id="Variable_naming">Nommage des variables</h3>

<p>Pour les noms de variables, utilisez la casse minuscule au format chameau « lowerCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p>

<p>Écrivez comme suit :</p>

<pre class="brush: js example-good">let playerScore = 0;

let speed = distance / time;</pre>

<p>Éviter ce genre de chose :</p>

<pre class="brush: js example-bad">let thisIsaveryLONGVariableThatRecordsPlayerscore345654 = 0;

let s = d/t;
</pre>

<div class="note">
  <p><strong>Note :</strong> The only place where it is OK to not use human-readable semantic names is where a very common recognized convention exists, such as using <code>i</code>, <code>j</code>, etc. for loop iterators.</p>
</div>

<h3 id="Declaring_variables">Déclaration des variables</h3>

<p>Lorsque vous déclarez des variables et des constantes, utilisez les mots-clés <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/let">let</a></code> et <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/const">const</a></code>, pas <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/var">var</a></code>.</p>

<p>Si une variable ne sera pas réaffectée, préférez <code>const</code> :</p>

<pre class="brush: js example-good">const myName = 'Chris';
console.log(myName);
</pre>

<p>Sinon, utilisez <code>let</code> :</p>

<pre class="brush: js example-good">let myAge = '40';
myAge++;
console.log('Happy birthday!');
</pre>

<p>Cet exemple utilise <code>let</code> là où il devrait préférer <code>const</code>. Il fonctionnera mais devrait être évité dans les exemples de code MDN :</p>

<pre class="brush: js example-bad">let myName = 'Chris';
console.log(myName);
</pre>

<p>Cet exemple utilise <code>const</code> pour une variable qui est réaffectée. La réaffectation entraînera une erreur :</p>

<pre class="brush: js example-bad">const myAge = '40';
myAge++;
console.log('Happy birthday!');
</pre>

<p>Cet exemple utilise <code>var</code>, ce qui doit être évité dans les exemples de code MDN, sauf si cela est vraiment nécessaire :</p>

<pre class="brush: js example-bad">var myAge = '40';
var myName = 'Chris';</pre>

<h2 id="Operators_and_comparison">Opérateurs et comparaison</h2>

<h3 id="Ternary_operators">Opérateurs ternaires</h3>

<p>Les opérateurs ternaires doivent être placés sur une seule ligne :</p>

<pre class="brush: js example-good">let status = (age &gt;= 18) ? 'adult' : 'minor';</pre>

<p>Pas emboîtés :</p>

<pre class="brush: js example-bad">let status = (age &gt;= 18)
  ? 'adult'
  : 'minor';</pre>

<p>C'est beaucoup plus difficile à lire.</p>

<h3 id="Use_strict_equality">Utiliser l'égalité stricte</h3>

<p>Utilisez toujours une égalité et une inégalité strictes.</p>

<p>Comme ceci :</p>

<pre class="brush: js example-good">name === 'Chris';
age !== 25;</pre>

<p>N'écrivez pas comme ça :</p>

<pre class="brush: js example-bad">name == 'Chris';
age != 25;</pre>

<h3 id="Use_shortcuts_for_boolean_tests">Utiliser des raccourcis pour les tests booléens</h3>

<p>Utilisez des raccourcis pour les tests booléens - utilisez <code>x</code> et <code>!x</code>, et non <code>x === true</code> et <code>x === false</code>.</p>

<h2 id="Control_statements">Instructions de contrôle</h2>

<p>Écrivez des instructions de contrôle comme ceci :</p>

<pre class="brush: js example-good">if(iceCream) {
  alert('Woo hoo!');
}</pre>

<p>Pas comme cela :</p>

<pre class="brush: js example-bad">if (iceCream){
  alert('Woo hoo!');
}</pre>

<p>N'oubliez pas non plus :</p>

<ul>
 <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de déclaration de contrôle et sa parenthèse ouvrante.</li>
 <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
</ul>

<h2 id="Strings">Chaînes de caractères</h2>

<h3 id="Use_template_literals">Utiliser des modèles littéraux</h3>

<p>Pour insérer des valeurs dans des chaînes de caractères, utilisez des chaînes de caractères littérales.</p>

<p>Comme suit :</p>

<pre class="brush: js example-good">let myName = 'Chris';
console.log(`Hi! I'm ${myName}!`);</pre>

<p>En évitant d'écrire :</p>

<pre class="brush: js example-bad">let myName = 'Chris';
console.log('Hi! I\'m' + myName + '!');</pre>

<h3 id="Use_textContent_not_innerHTML">Utiliser textContent, et non innerHTML</h3>

<p>Lorsque vous insérez des chaînes de caractères dans les nœuds du DOM, utilisez la fonction <a href="/fr/docs/Web/API/Node/textContent"><code>Node.textContent</code></a>:</p>

<pre class="brush: js example-good">let text = 'Bonjour à vous tous, braves gens';
const para = document.createElement('p');
para.textContent = text;</pre>

<p>Et pas <a href="/fr/docs/Web/API/Element/innerHTML"><code>Element.innerHTML</code></a>:</p>

<pre class="brush: js example-bad">let text = 'Bonjour à vous tous, braves gens';
const para = document.createElement('p');
para.innerHTML = text;</pre>

<p>Le <code>textContent</code> est beaucoup plus efficace, et moins sujet aux erreurs que le <code>innerHTML</code>.</p>

<h2 id="Conditionals">Conditions</h2>

<h3 id="General_purpose_looping">Usage général des boucles</h3>

<p>When <a href="/fr/docs/Learn/JavaScript/Building_blocks/Looping_code">loops</a> are required, feel free to choose an appropriate loop out of the available ones (<code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for">for</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/for...of">for...of</a></code>, <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/while">while</a></code>, etc.) Just make sure to keep the code as understandable as possible.</p>

<p>Lorsque vous utilisez des boucles <code>for</code>/<code>for...of</code>, veillez à définir correctement l'initialisateur, avec un mot clé <code>let</code> :</p>

<pre class="brush: js example-good">let cats = ['Athena', 'Luna'];
for(let i of cats) {
  console.log(i);
}
</pre>

<p>Pas</p>

<pre class="brush: js example-bad">let cats = ['Athena', 'Luna'];
for(i of cats) {
  console.log(i);
}
</pre>

<p>Gardez également à l'esprit :</p>

<ul>
 <li>Il ne doit y avoir <em>aucun espace</em> entre un mot-clé de boucle et sa parenthèse ouvrante.</li>
 <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
</ul>

<h3 id="Switch_statements">Les instructions switch</h3>

<p>Formatez les instructions <code>switch</code> comme suit :</p>

<pre class="brush: js example-good">let expr = 'Papayes';
switch(expr) {
  case 'Oranges':
    console.log('Les oranges sont à 1,10 € le kilo.');
    break;
  case 'Papayes':
    console.log('Les mangues et les papayes sont à 5,24 € le kilo.');
    // résultat attendu : "Les mangues et les papayes sont à 5,24 € le kilo."
    break;
  default:
    console.log('Désolé, nous n'avons plus de ' + expr + '.');
}</pre>

<h2 id="Functions_and_objects">Fonctions et objets</h2>

<h3 id="Function_naming">Nommage des fonctions</h3>

<p>Pour les noms de fonctions, utilisez la casse minuscule au format chameau « lowevCamelCase » et, le cas échéant, des noms concis, lisibles par l'homme et sémantiques.</p>

<p>Par exemple :</p>

<pre class="brush: js example-good">function sayHello() {
  alert('Bonjour !');
};</pre>

<p>En évitant de faire :</p>

<pre class="brush: js example-bad">function SayHello() {
  alert('Bonjour !');
};

function notVeryObviousName() {
  alert('Bonjour !');
};
</pre>

<div class="note">
  <p><strong>Note :</strong> Le seul endroit où il est acceptable de ne pas utiliser des noms sémantiques lisibles par l'homme est lorsqu'une convention reconnue très courante existe, comme l'utilisation de <code>i</code>, <code>j</code>, etc. pour les itérateurs de boucle.</p>
</div>

<h3 id="Defining_functions">Définition des fonctions</h3>

<p>Dans la mesure du possible, utilisez la déclaration <code>fonction</code> pour définir des fonctions sur des expressions de fonction :</p>

<p>Faites comme ça :</p>

<pre class="brush: js example-good">function sum(a, b) {
  return a + b;
}</pre>

<p>Pas comme ça :</p>

<pre class="brush: js example-bad">let sum = function(a, b) {
  return a + b;
}</pre>

<p>Lorsque vous utilisez des fonctions anonymes à l'intérieur d'une méthode qui requiert une fonction comme paramètre, il est acceptable (mais pas obligatoire) d'utiliser une fonction flèche pour rendre le code plus court et plus propre.</p>

<p>Donc, au lieu de ça :</p>

<pre class="brush: js example-good">const array1 = [1, 2, 3, 4];
let sum = array.reduce(function(a, b) {
  return a + b;
});</pre>

<p>vous pourriez écrire ceci :</p>

<pre class="brush: js example-good">const array = [1, 2, 3, 4];
let sum = array.reduce((a, b) =&gt;
  a + b
);</pre>

<p>N'oubliez pas non plus :</p>

<ul>
 <li>Il ne doit y avoir <em>aucun espace</em> entre un nom de fonction et sa parenthèse ouvrante.</li>
 <li>Il doit y avoir <em>un espace</em> entre les parenthèses et l'accolade ouvrante.</li>
</ul>

<h3 id="Creating_objects">Création d'objets</h3>

<p>Utilisez des littéraux - et non des constructeurs - pour créer des objets généraux (c'est-à-dire lorsque les classes ne sont pas concernées) :</p>

<p>Par exemple :</p>

<pre class="brush: js example-good">let myObject = { };</pre>

<p>Et pas :</p>

<pre class="brush: js example-bad">let myObject = new Object();</pre>

<h3 id="Object_classes">Classes d'objets</h3>

<p>Utilisez la syntaxe de classe ES pour les objets, et non les constructeurs à l'ancienne.</p>

<p>À titre d'exemples :</p>

<pre class="brush: js example-good">class Person {
  constructor(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  greeting() {
    console.log(`Salut ! Je m'appelle ${this.name}`);
  };
}</pre>

<p>Utilisez <code>extends</code> pour l'héritage :</p>

<pre class="brush: js example-good">class Teacher extends Person {
  ...
}</pre>

<h3 id="Object_naming">Nommage des objets</h3>

<p>Lorsque vous définissez une classe d'objets (comme ci-dessus), utilisez l'écriture de casse au format chameau en majuscule « UpperCamelCase » (également connue sous le nom de « PascalCasing ») pour le nom de la classe, et la casse en minuscule « lowerCamelCase » pour les noms des propriétés et des méthodes de l'objet.</p>

<p>Lors de la définition d'une instance d'objet, qu'il s'agisse d'un littéral ou d'un constructeur, utilisez le lowerCamelCase pour le nom de l'instance :</p>

<pre class="brush: js example-good">let hanSolo = new Person('Han Solo', 25, 'male');

let hanSolo = {
  name: 'Han Solo',
  age: 25,
  gender: 'male'
}</pre>

<h2 id="Arrays">Tableaux</h2>

<h3 id="Creating_arrays">Création de tableaux</h3>

<p>Utilisez des littéraux - et non des constructeurs - pour créer des tableaux :</p>

<p>Comme ceci :</p>

<pre class="brush: js example-good">let myArray = [ ];</pre>

<p>Pas comme ça :</p>

<pre class="brush: js example-bad">let myArray = new Array(length);</pre>

<h3 id="Adding_to_an_array">Ajout à un tableau</h3>

<p>Pour ajouter des éléments à un tableau, utilisez <code><a href="/fr/docs/Web/JavaScript/Reference/Global_Objects/Array/push">push()</a></code>, et non l'affectation directe. Étant donné le tableau suivant :</p>

<pre class="brush: js">const pets = [];</pre>

<p>faites ça :</p>

<pre class="brush: js example-good">pets.push('cat');</pre>

<p>et pas ça :</p>

<pre class="brush: js example-bad">pets[pets.length] = 'cat';</pre>

<h2 id="Error_handling">Traitement des erreurs</h2>

<p>Si certains états de votre programme lancent des erreurs non attrapées, ils interrompent l'exécution et réduisent potentiellement l'utilité de l'exemple. Vous devriez donc attraper les erreurs en utilisant un bloc <code><a href="/fr/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> :</p>

<pre class="brush: js example-good">try {
  console.log(results);
}
catch(e) {
  console.error(e);
}</pre>

<h2 id="Good_JavaScript_examples_on_MDN">De bons exemples de JavaScript sur MDN</h2>

<p>Vous pouvez trouver de bons extraits de JavaScript, concis et significatifs, en haut de nos pages <a href="/fr/docs/Web/JavaScript/Reference">Référence du langage JavaScript</a> - parcourez-les pour en trouver.</p>

<p>Nos exemples interactifs (et autres) sont généralement rédigés de manière à suivre les directives ci-dessus, mais sachez qu'ils peuvent différer à certains endroits, car ils ont été rédigés pour la plupart avant que les directives ne soient nouvellement rédigées.</p>

<p>En ce qui concerne les exemples d'API, nous aimerions mettre en avant quelques exemples qui nous semblent bons :</p>

<ul>
  <li><a href="/fr/docs/Web/API/WindowOrWorkerGlobalScope/fetch#examples">Exemples de <code>fetch()</code></a></li>
  <li><a href="/fr/docs/Web/API/CanvasRenderingContext2D/fillRect#examples">Exemples de <code>fillRect()</code></a> (les exemples de Canvas 2D sont généralement bons, bien qu'ils utilisent toujours l'ancienne déclaration <code>var</code>).</li>
  <li><a href="/fr/docs/Web/API/PaymentRequest/show">Payment Request API <code>show()</code></a> (Les exemples de <a href="/fr/docs/Web/API/PaymentRequest"><code>PaymentRequest</code></a> sont généralement assez bons).</li>
  <li><a href="/fr/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Utilisations de l'API Web Audio</a> (les bonnes pratiques générales en matière de HTML, CSS et JavaScript, ainsi qu'une bonne démonstration de l'utilisation des extraits et des liens vers des exemples complets ailleurs).</li>
  <li><a href="/fr/docs/Web/API/Media_Capabilities_API/Using_the_Media_Capabilities_API">Utilisations de l'API Media Capabilities</a> (des bonnes pratiques plus générales pour l'utilisation des extraits de code dans un guide).</li>
</ul>