filter
배열에서 오브젝트 필터링하기
filter가 없다면 아래처럼 작성해야 할 것이다.
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const femaleUsers = [];
for (let i = 0; i < users.length; i++) {
if (users[i].gender === 'female') {
femaleUsers.push(users[i]);
}
}방법1. gender가 female인 배열 필터링하기
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const findFemales = function({ gender }) {
return gender === 'female';
};
const femaleUsers = users.filter(findFemales);여기서 콜백은 3가지 파라미터를 받는다.
- The current element of the array (required)
- The index of the current element in the array
- The entire array
방법2. arrow function으로 작성한 심플한 버전 (⭐️추천)
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const findFemales = ({ gender }) => gender === 'female';
const femaleUsers = users.filter(findFemales);방법3. 바로 조건 정의해서 필터링
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const femaleUsers = users.filter(
({ gender }) => gender === 'female'
);map
많은 배열 데이터를 조작할 때 유용한 map
맵이 없다면 아래처럼 작성해야 할 것이다.
const response = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const users = [];
for (let i = 0; i < response.length; i++) {
users.push({
fullname: response[i].name,
gender: response[i].gender === 'male' ? 'M' : 'F'
});
}여기서 콜백은 3가지 파라미터를 받는다.
- The current element of the array (required)
- The index of the current element in the array
- The entire array
결과, 새로운 형태의 배열을 생성할때 유용하다.
const response = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const transformResponse = ({ name, gender }) => {
return {
fullname: name,
gender: gender === 'male' ? 'M' : 'F'
}
};
const users = response.map(transformResponse);Reduce
어떤 값들의 합계를 구해야할 때 유용하다.
reduce가 없다면 아래처럼 작성해야 한다.
const numbers = [1,2,3,4,5,6,7,8,9];
let summary = 0;
for (let i = 0; i < numbers.length; i++) {
summary += numbers[i];
}reduce는 콜백으로 4개의 파라미터를 받는다.
- The accumulated value previously returned (required)
- The current element of the array (required)
- The index of the current element in the array
- The entire array
두번째 매개변수는 초기값이다. 없을 경우 배열의 첫번째 요소가 누산기의 초긱밧으로 사용되며 루프는 배열의 두번째 항목에서 시작된다.
reduce 사용 코드
초기값 없을때
const numbers = [1,2,3,4,5,6,7,8,9];
const addNumber = (acc, number) => {
return acc + number;
}
const summary = numbers.reduce(addNumber);초기값 있을때
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const reduceFemaleCount = (acc, user) => {
if (user.gender === 'female') {
return acc + 1;
}
return acc;
};
const femaleUsersCount = users.reduce(reduceFemaleCount, 0);리팩토링1. 디스트럭처링 활용하기 user.gender → { gender }
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const reduceFemaleCount = (acc, { gender }) => {
if (gender === 'female') {
return acc + 1;
}
return acc;
};
const femaleUsersCount = users.reduce(reduceFemaleCount, 0);리팩토링2. 삼항연산자로 코드 정리하기
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const reduceFemaleCount = (acc, { gender }) => {
return gender === 'female' ? acc + 1 : acc;
};
const femaleUsersCount = users.reduce(reduceFemaleCount, 0);find
배열에서 value 값이 일치하는 값 찾기
const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
const findUser = ({ id }) => id === 123;
const user = users.find(findUser);findIndex
해당 값의 index 받아오기
const users = [
{ id: 123, name: 'George' },
{ id: 456, name: 'Georgia' }
];
const findUserIndex = ({ id }) => id === 123;
const userIndex = users.findIndex(findUserIndex);includes
예전 방법 indexOf
const numbers = [1,2,3,4,5,6,7,8,9];
const indexOf9 = numbers.indexOf(9);
if (indexOf9 !== -1) {
console.log('9 exist');
} else {
console.log('9 does not exist');
}includes 사용하기
const numbers = [1,2,3,4,5,6,7,8,9];
if (numbers.includes(9)) {
console.log('9 exist');
} else {
console.log('9 does not exist');
}some
특정 조건을 만족하는지 찾기
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const isMale = ({ gender }) => gender === 'male';
const hasMaleUsers = users.some(isMale);every
전체 조건을 만족하는지 찾기
const users = [
{ name: 'George', gender: 'male' },
{ name: 'Georgia', gender: 'female' }
];
const isFemale = ({ gender }) => gender === 'female';
const allFemales = users.every(isFemale);flat
불규칙적인 배열 하나로 만들기
const numbers = [1,2,3,[4,5],[[6,7]]];
console.log(numbers.flat()); // [1,2,3,4,5,[6,7]]
console.log(numbers.flat(1)); // [1,2,3,4,5,[6,7]]
console.log(numbers.flat(2)); // [1,2,3,4,5,6,7]