Hey Alice what's the big deal about the JavaScript's strict mode ?
Tags: javascript, webdev
Published: 2019-05-28 03:50:55

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. :wink:)

####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.

``` js
// 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**

```js
"use strict";

myName = "Alice";
```
```
ReferenceError: assignment to undeclared variable myName script.js:3:1
```

This prevents polluting the global scope.
Look at this example,
```js
"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**
```js
// Non-strict mode
var let = 5;

console.log(let);
```
```
5
```
```js
"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)](https://www.ecma-international.org/ecma-262/6.0/). 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 :smile:)

``` js
// 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.

```js
"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**

```js
"use strict";

var a = 10;
delete a;
```
```
SyntaxError: applying the 'delete' operator to an unqualified name is deprecated script.js:4:7
```

```js
"use strict";

function dontDelete() {
    // some stuff
}

delete dontDelete;
```

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

```js
"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* :sweat_smile: