console.log 와 return 에 따라 다른 결과

Question

map 사용 시 3번의 console.log 와 return의 사용이나 순서에 따라 결과가 다르게 나오는데요 이 이유가 궁금합니다

그랩 · Answer

안녕하세요 :) 우선 결과가 저렇게 나오는 게 맞습니다! 첫번째 map의 경우, 각 element를 돌아가면서 내부에 선언된 함수를 실행하게 되는데 return이 먼저 있기 때문에 아래 console.log가 실행되지 않습니다. 두번째 map의 경우, 각 element마다 함수를 실행시키며 첫번째 실행에서는 console.log로 콘솔창에 출력이 되게 됩니다. 그리고 return product가 되는데, 이것은 따로 콘솔창에 표시되지 않고 map함수의 모든 순회가 끝났을 때 최종 반환값에 들어가게 됩니다. 이렇게 2번 순회를 하게 되면 최종 반환값은 아까 개별 실행되었던 함수의 return 값인 product가 포함되게 됩니다! 세번째 map의 경우, console.log가 포함된 함수를 순차적으로 2번씩 실행하게 되므로 console.log만 남습니다. 그리고 map 안에 있는 함수에서 return이 따로 없기 때문에 map 함수 실행에 대한 결과는 [undefined, undefined]로 비어있는 결과를 반환하게 됩니다!

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴이에요. map 함수는 배열의 각 요소마다 인자로 주어진 콜백 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환하는 함수입니다. console.log()를 사용할 경우 실행되는 순간 콘솔에 찍히지만, 반환하는 값에는 영향을 주지 않습니다. 반면, return을 사용할 경우에는 해당 요소의 결과값이 새로운 배열에 포함됩니다. 만약 return을 사용하지 않는다면, 해당 요소의 결과값은 undefined가 됩니다. 따라서, map 함수 안의 콜백 함수에서 console.log()와 return의 사용이나 순서에 따라 결과가 다르게 나타날 수 있습니다. 예를 들어, console.log()와 return을 순서대로 사용하는 경우에는 map 함수를 호출한 결과, 각 요소에 대한 console.log()가 순서대로 찍힌 후, 해당 요소의 결과값이 새로운 배열에 모아지게 됩니다. 하지만 return과 console.log()의 순서를 바꾼 경우, console.log()가 먼저 실행되어 콘솔에 찍힌 후, 해당 요소의 결과값이 새로운 배열에 모아지게 됩니다. 즉, map 함수를 사용할 때에는 콜백 함수에서 console.log()와 return의 순서와 사용에 따라 결과가 달라질 수 있다는 것을 기억하시면 됩니다. 감사합니다.