Strict mode

Strict mode in one sentence

Strict mode is a stricter way for JavaScript to run your code. Most code works the same in it. But in a few places, old JavaScript guesses what you meant and keeps going. Strict mode stops there with an error instead. Then you can see the mistake and fix it.

The old, default way is often called sloppy mode. This lesson uses that name.

const price = 3;
console.log(price + 1);

Line 1 stores 3 in price. Line 2 adds one and prints 4. Strict mode does not change normal math like this. It only changes a few risky cases. You will meet them below.

In this lesson, a classic script means a normal script that is not a module, like a plain <script> tag. You will compare sloppy mode with strict mode. You will learn exactly where "use strict" has to go. You will also see why modules are already strict.

"use strict" looks like a string because it is one. But at the top of a script or a function, JavaScript gives some strings a special job. A string with a special job like this is called a directive. It is an instruction to JavaScript, not a value for your program to use.

The strings at the very top, one after another, are called the directive prologue. (A prologue is the opening part of something.) The rules are:

• Blank lines and comments may come before "use strict".
• Other plain strings may come before it too.
• Any other statement ends the prologue. A statement is one complete instruction, like console.log("hi");.
• After that, "use strict" is just a string. JavaScript reads it and does nothing with it.

function saveTeaOrder() {
  "use strict";
  try {
    teaTotal = 3;
  } catch (error) {
    return error.name;
  }
}

console.log(saveTeaOrder());

Line 2 is the first statement inside saveTeaOrder. So it makes only that function strict. Line 4 assigns to teaTotal, but teaTotal was never declared. (Declared means made with let, const, or var.) Strict mode throws a ReferenceError. The catch block catches the error, and line 6 returns its name. Line 10 prints ReferenceError.

"keep this note";
"use strict";
try {
  cartTotal = 3;
} catch (error) {
  console.log(error.name);
}

Line 1 is another plain string. It does not end the prologue, so line 2 still turns strict mode on. Line 4 assigns to cartTotal, which was never declared. That throws, and line 6 prints ReferenceError. Only a statement that is not a plain string ends the prologue.

// Comments do not count as statements.
"use strict";
try {
  guestCount = 2;
} catch (error) {
  console.log(error.name);
}

JavaScript skips the comment on line 1. So line 2 is still in the prologue, and strict mode is on. Line 4 assigns to guestCount, which was never declared. The catch block gets a ReferenceError, and line 6 prints ReferenceError. A comment is a note for people, so it never ends the prologue.

1"use strict";Run2try {3  typoTotal = 3;4  console.log("assignment worked");5} catch (error) {6  console.log(error.name + ": " + error.message);7}

In the first version, line 3 throws right away, so the mistake with typoTotal shows up at once. In the second version, line 1 prints setup first. Now the prologue is over, so line 2 is ignored. Line 3 then quietly makes a new global variable, globalThis.typoTotal. (A global is a variable that every part of the program can see.) The words are the same. Only their place is different.

One more rule: once code is strict, you can't turn strict mode off inside it. A string like "use sloppy" means nothing special. Placement also matters when a tool pastes several files into one big file. A file's "use strict" may end up below other code. Then it is no longer at the top, so it stops working.

Strict mode is not a new language. Most JavaScript works the same in both modes. The changes are in the places where old JavaScript would quietly guess, skip an error, or allow confusing code.

"use strict";
try {
  orderTotal = 3;
} catch (error) {
  console.log(error.name);
}

Line 1 turns strict mode on for this script. Line 3 assigns to orderTotal, but orderTotal was never declared. Strict mode throws, and line 5 prints ReferenceError. No new variable is made.

In sloppy mode, the same line makes a new global variable without telling you. So a typo in a name can quietly make a global, and that global can change code far away. That is why strict mode refuses.

"use strict";
let orderTotal = 3;
orderTotal = orderTotal + 1;
console.log(orderTotal);

