≡

JavaScript : Le mode strict

#1 Qu'est-ce que le mode strict ?

Lorsque vous écrivez du code JavaScript et qu'ensuite, vous l'exécutez dans votre navigateur, celui-ci s'exécute en "mode normal". Dans ce "mode normal" un certain nombre de choses sont jugées acceptables par le moteur JavaScript. Par exemple, vous pouvez utiliser une variable sans la déclarer à l'aide d'un mot réservé var, let, ou const. Cette tolérance peut vous gêner. Vous préféreriez que le moteur JavaScript vous prévienne de ce que vous considérez comme étant une erreur. Eh bien, c'est possible en demandant que votre script s'exécute en "mode strict".

Pour faire cela, vous avez deux solutions :

Vous écrivez "use strict" dès la première ligne de votre script. Dans ce cas, le mode strict sera appliqué dans tout votre script.
Vous écrivez "use strict" dès la première ligne d'une fonction. Dans ce cas, le mode strict sera appliqué dans toute la fonction.

Le "mode strict" existe depuis la version 5 de JavaScript.

Il faut savoir que le "mode strict" est appliqué par défaut dans les modules ES6. Il s'agit des modules qui sont construits avec les mots réservés import et export. Ce n'est pas le cas des modules de l'environnement nodejs.

Dans l'exemple ci-dessous, j'utilise la variable x sans l'avoir déclarée. En "mode strict" le moteur JavaScript va me prévenir en déclenchant une erreur.

Il en sera ainsi dans un certain nombre de situations. Nous allons voir les plus courantes dans la suite du tuto.

Tester le code
en mode strict Tester le code
sans mode strict

#2 Principales différences entre le "mode normal" et le "mode strict"

J'ai sélectionné 5 cas de figures dans lesquels il y a des différences d'exécution entre ces deux modes. On va faire un exemple pour chacune de ces situations. Ce ne sont pas les seules. J'ai sélectionné ce qui me semble être le plus courant.

Il y a d'abord l'exemple que l'on vient de voir où le mode strict déclenche une erreur si on utilise une variable qui n'a pas été déclarée.
Maintenant, on va voir une situation dans laquelle ce n'est pas une erreur qui est déclenchée, mais c'est l'exécution d'une partie du code qui va s'exécuter de manière différente. Ci-dessous, j'utilise this. Je le fais dans le scope global. En mode normal, this vaudrait window (* environnement navigateur). Si j'exécute ce morceau de code en demandant le mode strict, la valeur de this vaut undefined. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> "use strict"; function test(){ console.log('Valeur de this => '+this); } test(); </script> </body> </html> Tester le code
en mode strict Tester le code
sans mode strict
Supprimer une propriété qui est en lecture seule déclenche une erreur en mode strict. Si vous ne connaissez pas la méthode defineProperty, je vous invite à faire ce tuto. Ci-dessous, je place le "use strict" dans la fonction deleteProp. Ensuite, je crée un objet, puis j'ajoute une propriété qui est en lecture seule, puis j'essaie de la supprimer, ce qui déclenche une erreur lorsque deleteProp est invoquée. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <p>Ouvrez votre console SVP</p> <script> function deleteProp() { "use strict"; const obj = {}; Object.defineProperty(obj, "prop", { value: 10, writable: false }); delete obj.prop; } deleteProp(); </script> </body> </html> Tester le code
en mode strict Tester le code
sans mode strict
Déclarer deux arguments de même nom déclenche une erreur en mode strict. Ci-dessous, je déclare une fonction dans laquelle par erreur, je mets deux paramètres qui ont le même nom. Je constate le déclenchement d'une erreur seulement en mode strict. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <p>Ouvrez votre console SVP</p> <script> "use strict" function test(a,b,a){} test(1,2,3); </script> </body> </html> Tester le code
en mode strict Tester le code
sans mode strict
L'effet alias dans le comportement de arguments est supprimé en mode strict. En ce qui concerne l'exemple ci-dessous, je rappelle que arguments[0] et l'argument a de la fonction test sont des alias dans le mode normal. Ici, je suis en mode strict. J'affecte arguments[0] à la valeur 10 puis j'affiche la valeur de arguments[0] et la valeur de a. Je constate que les deux valeurs sont différentes, ce qui prouve que l'effet d'alias est supprimé. <!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> </head> <body> <script> "use strict"; function test(a,b,c){ arguments[0] = 10; console.log('Valeur de arguments[0] => '+arguments[0]); console.log('Valeur de a => '+a); } test(2,3,4); </script> </body> </html> Tester le code
en mode strict Tester le code
sans mode strict