지금 당장 취직을 위한 코딩 테스트를 준비하는 건 아니지만 프론트엔드 개발자로서 JavaScript라는 언어를 잘 쓰려면 우리가 매일 쓰는 한국어처럼 JavaScript도 매일 써야 잘 쓸 수 있다고 생각해서 하루 한 문제씩 코딩 테스트 기출 문제를 풀어보고 있다. 문제를 풀면서 배열의 filter 메서드처럼 객체에 존재하는 키와 값에서 값이 일정 기준을 넘어가지 못하면 제거하는 기능을 만들고 싶었다.
먼저, reduce에 대해 알아야 한다. reduce는 배열의 메서드로 배열의 각 요소에 주어진 리듀서 함수를 실행하고, 하나의 결괏값을 반환한다.
arr.reduce(callback[, initialValue]);
callback: 배열의 요쇼에 실행하는 함수, 다음 네 가지 인수를 받을 수 있다.
- accumulator - accumulator는 콜백의 반환값을 누적한다. 콜백의 이전 반환값 혹은 콜백의 첫 번째 호출이면서 initialValue인 경우 값은 initialValue다.
- currentValue - 처리할 현재 요소
- currentIndex - 선택 옵션이며, 처리할 현재 요소의 index, initialValue를 제공하면 0, 아니면 1부터 시작한다.
- array - 선택 옵션이며 reduce()를 호출할 배열이다.
initialValue - 선택 옵션이며 callback 최초 호출 당시 첫 번째 인수에 제공하는 값이다. 초기값을 제공하지 않으면 배열의 첫 요소를 사용한다.
반환값은 누적 계산의 결괏값이다.
객체에 존재하는 키와 값에서 값이 일정 기준을 넘어가지 못하면 제거하는 기능은 다음과 같이 만들 수 있다.
function objectFilter(obj, predicate) {
const filteredObject = Object.keys(obj)
.filter((key) => predicate(obj[key]))
.reduce((res, key) => ((res[key] = obj[key]), res), {});
return filteredObject;
}
objectFilter(obj, (num) => num >= 3);
객체를 받아 Object.keys()를 통해 객체의 키들을 배열로 받고, 배열로 받은 객체의 키들을 사용자 임의의 필터링하는 함수를 받아 함수를 객체 키로 호출하여 필터링을 진행한다.
진행 순서는 다음과 같다.
- 먼저, 인수로 전달받은 객체를 Object.keys()를 통해 객체의 키 값만 배열로 받는다.
- 필터링하기 위해 사용자가 임의로 만든 필터링 함수를 predicate라는 이름의 인수로 전달하고 predicate 함수에 배열로 받은 객체의 키들을 대괄호 표기법을 통해 호출하며 필터링을 진행한다.
- 필터링한 객체의 키 배열을 res라는 이름의 초기값인 객체에 reduce 하나하나 할당해준다.
'TIL' 카테고리의 다른 글
TIL - 20221002 (JavaScript 특정 문자열 제거 정규 표현식) (0) | 2022.10.02 |
---|---|
TIL - 20221001 (0) | 2022.10.01 |
TIL - 20220929 (0) | 2022.09.29 |
TIL - 20220928 (0) | 2022.09.28 |
TIL - 20220927 (0) | 2022.09.27 |