Strict mode still lets you assign values. Line 2 declares orderTotal. Line 3 changes it, and line 4 prints 4. The problem is only a name that was never declared. Changing a variable you made on purpose is fine.

1mistakeCount = 1;2console.log("created global: " + ("mistakeCount" in globalThis));

A frozen object shows a second change. Object.freeze(obj) locks an object, so its properties can't be changed. Then, if your code tries to change one:

• In sloppy mode, the change is skipped with no message.
• In strict mode, the change throws a TypeError.

The step-through below tries the change in strict mode. Then it reads the name again, so you can see that nothing changed.

1"use strict";Run2const profile = Object.freeze({ name: "Grace" });3try {4  profile.name = "Asha";5} catch (error) {6  console.log(error.name);7}8console.log(profile.name);

"use strict";
const profile = Object.freeze({
  name: "Asha",
  preferences: { theme: "light" },
});
profile.preferences.theme = "dark";
console.log(profile.preferences.theme);

Object.freeze is shallow: it locks only the object you pass to it. The preferences object inside is a separate object, and it is not locked. So line 6 changes the theme, and line 7 prints dark. To lock the inner objects too, freeze each one of them.

Each row of this table is one risky case. Read across to see what each mode does.

You don't need to remember every old case today. Remember the pattern instead. Strict mode refuses code that:

• makes a hidden global variable,
• hides a write that failed,
• makes it hard to tell where a name comes from.

Inside a function, this is a special word. It means "the object this function was called on." A plain function call is a call like showUser(), with no object and dot before the name. So what is this then?

• In sloppy mode, JavaScript fills in the global object. That is the object that holds all the globals. You can reach it as globalThis.
• In strict mode, JavaScript fills in nothing, so this stays undefined.

"use strict";
function showUser() {
  console.log(this === undefined);
}

showUser();

Line 1 turns strict mode on. Lines 2 to 4 make a function that checks whether this is undefined. Line 6 calls it with nothing before the dot. So line 3 prints true.

This rule is only for plain calls. In user.showName(), user is before the dot, so this is user. The playground above has a this example too. Run it in both modes to compare.

"use strict";
const user = {
  name: "Asha",
  showName() {
    console.log(this.name);
  },
};

user.showName();

Line 2 makes a user object with the name Asha. A function stored in an object, like showName, is called a method. Line 9 calls the method through user. So inside showName, this is the user object, and line 5 prints Asha. Strict mode keeps this useful rule. It only removes the surprise for plain calls.

Each row is one way to call a strict function, and the value this gets.

Mistakes strict mode refuses before running

Some strict rules are about how code is written. JavaScript checks these before it runs a single line. If one is broken, nothing runs. You get a SyntaxError: an error that means "this code is not written in a valid way."

1"use strict";2function total(a, a) {3  return a;4}5 6console.log(010);7 8delete total;9 10with ({ total: 1 }) {11  console.log(total);12}

• Two parameters with the same name, like (a, a) on line 2. A parameter is a name for a value passed into a function. With two as, one hides the other.
• Old octal numbers, like 010 on line 6. Octal means counting in eights, so 010 meant eight. But most readers think it means ten. To write octal, use 0o10.
• Deleting a variable, like delete total on line 8. delete removes a property from an object. It was never a way to remove a variable.
• The with statement, on line 10. It changes where JavaScript looks for names, so strict mode bans it. A later lesson, Sloppy mode in depth, shows why old code used it.

console.log(0o10);

The 0o at the start means "this is an octal number." This line prints 8. In everyday code, you will almost always use normal numbers. The point is that the new way to write octal is clear.

"use strict";
const cart = { coupon: "SAVE" };
delete cart.coupon;
console.log("coupon" in cart);

Strict mode bans delete total. But you can still remove a property from an object. Line 3 removes the coupon property from cart. Line 4 checks whether coupon is still in cart, and prints false.

