What is JavaScript Strict Mode? Strict mode is a way to make JavaScript errors more obvious. It can make the code more optimized for performance and prevent some security vulnerabilities. You can get away with a lot in JavaScript. The language is very forgiving, and many errors or things that could lead to errors are ignored. This can make it an easy language to learn because you're is not bombarded with syntax errors. But it can cause problems further down the line. Strict Mode is a way to make JavaScript throw errors when it sees these mistakes, which makes it easier to debug code and write better code in the first place. Invoking strict mode To invoke strict mode, use the syntax or "use strict"; 'use strict'; Strict mode can apply to a whole script or individual functions. For scripts, write at the top of the script. For functions, you would put at the top of the function body. "use strict" "use strict" function example() {
    "use strict"
    return "this is an example function"
} Modules and Functions in JavaScript are automatically in strict mode. How it works converting mistakes into errors Regular or "sloppy mode" JavaScript will allow a number of mistakes to pass by without causing any error messages. As mentioned earlier, this can make debugging difficult if your code stops working as you intend it. One of the things strict mode stops you from doing is assigning a variable without using the or keywords. In regular JavaScript, this would create a variable in the global scope and would continue to work. However, it's not the behavior we want. It creates the risk that you could misspell a variable and accidentally create a new variable. const let var let number = 10;

      //misspelled variable will create new global variable
      // where the desired behavior is to update number variable
      numbr = 20

      console.log(number) //10 "use strict"

      let number = 10;
      numbr = 20 // throws error

      console.log(number) //only error output shown Another mistake that won't show up in regular JavaScript is assigning a value to a non-writeable variable. An example of a non-writeable variable is . A mistake like will only throw an error in strict mode. Another example of this would be . NaN NaN = 10; undefined = "string" Strict mode Will also prevent you from setting properties on primitive values. A primitive value is data that is not an object and has no methods. There are 7 primitive data types: string number bigint boolean undefined symbol null Setting a property on a primitive would look like "use strict"
      true.string = "hi" // typeError
      "string".update = 10 // typeError Some other mistakes that strict mode will turn into errors: Trying to delete an undeletable property Having the same names in a parameter eg function myFunc(a, a, b) {...} Prefixing numbers with a 0. Find out why . here Optimizing variable use in JavaScript Strict mode prevents certain actions which can lead to the code being less optimized. The JavaScript compiler is often able to say in which location each variable is stored. The variable name is mapped to its definition. This creates more optimized code. However, there are properties in JavaScript that make this impossible. Strict mode prevents these. with Strict mode prevents the use of the property. makes the properties of an object available as local variables in the statement. with with const myObject = { 
        title: "don't make me think", 
        author: "Steve Krug" 
      };

      with (myObject) {
        console.log (`this book was written by ${author}`) 
        // This book was written by Steve Krug

      } Using is because any variable inside the block might relate to a property of the object a variable in the surrounding scope. Because this can only be evaluated at runtime, it prevents the code from being optimized. For this reason, using in strict mode will throw an error. with not recommended or with eval Like , makes optimizing javascript code difficult. is a function that takes a string and evaluates it as JavaScript code. with eval eval cont x = 5
eval("x + 5") // 10 The problem with eval (apart from its ) is that it can introduce a variable into the surrounding scope. This means that code inside the function can change or override variables outside the function. And because JavaScript cannot check this until runtime, it can cause inefficiency. security vulnerability eval In strict mode, any variables created in only exist within that function. eval eval("x = 5")
    console.log(x) // 5 "use strict"
    eval("x = 5")
    console.log(x) // ReferenceError Simplifying and eval arguments In JavaScript and behave in ways that you might not expect. says of the two: eval arguments Mozilla Strict mode makes and less bizarrely magical. Both involve a considerable amount of magical behavior in normal code: to add or remove bindings and to change binding values, and by its indexed properties aliasing named arguments. arguments eval eval arguments By using strict mode, and are treated more like normal keywords eval arguments Making JavaScript more secure JavaScript can be manipulated in the browser so that a person's private information can be accessed. JavaScript can prevent this from happening by partially transforming the JavaScript before it is run. However, if the code is not written well, this can take a lot of resources at runtime. Strict mode forces you to write JavaScript that will be more secure. Without strict mode, it could be possible to access the global object from a function. This can then be used to manipulate JavaScript in ways that present a security risk. This has to do with the value that is passed to the function. Because strict mode prevents from being forced into an object, and if unspecified it will be , malicious actors will not be able to access the or object. Read more about . this this undefined global window this here Another security vulnerability in functions that strict mode sets out to fix is in JavaScript extensions. Using the extension when a function is being called, will reveal the function that called it, and shows its arguments. This can allow access to potentially unsecured arguments through "secure" functions. If anyone tries to access or in strict mode code the result will be a . .caller .arguments .caller .arguments TypeError New Keywords In strict mode, there are some extra reserved keywords. These are words that are likely to be used in future versions of JavaScript. Their inclusion acts to ease the transition into newer versions of JavaScript. Some of these are: implements interface package private protected public static yield For extra information on strict mode and more technical explanation on what it does, you can see the . Mozilla documentation

Mozilla

Is a Web Development Bootcamp Worth it in 2022?

Portfolio

Hire Me

Nominated for 2022 - HackerNoon Contributor of the Year - Css

Nominated for 2022 - HackerNoon Contributor of the Year - Firebase

Too Long; Didn't Read

Make resilience your competitive advantage

JavaScript Strict Mode vs. Bad Programming Practices

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Everything I Learnt From Landing My First Paid Client

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Everything I Learnt From Landing My First Paid Client

The Noonification: Reduce Javascript: Master the Basics (1/11/2023)

The Noonification: Satoshi Might Be a Bitcoin ETF Skeptic (1/13/2024)

The Noonification: Small Puddle of Freedom (11/25/2022)

The Noonification: How to Use AI for Your B2B Marketing (11/11/2022)

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps