Hey Alice what's the big deal about the JavaScript's strict mode ?

Before Alice begins to answer Bob's question, let me set the stage for this conversation. Because JavaScript can be used without completely or adequately understanding, the understanding of the language and why something works or why that thing is used, eludes us. Consider Bob as a developer who wants to go the extra mile to understand what he uses day in and day out, without putting conscious thoughts. And Alice being an empathetic developer wants to help her colleague.

(Perhaps in a different setting, Bob could be interviewing Alice for a full-time job. 😉)

Hey Alice, my code works like a charm, but I am being told to use the strict mode, what's the big idea?

The JavaScript strict mode basically allows you to place a program or even a function in a strict operating context. And before you ask "What good does it do to me ?", let me answer that as well. It will make debugging easier, it will make you less vulnerable to the quirks of the JavaScript language. A lot of the errors which would silently fail and would be uncovered somewhere during the runtime (possibly in production) would be exposed to you upfront, if you use the strict mode.

So how do I use the fabled strict mode?

Oh! just place the string "use strict"; on the top of your program file. Now your code is using the strict mode and a lot of code lines which seemed fine in the non-strict mode will break, forcing you to refactor your program to make it easier for debugging. And we all make our lives easier.

Doesn't that mean I will break a lot of Grandpa Charles's legacy code by using the strict mode on my entire program file?

Remember when I told you, you could set the strict mode on a function. So if you don't want to hurt grandpa's feelings as of now, consider beginning to use the strict mode on the functions you write.

// non-strict mode

function doSomethingCool() {

    "use strict";

    // some cool `strict` stuff
}

// non-strict mode

Why does "use strict" have to be a string?

Because when this feature was being developed a lot of the older browsers did not support the strict mode. So if such a legacy browser encountered "use strict", it would treat it as a simple string literal which simply does nothing (in the context of affecting the state of a program).

That's really cool Alice, could you please demonstrate how "use strict" benefits me, through code examples?

Ah! I thought you'd never ask, let me think of a few scenarios off the top of my head.

• Strict mode won't allow you to assign a variable before you declare it

"use strict";

myName = "Alice";

ReferenceError: assignment to undeclared variable myName script.js:3:1

This prevents polluting the global scope.
Look at this example,

"use strict";

var doAwesomeStuff = false;

doawesomeStuff = true // OOPS messed up the camel casing!!!

if (doAwesomeStuff) {

    console.log("Beginning to do some awesome stuff");

    // Awesome stuff 
}

ReferenceError: assignment to undeclared variable doawesomeStuff script.js:5:1

Had it not been for the strict mode you would never get an error for the typo you committed (fail silently) and you would never have had been able to do the awesome stuff. Thanks to the strict mode you would now amend your typo and continue doing the awesome stuff you were destined to do.

• Strict mode forbids from using JavaScript keywords reserved for future use

// Non-strict mode
var let = 5;

console.log(let);

5

"use strict";

var let = 5;

console.log(let);

SyntaxError: let is a reserved identifier script.js:3:4

It's 2019 already and folks are moving to use the latest JavaScript features. One of them is the let keyword. let keyword is used to declare block-scoped variables in ES6 (ECMAScript® 2015). It would be unwise to use it as an identifier name. So strict mode has got your back.

• Strict mode makes the dreaded eval() safer

eval() is a global function in JavaScript that evaluates specified string as JavaScript code and executes it. The use of eval has been discouraged maninly for the reason that it may alter lexical scope at run time (If this looks gibberish just ignore for now 😄)

// Non-strict mode 

var b = 5;

eval("var b = 6");

console.log(b);

6

Notice that eval() went on to re-declare the variable in the scope it was present. Reckless use of eval() may result in scope pollution and in more complex scenarios lead to unexpected results and convoluted logic.

"use strict";

var b = 5;

eval("var b = 6");

console.log(b);

5

In the strict mode the variable declaration takes place in a separate eval() scope (in a crude explanation this scope spans the argument passed to eval()), thereby not polluting the current scope.

• Strict mode will not allow you to delete variables, function definitions and function arguments

"use strict";

var a = 10;
delete a;

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:4:7

"use strict";

function dontDelete() {
    // some stuff
}

delete dontDelete;

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:7:7

"use strict";

function dontDelete(arg) {
    delete arg;
    // some stuff
}

SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:4:11

These restrictions are mainly to ensure that we are not making it difficult for the JavaScript Engine to optimize our code and to make the semantics of a block of code easier to describe.

Wraping it up

The JavaScript's strict mode ensures that our code is cleaner and we avoid some very common syntax errors before the code is shipped to production. However the strict mode is not a silver bullet for all the problems, we still need to do good programming 😅