Plan du site  
pixel
pixel

Articles - Étudiants SUPINFO

Javascript Strict Mode

Par Tom BESSIERE Publié le 11/09/2019 à 15:42:58 Noter cet article:
(0 votes)
En attente de relecture par le comité de lecture

Introduction

En 2009 sort l’ECMAScript 5, regroupant un ensemble de nouvelles normes et de concepts pour JavaScript.Parmi ces concepts, le mode strict qui permet d’utiliser une version de JavaScript plus restrictive. Ces restrictions permettent de sécuriser et d’optimiser son code en transformant les mauvaises syntaxes JavaScript en erreurs. Par exemple, en mode strict il n’est plus possible d’utiliser certains mots réservés comme ‘eval’ pour ses noms de variables.

Le mode strict a évolué au fur et à mesure des mises à jour de l’ECMAScript et certaines normalisations ont été améliorées, voire supprimer. Nous verrons dans cet article les fonctionnalités les plus importantes du mode strict et ses avantages.

Pourquoi avoir créer le mode strict en Javascript ?

Un des problèmes de JavaScript est qu’il autorise naturellement certaines syntaxes qui peuvent créer des erreurs qui ne seront visibles que lors d’une mise en production et cela a pour conséquence de faire perdre beaucoup de temps aux développeurs. Par exemple, assigner une valeur à une variable non déclarer préalablement est autorisé en JavaScript, mais lèvera une erreur en mode strict.

Lors de sa création, les environnements de développement n’étaient pas aussi puissants et robustes qu’il y a 10 ans, le mode strict était donc une avancée pour rendre le JavaScript plus convivial pour les développeurs web. Aujourd’hui, les environnements de production comme Visual Studio Code proposent directement des linters pour la plupart des langages de programmation permettant de repérer facilement les erreurs de syntaxes, mais ce n’est pas une raison pour ne plus utiliser le mode strict de JavaScript puisque c’est lors de l’exécution du code qui lèvera les erreurs.

L’utilisation du mode strict permet aussi de désactiver certaines fonctionnalités considérées comme dangereuse ou confuse comme accéder à des variables globales ou encore l’utilisation de la fonction eval(). Certains mots qui sont susceptibles d’être utilisés (ou bien ils le sont déjà) dans les prochaines versions de JavaScript de l’ECMAScript sont aussi réservés et ne peuvent pas être utilisés en mode strict. Cela comprend « static », « public », « private », « protected », « interface », « let », « implements » ou encore « package ». Il permet aussi d’optimiser son code en rectifiant certaines erreurs qui impactent les performances des moteurs JavaScript. Globalement, le mode strict permet de sécuriser son code JavaScript.

Comment utiliser le mode strict ?

Pour utiliser le mode strict dans votre code et pour que le navigateur le détecte, on utilise ce qu’on appelle un pragma. Pragma vient du langage C, il correspond à une instruction qui n’est pas utilisée pour le code, mais par le compilateur. En JavaScript, un pragma s’écrit simplement comme une chaîne de caractère non assigné. Les variables non assignées en JavaScript ne sont pas exécutées et sont supprimé lors de son exécution, les pragmas n’ont donc d’importance que pour le compilateur ou le moteur JavaScript. Cette technique permet d’utiliser un même code pour un moteur JavaScript compatible avec le mode strict et un autre moteur qui ne l’est pas sans toucher la moindre ligne de code.

		"use strict";
		

Le mode strict en JavaScript peut être utilisé à plusieurs endroits dans votre code :

A la première ligne de votre script:

		"use strict";
		var message = 'Hello world';
		console.log(message);
		// Console:
		"Hello world"
		

Vous pouvez utiliser le pragma "use strict" où vous voulez dans votre code, mais le JavaScript étant un langage interprété, tout le code qui se trouve au-dessus du pragma ne sera pas en mode strict.

Vous pouvez aussi l'utiliser dans une fonction, ce qui permettra d'utiliser le mode strict uniquement dans l'étendue de la fonction est non dans tout le code.

		function DisplayHello(message){
			"use strict";
			console.log(message);
		}
		DisplayHello("Hello world");
		// Console :
		"Hello world"
		

Le mode strict est aussi utilisé par défaut dans certains cas, comme les modules JavaScript (utilisés par CommonJS, Webpack ou Babel).

Les variables avec le mode strict

En mode strict, il est impossible de créer accidentellement des variables globales, ce qui permet de directement remarquer si l'on utilise une variable qui n’a pas était initialiser avant.

		//Mode non strict
		message = "Je suis une variable globale!";
		console.log(message);
		// Console:
		"Je suis une variable globale!"
		
		//Mode strict
		"use strict";
		message = "Je suis une variable globale!"
		console.log(message)
		// Console:
		"ReferenceError: assignment to undeclared variable message"
		

