[ Web Proxy ]
URL:
Viewing: https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Control_flow_and_error_handling [Back]  [Original]

Contrle du flux d'instructions et gestion des erreurs - JavaScript | MDN

Cette page a t traduite partir de l'anglais par la communaut. Vous pouvez contribuer en rejoignant la communaut francophone sur MDN Web Docs.

View in English Always switch to English

Contrle du flux d'instructions et gestion des erreurs

JavaScript supporte nativement un ensemble d'instructions. Ces instructions permettent de dfinir les logiques des algorithmes, le flux des informations, etc. Ce chapitre fournit un aperu sur le fonctionnement de ces diffrentes instructions JavaScript.

Les Rfrences de JavaScript contiennent plus de dtails sur les diffrentes instructions dcrites dans ce chapitre.

Toute expression est une instruction, voir la page Expressions et oprateurs pour plus d'informations sur les expressions. En JavaScript, le point-virgule (;) est utilis afin de sparer des instructions dans le code.

Dans cet article

Les blocs d'instruction

L'instruction la plus simple est l'instruction de bloc qui permet de regrouper des instructions. Un bloc est dlimit par une paire d'accolades :

js
{
   instruction_1;
   instruction_2;
   
   instruction_n;
}

Exemple

Les instructions de blocs sont souvent utilises avec les instructions conditionnelles et itratives telles que if, for, while.

js
while (x < 10) {
  x++;
}

Ici, { x++; } reprsente le bloc.

Note : En JavaScript, avant ECMAScript 2015 (aussi appel ES6), les blocs n'introduisaient pas de nouvelles portes. Les variables introduites dans le bloc avec l'instruction var font partie de la porte de la fonction englobante ou du script. Les effets de leur dfinition persistent en dehors du bloc. Les blocs seuls utiliss avec var (et non let) pourront laisser penser que ce bloc se comportera comme en C ou en Java. Par exemple :

js
var x = 1;
{
  var x = 2;
}
console.log(x); // affichera 2

Cella affichera 2 car l'instruction var x contenue dans le bloc fait partie de la mme porte que l'instruction var x crite avant le bloc. En C ou en Java, le code quivalent cet exemple aurait produit 1.

Cela a volu avec ECMAScript 2015 (ES6). Les instructions let et const permettent de dclarer des variables dont la porte est celle du bloc courant. Voir les pages des rfrences let et const.

Les instructions conditionnelles

Une instruction conditionnelle est un ensemble de commandes qui s'excutent si une condition donne est vrifie. JavaScript possde deux instructions conditionnelles : if...else et switch.

Instruction if...else

On utilise l'instruction if lorsqu'on souhaite excuter une instruction si une condition logique est vrifie (vraie). La clause else est optionnelle et permet de prciser les instructions excuter si la condition logique n'est pas vrifie (l'assertion est fausse). Voici un exemple qui illustre l'utilisation de l'instruction if :

js
if (condition) {
  instruction_1;
} else {
  instruction_2;
}

condition peut correspondre n'importe quelle expression qui est value true (vrai) ou false (faux). Voir la page sur les boolens pour plus d'informations sur les valuations qui fournissent les valeurs true ou false. Si la condition vaut true, instruction_1 est excute, sinon instruction_2 sera excute. instruction_1 et instruction_2 peuvent correspondre n'importe quelle instruction, y compris d'autres instructions if.

Si on doit tester diffrentes conditions les unes la suite des autres, il est possible d'utiliser else if pour lier les diffrents tests. On l'utilise de la faon suivante :

js
if (condition_1) {
  instruction_1;
} else if (condition_2) {
  instruction_2;
} else if (condition_n) {
  instruction_n;
} else {
  dernire_instruction;
}

Afin d'excuter plusieurs instructions, on peut les regrouper grce aux blocs ({ ... }) vus prcdemment. C'est une bonne pratique que de les utiliser, surtout si on imbrique plusieurs instructions if les unes dans les autres:

Meilleure pratique

En gnral, il est bon de toujours utiliser des instructions de type bloc surtout lorsqu'on imbrique des instructions if :

js
if (condition) {
  instruction_1_excute_si_condition_vraie;
  instruction_2_excute_si_condition_vraie;
} else {
  instruction_3_excute_si_condition_fausse;
  instruction_4_excute_si_condition_fausse;
}

