Qu'est-ce que la déclaration "use strict" en JavaScript ?

Améliorer la Qualité du Code

La déclaration "use strict" en JavaScript aide à améliorer la qualité du code. Elle détecte les erreurs de programmation en levant des exceptions pour certaines fautes. Par exemple, elle empêche l'utilisation de variables non déclarées, qui peuvent causer un comportement inattendu en mode non strict.

"Use strict" empêche également les actions non sûres. Elle bloque l'utilisation de certaines fonctionnalités du langage qui sont risquées ou sujettes aux erreurs. Par exemple, elle empêche la création accidentelle de variables globales, qui peuvent causer des bugs dans les grandes applications.

Cette directive désactive aussi les fonctionnalités déroutantes du langage. Elle transforme certaines erreurs silencieuses de JavaScript en erreurs levées. Cela facilite le débogage et vous aide à écrire un code plus fiable.

"use strict";

function exampleFunction() {
    x = 10; // Ceci lèvera une erreur en mode strict
}

exampleFunction();

Améliorer l'Exécution de JavaScript

"Use strict" peut également améliorer l'exécution de JavaScript. Elle peut conduire à de meilleures performances dans certains cas en permettant aux moteurs JavaScript de faire des optimisations. Ces optimisations sont possibles car le code en mode strict suit des règles plus prévisibles.

"Use strict" prépare aussi le code pour les futures versions d'ECMAScript. Elle aligne les pratiques de codage avec les nouvelles normes JavaScript, facilitant l'utilisation de nouvelles fonctionnalités du langage à mesure qu'elles deviennent disponibles. Cela peut faire gagner du temps lors de la mise à jour des bases de code pour fonctionner avec les nouvelles versions de JavaScript.

Implémentation dans la portée globale

Pour appliquer "use strict" à un script entier, placez la directive au début du fichier JavaScript. Cela fait fonctionner tout le script en mode strict. Ajoutez cette ligne comme première instruction dans votre fichier JavaScript :

"use strict";

Utilisé de cette manière, le mode strict affecte tout le code du script. Il change la façon dont JavaScript lit et exécute l'ensemble du programme, en appliquant des règles d'analyse et de gestion d'erreurs plus strictes partout.

Implémentation dans la portée d'une fonction

Vous pouvez également appliquer "use strict" à des fonctions spécifiques. Cela limite le mode strict à cette fonction et à ses fonctions imbriquées. Pour ce faire, placez la directive en haut du corps de la fonction :

function strictFunction() {
    "use strict";
    // Code de la fonction ici
}

Cette méthode est utile lorsque vous travaillez avec du code existant ou lorsque vous voulez appliquer le mode strict à certaines parties seulement. Elle vous permet d'ajouter le mode strict à votre base de code petit à petit sans affecter l'ensemble du script.

L'utilisation du mode strict au niveau de la fonction peut être utile lors de l'ajout de nouveau code strict à un code plus ancien non-strict. Elle offre un moyen d'écrire de meilleures fonctions dans un contexte plus large, potentiellement non-strict. Voici la traduction en français :

Règles de déclaration des variables

Le mode strict modifie la gestion des déclarations de variables en JavaScript. Il empêche l'utilisation de variables non déclarées. En mode non strict, si vous attribuez une valeur à une variable non déclarée, JavaScript crée une variable globale. En mode strict, cela provoque une erreur.

"use strict";
x = 3.14; // Ceci génère une ReferenceError

Le mode strict empêche également les erreurs silencieuses dans les attributions de variables. Par exemple, l'attribution à des variables globales non modifiables ou à des propriétés en lecture seule, qui échoueraient silencieusement en mode non strict, génère maintenant une erreur.

Changements de comportement des fonctions

Le mode strict modifie la liaison de 'this' dans les fonctions. En mode non strict, lorsqu'une fonction est appelée comme une méthode, 'this' fait référence à l'objet global. En mode strict, 'this' est indéfini dans de tels cas.

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

Le mode strict impose également des limites sur les paramètres des fonctions. Il interdit les noms de paramètres en double dans les déclarations de fonctions. Cela aide à trouver les fautes de frappe et empêche les bugs potentiels.

Comportement des propriétés d'objet

Le mode strict modifie les règles de manipulation des objets. Il génère une erreur lorsque vous essayez d'ajouter des propriétés à un objet non extensible. Cela aide à empêcher les modifications accidentelles d'objets qui devraient rester inchangés.