Il est aussi impossible de supprimer une variable en mode strict.

		"use strict";
		var array = [1, 2, 3, 4, 5];
		delete array;
		"SyntaxError: Deleting local variable in strict mode"
		

Les fonctions en mode strict

En mode non strict, un changement de valeur d’un argument d’une fonction affecte aussi la valeur initiale de cet argument. Le mode strict s’assure que la valeur de l’argument puisse toujours être accessible.

		// Mode non strict
		function DisplayMessage(message){
			message = "Je change la valeur de l'argument!";
			console.log("message: "+message+" , argument: "+arguments[0]);
		}
		DisplayMessage("Hello World");
		// Console:
		"message: 'Je change la valeur de l'argument!'', 
		 argument: Je change la valeur de l'argument!"
		
		// Mode strict
		"use strict";
		function DisplayMessage(message){
			message = "Je change la valeur de l'argument!";
			console.log("message: "+message+" , argument: "+arguments[0]);
		}
		DisplayMessage("Hello World");
		// Console:
		"message: Je change la valeur de l'argument! , argument: Hello World"
		

En mode strict les noms d’arguments de fonction doivent être uniques. Le code suivant déclenchera une erreur:

		"use strict";
		function DisplayMessage(message, message){
			return message;
		}
		// Console: 
		"Argument name clash"
		

Le mot clef « this » agira aussi différemment. Dans le mode non strict, « this » fera référence à l’objet window :

		function DisplayThis(){
			console.log(this);
		}
		DisplayThis();
		// Console:
		"window (object)"
		

En mode strict « this » fera référence a l'objet qui a appelé la fonction ou sera undefined si cet objet n’existe pas.

		"use strict";
		function DisplayThis(){
    		console.log(this);
 		 }
  		DisplayThis();
		// Console:
		"undefined"
		

Les objets en mode strict :

En mode strict, l’utilisation d'objet est plus susceptible de générer des erreurs qu'en mode non strict. Il a tendance à déclencher des erreurs dans les situations où le mode sans restriction échoue silencieusement, ce qui augmente la probabilité de détecter une erreur dès le début du développement.

Par exemple, assigner une valeur à une propriété ou ajouter une propriété à un objet en mode read only déclenchera immédiatement une erreur.

 
		"use strict"; 
		var vehicle = Object.freeze({wheels: 4, passengerSeats: 5}); 
		vehicle.passengerSeats = 2; 
		// Console: 
		"TypeError: 'passengerSeats' is read-only" 
		
 
		"use strict"; 
		var vehicle = Object.freeze({wheels: 4, passengerSeats: 5}); 
		vehicle.doors = 5; 
		// Console: 
		"TypeError: 'passengerSeats' is read-only" 
		

Une autre erreur se déclenchera si on essaye de supprimer la propriété d’un objet en mode read only.

 
		"use strict"; 
		var vehicle = Object.freeze({wheels: 4, passengerSeats: 5}); 
		delete vehicle.passengerSeats; 
		// Console: 
		"TypeError: property 'passengerSeats' is non-configurable and can't be deleted" 
		

Les naviguateurs compatibles

Il est important de préciser que certains navigateurs ne prennent pas en charge le mode strict. Voici un tableau des versions des navigateurs les plus utilisés qui peuvent utiliser le mode strict:

Internet Explorer Edge Chrome Firefox Safari Opera
Non supportée 6 à 9 4 à 12 2 à 3.6 3.1 à 4 10 à 11.5
Première version supportée >10 >12 >13 >4 >6 >12.1
A propos de SUPINFO | Contacts & adresses | Enseigner à SUPINFO | Presse | Conditions d'utilisation & Copyright | Respect de la vie privée | Investir
Logo de la société Cisco, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société IBM, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sun-Oracle, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Apple, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Sybase, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Novell, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Intel, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Accenture, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société SAP, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Prometric, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo de la société Toeic, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management Logo du IT Academy Program par Microsoft, partenaire pédagogique de SUPINFO, la Grande École de l'informatique, du numérique et du management

SUPINFO International University
Ecole d'Informatique - IT School
École Supérieure d'Informatique de Paris, leader en France
La Grande Ecole de l'informatique, du numérique et du management
Fondée en 1965, reconnue par l'État. Titre Bac+5 certifié au niveau I.
SUPINFO International University is globally operated by EDUCINVEST Belgium - Avenue Louise, 534 - 1050 Brussels