前置と後置

広告

インクリメント演算子とデクリメント演算子にはそれぞれ前置と後置の二種類が用意されています。

インクリメント演算子の前置きと後置きは次のようになります。 

前置:  ++変数
後置:  変数++

デクリメント演算子の前置きと後置きは次のようになります。 

前置:  --変数
後置:  変数--

前置であっても後置であってもインクリメント演算子は対象の変数の値を1だけ増加させ、デクリメント演算子の場合は対象の変数の値を1だけ減少させることに違いはありません。次の例を見て下さい。 

var num = 7;

num++;
alert(num);    /* 8を表示 */

++num;
alert(num);    /* 9を表示 */

前置であっても後置であってもこのような使い方の場合には同じ結果となります。

前置と後置で結果が異なる場合

では前置と後置で結果が異なる場合について確認します。次の例を見て下さい。 

var num1 = 7, num2;

num2 = num1++;

alert(num1);    /* 8を表示 */
alert(num2);    /* 7を表示 */

後置のインクリメント演算子を使っています。これは次のように記述したのと同じ動作をします。 

var num1 = 7, num2;

num2 = num1;
num1 = num1 + 1;

alert(num1);    /* 8を表示 */
alert(num2);    /* 7を表示 */

後置のインクリメント演算子の場合、まずインクリメント演算子が書かれていないかのように文が実行されます。今回の場合であれば変数「num2」に変数「num1」を代入していますので数値の7が変数「num2」に代入されます。それから変数「num1」の値を1だけ増加させます。

では次の例を見て下さい。 

var num1 = 7, num2;

num2 = ++num1;

alert(num1);    /* 8を表示 */
alert(num2);    /* 8を表示 */

前置のインクリメント演算子を使っています。これは次のように記述したのと同じ動作をします。 

var num1 = 7, num2;

num1 = num1 + 1;
num2 = num1;

alert(num1);    /* 8を表示 */
alert(num2);    /* 8を表示 */

前置のインクリメント演算子の場合、まず対象の変数を1だけ増加させます。よって変数「num1」の値が8となります。それからインクリメント演算子を除いた文の実行をします。今回の場合であれば変数「num2」に変数「num1」を代入していますので数値の8が変数「num2」に代入されます。

このように前置きと後置きでは動作が異なる場合がありますのでインクリメント演算子やデクリメント演算子を使用する場合は注意して下さい。

サンプルコード

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

<!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/script7_1.js">
</script>

</body>
</html>

var num1 = 7, num2;

num2 = num1++;

document.write("<p>[後置] num1 = " + num1 + ", num2 = " + num2 + "</p>");

num1 = 7, num2;

num2 = ++num1;

document.write("<p>[前置] num1 = " + num1 + ", num2 = " + num2 + "</p>");

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

p7-1

( Written by Tatsuo Ikura )