【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試してみる

【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試してみる

use strict(strictモード)は厳格にコードを記述しないとエラーとなるため正しくコードを記述する方は使った方が良いです。
strictモードを使わずに記述することは多々あるのですが、今回strict(厳格)モードと非strictモードで関数の実行結果を試してみます。

処理を実行させるクリックボタンのCSS記述

※ここは重要では無いので必要に応じて書き換えてください。

<style type="text/css">
body{
  font-family:Verdana,"Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W6",Osaka,"MS Pゴシック",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記述

※クリックボタンはonclickでfunc1()、func2()、func3()関数を実行します。

<h1>以下をクリックするとstrict(厳格)モードと非strictモードでエラーとなって関数の実行できない場合と、<br>エラーにならず関数の実行可能な場合を試せます。</h1>
<br>

<div class="clk" onclick="func1()"><span>ここをクリック</span><br>関数func1(strictモード:変数宣言無し)を実行=変数宣言無しのため実行されず、JavaScriptエラーになる</div>

<div class="clk" onclick="func2()"><span>ここをクリック</span><br>関数func2(非strictモード:変数宣言無し)を実行=変数宣言無しだが、非strictモードのため実行される</div>

<div class="clk" onclick="func3()"><span>ここをクリック</span><br>関数func3(strictモード:変数宣言有り)を実行=変数宣言有りなので、strictモードで実行される</div>

strict(厳格)モードと非strictモードを実行するJavaScript記述

  • 関数func1(strictモード:変数宣言無し)を実行=変数宣言無しのため実行されず、JavaScriptエラーになる
  • 関数func2(非strictモード:変数宣言無し)を実行=変数宣言無しだが、非strictモードのため実行される
  • 関数func3(strictモード:変数宣言有り)を実行=変数宣言有りなので、strictモードで実行される
  • 上記3パターンの関数を記述してます。

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

    デモページ

    【use strict】strict(厳格)モードと非strictモードで関数の実行結果を試すデモ

     

    ※他のjsプラグインを使う場合プラグインがstrictモードで記述されているとは限らず、その場合バッティングする可能性もあるのでstrictモードは全体に適用するのではなく、関数単位で適用した方が良いです。
    ※流用される場合は自己責任でお願いします。
     デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。