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

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

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

※JavaScript処理を実行させるクリックボタン（.clk）のCSS記述です。ここは重要では無いので必要に応じて書き換えてください。

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

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

※クリックボタン（class=”clk”）は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記述

JavaScript処理実行前に”use strict”を宣言することでstrictモードで実行します。

• 関数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モードで関数の実行結果を試すデページ

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

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

strictモード use strict
ディスプレイ広告