本記事では、JavaScriptのインクリメント演算子について解説しています。
JavaScriptのインクリメント演算子である「++」は頻繁にプログラムで使用されます。このインクリメント演算子ですが、正しく理解せずに使用すると処理が1回多く実行される、または実行される処理が1回少ないなどのエラーを招いてしまう原因にもなります。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
インクリメント演算子とは
みなさん、ある変数に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); // -> 1i++を使ったコードでは、変数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を先に加算しても後に加算しても対象の変数は変わらないので結果は同じになります。
