[Javascript] - Map, reduce, filter

공부한 내용을 정리한 것입니다. 출처는 하단에 있습니다. 문제시 알려주시면 조치하겠습니다.

• map, reduce, filter 모두 ECMAScript 2015(ES6)에서 추가된 메서드.
• 모두 배열 타입에 사용하며 각 요소들을 파라미터로 받아 작동.

Map

• 배열을 조작하고 변형하기 위한 고차 함수 중 하나로, 배열 각 요소에 대해 주어진 함수를 수행한 결과를 모아 새로운 배열을 반환하는 메서드.
• 원래의 배열을 변경하지 않고 새로운 배열을 반환. 단 배열 안에 객체가 있는 경우 객체는 공유됨.

                //배열.map((요소, 인덱스, 배열) => { return 요소});
const newArray = array.map(callback(currentValue[,index[, array]]) {
//...
}

let numbers = [1, 2, 3, 4, 5];
const numbersMap = numbers.map(val => val * 2);  //매개변수가 1개일 때는 요소,
console.log(numberMap); // [2, 4, 6, 8, 10]

numbers = [1, 2, 3]
const numbersMap = numbers.map((value, index, array) => {
	console.log(value, index, array);
	return value*2;
});

console.log(numbersMaps);
// 1 0 [1, 2, 3]
// 2 1 [1, 2, 3]
// 3 2 [1, 2, 3]
// [2, 4, 6]

filter

• 배열 각 요소에 대하여 주어진 함수의 결과값이 true인 요소들을 모아 새로운 배열을 반환하는 메서드
• map은 내부 함수의 리턴값이 문자, 숫자, 배열 등으로 다양한 타입이 가능했다면, filter는 오직 bollean 타입만 반환
• 리턴값이 true인 경우에만 배열에 추가하기 때문에 조건에 맞는 특정 요소들만 새 배열에 넣고 싶은 경우에 사용하면 적합 (예 : 중복 제거)

const fruits = ['Apple', 'Banana', 'Lemon', 'Watermelon'];
const fruitsFilter = fruits.filter(word => word.length > 5);
console.log(fruitsFilter);
// ['Banana', 'Watermelon']

• value, index, array 3가지 매개변수를 가짐

const fruits = ['Apple', 'Banana', 'Lemon'];
const fruitsFilter = fruits.filter((value, index, array) => {
	console.log(value, index, array);
	return value.length > 5;
});
console.log(fruitsFilter);

// Apple 0 ['Apple', 'Banana', 'Lemon']
// Banana 1 ['Apple', 'Banana', 'Lemon']
// Lemon 2 ['Apple', 'Banana', 'Lemon']
// ['Banana']

Reduce

• 배열 각 요소에 대하여 reducer 함수를 실행하고, 배열이 아닌 하나의 결과값을 반환한다. 반복되는 모든 것에 reduce를 쓸 수 있다.

const numbers = [1, 2, 3, 4];
const numberSum = numbers.reduce((acc, cur) => {
	console.log(acc, cur);
	return acc + cur;
});

console.log(numberSum);
// 1, 2
// 3, 3
// 6, 4
// 10

• 값을 계속 누적하여 갖고 있는 누산기 acc와 현재 요소인 cur를 매개변수로 하여 모든 요소의 합을 반환하는 로직.
• 누산기는 reduce함수를 수행하며 생기는 값을 임시적으로 보관하는 형태.
• 3번째 매개변수인 초기값을 주게 되면 배열의 첫번째 요소부터가 아닌 초기값부터 계산이 시작됨.

const numbers = [1, 2, 3, 4];
const numberSum = numbers.reduce((acc, cur) => {
	console.log(acc, cur);
	return acc + cur;
}, 10);   // 초기값으로 10을 설정.

console.log(numberSum);
// 10, 1
// 11, 2
// 13, 3
// 16, 4
// 20 => numberSum

• accumulator : 리턴할 값을 저장하는 변수. 초기값이 주어지면 초기값부터 시작
• currentValue : 현재 요소
• currentIndex : 요소의 인덱스
• array : map()을 호출한 원본 배열

const numbers = [1, 2, 3, 4];
const numberSum = numbers.reduce((accumulator, currentValue, currentIndex, array) => {
	console.log(accumulator, currentValue, currentIndex, array);
	return accumulator + currentValue;
}, 10);

console.log(numberSum);

// 10 1 0 [ 1, 2, 3, 4 ]
// 11 2 1 [ 1, 2, 3, 4 ]
// 13 3 2 [ 1, 2, 3, 4 ]
// 16 4 3 [ 1, 2, 3, 4 ]

//Map처럼 쓰기
const numbers = [1, 2, 3, 4, 5];
const numbersReduce = numbers.reduce((acc, cur) => {
	acc.push(cur*2);
	return acc;
}, []);

console.log(numbersReduce); // [2, 4, 6, 8, 10]

//filter처럼 쓰기
const fruits = ['Apple', 'Banana', 'Lemon', 'Watermelon'];\\
const fruitsReduce = fruits.reduce((acc, cur) => {
	if(cur.length>5)
		acc.push(cur);
	return acc;
}, []);

console.log(fruitsReduce); // ['Banana', 'Watermelon']

 

출처

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

https://brunch.co.kr/@swimjiy/15