javascript

javascript:for文内で変数を更新したいとき

for文内で変数を更新したい。

ダメな例(for文内で変数の定義と更新を行っている)

for(var i = 0; i < users.length; i++) {
  var user = users[i];
  var number = 0; number += 1; //number = number + 1のこと     
    console.log(`${number}人目`);
    console.log(`名前:${user.name}`);
    console.log(`年齢:${user.age}`);
    console.log(`国籍:${user.nationality}`);
 }

for文内で変数の定義を行ってしまうと、繰り返し処理が行われるとき、
また、定義から行われてしまう。

今回の場合、「numberが0と定義され、それに1を足した数「1」が次のnumberとなる」
次の処理でも、「numberが0と定義され、それに1を足した数「1」が次のnumberとなる」というのが繰り返され、numberが1のままで、本来行いたい2、3…と増えるかたちにならない。

せっかく変数を更新しても、繰り返し処理の中で、もとの定義に戻ってしまう、
リセットされたような感じになる。

これを2、3…と増えるようにするには、for文外で、変数の定義をし、
for文内では、変数の更新のみを行うようにする。

良い例(for文外で変数の定義、for文内で変数の更新を行っている)

var number = 0;
for(var i = 0; i < users.length; i++) {
  var user = users[i]; number += 1; //number = number + 1のこと
  console.log(`${number}人目`);
   console.log(`名前:${user.name}`);
   console.log(`年齢:${user.age}`);
   console.log(`国籍:${user.nationality}`);
 }

for文内では変数の更新のみを行うようにすることで、
「number「0」(for文外で定義した数)に1を足した数「1」が次のnumberとなる」
「更新されたnumberの数「1」に1を足した数「2」が次のnumberとなる」
というように、変数が更新されていき、2、3…と増えていくようになる。

ちなみにfor文内で、for文を使って変数を更新しようとすると、
for文内のfor文の処理が全部行われないと大枠のfor文に戻ってこないので上手くいかない。

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

例えば上記のように記述した場合、
number1が出力されたあとuserの繰り返し処理が全部行われたあと
number2が出力されuserの繰り返し処理が全部行われるというかたちになる。

1人目

名前 太郎
年齢
国籍

名前 リリー
年齢
国籍

2人目

名前 太郎
年齢 
国籍

名前 リリー
年齢
国籍

つづくという感じになる。

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

userとnumberのfor文を逆にして、userのfor文内にnumberのfor文を入れても
同じパターンで処理が行われる。
表記が変わるだけでやっていることは同じ。

名前 太郎
年齢
国籍

1人目
2人目
3人目

名前 リリー
年齢
国籍

1人目
2人目
3人目

名前 ジョン
年齢
国籍

つづくという感じで、最初のuserが出力されたあと
numberの繰り返し処理が全部行われ、
そのあと次のuserを出力、numberの繰り返し処理が全部行われるようになる。

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

さらに、こんな感じでまとめて書いてみても
for文内にあるfor文、この場合はnumberの処理が全部終わらないと、
次のuserの処理が行われないので、

1人目
名前 太郎
年齢
国籍

2人目
名前 太郎
年齢
国籍

1人目
名前 リリー
年齢 
国籍

2人目
名前 リリー
年齢
国籍

つづくという風にしかならない。

コメントを残す

メールアドレスが公開されることはありません。