Attention ne pas utiliser des instructions d'affectation dans les expressions conditionnelles. On peut, en effet, trs facilement confondre l'affectation et le test d'galit en lisant le code.

Voici un exemple de ce qu'il ne faut pas faire :

js
if (x = y) {
  /* excuter des instructions */
}

Ici, on ne teste pas si x vaut y, on affecte la valeur de y x ! Si vous devez tout prix utiliser une affectation dans une expression conditionnelle, une bonne pratique sera d'ajouter des parenthses en plus autour de l'affectation. Par exemple :

js
if ((x = y)) {
  /* excuter des instructions */
}

Valeurs quivalentes false dans un contexte boolen (falsy values)

Les valeurs suivantes sont values false (galement connues sous le nom de valeurs Falsy) :

  • false
  • undefined
  • null
  • 0
  • NaN
  • la chane de caractres vide ("")

Les autres valeurs, y compris les objets, seront quivalents true.

Attention : Ne pas confondre les valeurs boolennes primitives true et false avec les valeurs cres grce un objet Boolean.

Par exemple, on aura :

js
var b = new Boolean(false);
  if (b) // cette condition est bien vrifie !
  if (b === true) // cette condition n'est pas vrifie !

Exemple

Dans l'exemple qui suit, la fonction checkData renvoie true si une chane de caractres mesure trois caractres. Sinon, elle affiche une alerte et renvoie false.

js
function checkData(maChane) {
  if (maChane.length == 3) {
    return true;
  } else {
    alert(
      "Veuillez saisir trois caractres. " + maChane + " n'est pas valide.",
    );
    return false;
  }
}

L'instruction switch

L'instruction switch permet un programme d'valuer une expression et d'effectuer des instructions en fonction des diffrents cas de figures correspondants aux diffrentes valeurs. Si un cas correspond au rsultat de l'valuation, le programme excute l'instruction associe.

Voici un exemple utilisant une instruction switch :

js
switch (expression) {
  case label_1:
    instructions_1
    [break;]
  case label_2:
    instructions_2
    [break;]
  ...
  default:
    instructions_par_defaut
    [break;]
}

