【JavaScript】配列と繰り返し(for文)

今日は配列と繰り返しで初心者がこのあたりからつまずきそう...
という部分を解説してみました！
最近Railsの投稿ばかりだったので、少し気分転換で！

配列とfor文

まずはこれを見てください。

script.js

const fruit = ["apple", "banana", "orange"];
for(let i = 0; i<3, i++){
    console.log(fruit[i]);
};

ぱっと見でどういう意味か分かるでしょうか。
これは配列とfor文を組み合わせたものです。
少し分解してみていきましょう。

const fruit = ["apple", "banana", "orange"];

まず左辺でconstを用いてfruitという定数の定義を行っています。
右辺では定数fruitの中身を配列の形で並べています。(左からインデックス番号は0,1,2)

for(let i = 0; i<3, i++){
    console.log(fruit[i]);
};

ここではfor文を用いて、for(変数の定義; 条件式; 変数の更新)
という順番で記述されています。
ここでいうと、変数iに0を代入、iが3より小さいとき、i+1(変数++で変数に+1するという意味です。条件がfalseとならない限り更新を繰り返します。)を実行するという意味になっています。
そしてconsole.log(fruit[i]);とすることで、fruitの中の配列のインデックス番号0~2までを出力します。
出力は

apple
banana
orange

となります。
iの部分は定義しなくてもconsole.log(fruit[0]);...と力技で出力することはできますが、
今回と違ってインデックス番号100まで出力したいときや、ただでさえ条件式が長いときは記述の重複している部分をなくすため、変数を定義して条件などを付ける方が可読性が増します。
値を順番に繰り出したいな～と思ったらfor文を是非思い出して使ってみてください！