프론트엔드(Front-end)/JavaScript
JavaScript 내장 고차 함수(forEach, filter, map, reduce)
클라우드아실
2021. 1. 24. 19:12
반응형
JavaScript 내장 고차 함수(forEach, filter, map, reduce)
: 자바스크립트에는 기본적으로 내장되어 있는 고차 함수들이 있습니다. 바로 배열 메소드들 중 일부가 고차 함수에 해당합니다. 화살표 함수를 이용하면 식을 더 짧게 만들 수 있습니다.
forEach
: for 반복문을 forEach로 대체할 수 있습니다. 성능면에서는 for문보다 오히려 조금 떨어진다고 합니다. length 부분과 i++ 부분을 생략할 수 있어서 그만큼 실수를 줄일 수 있고 코드도 간편합니다.
let arr = [1, 2, 3, 4];
let newArr =[];
for(let i = 0 ; i < arr.length ; i++){
newArr.push(arr[i]);
}
console.log(newArr); // [1, 2, 3, 4]
/* 화살표 함수 이용시 */
arr.forEach(v => newArr.push(v))
console.log(newArr); // [1, 2, 3, 4]
filter
: 배열의 각 요소가 특정 논리(함수)에 따르면, 사실(boolean)일 때 따로 분류(filter)합니다. 조건에 맞는 요소만 따로 모아서 새로운 배열을 반환합니다.
let arr = [1, 2, 3, 4];
const isEven = function (v) {
return v % 2 === 0;
};
let output = arr.filter(isEven);
console.log(output); // ->> [2, 4]
/* 화살표 함수 이용시 */
let output2 = arr.filter(v => (v % 2 ===0));
console.log(output2); // ->> [2, 4]
- isEven은 인자로 불러오는 함수이므로 콜백함수가 됨.
- arr.filter를 하면 화살표함수 v에 인자로 arr의 요소들 1, 2, 3, 4 가 반복해서 들어가고
- 조건 v % 2 === 0 이 사실에 해댕하는 부부만 새로운 배열로 반환함.(이 부분을 if문의 조건처럼 생각하면 됨)
map
: 배열의 각 요소가 특정 논리(함수)에 따라 다른 요소로 지정(map)하는 방식입니다. 조건에 맞는 요소만 따로 모아서 새로운 배열을 반환합니다. 요소의 갯수는 변하지 않습니다.
let arr = [1, 2, 3];
let result = arr.map(function(ele) {
return ele *2
});
console.log(result); // [2, 4, 6]
/* 화살표 함수 이용시 */
let result = arr.map(v => v*2);
console.log(result); // [2, 4, 6]
filter + map
: filter를 통해 걸러낸 요소들만 모아서 map을 통해 변경해서 반환할 수 있습니다. 앞의 filter와 map의 예제를 활용해 아래 예시를 만들었습니다. 뿐만 아니라 다른 배열 고차함수도 마찬가지로 진행 가능합니다.
let arr = [1, 2, 3, 4];
const isEven = function (v) {
return v % 2 === 0;
};
const isMulti = function (v) {
return v * 2
});
let output = arr.filter(isEven).map(isMulti);
console.log(output); // ->> [4, 8]
/* 화살표 함수 이용시 */
let output2 = arr.filter(v => (v % 2 === 0)).map(v => v * 2);
console.log(output2); // ->> [4, 8]
- isEven을 통해 2로 나눴을 때 몫이 0인 함수를 만들고 isMulti를 통해 2배의 값을 반환하는 함수를 생성
- arr.filter().map() 으로 연결해서 사용가능
- arr.filter(isEven)의 결과값으로 [2, 4]가 반환되고 [2, 4].map(isMulti)로 진행되는 것과 같음.
reduce
: 배열의 각 요소를 특정 논리(함수)에 따라 원하는 하나의 형태로 축소(reduction)하는 방식입니다. 값을 누적된다고 보는게 맞을 것 같습니다. 조건에 맞는 요소만 따로 모아서 새로운 배열을 반환합니다.
let arr = [1, 2, 3];
let result = arr.reduce(
function(acc, cur, idx) {
acc = acc + cur;
return acc;
}, 10);
console.log(result); // 16
/* 화살표 함수 이용시 */
let result = arr.reduce((acc, cur) => acc + cur, 10);
console.log(result); // 16- idx는 초기값으로 위의 예시에서 함수를 닫는 } , 에 위치. 화살표 함수에서도 마찬가지, 뒤 10의 위치.
- 실제 계산 순서는 acc = idx + acc부터 먼저 진행됨. idx는 10이. acc는 배열 첫번째 인덱스 1이 호출됨. 11이 반환
- 10 + 1 = 11 이 다시 acc에 재할당되고 cur에는 그 다음 인덱스 값인 2가 호출됨. 13이 반환.
- 반환된 13이 arr로 재할당되고 그다음 인덱스인 3이 cur에 호출됨. 16이 반환.
- 초기값이 없다면 reduce 실행시 초기값을 호출하는 횟수보다 1회 적게 최종 호출됨.
정리
- 배열 내장 고차 함수(배열 메소드)
- forEach : for문 대체. forEach(element, index, array)
- filter : if문 대체. 조건에 맞는 요소만 배열로 반환. filter(element, index, array)
- map : 배열을 순회하여 요소 값을 다른 값으로 매핑하기 위한 함수. map(element, index, array)
- reduce : 배열의 각 요소에 대해서 순회 후 하나의 결과값을 반환함. reduce(acc, cur, idx)
참고
반응형