"use strict"; in javascript

Hey guys, so full disclosure; I have been working as a product engineer and I had the task to quickly prototype a feature and a long story short I basically asked a few of the other members for help since I couldn't get a certain POST request to work right, and after a few hours in and since all of them said the way the POST request was being made is pretty much right, I decided to debug the application and by this moment the application was extremely complex and branched.
So just when I was about to begin, one of my coworkers asked if he could checkout the code and as i scrolled to the POST request i realized I had misspelled a variable and my coworker saw that and that's when he told me about "use strict" so that's pretty much when I took a moment to read up about it and thought it's something that everyone starting JavaScript should definitely know.

The "use strict" directive was new in ECMAScript version 5 (around since 2011) and forces a program (or function) to work under a “strict” operating context. It is not a statement, but a literal expression, ignored by earlier versions of JavaScript. With strict mode on it is easier to detect JavaScript silent errors as they would throw an error now. This makes debugging much easier and the chances of developers making mistakes is reduced. Most modern browsers support strict mode except Internet Explorer 9.

so why exactly is "use strict" a string ?

If an older browser saw the "use strict" string it would consider it as a string and simply ignore it executing without enabling the strict mode as it is just a string Internet Explorer 9 will not throw an error even if it does not understand it, in a new browser when it sees the keyword used strict it then knows to turn itself into strict mode operating.

enabling strict mode !

Strict mode can be used in two ways

• used in global scope
  

  // Whole-script strict mode syntax
  'use strict';
  var v = "Hi! I'm a strict mode script!";
  

• used in functions
  

  // not strict
  function strict() {
      // Function-level strict mode syntax
      'use strict';
      return "Hi!  I'm a strict mode function!  ";
  }
  // not strict
  

"strict mode"; reports errors on the following:

• Using a variable, without declaring it.
• Using an object, without declaring it.
• Using reserved keywords as variable names.
• Deleting a variable (or object) is not allowed.
• Deleting a function is not allowed.
• Duplicating a parameter name is not allowed.
• The word eval cannot be used as a variable.
• For security reasons, eval() is not allowed to create variables in the scope from which it was called.

Examples

1. Using variable / object without declaring it. ( helps is you misspelled a variable )

'use strict';
var uniqueValue = 23;
uniquValue = 17;         // this line throws a ReferenceError due to the 
                                    // misspelling the variable

unknownValue = 25;      // this line also throws a ReferenceError as variable is not declared

Would result in a new global variable (as in unknownValue and uniquValue) created, and uniqueValue would remain untouched. Under strict mode, assigning a value to an undefined variable will throw a ReferenceError.

1. Using reserved words to declare variables. ( future proof your code )

var let = 24;
console.log(let) // will output 24

"use strict";
var let = 24;
console.log(let) // will raise an error

Keywords reserved for future JavaScript versions can NOT be used as variable names in strict mode.
These are: implements,interface,let,package,private,protected,public,static,yield.

1. Deleting variables, object, functions in strict mode raises error.

"use strict";
var variable = 23;
var obj = { 'name':'mxiv' };
function func(p1, p2 ) {
    console.log("Hello");
}
delete variable; // will raise error
delete obj; // will raise error
delete func; // will raise error

1. Function arguments cannot be deleted and have same name.

"use strict";
function func(p1, p2 ) {
    console.log("Hello");
    delete(p1); // raises error
}

function func2(p1,p1) { // raises error
    console.log("hey");
}

1. Eval restrictions.

eval('var variable = 2;');
console.log(variable); // displays 2 as the variable is leaked out of the eval function.

when strict mode is used eval does not leak variables declared in the expression passed to it.
hence for security reasons in strict mode eval is not allowed to create variables in the scope from which it was called this brings us to the end of this article.

Comments

[Mary]

Hey! I also wrote a little note about use strict and what problems it solves, so check this out in my blog because there's a lot of code I can't copy here

[Bassem]

Great! I have been seeing "use strict" a lot. Never did I ask about it though. Thanks, Midas.

[Willem Odendaal]

Useful summary, thank you! Do you know if it's necessary to add "use strict" if you're using Babel+Webpack?

[Midas/XIV]

I don't have enough experience with webpack. But a quick Google search indicated that it adds strict mode automatically, that too in global scope.

[Bassem]

Yeah! I am also wondering if "use strict" is still helpfull with IDE's autocomplete and Linting packages like ESLint.

[Midas/XIV]

Does Eslint help with eval variable leakage? 🤔.
Apart from that I don't think strict mode would be helpful.
I think in general it's a great interview question to just see if the candidate is curious or not.

[Bassem]

Yeah! Good to know in all cases