배열의 반복 (2) - map(), filter()

해당 글에서 소개 할 map(), filter()와 forEach()의 가장 큰 차이점은 이 두 가지 메소드는 새로운 배열을 결과값으로 출력한다는 것이다. 

 

배열.map()

map()도 배열을 반복하는 콜백함수를 인자로 받는다.

var number = [1, 2, 3, 4, 5];

var multipleNum = number.map( function(num) {
	return num * 10;
});

console.log(number); // output: (5) [1, 2, 3, 4, 5]
console.log(multipleNum); // output: (5) [10, 20, 30, 40, 50]

위와 같이 기존 number 배열을 유지하면서 새로운 배열 multipleNum이 선언된다. 

 

 

배열.filter()

filter()도 배열을 반복하는 콜백함수를 인자로 받지만, map()과 다른 점은 메소드 이름과 같이 조건으로 요소를 필터하는 것이다. 따라서 콜백함수 안의 내용은 true나 false로 새로 만들어낼 배열의 요소를 결정한다. 

var number = [1, 2, 3, 4, 5];

var smallNum = number.filter( function(num) {
	return num < 3;
});

console.log(number); // output: (5) [1, 2, 3, 4, 5]
console.log(smallNum); // output: (2) [1, 2]

map()과 마찬가지로 새로운 배열로 결과값을 저장한다. 

 

 

주의할 점

1. map()과 filter()로 실행한 결과를 다른 변수에 저장하고 사용해야 한다. 그대로 사용하려면 원래의 변수에 재할당해야 한다.

2. map()과 filter()는 함수를 인자로 받는데, 반드시 return을 해줘야 한다. 그렇지 않으면 값이 보여지지 않는다.