내일배움캠프 18일차 : forEach 정리

강의를 통해 들은바에 따르면 forEach는 배열을 순회하는 함수라고 배웠다. 원리는 간단하다. 그런데 실제로 코드를 만들어가는 과정에서 forEach를 사용할 일이 많았으며, 생각보다 단순하게는 이해가 되지 않는 부분이 많아 오늘은' forEach 타파하기' 주제로 정리해보려한다.

 

 

forEach

보통 forEach는 for문과 함께 비교된다. 둘 모두 배열을 순회하는 함수라는 공통점이 있지만,

forEach는 매개변수와 함께 각 배열에 적용할 콜백함수를 전달한다.

• Current Value (명명된 매개변수) - 처리할 현재 요소
• Index (선택적 매개변수) - 처리할 현재 요소의 인덱스
• Array (선택적 매개변수) - forEach 메서드를 호출한 배열

 

forEach를 사용해 배열을 순회하기 위해서는 콜백함수나 익명 함수가 필요하다. 이 함수는 각 요소에 실행되며, 요소를 나타내는 매개변수를 1개 이상 사용해야한다.

numbers.forEach(function(number) {
    console.log(number);
});


numbers.forEach(number => console.log(number));

//익명 함수
//매개변수 number를 포함

 

 

선택적 매개변수 (인덱스 Index)

두개의 매개변수를 활용하여 매서드를 사용하면 두번째 매개변수를 통해 요소의 인덱스를 확인할 수 있다

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index) => {
    console.log('Index: ' + index + ' Value: ' + number);
});

 

Index: 0 Value: 1

Index: 1 Value: 2

Index: 2 Value: 3

Index: 3 Value: 4

Index: 4 Value: 5

 

배열(Array)

배열 매개변수는 원본 그 자체. 호출하면 배열의 요소 수만큼 배열이 출력됨

const numbers = [1, 2, 3, 4, 5];

numbers.forEach((number, index, array) => {
    console.log(array);
});

(5) [1, 2, 3, 4, 5]

(5) [1, 2, 3, 4, 5]

(5) [1, 2, 3, 4, 5]

(5) [1, 2, 3, 4, 5]

(5) [1, 2, 3, 4, 5]

 

 

다양한 forEach를 사용한 코드들을 보며, '아~ 이런식으로 각 배열을 순회했구나'라고 생각만했었다. 하지만 실제로 쓰려고하니 막막했던 이유가 매개변수를 1개 이상 포함해야하며, 콜백함수나 익명함수가 필요하다는 것을 중요하게 생각하지 않고 넘겼기 때문에 어려웠다는 것을 알게되었다. 내가 코딩을 하며 막막했던 큰틀에서 원리만 이해하지 이러한 것들을 놓치기 때문에 막상 키보드를 치려고하면 어려웠던 것 같다. 앞으로 헷갈리거나 막상 해보려니 손이 떨어지지 않는 것은 무조건 자세히 찾아보고 놓치고 있는 부분을 확인하는 버릇을 들여야겠다.