JavaScript value l'instruction de commutation ci-dessus comme suit :

  • Le programme recherche d'abord une clause case dont l'tiquette correspond la valeur de l'expression, puis il transfre le contrle cette clause, en excutant les instructions associes.
  • Si aucune tiquette correspondante n'est trouve, le programme recherche la clause optionnelle default :
    • Si une clause default est trouve, le programme transfre le contrle cette clause, excutant les dclarations associes.
    • Si aucune clause default n'est trouve, le programme reprend l'excution l'instruction qui suit la fin de switch.
    • (Par convention, la clause default est crite comme la dernire clause, mais il n'est pas ncessaire que ce soit le cas).

L'instruction break

L'instruction optionnelle break, ventuellement contenue pour chaque clause case, permet de ne pas excuter les instructions pour les cas suivants. Si break n'est pas utilis, le programme continuera son excution avec les autres instructions contenues dans l'instruction switch.

Exemple

Dans l'exemple suivant, si fruit vaut "Banane", le programme excutera les instructions associes. Quand break est rencontr, le programme passe aux instructions dcrites aprs switch. Ici, si break n'tait pas prsent, les instructions pour le cas "Cerise" auraient galement t excutes.

js
switch (fruit) {
  case "Orange":
    console.log("Les oranges sont  60 centimes le kilo.");
    break;
  case "Pomme":
    console.log("Les pommes sont  32 centimes le kilo.");
    break;
  case "Banane":
    console.log("Les bananes sont  48 centimes le kilo.");
    break;
  case "Cerise":
    console.log("Les cerises sont  3 le kilo.");
    break;
  case "Mangue":
    console.log("Les mangues sont  50 centimes le kilo.");
    break;
  default:
    console.log("Dsol, nous n'avons pas de " + fruittype + ".");
}
console.log("Souhaitez-vous autre chose ?");

Les instructions pour grer les exceptions

Il est possible de lever des exceptions avec l'instruction throw et de les grer (les intercepter) avec des instructions try...catch.

Les types d'exception

En JavaScript, n'importe quel objet peut tre signal comme une exception. Cependant, afin de respecter certaines conventions et de bnficier de certaines informations, on pourra utiliser les types destins cet effet :

L'instruction throw

L'instruction throw est utilise afin de signaler une exception. Lorsqu'on signale une exception, on dfinit une expression qui contient la valeur renvoyer pour l'exception :

js
throw expression;

Il est possible d'utiliser n'importe quelle expression, sans restriction de type. Le fragment de code qui suit illustre les diffrentes possibilits :

js
throw "Erreur2"; //type String
throw 42; //type Number
throw true; //type Boolean
throw {
  toString: function () {
    return "je suis un objet !";
  },
};

Note : Vous pouvez spcifier un objet lorsque vous lancez une exception. Vous pouvez alors faire rfrence aux proprits de l'objet dans le bloc catch.

js
// On cre le constructeur pour cet objet
function ExceptionUtilisateur(message) {
  this.message = message;
  this.name = "ExceptionUtilisateur";
}

// On surcharge la mthode toString pour afficher
// un message plus explicite (par exemple dans la console)
ExceptionUtilisateur.prototype.toString = function () {
  return this.name + ': "' + this.message + '"';
};

// On cre une instance pour ce type d'objet
// et on renvoie une exception avec cette instance
throw new ExceptionUtilisateur("La valeur fournie est trop leve.");

L'instruction try...catch

L'instruction try...catch permet de dfinir un bloc d'instructions qu'on essaye (try en anglais) d'excuter, ainsi qu'une ou plusieurs instructions utiliser en cas d'erreur lorsqu'une exception se produit. Si une exception est signale, l'instruction try...catch permettra de l' attraper (catch en anglais) et de dfinir ce qui se passe dans ce cas.

L'instruction try...catch se compose d'un bloc try qui contient une ou plusieurs instructions et blocs catch qui contiennent les instructions excuter lorsqu'une exception se produit dans le bloc try.

Autrement dit, dans la plupart des cas pour le programme, on veut que les instructions du bloc try se droulent normalement et en cas de problme, on passe le contrle au bloc catch. Si une instruction contenue dans le bloc try renvoie une exception, le contrle sera immdiatement transfr au bloc catch. Si aucune exception n'est signale au sein du bloc try, le bloc catch ne sera pas utilis. Cette instruction peut comporter un bloc finally qui s'excute aprs les blocs try et catch mais avant les instructions suivant l'instruction try...catch.

Dans l'exemple qui suit, on utilise une instruction try...catch. On dfinit une fonction qui prend un nombre et renvoie le nom du mois correspondant ce nombre. Si la valeur fournie n'est pas comprise entre 1 et 12, on signale une exception avec la valeur "NumroMoisInvalide". Lorsque cette exception est gre dans le bloc catch, la variable nomMois recevra la valeur "inconnu".

js
function getNomMois(numMois) {
  numMois = numMois - 1; // On dcale de 1 car les indices du tableaux commencent  0
  var mois = [
    "Janvier",
    "Fvrier",
    "Mars",
    "Avril",
    "Mai",
    "Juin",
    "Juillet",
    "Aot",
    "Septembre",
    "Octobre",
    "Novembre",
    "Dcembre",
  ];
  if (mois[numMois] != null) {
    return mois[numMois];
  } else {
    throw "NumroMoisInvalide"; // Ici on utilise l'instruction throw
  }
}

try {
  // les instructions  essayer si tout se passe bien
  nomMois = getNomMois(maVarMois); // La fonction peut renvoyer une exception
} catch (e) {
  nomMois = "inconnu";
  gestionErreurLog(e); // on gre l'erreur avec une fonction
}

Le bloc catch

Un bloc catch peut tre utilis afin de grer les exceptions pouvant tre gnres par les instructions du bloc try.

js
catch (ident) {
  statements
}

Le bloc catch dfinit un identifiant (ident dans le fragment de code prcdent) qui contiendra la valeur passe par l'instruction throw. Cet identifiant peut tre utilis afin de rcuprer des informations sur l'exception qui a t signale.

JavaScript cre cet identifiant lorsque le contrle passe au bloc catch. L'identifiant ne vit qu' l'intrieur du bloc catch et une fois que l'excution du bloc catch est termine, l'identifiant n'est plus disponible.

Dans l'exemple suivant, le code renvoie une exception. Lorsque celle-ci est signale, le contrle passe au bloc catch.

js
try {
  throw "monException"; // on gnre une exception
} catch (e) {
  // les instructions utilises pour grer les exceptions
  enregistrerErreurs(e); // on passe l'objet reprsentant l'exception  une fonction utilise pour grer les erreurs
}

Note : Quand on souhaite afficher des erreurs dans la console, on privilgiera console.error() plutt que console.log(). En effet, cette premire mthode est plus adapte et indiquera plus d'informations.

Le bloc finally

Le bloc finally contient les instructions excuter aprs les blocs try et catch mais avant l'instruction suivant le try...catch...finally.

Le bloc finally est excut dans tous les cas, qu'une exception ait t leve ou non. Si une exception est signale et qu'il n'y a pas de bloc catch pour la grer, les instructions du bloc finally seront tout de mme excutes.

Le bloc finally peut tre utilis afin de finir proprement l'excution malgr une exception. On peut, par exemple, devoir librer une ressource, ou fermer un flux, etc.

Dans l'exemple suivant, on crit dans un fichier, si une exception se produit lors de l'criture, on utilisera le bloc finally afin de bien fermer le flux vers le fichier avant la fin du script.

js
ouvrirFichier();
try {
  crireFichier(donnes); // Une erreur peut se produire
} catch (e) {
  grerException(e); // On gre le cas o on a une exception
} finally {
  fermerFichier(); // On n'oublie jamais de fermer le flux.
}

Si le bloc finally renvoie une valeur, cette valeur sera considre comme la valeur de retour pour tout l'ensemble try-catch-finally, quelles que soient les instructions return ventuellement utilises dans les blocs try et catch :

js
function f() {
  try {
    console.log(0);
    throw "bug";
  } catch (e) {
    console.log(1);
    return true; // Cette instruction est bloque jusqu' la fin du bloc finally
    console.log(2); // Ne pourra jamais tre excut
  } finally {
    console.log(3);
    return false; // On surcharge l'instruction "return" prcdente
    console.log(4); // Ne pourra jamais tre excut
  }
  // "return false" est excut

  console.log(5); // Ne pourra jamais tre excut
}
f(); // affiche 0, 1, 3 puis renvoie false

Lorsqu'on surcharge les valeurs de retour avec le bloc finally, cela s'applique galement aux exceptions qui sont leves (ou retransmises) au sein du bloc catch :

js
function f() {
  try {
    throw "problme";
  } catch (e) {
    console.log('"problme" interne intercept');
    throw e; // cette instruction est mise en attente
    // tant que le bloc finally n'est pas fini
  } finally {
    return false; // surcharge le "throw" prcdent
  }
  // "return false" est excut  ce moment
}

try {
  f();
} catch (e) {
  // ce bloc n'est jamais utilis car le throw
  // utilis dans le bloc catch a t surcharg
  // par l'instruction return de finally
  console.log('"problme" externe intercept');
}

// Sortie
// "problme" interne attrap

Imbriquer des instructions try...catch

Il est possible d'imbriquer une ou plusieurs instructions try...catch.

Si un bloc try interne n'a pas de bloc catch correspondant :

  1. il doit contenir un bloc finally, et
  2. le bloc try...catch de l'instruction catch englobante est vrifi pour une correspondance.

Pour plus d'informations, voir nested try-blocks sur la page de rfrence try...catch.

Utiliser les objets d'erreur

En fonction du type d'erreur qui est cre, on pourra utiliser les proprits name et message afin d'obtenir plus d'informations.

Gnralement on a name qui fournit le type d'erreur rencontre (ex : DOMException ou Error). La proprit message, quant elle fournit un message descriptif de l'erreur (qu'on utilisera gnralement lorsqu'on voudra convertir/afficher le texte correspondant une erreur).

Si vous construisez des erreurs, vous pouvez utiliser le constructeur Error afin de disposer de ces proprits.

Ainsi, on pourra avoir :

js
function causerErreurs() {
  if (toutEstSourceDErreurs()) {
    throw (new Error('mon message'));
  } else {
    gnrerUneAutreErreur();
  }
}
....
try {
  causerErreurs();
} catch (e) {
  console.error(e.name);// affiche 'Error'
  console.error(e.message); // affiche 'mon message' ou un message d'erreur JavaScript
}

Web Proxy Viewer  |  New URL  |  Original Page