forEach() 사용하기

 안녕하세요. 알렉스 입니다. 이번에는 forEach()함수에 대해서 사용할려고 합니다. 

forEach()함수를 보면 제가 예전에 작성한 '.map/.filter/.reducer 순서도(JavaScript)'와 비슷하다는 것을 알수있습니다. 정확히 말하자면 '.map'함수와 상당히 유사합니다.

위 그림에 나온 코드를 콘솔창에서 작동 시키면 'arr' 각 원소에 2를 더한 값을 'log'로 보여준다는 것을 알수 있습니다. 하지만 더 자세하게 설명 드리기 위해 다음 그림으로 넘어가도록 하겠습니다.

 이전 사진과 동일한 'forEach'이지만 함수안에 3개의 전달인자(ele, idx, arrAll)가 있습니다. 

ele : 배열의 원소

idx : ele 배열의 인덱스

arrAll : arr의 배열(전체)

위와 같이 3개의 전달인자가 무엇인지 확인하기 위해서 콘솔창으로 출력해 보았습니다. 하지만 Return값이 없다는 것을 알수 있습니다.

 '.map'과 '.forEach'의 결정적인 차이점은 Return값의 유무입니다. '.forEach'값은 해당 배열에 변화를 가하지 않습니다. 물론 프로그래머가 변화를 가할수가 있습니다.

위 사진에서 'arr[idx] = ele +2;'를 추가하였습니다. 'console.log'에 출력되는 값들이 루프가 진행될수록 바뀌는 것을 알수 있습니다. 마지막에 Return값은 없지만 'arr'를 출력하면 모든 원소가 +2씩 된것을 알수 있습니다.

이는 '.forEach'문에서 직접 'arr'의 원소에 수정을 가했기 때문입니다. 

'.forEach'와 비슷한 '.map'과 비교하고 싶다면 해당 링크를 확인해 주시기 바랍니다.