Le mode strict

Avoir un code robuste c'est aussi forcer la main à celui qui écrit le code !

Il est vraiment important de connaître les principales différences entre le code JavaScript en mode strict, et le JavaScript "normal".

ECMAScript 5 a commencé à déprécier les pratiques de programmation sujettes aux erreurs. Mais il ne pouvait pas simplement changer la sémantique du code d'un jour à l'autre. Cela aurait brisé la plupart du code existant.

Le mode strict est une fonctionnalité ES5, et c'est un moyen de faire mieux fonctionner JavaScript.

Les pièges courants sont supprimés du langage ou lancent des exceptions visibles. Auparavant, plusieurs erreurs de programmation étaient ignorés en silence. Le mode strict transforme ces erreurs en erreurs visibles !

Il supprime principalement les fonctionnalités qui étaient possibles dans ES3, et obsolète depuis ES5 (mais pas supprimé en raison des exigences de rétrocompatibilité)

Comment activer le mode strict ?

Le mode strict est optionnel.

Comme pour tous les changements de JavaScript, nous ne pouvons pas simplement changer la façon dont le langage se comporte par défaut.

Nous avons donc la directive 'use strict' que nous devons utiliser pour activer le mode strict.

Vous pouvez le mettre au début d'un fichier, pour l'appliquer à tout le code contenu dans le fichier :

'use strict';

const firstName = 'David';
window.alert('Ce code est en mode strict, attentiiiiiooooonnnn !');

Ou en début de fonction :

//  Oui, je reste le camel case !
function jeSuisStrict() {
    'use strict';
    window.alert('cette fonction est en mode strict, encore ?');
}

C'est quand même vachement pratique sur du code existant, on n'a pas le temps de tester ou la confiance pour activer le mode strict sur tout un fichier.

L'utilisation du mode est strict est contagieux, tout le code syntaxiquement imbriqué passe également en mode strict.

const variable = 'Je ne suis pas en mode strict';

function jeSuisStrict() {
    'use strict';

    window.alert('Attention mode strict activé !!');
    encoreUneFonction();

    function encoreUneFonction() {
        window.alert('Moi aussi je suis strict maintenant :)');
    }
}

Qu'est-ce que ça change ?

Variable globale

Si on assigne une valeur à une variable non déclaré, JS va, par défaut, créer une variable en global :

(function() {
    variable = "Hello"
})()

variable; // Hello

Dès qu'on met le mode strict, on a une erreur qui nous prévient :

(function() {
    'use strict';
    variable = "Hello"
})()

variable; // Hello
Uncaught ReferenceError: variable is not defined
	at <anonymous>:4:11
	at <anonymous>:5:3

Aujourd'hui, le mode strict devrait être utilisé partout sauf s'il existe des raisons particulières de le faire.

Les nouvelles versions ECMAScript font du mode strict le mode par défaut lors de l'utilisation de nouvelles fonctionnalités. Par exemple, le code du module ECMAScript 6 est toujours évalué en mode strict. Le code à l'intérieur des classes ECMAScript 6 est également le mode strict par défaut.

Très probablement, si vous utilisez des modules ou des classes, vous utilisez déjà le mode strict. Si non, je recommande fortement d'utiliser le 'use strict'; marqueur dans vos scripts pour activer le mode strict.

Fun fact : assignation à des mots clef

Javascript va rester silencieux sans mode strict, et vous ne pourrez jamais trouver pourquoi vous avez une erreur. En mode strict, on peut mieux comprendre certaines erreur notamment quand on assigne une valeur à un mot clef !

let undefined = 1;

(() => {
    'use strict'
    undefined = 1;
})()

On aura donc cette magnifique erreur qui va nous dire que undefined existe déjà !

Uncaught SyntaxError: Identifier 'undefined' has already been declared
	at <anonymous>:1:1

Cela s'applique aussi à : Infinity, NaN, eval, arguments et pleiiiiin d'autres.

function userInteraction(article) {

	const { user, david } = article.humans;

	if (user.likeArticle) {
		if (!user.isFanFacebookPage) {
			user.likeFacebookPage();
		}
		user.shareFacebook();
		user.shareTwitter();
		user.shareLinkedin();
		david.notifyThankYou();
	} else {
		david.noOffence();
		david.notifyStillLoveYou();
	}

}

userInteraction(this);
Partages ! 😉