[JavaScript] map(), filter(), reduce()

map()

callback : 새로운 배열 요소를 생성하는 함수

반환값 : 새로운 배열

 

아래 코드 예시를 보면, map()을 통한 결과는 새로운 배열을 반환했기 때문에 result[0]의 자리를 바꾸어도 기존 array에는 영향을 주지 않는 것을 알 수 있다. 하지만, copy는 array의 메모리 주소를 복사하여 두 객체가 동일한 메모리 주소 값을 가지고 있기 때문에 결과적으로 copy[0]의 값을 바꾸면 array의 값에도 영향이 가는 것이다.

let array = [1, 2, 3];

let result = array.map((num)=> num);
result[0] = 40;							// [1, 2, 3]

let copy = array;
copy[0] = 40;							// [40, 2, 3]

내장 객체 이용하기

let array = [1, 4, 9];
let result = array.map(Math.sqrt);				// [1, 2, 3]

함수 이용하기 (일반함수/ 화살표함수)

let array = [1, 4, 9];

let result1 = array.map(function(num) {
	return num * 2;						// [2, 8, 18]
});	
let result2 = array.map(num => num * 2);			// [2, 8, 18]

배열 속 객체 재구성하기

let array = [{key: 1, value: 10}, 
			{key: 2, value: 20}, 
            {key: 3, value: 30}];
            
let result = array.map(function(item) {
	let newArray = {};
    newArray[item.key] = item.value;
    return newArray;						// [{1:10}, {2:20}, {3:30}]
});

 

filter()

array.filter(callback) : 조건을 통과한 요소로 이루어진 새로운 배열을 반환한다.

 

callback : 각 요소를 시험할 함수

반환값 : 새로운 배열

let array = [1, 2, 3];
let result = array.filter((item)=> {
	return item % 2 === 0;					// [2]
});

 

reduce()

array.reduce((누적값, 현재값, 인덱스), 초기값) : 누적 계산의 결과값을 반환한다.

 

callback : 배열의 각 요소에 대해 실행할 함수
    누적값 : 콜백의 누적값
    현재값 : 처리할 현재 요소
    인덱스 Optional : 처리할 현재 요소의 인덱스
    초기값 Optional : 콜백의 최초 호출 값

반환값 : 새로운 배열

let array = [1, 2, 3];
let result = array.reduce((acc, cur, index)=> {
	return acc + cur;					// 6 (1+2+3)
}, 0);