In 2015, a JavaScript update called ES2015 made two features strict on their own: modules and classes.

• An ES module is a JavaScript file that can use import and export to share code with other files.
• A class body is the code inside a class's braces { }: its fields and methods.

Neither one needs "use strict".

1// ES module file, or <script type="module">2const moduleThis = this;3 4class StrictCounter {5  count = 0;6  bump() {7    return this.count + 1;8  }9}10 11console.log(moduleThis === undefined);12console.log(new StrictCounter().bump());

This example only works as a module. The lesson's code runner runs classic scripts, and there the top-level this is different. So this example is here for reading only. The lesson's tests run the same code as a real module.

In a module, this at the top level (outside any function) is undefined, not the global object. Inside a class body, methods and fields follow strict rules too. This is one reason modern code uses modules: they start in the safer mode.

So the module example prints true, then 1. The first console.log checks the top-level this. The second one calls the class method. The next example prints ReferenceError, because a class body is strict even inside a classic script.

1class Profile {2  rename() {3    try {4      missingName = "Asha";5    } catch (error) {6      return error.name;7    }8  }9}10console.log(new Profile().rename());

Line 4 assigns to missingName, which was never declared. This whole example has no "use strict" line. But the method is inside a class, so it is strict anyway. The catch block catches the ReferenceError, and line 6 returns its name. Line 10 prints ReferenceError.

Where you will use this

You won't type "use strict" every day. But you will use strict mode every day without typing it.

A framework is a ready-made toolkit for building apps. A bundler is a tool that joins your files into a few files for the browser. Frameworks, bundlers, and many editors make or expect module code. Module code is strict, so strict mode is the normal starting point today.

Strict mode does not check how you spell property names. On a normal object, you can still add a property with a misspelled name. The next small example shows this.

"use strict";
const user = {};
user.nmae = "Asha";
console.log(user.name);

Line 1 turns strict mode on. Line 3 adds a new property, nmae, to user. That is allowed, because user is a normal object that can still get new properties. Line 4 reads name, which was never set, so it prints undefined. Strict mode catches a write that fails. It does not catch a spelling mistake that JavaScript allows.

1"use strict";2 3function saveProfile(profile) {4  profile.naem = "Ada"; // typo: meant profile.name5  return profile.name;6}7 8const profile = Object.freeze({ name: "Grace" });9console.log(saveProfile(profile));

Here the profile object is frozen, so JavaScript can't add naem to it. The write on line 4 fails. Because the script is strict, the failed write throws a TypeError. Freezing makes the write fail. Strict mode makes the failure visible.

"use strict";
function saveOrder() {
  const orderTotal = 3;
  console.log(orderTotal);
}

saveOrder();

Maybe you have an old classic script that you can't turn into a module yet. Put "use strict"; on the first line, and declare the variable you need. Here line 3 declares orderTotal. Line 7 calls saveOrder, so line 4 prints 3. For new files, use a module script instead. It is strict already, and it can import other files.

• Use modules when you can. They are strict on their own and work well with modern tools.
• When you write an old-style classic script, put "use strict"; on the first line.
• When you read older code, notice sloppy-mode habits. Don't copy them into new files.
• When strict mode throws, treat the error as help. It found a bug early.

Common misconceptions

The same text can mean two different things. Read each row to see why.

Pick the best answer. The lesson's tests run every code question, so the answers match what JavaScript really prints.

Key takeaways

• "use strict" only works at the very top of a script or a function, in the directive prologue.
• Strict mode turns some silent mistakes into errors you can see. Two big ones: assigning to a name you never declared, and writing to something that can't change.
• It also refuses some confusing code before it runs: two parameters with the same name, old octal numbers like 010, deleting a variable, and with.
• Modules and class bodies are strict on their own. A classic script needs "use strict" to be strict.
• Once code is strict, you can't turn strict mode off inside it.

Coming next: Talking to the user.