개요

배열에 대한 복습과 배열을 꺼내는 방법.
for 문에서 배열의 반복 처리에 대해.

배열 정보

데이터가 차례로 나열된 하나의 데이터를 가리킵니다.
예를 들어, 다음과 같이 과일 데이터가 있다고 가정합니다.

index.js

 const fruits1 = "りんご";
 const fruits2 = "バナナ";
 const fruits3 = "ぶどう";
 const fruits4 = "なし";
 const fruits5 = "みかん";

데이터가 엄청나고 관리하기가 어렵습니다.
따라서 동일한 의미의 데이터로 관리합니다.
다음이됩니다.

index.js

const fruits = ["りんご","バナナ","ぶどう","なし"];

상수 과일에 사과 같은 요소가 배열로 저장됩니다.
콘솔에서 확인하면 다음과 같은 결과가 됩니다.



배열은 0번의 시작이 됩니다.
length는 요소의 수를 나타내는 속성입니다.

for 문을 사용하지 않는 경우

배열의 요소를 꺼낼 때는 다음과 같이 됩니다.

index.js

console.log(fruits[0]);
console.log(fruits[1]);
console.log(fruits[2]);
console.log(fruits[3]);
console.log(fruits[4]);

요소를 가져올 수 있었습니다.

그러나, 요소수가 늘어났을 때에 코드량이 방대해져 버립니다.
그래서 루프 처리를 사용해 갑니다.

for 문

index.js

    for (let i = 0;i <= fruits.length;i++) {
      console.log(fruits);
    }

index.js

    for (let i = 0;i <= fruits.length;i++) {
      console.log(`フルーツ${i}: ${fruits[i]}`);
    }

변수는 0부터 시작합니다. 위의 코드는 실제 6개 꺼내야 합니다.
undifeuned는 요소가 없다는 의미입니다.

따라서 코드를 다음과 같이 변경했습니다.

index.js

    for (let i = 0;i < fruits.length;i++) {
      console.log(`フルーツ${i}:${fruits[i]}`)
    }

i는 요소수 5 미만. 즉 0~4의 반복이 됩니다.
따라서 요소 수와 i의 변수가 일치한 것입니다.

forEach

forEach를 사용하면 코드를 더 쉽게 이해할 수 있습니다.

index.js

    fruits.forEach((fruit,index) => {
      console.log(`フルーツ${index}:${fruit}`)
    });

인수는 자유롭게 결정할 수 있습니다.
배열의 요소를 하나씩 받고, 요소수가 없어질 때까지 반복 처리를 실행해 줍니다.
이 forEach를 사용하면 배열 요소가 증가하더라도 forEach 내부를 수정하지 않고 사용할 수 있습니다!