"use strict";
const obj = Object.preventExtensions({});
obj.newProp = 123; // Génère une TypeError

Un autre changement est la prévention des noms de propriétés en double dans les littéraux d'objet. En mode non strict, la dernière occurrence d'une propriété remplace les précédentes. Le mode strict considère cela comme une erreur, ce qui aide à trouver des bugs potentiels dans les définitions d'objets.

"use strict";
const obj = {
    prop: 1,
    prop: 2 // Ceci génère une SyntaxError en mode strict
};

Compatibilité avec les navigateurs modernes

"Use strict" fonctionne dans tous les navigateurs web modernes. Les navigateurs qui prennent en charge le mode strict incluent :

• Google Chrome (version 13+)
• Mozilla Firefox (version 4+)
• Safari (version 5.1+)
• Microsoft Edge (toutes versions)
• Internet Explorer (version 10+)
• Opera (version 12+)

Ces navigateurs suivent les fonctionnalités du mode strict telles que définies dans ECMAScript 5 et les versions ultérieures. Pour la plupart des projets web actuels, vous pouvez utiliser le mode strict sans problèmes de compatibilité avec les navigateurs.

try {
    "use strict";
    eval("var x = 17;");
    console.log("Le mode strict est pris en charge");
} catch (e) {
    console.log("Le mode strict n'est pas pris en charge");
}

Stratégies de repli

Pour les navigateurs plus anciens qui ne prennent pas en charge le mode strict, essayez ces stratégies :

1. Détection de fonctionnalité : Vérifiez si le mode strict est pris en charge :

function supportsStrictMode() {
    "use strict";
    return typeof this === 'undefined';
}

2. Mode strict conditionnel : Utilisez le mode strict uniquement s'il est pris en charge :

if (supportsStrictMode()) {
    "use strict";
    // Votre code ici
}

3. Isolez le code strict : Placez le code en mode strict dans un fichier ou une fonction séparé :

(function() {
    "use strict";
    // Votre code en mode strict ici
})();

4. Transpilation : Utilisez des outils comme Babel pour convertir le code en mode strict en code compatible ES5 pour les navigateurs plus anciens.

Pour que votre code fonctionne dans des environnements non-stricts, évitez de vous fier à des comportements spécifiques au mode strict. Écrivez du code qui fonctionne à la fois en mode strict et non-strict quand c'est possible. Cela aide à maintenir la compatibilité entre différentes versions de navigateurs et environnements. Voici la traduction en français :

Applications à grande échelle

"Use strict" est utile dans les bases de code complexes. Dans les grandes applications, il détecte les erreurs potentielles tôt dans le développement. Cela peut faire gagner du temps et des ressources en évitant que des bogues n'atteignent la production.

Pour les grands projets, le mode strict impose de meilleures pratiques de codage. Il empêche l'utilisation de variables non déclarées et d'autres fonctionnalités sujettes aux erreurs, ce qui est utile lorsque de nombreux développeurs travaillent sur la même base de code. Cela conduit à un code plus facile à maintenir.

Maintenir la cohérence du code est plus facile avec "use strict". Il encourage tous les développeurs d'un projet à suivre les mêmes normes de codage. Cela rend la base de code plus facile à comprendre et à maintenir au fil du temps, ce qui est important pour les grandes applications qui peuvent être développées et mises à jour pendant de nombreuses années.

Intégration de code existant

L'ajout du mode strict à des projets existants nécessite une planification minutieuse. Lorsque vous travaillez avec du code ancien, vous pouvez ajouter "use strict" étape par étape. Commencez par l'appliquer aux nouvelles fonctions ou modules que vous ajoutez au projet. Cela vous permet d'améliorer la qualité du code dans les nouvelles additions sans affecter les fonctionnalités existantes.

Pour une adoption progressive, vous pouvez utiliser le mode strict au niveau des fonctions. Cette approche vous permet d'appliquer le mode strict à des fonctions spécifiques au sein d'une base de code plus large non stricte :

function newFeature() {
    "use strict";
    // Nouveau code en mode strict
}

Cette méthode vous permet d'introduire le mode strict morceau par morceau, en testant et en mettant à jour chaque section au fur et à mesure. C'est une approche plus sûre pour les bases de code importantes et établies où un changement complet pourrait être risqué ou peu pratique.

