JavaScript

【JavaScript】インクリメント演算子「i++」と「++i」の違い

本記事では、JavaScriptのインクリメント演算子について解説しています。

JavaScriptのインクリメント演算子である「++」は頻繁にプログラムで使用されます。このインクリメント演算子ですが、正しく理解せずに使用すると処理が1回多く実行される、または実行される処理が1回少ないなどのエラーを招いてしまう原因にもなります。

JavaScriptの学習におすすめ参考書
改訂新版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで

参考書が苦手な人はUdemyの動画がおすすめ
ガチで学びたい人のためのWEB開発徹底実践(フロントエンド編)

動画情報
作成者CodeMafia
学習時間19.5時間
受講者数28,547人
レビュー (5,025件)
動画の詳細はこちら

インクリメント演算子とは

みなさん、ある変数に1ずつ値を増やした時どのように記述しますか?

let val = 0;
val = val + 1;
console.log(val); // -> 1

このコードは間違いでありませんが、「val + 1」をインクリメント演算子を使って省略して書くことができます。

var val = 0;
val++; // -> 1ずつ増やす
++val; // -> 1ずつ増やす

このように値を1ずつ増やしたい時に「変数名++」または「++変数名」のインクリメント演算子を使うとコードが短くなります。

「i++」と「++i」の違い

ここで本題の「i++」と「++i」の違いについて見ていきましょう。

インクリメント演算子には++を変数の前に付ける方法と変数の後に付ける方法の2種類あります。2つの違いについてそれぞれ確認していきましょう。

別の変数を使う場合

別の変数を使う場合に生じる2つのインクリメント演算子の違いについて確認してきましょう。

/* i++を使ったコード */
var i = 0;
var a = i++;
console.log(i); // -> 1
console.log(a); // -> 0

/* ++iを使ったコード */
var i = 0;
var a = ++i;
console.log(i); // -> 1
console.log(a); // -> 1

i++を使ったコードでは、変数aの値がiの初期値と同じ0になっています。これはi++が変数aに代入した後にインクリメントされているためです。

逆の++iを使ったコードでは、インクリメントされた値が代入されています。これは++iが変数aに代入する前にインクリメントされているためです。

同じ変数を使う場合

同じ変数を使う場合に生じる2つのインクリメント演算子の違いについて確認してきましょう。

/* i++を使ったコード */
var i = 0;
i++;
console.log(i); // -> 1

/* ++iを使ったコード */
var i = 0;
++i;
console.log(i); // -> 1

先ほど紹介した別の変数を使う場合の結果と異なり、両方とも値が同じなので違いはないです。その理由は、1を先に加算しても後に加算しても対象の変数は変わらないので結果は同じになります。

ブログランキング・にほんブログ村へ PVアクセスランキング にほんブログ村