条件式の変数を利用

広告

for文は決められた回数だけ繰り返し処理を行うのによく使用される文です。その為、繰り返しを継続するかどうかは回数をカウントするための変数を使って行うことが多くなります。ここではこの変数を値を利用する方法を確認します。

例として11から15までの数値を画面に表示するプログラムを考えてみます。 

var num = 11;

for (var i = 0; i < 5; i++){
  alert(num);
  num++;
}

繰り返し処理の中で変数「num」の値を1ずつ増加させ11から15まで変化させています。

繰り返し処理は5回行うことになり変数「i」を使ってカウントを行っていますが、条件式で使用している変数は条件式の時だけではなく繰り返し処理で実行される文での参照したりすることができます。では先ほどのサンプルを次のように書き換えてみます。 

for (var num = 11; num <= 15; num++){
  alert(num);
}

今回のサンプルでは変数「num」が11から15まで1ずつ増加しながらブロック内の処理を実行しています。ブロック内では変数「num」の値を取得して画面に出力しています。

このようにfor文の条件式で使用する変数は繰り返し処理の中で実行される文でも利用できますので、初期値と条件式をうまく設定することでよりプログラムを簡潔に記述することができます。

JavaScriptにおけるブロック内でのスコープ

他の多くのプログラミング言語と違いJavaScriptにおいてはブロックにおける変数のスコープはありません。スコープとは有効範囲のことで簡単に言うとブロック内で宣言された変数をブロックの外でも利用することができます。

簡単な例で見てみます。 

for (var i = 0; i < 5; i++){
  /* ... */
}

alert(i);

JavaScriptでは変数「i」はfor文の中で宣言された変数ですがfor文が終了した後でも利用できます。変数「i」はfor文の中で「5」になった時に条件式がfalseとなりfor文を終了します。その為、for文の次に記載された「alert(i);」によって「5」が表示されることになります。

このような使い方は他の多くのプログラミング言語ではエラーとなります。変数とスコープの関係については改めてまとめて解説を行いますが、JavaScriptではこういった使い方もエラーとならないことを覚えておいて下さい。

サンプルコード

では簡単なサンプルで試してみます。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>JavaScript テスト</title>
</head>
<body>

<script type="text/javascript" src="./js/script3_1.js">
</script>

</body>
</html>

for (var num = 5; num <= 8; num++){
  document.write("<p>num = " + num + "</p>");
}

document.write("<p>最終的なnumの値 = " + num + "</p>");

上記を実際にブラウザ見てみると次のように表示されます。

p3-1

( Written by Tatsuo Ikura )