forEach문에 대해서 알아보자

배열 안의 데이터를 불러오는 방법입니다.

for문과 forEach문을 써서 점점 더 간략하게 쓰는 표현 방법들에 대해서 알아보려고 합니다.

1. for문

const num = [100, 200, 300, 400, 500];

document.write(num[0]);
document.write(num[1]);
document.write(num[2]);
document.write(num[3]);
document.write(num[4]);

// 100200300400500 이 나옵니다.

기본적인 배열에서 데이터를 불러오는 방법입니다.

반복적으로 불러와야 하기 때문에 번거롭습니다.

 

for문을 써서 좀 더 간략하게 써보겠습니다.

const num = [100, 200, 300, 400, 500];

for(let i = 0; i<num.length; i++){
    document.write(num[i]);
}
    // 100200300400500 이 나옵니다.

2. forEach

i의 초기값과 범위 그리고 증감식을 정해줌으로써 i는 0부터 마지막 값까지의 데이터를 불러오는 식입니다.

const num = [100,200, 300, 400,500];

um.forEach(function(el){
    document.write(el);
}); 
	//배열 안에 반복되는 데이터가 있을 때 쓴다.
    // 100200300400500 이 나옵니다.

el은 elment의 약자입니다.

이를 forEach문을 써서 보다 더 간결하게 쓸 수 있습니다.

 

forEach는 메소드로, 함수값을 말합니다. 

forEach라는 메소드 안에 함수가 들어간 콜백함수입니다.

forEach문으로는 출력을 하고 함수값을 생략해서 쓸 수가 있습니다.

3. forEach 화살표 함수

const num = [100, 200 ,300, 400, 500];

num.forEach((el) => {
    document.write(el);
}); 
	//배열 안에 반복되는 데이터가 있을 때 쓴다.
    // 100200300400500 이 나옵니다.

화살표 함수의 형태로 변환한 식입니다.

function을 생략하고 => 를 붙여 씀으로써 간결해졌습니다.

 

다음으로는, 괄호를 생략하는 방법을 알아보려고 합니다.

점점 더 생략해서 간략하게 쓰는 방법입니다.

4. forEach 화살표 함수 괄호 생략

const num = [100,200,300,400,500];

num.forEach(el => {
    document.write(el);
});
    // 100200300400500 이 나옵니다.

el를 감싸는 괄호가 생략되어서 식이 조금 덜 복잡해졌습니다.

5. forEach 화살표 함수 중괄호 생략

const num = [100,200,300,400,500];

num.forEach((el) => document.write(el));
    // 100200300400500 이 나옵니다.

중괄호를 생략해줌으로써 상당히 간결해진 것을 알 수 있습니다.

이런식으로 함수식은 간결하게 쓰는 것이 최신의 방식입니다.

그렇기 때문에 헷갈리지 않도록 잘 외워서 무엇을 생략하는 지를 잘 보면서 써야 합니다.

6. forEach (값, 인덱스, 배열)

const num = [100,200,300,400,500];

num.forEach(function(el,index,array){
	document.write(el,"<br>");
	document.write(index,"<br>");
	document.write(array,"<br>");
});
	//100
    //0
    //100200300400500
    //200
    //1
    //100200300400500
    //300
    //2
    //100200300400500
    //400
    //3
    //100200300400500
    //500
    //4
    //100200300400500 이 나온다.

차례대로, el은 값을, index는 자릿수를, array는 배열을 뜻합니다.

세 가지 모두 유용하게 쓸 수 있기 때문에 구하는 식을 알아두면 좋습니다.

 

순서 대로, 100의 값이 가장 먼저 나오고, 배열의 자릿수 값인 0이 출력되면서 배열의 값 모두가 출력된 겁니다.

배열[]은 0부터 시작한다는 사실만 기억한다면 어려울 것이 없습니다.