array.forEach(console.log) 의 출력

map() 예시를 보고 있는데 갑자기 이상한 출력 상태를 발견.

numbers = numbers.map(function (value, index, array) {
  return value * value
})

numbers.forEach(console.log)

//출력결과
74529 0 [ 74529, 2704, 10609, 1024, 3249 ]
2704 1 [ 74529, 2704, 10609, 1024, 3249 ]
10609 2 [ 74529, 2704, 10609, 1024, 3249 ]
1024 3 [ 74529, 2704, 10609, 1024, 3249 ]
3249 4 [ 74529, 2704, 10609, 1024, 3249 ]

---

아니 이거 뭔데... numbers.forEach(console.log) 가 왜 이렇게 출력되는거..?

...

그래서 실험을 해봤다.

test 1.

너무 기니까 배열 요소를 3개만 줌.
비교할 원래 대상. 일단 위와 똑같이 나온다.

const numbers = [273, 52, 103]

numbers.forEach(console.log)

// 출력결과
273 0 [ 273, 52, 103 ]
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]

test 2.

forEach 메소드가 원래 value, index, array 이렇게 파라미터로 3가지를 받을 수 있는 함수이니
forEach 안의 콜백함수 형태를 애로우 함수에서 기본함수 형식으로 일단 바꿨다.
받을 수 있는 파라미터는 일단 모두 넣었다. (변수 이름은 길어서 줄임)

numbers.forEach(function (v, i, a) {
  console.log(v, i, a)
})

// 출력 결과
273 0 [ 273, 52, 103 ]
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]

동일하게 나온다.

test 3.

넣어준 파라미터 3가지를 각각 따로 출력해보면?

numbers.forEach(function (v, i, a) {
  console.log(v)
  console.log(i)
  console.log(a)
})

// 출력결과
273
0
[ 273, 52, 103 ]
52
1
[ 273, 52, 103 ]
103
2
[ 273, 52, 103 ]

오. value, index, array가 순서대로 한번씩 각각 출력이 된다.

test 4.

그럼 파라미터로 하나만 줘보면?

numbers.forEach(function (v) {
  console.log(v)
  console.log(i)
  console.log(a)
})

// 출력결과
273
console.log(i)
              ^
ReferenceError: i is not defined

273 그러니까 v 값은 정상적으로 출력됐는데,
i값에서 참조오류가 발생한다. i가 정의되지 않았다고 한다.
파라미터를 직접 지정하면 입력한 파라미터 값만 확인되는 것 같다.
아마 a까진 가지도 않았지만 마찬가지겠지..?

test 5.

그럼 리턴도 할 수 있는 map()은?

일단 선언만 해두고 안에 console.log(v,i,a) 명령과
return 값을 지정했다.

numbers.map(function (v, i, a) {
  console.log(v, i, a) 
  return v*v
})

273 0 [ 273, 52, 103 ]
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]

결과는 forEach 때와 동일.

test 6.

이걸 변수에 담으면?

const test = numbers.map(function (v, i, a) {
  console.log(v, i, a) 
  return v*v
})

273 0 [ 273, 52, 103 ]
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]

변수에 할당만 했을 뿐인데도 출력이 된다.

test7

그럼 여기서 test를 출력해보면?

const test = numbers.map(function (v, i, a) {
  console.log(v, i, a) 
  return v*v
})

console.log(test)

273 0 [ 273, 52, 103 ]
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]
[ 74529, 2704, 10609 ]

위 3줄은 그대로 또 나오고, 리턴값이 추가로 출력되는데,
test 는 배열 하나가 된 상태니까 그냥 [ 74529, 2704, 10609 ] 로 나온다.

📌 결론

forEach 메소드가 콜백함수의 파라미터를 원래 3개까지 받을 수 있는데
array.forEach(console.log)
그 콜백 함수로 console.log를 불러오게 될 경우
파라미터를 따로 지정해주지 않으면 전부 입력한 것처럼 적용되는 것 같다.
그래서,
console.log(value, index, array) 처럼 적용이 된거지...

273 0 [ 273, 52, 103 ]		
52 1 [ 273, 52, 103 ]
103 2 [ 273, 52, 103 ]

(추가 테스트)

const numbers = [273, 52, 103]

const test = numbers.map(parseInt)

console.log(test)

출력결과

[ 273, NaN, 2 ]

아니 이건 또 왜 3가지 안나오고 이렇게 나오는데?....