[JavaScript] map() 과 filter()

Array.prototype.map()

map()은 Array.prototype에 정의된 함수이다. 따라서, 배열 객체에서만 사용할 수 있다. map() 메서드는  배열의 각 요소를 순회하며 콜백 함수를 적용한 결과를 모아 새로운 배열을 반환한다. 이때, map()은 새로운 배열로 복사하여 반환하기 때문에 원본 배열에 영향을 주지 않는다.

map() 메서드의 기본형은 다음과 같다.

//정의된 배열 arr에 map() 메서드를 적용
let arr = [];

arr.map(function(currentValue[, index[, array]]) {
    // 실행할 함수 로직;
}[, thisArg]);

형태별 구문 형식

// 화살표 함수
map((element) => { /* … */ })
map((element[, index]) => { /* … */ })
map((element[, index[, array]]) => { /* … */ })

// 콜백 함수
map(callbackFn)
map(callbackFn[, thisArg])

// 인라인 콜백 함수
map(function (element) { /* … */ })
map(function (element[, index]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ })
map(function (element[, index[, array]]) { /* … */ }[, thisArg])

 ** 출처 : codingEverybody

map()의 매개변수

map() 메서드에 들어가는 매개변수로는 함수(function)과 객체(thisArg)가 있다.

 

1. 콜백 함수(function)

메서드 안의 함수(function)는 콜백 함수로 메서드를 사용하기 위한 필수 조건이다.
이 콜백 함수는 다음 세 개의 매개변수를 가질 수 있다.
   * currentValue : 필수요소, 현재 처리할 요소
   * index : 옵션, 현재 처리할 요소의 인덱스
   * array : 옵션, map 함수를 호출한 배열

currentValue는 필수로 가져야 하는 매개변수로, 이 매개변수를 통해 현재 요소에 접근할 수 있다.
index, 와 array는 선택 사항으로 필요할 경우 추가하여 사용하면 된다.

 

2. 객체(thisArg)

thisArg는 객체로, 콜백함수를 실행할 때, this로 사용할 객체이다. 
필요에 따라 사용하면 된다.

 

예시 코드

1. 배열에 로직 적용하기

 

const arr = [1, 2, 3, 4];
const arr2 = arr.map((number) => number * 2);

console.log(arr2); // 출력 : [2, 4, 6, 8]

 

2. 배열 요소가 객체일 경우

 

const users = [
   {name: "kim", age: 26},
   {name: "park", age: 34},
   {name: "lee", age: 21}
];
const names = users.map((user) => user.name};

console.log(names); // 출력 : ["kim", "park", "lee"]

 

 3. 원하는 요소만 필터링하고 변환하기

 

const score = [ "1:2", "2:1", "4:1", "2:4" ];
const win = score.map((element)=>{
    let arr = element.split(":");
    if(Number(arr[0]) > Number(arr[1])){
        return "win";
    }else{
        return "lose";
    }
})

console.log(win); //출력 : [ 'lose', 'win', 'win', 'lose' ]

 

 

+) map과 forEach의 차이점

map()은 각 요소를 순회한 뒤 반환할 때 새로운 배열을 생성한다.

하지만, forEach()는 반환값이 없고, 원본배열을 변경하거나 다를 배열에 값을 추가해야한다.

 

---

Array.prototype.filter()

filter() 메서드는 배열의 요소를 순회하면서 콜백함수를 사용하여 원하는 조건에 따라 필터링하는 함수이다.

또한 새로운 배열로 복사하여 반환하기 때문에 원본배열에 영향을 주지 않는다.   

매개변수로 들어가는 콜백함수에서 return true를 반환한 요소들을 모아 새로운 배열로 반환한다.

필터링 하고 싶은 요소들은 return 값을 false로 반환 해야한다.

기본형

//정의된 배열 arr에 filter() 메서드를 적용
let arr = [];

arr.filter(function(currentValue[, index[, array]]) {
    // 조건이 담긴 함수 로직;
}[, thisArg]);

형태별 구문 형식

// 화살표 함수
filter((element) => { /* … */ })
filter((element[, index]) => { /* … */ })
filter((element[, index[, array]]) => { /* … */ })

// 콜백 함수
filter(callbackFn)
filter(callbackFn[, thisArg])

