JavaScript 変数に1を足すという処理の省略化について(i = i +1 → i+=1 → i++)

前提・実現したいこと

JavaScript １を足すという処理の省略化について
変数に１を足す、または１を引くときだけ 1++ や i-- という様に省略した書き方ができると認識しております。

発生している問題・エラーメッセージ

下記コードの様に全てのユーザー情報を表示してみましょう。
というコードの中の

該当のソースコード

var users = [
  {
    name: '太郎',
    age: 21,
    nationality: '日本',
  },
  {
    name: 'リリー',
    age: 37,
    nationality: 'イギリス',
  },
  {
    name: 'ジョン',
    age: 16,
    nationality: 'アメリカ',
  },
];

for (var i = 0 ; i < users.length ; i++){
  var number = i+1 ;
  console.log(number + "人目");
  
  console.log("名前：" + users[i].name);
  console.log("年齢："  + users[i].age);
  console.log("国籍：" + users[i].nationality);
}

######var number = i+1 ;　という箇所について
var number = i+1 ;　は、変数「number」に変数「i」に１を足した物を代入する。という意味だと思うのですが、
ここを var number = i++ ; とするとループがうまくいきません。

var number = i+1 ;　という箇所を var number = i++ ; と省略形で書くと下記内容で出力されてしまいます。

0人目
名前：リリー
年齢：37
国籍：イギリス
2人目

#####var number = i+1 ;　という箇所はどうして var number = i++ ; と書き換えることができないのでしょうか?

JavaScript (ES5)

hentaiman

2020/07/27 23:28

それはconsole.logで内容を確認した上でなお納得いかないから出た質問ですか？それとも未確認ですか？

Fukusuke0604

2020/07/28 05:43

console.log を行い　その結果が 0人目名前：リリー年齢：37 国籍：イギリス 2人目ということで、 var number = i +1 と var number = i++ の違いが理解できていませんでしが、解決いたしました。ご協力ありがとうございました。

行動規範の内容に同意します

回答5件

ベストアンサー

すこし切り分けて考えましょう
i + 1
という式はiに1を足した値を返します。が、iの値は書き換えていません。
「i + 1」という処理にiの値を書き換える機能は無いわけです
一方
i = i + 1
と書くと、iに1足した値をiに入れ直しているのでiの値が変わりますね
同様に
number = i + 1
と書くと、numberに「iに1足した値」を入れています。
しかし上記の通り「i + 1」の部分にiを変更する機能はないのでiの値は据え置きです

次に
i += 1
i++
という書き方について
これは「i = i + 1」を書き換えたものなのでiの値を変えてしまいます。
つまり
number = i++
ではこの処理でiの値が1増えてしまうことになります。

投稿2020/07/28 00:31

q_sane_q

総合スコア610

q_sane_q

2020/07/28 00:41

ひとつ追記 number = i++ で一回目が0になるのは、i++だとnumberにiを代入した後でiに1加算されるためです number = ++i だとiが1加算が先でそのあとnumberにiを代入する挙動になります

Fukusuke0604

2020/07/28 05:16

ご丁寧にありがとうございました。今回のケース var number = 1 +1 というのはi++ ( i = i +1) というという意味ではない。という説明で理解できました。そのあとに、ではなぜ自分が間違えていたコードで最初に 0人と表示されるのかについても追記の説明で理解することができました。質問して本当に良かったです。どうもありがとうございました。

行動規範の内容に同意します