DEV Community

Cover image for "use strict"; in javascript
Midas/XIV
Midas/XIV

Posted on • Edited on

"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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
"use strict";
var let = 24;
console.log(let) // will raise an error
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  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");
}
Enter fullscreen mode Exit fullscreen mode
  1. Eval restrictions.
eval('var variable = 2;');
console.log(variable); // displays 2 as the variable is leaked out of the eval function.
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (6)

Collapse
 
willemodendaal profile image
Willem Odendaal

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

Collapse
 
bassemibrahim profile image
Bassem

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

Collapse
 
midasxiv profile image
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.

Thread Thread
 
bassemibrahim profile image
Bassem

Yeah! Good to know in all cases

Collapse
 
midasxiv profile image
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.

Collapse
 
bassemibrahim profile image
Bassem

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

Some comments may only be visible to logged-in visitors. Sign in to view all comments.