// 인라인 콜백 함수
filter(function (element) { /* … */ })
filter(function (element[, index]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ })
filter(function (element[, index[, array]]) { /* … */ }[, thisArg])

 ** 출처 : codingEverybody

 

filter()의 매개변수

filter()의 매개변수로는 콜백함수(function)과 객체(thisArg)가 있다.

 

1. 콜백 함수(function)

메서드 안의 함수(function)는 콜백 함수로 메서드를 사용하기 위한 필수 조건이다.
이 콜백 함수는 다음 세 개의 매개변수를 가질 수 있다.
   * currentValue : 필수요소, 현재 처리할 요소
   * index : 옵션, 현재 처리할 요소의 인덱스
   * array : 옵션, map 함수를 호출한 배열

currentValue는 필수로 가져야 하는 매개변수로, 이 매개변수를 통해 현재 요소에 접근할 수 있다.
index, 와 array는 선택 사항으로 필요할 경우 추가하여 사용하면 된다.

 

2. 객체(thisArg)

thisArg는 객체로, 콜백함수를 실행할 때, this로 사용할 객체이다. 
필요에 따라 사용하면 된다.

 

예시코드

1. 배열의 중복 요소 제거하기

 

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

const uniqueNumbers = numbers.filter((element, index, arr) => {
    // 현재 요소가 이전에 등장하지 않은 경우만 true를 반환
    return arr.indexOf(element) === index;
});

console.log(uniqueNumbers); // 출력: [1, 2, 3, 4, 5]

 

 2. 객체 요소 필터링

 

const users = [
   {name: "kim", age: 26},
   {name: "park", age: 34},
   {name: "lee", age: 21}
];
const age = users.filter((user) => user.age < 30);
 
console.log(age); // 출력 : [ { name: 'kim', age: 26 }, { name: 'lee', age: 21 } ]

---

map()과 filter()의 차이점

두 메서드는 동일하게 배열의 모든 요소를 순회하고 새로운 배열을 반환하며, 그 형태가 비슷하기 때문에 혼동하기 쉽다.

하지만, 이 둘은 요소를 순회하는 목적과 처리하는 방법이 다르다.

 

배열의 길이 차이

map() 메서드는 배열의 각 요소를 변환하거나 가공하기 위해 사용된다.

때문에, 새로 생성된 배열의 길이가 원본 배열의 길이와 일치한다.

 

반면, filter() 메서드는 배열의 요소들 중 원하는 조건에 맞는 요소만 가져와 새로 생성하기 때문에,

반환하는 배열의 길이와 원본 배열의 길이가 다를 수 있다.

 

return 값 변환

map() 메서드는 각 요소를 변환하기 때문에, 반환값이 원본 배열의 요소와 다를 수 있다.

하지만, filter()메서드는 단순 조건에 맞는 요소들만을 불러오는 것이기 때문에, return 값을 변경할 수 없다.

 

위에서 사용했던 예시를 filter와 map을 함께 사용해 다시 비교해보았다.
filter는 조건에 부합했을 경우 해당하는 요소를, map은 요소의 결과값을 반환하는 것을 확인할 수 있다. 

const users = [
    {name: "kim", age: 26},
    {name: "park", age: 34},
    {name: "lee", age: 21}
 ];
 const age = users.filter((user) => user.age < 30);
 const age2 = users.map((user) => user.age < 30);
 
 console.log(age); // 출력 : [ { name: 'kim', age: 26 }, { name: 'lee', age: 21 } ]
 console.log(age2); // 출력 : [ true, false, true ]

조건식에 결과값을 걸면 어떻게 될까?
만약 아래처럼 조건식을 young과 old 둘다 걸 경우 결과적으로는 모든 결과에 반환값이 있다(true)것이므로 filter는 모든 요소를 반환하고 map은 입력한 리턴값을 반환하는 것을 볼 수 있다.

const users = [
    {name: "kim", age: 26},
    {name: "park", age: 34},
    {name: "lee", age: 21}
 ];
 const age = users.filter((user) => user.age < 30 ? "young" : "old");
 const age2 = users.map((user) => user.age < 30 ? "young" : "old");
 
 console.log(age); // 출력 : [ { name: 'kim', age: 26 }, { name: 'lee', age: 21 }, { name: 'lee', age: 21 } ]
 console.log(age2); // 출력 : [ 'young', 'old', 'young' ]​