1. filter
let input = [0,1,2,3,4];
let output = input.filter(x => {
if (x % 2 == 0) return true;
})
console.log(output); // [0,2,4]
filter 함수는 map과 비슷하다. 둘의 공통점은, 배열을 순회하면서 새로운 배열을 만들어 리턴한다.
filter 함수는 콜백 함수가 true를 리턴했을 때만 그 때의 원소를 새 배열에 추가한다.
map과 filter의 차이는 크게 두 가지가 있다.
(1) map은 리턴하는 배열에 콜백 함수가 적용된 새 원소를 추가하고, filter는 기존 배열의 원소를 그대로 복사해 추가한다.
let input = [0,1,2,3,4];
let outputMap = input.map(x => {
if (x % 2 == 0) return true;
else return false;
});
console.log(outputMap); // [true,false,true,false,true]
let outputFilter = input.filter(x => {
if (x % 2 == 0) return true;
else return false;
});
console.log(outputFilter); // [0,2,4]
input 배열이 number 타입의 배열이었음에도 map은 리턴하는 원소 자체를 담기 때문에 boolean 타입의 배열이 생성된다.
반면에 filter 안의 return true와 return false는 이 원소를 배열에 담을지 말지를 의미한다.
(2) 만약 순회하는 배열의 길이가 20 이라면 리턴할 새로운 배열에 원소를 넣을 수 있는 기회는 20번이다.
map은 배열을 순회하면서 무조건 20번의 push를 하지만, filter는 push를 하지 않고 다음 원소로 넘어갈 수 있다.
즉, map이 리턴하는 배열은 원래 배열과 원소의 타입은 다를 수 있어도 길이가 항상 같고, filter는 다를 수 있다.
let input = [0,1,2,3,4];
let outputMap = input.map(x => {
if (x % 2 == 0) return true;
})
console.log(outputMap); // [true,undefined,true,undefined,true]
let outputFilter = input.filter(x => {
if (x % 2 == 0) return true;
})
console.log(outputFilter); // [0,2,4]
좀 전의 코드에서 각각 return false 한 줄을 지우면 map의 결과가 달라진다.
push는 무조건 해야하는데 콜백 함수가 리턴한 것이 없기 때문에 새 배열에 undefined를 추가한다.
반면 filter는 콜백 함수가 true를 리턴하지 않으면 push하지 않고 다음 원소로 넘어간다.
주로 이 특성을 이용해 배열에서 필요없는 것들을 제거하고 정제하는 목적으로 사용할 수 있다.
2. some
let input = [0,1,2,3,4];
if (input.some(x => { if(x % 2 == 0) return true })){
console.log("짝수 있음");
}
some 함수는 배열에 어떤 조건을 만족하는 원소가 있는지 확인할 때 사용할 수 있다.
some 함수의 리턴값은 새로운 배열이 아닌 boolean 이다.
배열을 순회하다 콜백 함수에서 return true가 나오면 바로 순회를 종료하고 최종적으로 true를 리턴,
마지막까지 return true가 나오지 않으면 최종적으로 false를 리턴한다.
3. every
let input = [0,1,2,3,4];
if (input.every(x => { if(x < 5) return true })){
console.log("5 미만");
}
every 함수는 배열의 모든 원소가 특정 조건을 만족하는지 확인할 때 사용할 수 있다.
some과 마찬가지로 every 함수의 리턴값도 새로운 배열이 아닌 boolean 이다.
배열을 순회하다 콜백 함수가 true를 리턴하지 않으면 순회를 종료하고 최종적으로 false를 리턴,
종료하지 않고 끝까지 순회에 성공하면 최종적으로 true를 리턴한다.
'JavaScript 기본' 카테고리의 다른 글
Array 함수 #5. sort (0) | 2022.03.03 |
---|---|
Array 함수 #4. reduce vs.forEach (0) | 2022.03.02 |
Array 함수 #3. 배열에 원소 추가,삭제 (2) | 2022.02.25 |
Array 함수 #1. 반복문 (0) | 2022.01.07 |
enum 클래스 다루기 (0) | 2021.06.16 |