[11.24] forEach() ? Map() ? 그게 뭔데🤨

💥 forEach()

forEach() 메소드는 배열을 순회하는 방법 중 하나이다.

배열을 순회하는 이유는, 각 요소를 콜백 함수로 처리하기 위함이라고 생각하면 될 것 같다.

콜백 함수를 적용해서 순서대로 한 번씩 실행하기 때문에 배열을 순회한다고 한다.

 

그럼 for 문 사용하면 되지않나요? for문도 반복문이잖아요?

 

음.. 흔히 다들 말하길.. forEach()는 향상된 for문이다! 라고...

그럼 향상된 걸 쓰겠는가.. 일반적인 걸 쓰겠는가...... 나라면 향상된 거 쓰겠다😃

 

forEach()는 코드가 간결해지고 가독성이 좋다 라는 장점이 있다.

 

백문이 불여일코... 일단 해보자!

const arr = [1, 2, 3, 4, 5]

arr.forEach(function(value, index, array){

                    // 데이터, 인덱스, 객체 통째로

    console.log(`value : ${value}, index : ${index}, array : ${array}`)

})

 

forEach()의 매개변수는 총 3가지가 있다.

첫 번째는 value, 두 번째는 index, 세 번째는 array다.

 

value는 말 그대로 값 그 자체이고, index는 순서!

array는 객체 그 자체라고 생각하면 될 것 같다.

 

콘솔은 이렇게 찍힌다.

[Running] node "c:\Users\zxzx4\Desktop\Programmers\NodeBase\demo-api\foreach-demo.js"

value : 1, index : 0, array : 1,2,3,4,5

value : 2, index : 1, array : 1,2,3,4,5

value : 3, index : 2, array : 1,2,3,4,5

value : 4, index : 3, array : 1,2,3,4,5

value : 5, index : 4, array : 1,2,3,4,5

한 번만 나오는 것이 아닌 배열이 순회하는 걸 볼 수 있다.

 

그럼 향상된 for문이니까... for문은 이제 안 쓰겠네?

 

그건 아니라는 점!!

 

향상된 for문이지만 생각보다 제약사항이 있어, for문을 사용해야 할 때도 있다.

상황에 알맞게 for문을 쓰든 forEach()문을 쓰든 해야한다는 점! 꼭 기억했으면 좋겠다 :)

 

💥 Map()

Map() 메소드 역시 배열을 순회하는 방법 중 하나이다.

Map() 메소드도 forEach()처럼 배열순회가 잘 되는 지 콘솔로 확인을 해보겠다.

console.log('map()')

arr.map(function(value, index, array){

    console.log(`value : ${value}, index : ${index}, array : ${array}`)

})

 

분명 띠용? 한 사람 있을 거 라고 본다 🧐

뭐야? forEach()랑 다른 게 없잖아? 그럼 왜 굳이 따로따로 쓰는데???

 

forEach()와 Map()의 차이점은 바로....

return값이다.

 

이렇게 말로만 해선 아마 이해가 잘 안될 거라고 생각한다.

코드로 바로 보여주겠다👌

 

const forArr = arr.forEach(function(value, index, array){

    return value * 2

})

const mapArr = arr.map(function(value, index, array){

    return value * 2

})

console.log(`forEach()의 return 값은 = ${forArr} // map()의 return 값은 = ${mapArr}`)

 

콘솔창도 바로 보여주겠다😏

 

이렇게 forEach()는 return값을 undefined로 반환하고, map의 return값은 새로운 배열을 반환한다.

그럼 당연히 사용용도는 다르겠지?🤩

 

map이 새로운 배열을 반환한다고 해서 본래의 배열을 잃어버리진 않는다.

본래의 배열은 갖고있되, 새로운 배열을 만들어내는 것이다!

 

보통 map() 메소드는 새로운 배열을 만들 때 사용한다. 

 

오늘은 헷갈리는 forEach()와 map()에 대해서 제대로 배웠다!
사실 안쪽으로 더 파고들면 이해가 안 가는 부분이 천지겠지만.. 오늘의 강의는 꽤나 이해가 잘 갔다.
return값이 다를 거라곤 상상도 못했다🙄
forEach(), map(), for() 조금 더 정확히 공부해서 한 번 직접 사용해보고 싶다.
주변 개발자에게 물어보면 꽤나 자주 쓴다고들 하던데.. 큰일이군😥
그래도 생각보다 목적이 뚜렷한 것 같다.
코딩 이라는 게 참 어렵게만 느껴지지만.. 목적이 뚜렷해서 다행이라고 생각한다....★