[JavaScript] Array filter() 사용법과 map()과 차이점

 

filter()

"배열".filter(callBackFunction(currValue, index, array), newValue);

• filter()는 말 그대로 걸러주는 역할을 하는 함수입니다. 주로 특정 조건을 만족하는 새로운 배열을 필요로 할 때 사용하는 편입니다. 
• callBackFunction
  • 배열의 각 요소를 처리하는 콜백 함수이며, 배열의 요소를 전달 인자로 받고, 결과로 true 또는 false를 반환합니다. 단 true 를 반환하면 해당 요소가 필터링된 배열에 포함되고, false를 반환하면 해당 요소가 필터링된 배열에 포함되지 않습니다.  
• currValue: 원본 배열의 데이터 
• index : 현재처리중인 인덱스 
• array : 기존 배열 

const numbers = [1, 2, 3, 4, 5];
const result = numbers.filter(number => number % 2 == 0);

console.log(numbers); // 결과 :[1, 2, 3, 4, 5];

console.log(result); // 결과 :[2, 4]

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 7);

console.log(result); // 결과: ['exuberant', 'destruction']

var originDataList = 
	[{"param1":"Park", "param2":"01012341234"}
        ,{"param1":"Kim", "param2":"01022221234"}
        ,{"param1":"Choi", "param2":"01033331234"}
        ,{"param1":"Lee", "param2":"01044441234"}]

  customDataList1 = originDataList.filter(item => item.param1 === "Park");
  customDataList2 = originDataList.filter(result => result.param2 === "01012341234");
  
 console.log(customDataList1); //결과 : {param1: 'Park', param2: '01012341234'}
 console.log(customDataList2); //결과 : {param1: 'Park', param2: '01012341234'}

filter()를 활용한 중복 제거

const numbers = [2,3,4,5,5,4,10];

const newNumbers = numbers.filter((number, index, target) => {
    return target.indexOf(number) === index;
});

console.log(newNumbers); // 결과: [2, 3, 4, 5, 10]

다중 조건

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const filteredNumbers = numbers.filter(element => {
    return element % 2 === 0 && element < 5;
});

console.log(filteredNumbers); // 결과: [2, 4]

2차원 배열 필터링

// 2차원 배열 생성
const person = [
    ["Park", 25, "M"],
    ["Kim", 29, "F"],
    ["Choi", 22, "F"],
    ["Lee", 35, "M"],
    ["Son",32, "M"]
];

// 성별이 남자인 사람만 필터
const filteredStudents = person.filter(person => {
    return person[2] === 'M';
  });

console.log(filteredStudents); 
// 결과 : 
['Park', 25, 'M']
['Lee', 35, 'M']
['Son', 32, 'M']

---

 

[프로그래머스] "할 일 목록"

---

문제 설명

오늘 해야 할 일이 담긴 문자열 배열 todo_list와 각각의 일을 지금 마쳤는지를 나타내는 boolean 배열 finished가 매개변수로 주어질 때, todo_list에서 아직 마치지 못한 일들을 순서대로 담은 문자열 배열을 return 하는 solution 함수를 작성해 주세요.

---

나의 풀이

 

 

map()

"배열".map(callbackFunction(currenValue, index, array), thisArg)

• map()도 filter()와 비슷하게 callbackFunction을 실행한 결과를 가지고 새로운 배열을 만들 때 주로 사용합니다.
  • currentValue (필수 값): 처리할 현재 요소. 이 매개변수를 통해 현재 요소에 접근할 수 있습니다.
  • index (선택 사항): 처리할 현재 요소의 인덱스. index로 현재 요소의 인덱스에 접근할 수 있습니다.
  • array (선택 사항): map() 함수를 호출한 배열. 원본 배열에 접근할 때 사용합니다.
  • thisArg (선택 사항): function을 실행할 때 this로 사용할 객체. 이 매개변수는 필요에 따라 사용됩니다.

let arr = [1, 2, 3, 4, 5, 6];

for (let i = 0; i < arr.length; i++){
  arr[i] = arr[i] * 3;
}

console.log(arr); // [3, 6, 9, 12, 15, 18]


let modifiedArr = arr.map(function(element){
    return element % 2 == 0;
});

console.log(modifiedArr); // 결과 : [false, true, false, true, false, true]

 

2차원 배열 필터링

const person = [
    ["Park", 25, "M"],
    ["Kim", 29, "F"],
    ["Choi", 22, "F"],
    ["Lee", 35, "M"],
    ["Son",32, "M"]
];

const names = person.map(function(person) {
    return person[0];
});

console.log(names); // 결과 : ['Park', 'Kim', 'Choi', 'Lee', 'Son']

 

map() 과 filter()의 차이점

map()과 filter()는 매우 비슷하게 생겼다. 실제로 콜백함수의 인자도 거의 똑같고 생김새도 완전 비슷하다. 다만 각 함수의 리턴하는 기능이 다르다고 볼수 있다.

var testArray = [0,1,2,3,4,5];

testArray.filter(function(c){ return c <= 2; }); // [0, 1, 2]

testArray.map(function(c){ return c <= 2 }); // [true, true, true, false, false, false]

 

위와 같은 예제를 보면 filter()와 map()은 똑같은 코드임에 불구하고 결과값이 차이가 나는 것을 볼 수있습니다.

그 이유는 함수의 리턴하는 기능이 다르기 때문입니다.

 

map()의 콜백함수는 산술된 인자를 받아 배열을 만드는 역할을 하기 때문에 c <= 2를 받으면 그 산술 결과인 boolean값을 리턴해 배열을 만드는 것입니다.
​
filter()의 콜백 함수는 리턴값의 boolean이 true인 값만 가지고 배열을 만드는 역할을 하기 때문에 c <= 2에서 c값에 따라 저 조건식이 true면, c를 그대로 저장하는 것입니다.

 

var testArray = [0,1,2,3,4,5];

testArray.filter(function(c){ return c * 2; }); // [1, 2, 3, 4, 5]

testArray.map(function(c){ return c * 2 }); // [0, 2, 4, 6, 8, 10]

 

map() 은 산술된 값을 리턴합니다. 즉 c * 2를 산술해서 배열에 넣어 새로운 배열을 반환 합니다.
​
filter() 은 c * 2를 산술이 아닌 논리로 보기 때문에 c * 0 === 0 즉 0은 false이므로, 배열에서 빠지게 됩니다.

 

 

즉 map() 은 새로운 배열을 반환하고, filter() 는 조건에 부합하는 요소들을 모아 배열로 반환한다.

---

 

- https://juejin.cn/post/7114604944900128804

 

 

Reference

• Mdn web docs
• 모던 JavaScript
• Inpa Dev