JavaScript Strict Mode

Early JavaScript was designed to be forgiving: many mistakes were silently ignored instead of reported. Strict mode is an opt-in setting that turns those silent mistakes into real errors, so you find bugs right away instead of hours later.

// Turning It On

Put the string "use strict"; as the very first statement of a script or a function:

"use strict";       // whole script is strict

let x = 5;
// ...

function careful() {
  "use strict";     // only this function is strict
  // ...
}

// A Directive, Not a Statement

"use strict" arrived in ECMAScript 5 (2009). It was designed so that older browsers would not break: a lone string like "use strict"; is a perfectly legal expression that does nothing, just like writing "John Doe"; or 4 + 5; on a line by itself. Old browsers simply ignored it. Newer JavaScript engines recognize that exact string at the top of a script or function as a directive: an instruction about how to run the code.

Where you put it decides how much code is strict:

x = 3.14;            // fine: this part is not strict
myFunction();

function myFunction() {
  "use strict";
  y = 3.14;          // ReferenceError: only this function is strict
}

// Already On Automatically

Code inside a class body and code in JavaScript modules (<script type="module">) is always strict. Most modern code is strict even when you never typed the words.

// Change 1: Undeclared Variables Throw

The single most useful change. Without strict mode, assigning to a misspelled name quietly creates a new global variable:

// sloppy mode
let total = 0;
totl = 50;               // typo: creates a global "totl", no error
console.log(total);      // 0  ...why didn't it update?

"use strict";
let total = 0;
totl = 50;               // ReferenceError: totl is not defined

Strict mode points straight at the typo.

// Change 2: this Is undefined in Plain Function Calls

"use strict";

function whoAmI() {
  return this;
}

console.log(whoAmI());   // undefined  (sloppy mode: the whole window object)

Remember "losing this" from the Object this lesson? In strict mode, a lost this is undefined, so reading this.name throws a clear error instead of quietly reading something off window.

// Change 3: Failed Assignments Throw

Some values cannot be changed. Sloppy mode ignores attempts to change them; strict mode reports them:

"use strict";

const settings = Object.freeze({ theme: "dark" });
settings.theme = "light";
// TypeError: Cannot assign to read only property 'theme' of object '#<Object>'

NaN = 5;
// TypeError: Cannot assign to read only property 'NaN' of object '#<Window>'

// Change 4: Duplicate Parameter Names Are Banned

"use strict";

function add(a, a) {   // SyntaxError: Duplicate parameter name not allowed
  return a + a;
}

// Change 5: Future Keywords Are Reserved

Words JavaScript might use later cannot be used as variable names:

"use strict";
let interface = 1;   // SyntaxError: Unexpected strict mode reserved word
// also reserved: implements, package, private, protected, public, static, yield

// Other Removals

// Why Use It

1. Catches typos: misspelled variable names fail loudly
2. Safer this: a lost this cannot silently touch the global object
3. No silent failures: writes that do nothing now tell you so
4. Future-proof: reserved words stay free for new language features

// Quick Check

function who() {
  "use strict";
  return this;
}
who();

// Try It

▶ Open Playground

1. Click Open Playground and run it: the typo quietly creates a global. Then add "use strict"; as the first line and run it again
2. Wrap the same code in a function whose first line is "use strict";, call it, and read the error
3. Freeze an object and try to change a property, with and without strict mode
4. Put "use strict"; on the second line of a function instead of the first, and confirm it has no effect