배열 갖고 놀기: Map, Reduce, Filter + some, every
map()
배열 내 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함
요소를 일괄적으로 변경
특정 규칙을 적용시켜 새로운 배열을 만든다
filter()
요소를 걸러내어 배열로 true인 요소들 반환
find()
단 하나의 요소만 반환
여러개 있으면 처음값만
reduce()
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
});
//화살표 함수 사용
[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );
// 초기값 제공 => 결과는 20
[0, 1, 2, 3, 4].reduce(function(previousValue, currentValue, currentIndex, array) {
return previousValue + currentValue;
}, 10);호출에 따른 반환 값: 1 ⇒ 3 ⇒ 6 ⇒ 10
이전 값(왼쪽 값)부터 차례대로 함수를 수행하고 결과로 나온 값과,
오른쪽 즉, 다음 값이 함수로 들어가서 로직을 수행하여 return 값을 도출해 냅니다.
출처:
https://lee-mandu.tistory.com/9
[개발/일상_Mr.lee]
previousValue ⇒ 이전까지 결과에 대한 누적값
reduce 활용
const queryStr = pipe(
Object.entries,
map(([k, v]) => `${k}=${v}`),
reduce((a, b) => `${a}&${b}`)
);
console.log(queryStr({ limit : 10, offset: 10, type: 'notice' }));
// limit=10&offset=10&type=notice- 중첩 배열 펼치기
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
( accumulator, currentValue ) => accumulator.concat(currentValue),
[]
);- 속성으로 객체 분류하기
var people = [
{ name: 'Alice', age: 21 },
{ name: 'Max', age: 20 },
{ name: 'Jane', age: 20 }
];
function groupBy(objectArray, property) {
return objectArray.reduce(function (acc, obj) {
var key = obj[property];
if (!acc[key]) {
acc[key] = [];
}
acc[key].push(obj);
return acc;
}, {});
}
var groupedPeople = groupBy(people, 'age');
// groupedPeople is:
// {
// 20: [
// { name: 'Max', age: 20 },
// { name: 'Jane', age: 20 }
// ],
// 21: [{ name: 'Alice', age: 21 }]
// }- reduce()로 map() 작성
if (!Array.prototype.mapUsingReduce) {
Array.prototype.mapUsingReduce = function(callback, thisArg) {
return this.reduce(function(mappedArray, currentValue, index, array) {
mappedArray[index] = callback.call(thisArg, currentValue, index, array);
return mappedArray;
}, []);
};
}
[1, 2, , 3].mapUsingReduce(
(currentValue, index, array) => currentValue + index + array.length
); // [5, 7, , 10]더 많은 예시는 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce
Every
배열의 모든 요소가 true를 리턴해야 true 리턴
Some
특정 조건에서 적어도 하나는 만족하면 true
const array = [1, 2, 3, 4, 5];
// checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// expected output: true
console.log(array.every(even));
// expected output: false - flat
depth를 넣어서 그 차원만큼 array를 flatten
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]- flatMap
map()의 결과물에 flat() 적용한 것과 같은 결과 반환
map ⇒ flat하면 배열을 만든 후에 그걸 flatten하기 때문에 비효율성 생김
Curie Yoo