Tutorials JavaScript Tutorial

Strict Mode — Complete Guide

Strict Mode — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.

On this page

JavaScript Tutorial · Lesson 7 of 100

Strict Mode

BasicsObjects & dataAsync & DOMAdvancedToolsProjects

Beginner · 1 — Learn by example · ~6 min · JS Tutorial — Basics

What is this?

"use strict" is a line you put at the top of a file or function. It turns on stricter rules so mistakes become errors instead of silent bugs.

Why should you care?

Without strict mode, old JavaScript allowed typos to create global variables by accident. Strict mode helps you write safer code.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

"use strict";
let x = 10;
// mistypedVar = 20; // ReferenceError in strict mode

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

Code
Result

What happened?

  • In strict mode, assigning to an undeclared variable throws an error.
  • Modern modules and bundlers use strict mode by default.

Practice next

  1. Save the example in an HTML file with a script tag.
  2. Uncomment mistypedVar and read the ReferenceError.
  3. Wrap code in a function with "use strict" at the top.
  4. Try deleting a non-configurable property in strict mode inside an object literal.
  5. Pass duplicate parameter names in a function — strict mode throws.

Remember

Put "use strict" at the top of scripts Catches common mistakes early Enabled automatically in ES modules

ScriptVerse payment module

A finance module runs in strict mode so typos like ammount = 100 do not silently create global variables.

Outcome: Strict mode turns silent bugs into immediate errors during development.

Interview prep for this lesson

Practice these questions aloud after reading—each links to a full structured answer.

Mid PDF Detailed
How do you implement dark mode using CSS?
Short answer: Use the prefers-color-scheme media query or toggle themes via classes. Example (automatic via system theme): Follow me on LinkedIn: @media (prefers-color-scheme: dark) { body { background: #121212; color: #…
Junior PDF Detailed
What is the box model in CSS?
Short answer: Every HTML element is a box made of: Real-world example (ShopNest) ShopNest’s browser cart uses modern JavaScript: fetch APIs with async/await, modules, and clear error handling. Say this in the interview D…
Junior PDF Detailed
What is the difference between inline-block and block?
Short answer: block elements take full width and start on a new line. inline-block behaves like inline (stays in the same line) but allows setting width, height, margin, and padding. Example code .block { display: block;…
Mid PDF Detailed
Explain the difference between HTML4 and HTML5.
Short answer: HTML5 is the modern evolution of HTML4, introducing better structure, multimedia support, and APIs. Explain a bit more Follow me on LinkedIn: HTML4 mainly focused on document markup, while HTML5 focuses on…
Mid PDF Detailed
Class selector: Targets elements with a class.?
Short answer: .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow; } .highlight { background: yellow…
Questions on this lesson 0

Sign in to ask a question or upvote helpful answers.

No questions yet — be the first to ask!

JavaScript Tutorial
Course syllabus

JavaScript Tutorial

Tutorial — Basics
Control Flow & Functions
Objects & Collections
Strings, Dates & RegEx
Async JavaScript
HTML DOM & Web APIs
Advanced
Performance & Security
Testing & Tooling
Projects
Toolliyo Assistant
Ask about tutorials, ebooks, training, pricing, mentor services, and support. I use public site content only—not admin or internal tools.

care@toolliyo.com

Need callback? Share your details