JavaScriptのインクリメント演算子は、for文のループでよく使用されますよね。
そのインクリメント演算子、「++」を変数の前に置くか変数の後に置くかで挙動が違ってきます。
今回は、インクリメント演算子を変数の前に置く「++i」と、変数の後に置く「i++」の違いと実際の使い方についてご説明します。
目次
インクリメント演算子とは？
数値を増やしたり減らしたりする演算には、「+」や「-」を使います。
例えば、
|
1 2 3 |
var num = 5; num = num + 1; num = num – 1; |
といった形で、変数に「+」もしくは「-」を使って増減させたい分の数値を再代入します。
上記のように、１だけ増やしたい場合や１だけ減らしたい場合は「インクリメント演算子」を使うことができます。
上記の処理にインクリメント演算子を使って書き換えると、
|
1 2 3 |
var num = 5; num++; num--; |
となります。
とてもシンプルに書くことができますね！
書き方はとても簡単で、変数の前もしくは後に「++」または「–」と書くだけです。
num++ または ++num （ numの値を１増やす）
num– または –num （ numの値を１減らす）
数値を1つだけ増加させる、または1つだけ減少させることができる処理をする、これがインクリメント演算子です。
インクリメントとデクリメント
先ほど、1つだけ増加させる、または1つだけ減少させることができる処理がインクリメント演算子だと言いましたが、++で増加される場合と-で減少させる場合では、その呼び方が異なります。
- ・「++」で増加させる場合 インクリメント
- ・「–」 で減少させる場合 デクリメント
といった具合に、呼び方が異なる点も覚えておきましょう。
for文のループ処理で頻出
インクリメントとデクリメントは、for文の繰り返し処理でよく使われます。
例えば、
|
1 2 3 |
for (var i = 0; i < 100; ++i){ //いろいろ処理 } |
という感じですね。
繰り返して、１ずつ足していくことができます。
前置と後置の２種類がある
インクリメント演算子には、前置と後置の２種類の書き方があります。
変数の前に置く「前置」 と、変数の後に置く「後置」があり、どちらも１増加または１減少するという処理は同じです。
前置の場合の処理結果
|
1 2 3 |
var num = 5; ++num; console.log(num); //6が表示される |
後置の場合の処理結果
|
1 2 3 |
var num = 5; num++; console.log(num); //6が表示される |
という事で、この書き方であれば前置でも後置でも結果は同じになります。
前置と後置で処理結果が異なる場合
後置の場合
では、このような使い方をしたらどうなるでしょうか。
|
1 2 3 4 |
var num１ = 5; var num２ = num１++; console.log(num１); //６が表示される console.log(num２); //５が表示される |
となります。
このように、後置でインクリメントを使った場合、num2 に先に num1 の値を代入してから、１増加させています。
なので、 num2 の値はインクリメントする前の num1 の値である「５」が代入されているんですね。
その後に num1 がインクリメントされ1増加しているので、num1 の値は「６」となります。
前置の場合
では、こうした場合はどうでしょう？
|
1 2 3 4 |
var num１ = 5; var num２ = ++num１; console.log(num１); //６が表示される console.log(num２); //６が表示される |
となります。
前置でインクリメントを使った場合、先に num1 を１増加させてから num2の値に代入しています。
なので、 まず num1 がインクリメントされ１増加しているのでnum1 の値は「６」となり、インクリメントした後の num1 の値が num2 に代入されるので、num2の値も「６」となります。
このように、インクリメント演算子を使う時に同時に変数に代入する場合は、前置と後置で挙動が違ってくるので注意が必要です。
実際の使い方
では実際にどのように使うのかを見ていきましょう。
1ずつ増やす場合
1ずつ増やす場合はこのように記述します。
|
1 2 3 |
for (var i = 0; i < 5; ++i){ console.log(i + “回目です”); } |
＜実行結果＞
0回目です
1回目です
2回目です
3回目です
4回目です
2ずつ増やしたい場合は？
では、増やす数を１ずつではなく２ずつ増やしたいという場合はどうすればいいでしょうか。
|
1 2 3 |
for (var i = 0; i < 10; i = i + 2){ console.log(i + “回目です”); } |
＜実行結果＞
0回目です
2回目です
4回目です
6回目です
8回目です
このようになります。
2ずつ増やす場合は、「++1」を 「++2」 とするのではなく、通常の書き方で i = i + 2としなければいけません。
i = i + 2 を、「もっと簡単に書きたい！」という場合は、
|
1 |
i += 2 |
とすれば、OKです。加算演算子の略式記法ですね。
もちろん、減少させる場合も同じように、
|
1 |
i = i - 2 |
もしくは
|
1 |
i -= 2 |
と記載することになります。
まとめ
以上、インクリメント演算子を変数の前に置く「++i」と、変数の後に置く「i++」の違いなどをご説明しました。
変数の前に置くか後に置くかで処理結果が異なるため、使用する際は注意が必要ですね。
インクリメント演算子を使う際、別の変数に代入する場合には、１増加させるタイミングが違うということを、是非覚えておいてくださいね。
