関数の変数

関数の変数を関数外から使う
プログラムを追跡する
ローカル変数

関数の変数を関数外から使う

次のプログラムでどのような表示になるでしょうか？

<meta charset="UTF-8">
<script type="text/javascript">

var hensu1 = "A";


function test(){
    var hensu2 = "B";

    document.write("test()----------------<BR>");
    document.write("hensu1="+hensu1+"<BR>");
    document.write("hensu2="+hensu2+"<BR>");

}

test();
document.write("----------------------<BR>");
document.write("hensu1="+hensu1);
document.write("hensu2="+hensu2);


</script>

var hensu1 = "A";

function test(){

var hensu2 = "B";

document.write("test()----------------<BR>");

document.write("hensu1="+hensu1+"<BR>");

document.write("hensu2="+hensu2+"<BR>");

}

test();

document.write("----------------------<BR>");

document.write("hensu1="+hensu1);

document.write("hensu2="+hensu2);

</script>

実行すると次の結果になります。

※ブラウザでF12キーを押下するとエラー画面が表示されます。(Macを利用している場合は、ここを参考にしてください)

プログラムが途中でエラーになっています。プログラムの動作を確認しながら原因を探ってみましょう。

プログラムを追跡する

プログラムの4行目~14行目で変数定義、関数定義が行われ、次に16行目の関数testの呼び出しが実行されます。

test();

test();

関数testが実行されると変数hensu2が定義され、変数hensu1、hensu2を表示しています。実行結果を見ると正常に動作しているようです

function test(){
    var hensu2 = "B";
 
    document.write("test()----------------<BR>");
    document.write("hensu1="+hensu1+"<BR>");
    document.write("hensu2="+hensu2+"<BR>");
 
}

function test(){

var hensu2 = "B";

document.write("test()----------------<BR>");

document.write("hensu1="+hensu1+"<BR>");

document.write("hensu2="+hensu2+"<BR>");

}

関数の呼び出しが完了すると17行目からの表示命令が実行されるはずです。

document.write("----------------------<BR>");
document.write("hensu1="+hensu1);
document.write("hensu2="+hensu2);

document.write("----------------------<BR>");

document.write("hensu1="+hensu1);

document.write("hensu2="+hensu2);

実行結果から18行目の変数hensu1の表示まではされています。従ってエラーは19行目で発生しているようです。実行結果のエラー画面にも「function.html:19」と表示されていることから19行目で発生しているのは間違いないようです。

ローカル変数

19行目でエラーが発生する原因は、表示する変数hensu2にあります。変数hensu2は関数testの中で定義されています。この関数内で定義した変数を「ローカル変数」と言います。

function test(){
    var hensu2 = "B";

7 8	function test(){ var hensu2 = "B";

関数内で定義したローカル変数は、その関数内のみ有効なのです。19行目は関数test内ではありません。従って、このようにエラーになってしまいます。逆に関数外で定義された変数(hensu1)は、関数内でも利用できます。