Lors de l'ajout du mode strict à d'anciens projets, il est important de tester minutieusement le code affecté. Certains codes qui fonctionnaient auparavant peuvent générer des erreurs en mode strict, nécessitant des mises à jour. Ce processus, bien que chronophage au début, peut conduire à une meilleure qualité du code et à une maintenance plus facile à l'avenir.

// Mode non strict (peut fonctionner)
delete Object.prototype;

// Mode strict (génère une erreur)
"use strict";
delete Object.prototype; // Génère : Cannot delete property 'prototype' of function Object()

Problèmes de compatibilité

"Use strict" peut causer des problèmes avec l'ancien code JavaScript. Certaines pratiques de codage qui fonctionnaient en mode non strict peuvent provoquer des erreurs en mode strict. Par exemple, l'utilisation de variables non déclarées ou la suppression de propriétés non configurables causera des erreurs en mode strict mais pas en mode non strict.

Des conflits avec des bibliothèques tierces peuvent survenir lors de l'utilisation du mode strict. Certaines bibliothèques plus anciennes peuvent ne pas fonctionner avec le mode strict. Si ces bibliothèques utilisent des pratiques que le mode strict interdit, elles peuvent cesser de fonctionner ou provoquer des erreurs. Cela peut poser problème lors du travail avec d'anciens systèmes ou lors de l'utilisation de plusieurs bibliothèques externes.

"use strict";
// Ceci pourrait causer des problèmes avec certaines anciennes bibliothèques
someOldLibrary.doSomething();

Courbe d'apprentissage

S'adapter à des pratiques de codage plus strictes peut être difficile pour les développeurs habitués au JavaScript non strict. Le mode strict impose une approche plus disciplinée du codage. Les développeurs doivent être attentifs aux déclarations de variables, à l'utilisation des paramètres de fonction et aux affectations de propriétés d'objet. Cette période d'adaptation peut ralentir le développement pendant que les membres de l'équipe s'adaptent aux nouvelles règles.

Les problèmes courants pour les développeurs lors de l'utilisation du mode strict incluent :

• Oublier de déclarer des variables avant leur utilisation
• Utiliser des mots réservés comme noms de variables
• Attribuer des valeurs à des propriétés en lecture seule
• Supprimer des variables, des fonctions ou des arguments

"use strict";
x = 10; // Erreur : x n'est pas défini
var eval = 5; // Erreur : eval est un mot réservé

Bien que ces règles plus strictes conduisent à une meilleure qualité de code à long terme, elles peuvent causer de la frustration et augmenter le temps de débogage pour les développeurs qui ne sont pas familiers avec les exigences du mode strict. Voici la traduction en français du texte fourni :

Intégration avec les frameworks populaires

Les frameworks JavaScript modernes gèrent souvent le mode strict automatiquement. Comprendre comment ils le gèrent peut vous aider à écrire un meilleur code.

React utilise le mode strict par défaut dans sa version de développement. Il fournit un composant <StrictMode> que vous pouvez utiliser pour envelopper des parties de votre application afin d'activer plus de vérifications et d'avertissements :

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      {/* Vos composants d'application */}
    </React.StrictMode>
  );
}

Angular utilise également le mode strict par défaut. Il est intégré dans la configuration TypeScript utilisée par les projets Angular. Vous n'avez pas besoin d'ajouter manuellement "use strict" dans les applications Angular.

Vue.js n'impose pas lui-même le mode strict, mais il recommande l'utilisation d'outils de build modernes qui incluent souvent le mode strict. Lorsque vous utilisez Vue avec une configuration de build comme Vue CLI, le mode strict est généralement activé automatiquement.

Lorsque vous travaillez avec ces frameworks, gardez ces points à l'esprit :

• Le mode strict de React peut faire que les composants se rendent deux fois en développement pour aider à trouver les effets secondaires.
• Dans Angular, le mode strict fait partie des vérifications strictes de TypeScript. Vous pouvez les ajuster dans le fichier tsconfig.json.
• Pour les projets Vue.js utilisant des outils de build, vérifiez vos fichiers de configuration pour confirmer les paramètres du mode strict.

Comprendre comment chaque framework gère le mode strict vous aide à écrire un code plus cohérent et sans erreur dans différents environnements JavaScript.

module.exports = {
  configureWebpack: {
    mode: 'production',
    devtool: 'source-map'
  }
}