JavaScript

JavaScript strict (strict) mode and non-strict mode: Testing function execution results 【use strict】

 

JavaScript’s use strict (strict mode) is an option used to improve code quality and prevent errors. By using this mode, improper code descriptions are not allowed, and strict checks are performed. For example, using a variable without declaring it will result in an error and prevent JavaScript execution. This time, we will explain the differences between “strict mode” and “non-strict mode” through several specific examples.

Contents
  1. What is use strict?
  2. Button styles and HTML description for executing JavaScript
  3. Execution and error handling of JavaScript functions
  4. 【use strict】Testing function execution results in strict (strict) mode and non-strict mode
  5. Summary

What is use strict?

use strict is an option introduced in ECMAScript 5 to avoid bugs caused by the flexibility of JavaScript. By using this mode, the following issues can be prevented:

  1. Forcing variable declarations: Using variables without declaring them with var or let will result in an error.
  2. Prohibition of duplicate properties: Objects with duplicate property names will cause errors.
  3. Restrictions on reserved words: Words that may become reserved in future versions (such as class or enum) cannot be used as variable names.

This makes the code more predictable and errors easier to discover.

Button styles and HTML description for executing JavaScript

CSS Description

First, let’s look at the CSS style of the click button. When clicked, this button executes a function in either strict mode or non-strict mode in JavaScript.

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"ＭＳ Ｐゴシック",Arial,sans-serif;
  padding: 0;
  margin: 0;
  overflow-x: hidden;
  line-height: 1.8em;
  text-align: center;
}
h1{
  font-size:26px;
  text-align:center;
  font-weight:normal;
  padding:10px 0 20px 0;
  line-height: 1.4em;
}
.clk{
  width: 500px;
  margin: 0 auto 20px auto;
  background-color: #cccccc;
  font-weight: bold;
  text-align: center;
  line-height: 1.7em;
  cursor: pointer;
  font-size:14px;
  padding:8px;
}
.clk span{
  font-size: 20px;
  font-weight: bold;
}
</style>

HTML Description

Below is the HTML code for the buttons. Each button executes a different function when clicked. Click buttons (class=”clk”) execute the functions func1(), func2(), and func3() via onclick.

<h1>Click the following to test strict (strict) mode and non-strict mode to see if the function cannot be executed due to an error or if the function can be executed without an error.</h1>
<br>

<div class="clk" onclick="func1()"><span>Click Here</span><br>Execute function func1 (strict mode: no variable declaration) = Cannot be executed due to no variable declaration, resulting in a JavaScript error</div>

<div class="clk" onclick="func2()"><span>Click Here</span><br>Execute function func2 (non-strict mode: no variable declaration) = Executed despite no variable declaration because it is non-strict mode</div>

<div class="clk" onclick="func3()"><span>Click Here</span><br>Execute function func3 (strict mode: variable declaration) = Executed because the variable is declared in strict mode</div>

Execution and error handling of JavaScript functions

Function definition and execution

Next, check the behavior of each function when strict mode is applied or not.

<script type="text/javascript">
function func1(){
"use strict";
  x1 = 5;
  y1 = 7
  alert(x1 + y1);
}

function func2(){
  x2 = 5;
  y2 = 7;
  alert(x2 + y2);
}

function func3(){
"use strict";
  var x3 = 5;
  var y3 = 7
  alert(x3 + y3);
}
</script>
  • func1(): This function is in strict mode. An error occurs because x1 is used without variable declaration.
  • func2(): This function is executed in non-strict mode, so it works even without variable declarations, displaying the result correctly.
  • func3(): This function is executed in strict mode, but since the variables are properly declared, it operates without errors.

These are the three patterns of functions described above.

【use strict】Testing function execution results in strict (strict) mode and non-strict mode

In the demo page below, you can test how functions behave in strict and non-strict modes. Be cautious when using plugins, as strict mode may affect their behavior. It is recommended to apply the mode at the function level rather than globally.

【use strict】Demo of Testing Function Execution Results in Strict and Non-Strict Modes

Summary

JavaScript’s use strict mode is very effective for improving code quality and preventing unintended bugs. Its benefits include:

  • Improved predictability of code
  • Prevention of bugs
  • Ensuring consistency in large-scale projects

However, it is important not to apply it unconditionally to all code but to use it appropriately, considering compatibility with plugins and external scripts.

By understanding the differences between strict and non-strict modes, you can reduce troubles when writing JavaScript code and enable more efficient development.

　
※ Use this information at your own responsibility. Do not use the Google Analytics tag in the demo page’s head tag.

use strict
RELATED POST