[ Learn Reduce in 10 Minutes | Yazeed Bzadough ]
SNS에서 위의 reduce()
메서드 설명글을 발견하고 즐겁게 읽었다. 글 말미에 reduce()
메서드를 이용해 다른 배열 메서드들과 특정 기능들을 구현해보라는 제안이 있어 도전해보았다. 글 작성자 Yazeed Bzadough가 작성한 10가지 함수는 '10 JavaScript Utility Functions Made with Reduce' 에서 확인할 수 있다.
테스트 내용 : 배열의 모든 요소에 2를 더한 새로운 배열을 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const addTwo = x => x + 2;
함수 map
const map = (array, iterator) => {
return array.reduce((newArray, item) => {
newArray.push(iterator(item));
return newArray;
}, []);
}
console.log(array.map(addTwo)); // [3, 4, 5, 6, 7, 8]
console.log(map(array, addTwo)); // [3, 4, 5, 6, 7, 8]
테스트 내용 : 배열의 요소 중 홀수만을 담은 새로운 배열을 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const getOddNumber = x => x % 2 !== 0;
함수 filter
const filter = (array, iterator) => {
return array.reduce((newArray, item) => {
iterator(item) && newArray.push(item);
return newArray;
}, []);
}
console.log(array.filter(getOddNumber)); // [1, 3, 5]
console.log(filter(array, getOddNumber)); // [1, 3, 5]
테스트 내용 : 배열의 모든 요소가 홀수라면 true, 그렇지 않다면 false를 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const getOddNumber = x => x % 2 !== 0;
함수 every
const every = (array, iterator) => {
return array.reduce((truthy, item) => {
return truthy && iterator(item);
}, true);
}
console.log(array.every(getOddNumber)); // false
console.log(every(array, getOddNumber)); // false
테스트 내용 : 배열의 요소 중 하나라도 홀수라면 true, 그렇지 않다면 false를 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const getOddNumber = x => x % 2 !== 0;
함수 some
const some = (array, iterator) => {
return array.reduce((falsy, item) => {
return falsy || iterator(item);
}, false);
}
console.log(array.some(getOddNumber)); // true
console.log(some(array, getOddNumber)); // true
테스트 내용 : 배열의 요소 중 가장 처음 등장한 홀수를 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const getOddNumber = x => x % 2 !== 0;
함수 find
const find = (array, iterator) => {
return array.reduce((truthy, item) => {
if (iterator(item) && truthy === undefined) {
truthy = item;
}
return truthy;
}, undefined);
}
console.log(array.find(getOddNumber)); // 1
console.log(find(array, getOddNumber)); // 1
테스트 내용 : 배열의 모든 요소를 콘솔에 출력하도록 하고, undefined를 반환받는다.
전달인자
const array = [1, 2, 3, 4, 5, 6];
const showItem = (x) => console.log(x);
함수 forEach
const forEach = (array, iterator) => {
array.reduce((acc, item) => {
iterator(item);
return acc;
}, null);
}
console.log(array.forEach(showItem));
console.log(forEach(array, showItem));
// 1
// 2
// 3
// 4
// 5
// 6
// undefined
전달인자
const array = [1, 2, 3, 4, 5, 6];
함수 arrayToObject
const arrayToObject = (array) => {
return array.reduce((newObj, item, index) => {
newObj[index] = item;
return newObj;
}, {});
}
console.log(arrayToObject(array));
// {0: 1, 1: 2, 2: 3, 3: 4, 4: 5, 5: 6}
전달인자
const array = [[1],[2],[3],[4],[5]];
함수 flattenArray
const flattenArray = (array) => {
return array.reduce((newArray, item) => newArray.concat(item));
}
console.log(flattenArray(array));
// [1, 2, 3, 4, 5]
잘보고가여