JavaScript-forEach, map, fill

forEach

인수로 함수를 받고, 배열의 요소 하나 하나에 인수로 받은 함수를 각각 적용한다. 이때 요소 순서대로 함수를 적용하므로 반복문의 역할을 하게 된다.
즉, forEach 메서드는 내부에서 반복문을 통해 자신을 호출한 배열을 순회하면서 수행해야할 처리를 콜백 함수로 전달받아 반복 호출한다.

forEach가 for문 보다 성능적으로는 안좋지만 배열 매서드를 연달아 썼을 때 좋은 점이 많다.

예를 들어 for문으로 작성된 아래의 코드를

const answer = [3,1,4,6];
const value = '3214';
let strike = 0;
let ball = 0;

for (let i = 0; i < answer.length; i++){
	const index = value.indexOf(answer[i]);
	if (index > -1) {			//일치하는 숫자 발견
		if (index === i) {		//자릿수도 같음
        	strike += 1;
        } else {				//숫자만 같음
        	ball += 1;
        }
	}
}

forEach문으로 바꾸면,

const answer = [3,1,4,6];
const value = '3214';
let strike = 0;
let ball = 0;
answer.forEach((element, i) => {	//**answer의 첫번째 같은 경우는 element=3, index=0 이고 두번째는 element=1, index=1 이다.**
	const index = value.indexOf(element);
	if (index > -1) {			//일치하는 숫자 발견
		if (index === i) {		//자릿수도 같음
        	strike += 1;
        } else {				//숫자만 같음
        	ball += 1;
        }
	}
})

map

map 메서드는 자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달받은 콜백 함수를 반복 호출한다.(여기까지는 forEach와 동일)
그리고 콜백 함수의 반환값들로 구성된 새로운 배열을 반환한다!(forEach와 가장 큰 차이점)

for문으로 작성된 아래의 코드를

const array = [1,2,3,4];

const result = [];
for (let i=0; i<4; i++) {
	result.push(array[i]*2);
}								//result [2,4,6,8]

map을 사용하면,

array.map((element, i) => {
	return element*2;
})								//[2,4,6,8]

위와 같이 나오는데 이때의 특이점은 기존 배열인 array는 그대로 [1,2,3,4]로 남아있고 array.map을 하면 새로운 배열이 만들어진다.

fill

원하는 값을 배열의 원하는 요소 자리에 채우고 싶을 때 사용하는 배열 매서드

Array(9)			//길이가 9인 빈 배열을 만든다.
Array(9).fill()		//[undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined,undefined]
Array(9).fill(0)	//[0,0,0,0,0,0,0,0,0]

배열 매서드를 코드에 적용시켜보면,

Array(9).fill(0).map((el, idx) => {
	return idx+1;
})									//[1,2,3,4,5,6,7,8,9]

참고로 fill()으로 넣어도 된다.

Array(9).fill().map((el, idx) => {
	return idx+1;
})									//[1,2,3,4,5,6,7,8,9]