Map, forEach의 이해를 위한 문제 풀이 및 해석

Map 문제)

각 배열에 담긴 문자열의 첫번째 인덱스만 배열화하는 firstLetters 함수를 작성하라.

firstLetters(['hello', 'my', 'name', 'is', 'pikachu'])
// returns ["h", "m", "n", "i", "p"]

 

풀이)

Map 메서드는 콜백함수의 파라미터로 (각 요소(element), 요소의 인덱스, 배열) 을 받는다.

또한 Map 메서드가 붙은 배열과 동일한 길이의 배열만큼의 새로운 배열을 만들어 return 한다.

 

답)

const firstLetters = (arr) => {
	return arr.map((e) => {
    	return e[0]
    })
}

 

 

 

---

 

forEach 문제)

아래 코드를 보고, 코드의 주석에 대해 답변하시오.

const arr = []
const solution = data => {
	arr.push(data)
}
// 1번 문제. 현 시점에서 arr에 할당된 값은 무엇인가?

const arr2 = [1, 2, 3]
arr2.forEach(() => {
	arr.push(arr2)
})
// 2번 문제. 현 시점에서 arr에 할당된 값은 무엇인가?

arr2[2] = 'three'
// 3번 문제. 현 시점에서 arr에 할당된 값은 무엇인가?

 

풀이)

forEach 메서드는 map 메서드와 동작방식은 동일하나 return에 차이가 있다.

map은 새로운 배열을 반환하는 반면, forEach는 해당 배열을 수정한다.

이를 감안하고 코드의 진행을 보자.

 

답)

const arr = []
const solution = data => {
	arr.push(data)
}
// arr = [] . 아직 암것도 연산된 게 없다.

const arr2 = [1, 2, 3]
arr2.forEach(() => {
	arr.push(arr2)
})
// arr = [[1, 2, 3], [1, 2, 3], [1, 2, 3]]
// arr2의 요소는 총 3개가 있다. 그래서 forEach는 3번 실행된다.
// 실행될때마다 arr에는 arr2의 주소가 push된다.

arr2[2] = 'three'
// arr = [[1, 2, 'three'], [1, 2, 'three'], [1, 2, 'three']]
// arr2의 배열주소가 arr에 할당된 것 이므로 위의 값이 나온다.