[JavaScript] Map, Filter, Reduce

1. MAP()

배열에 접근해 콜백 함수를 통해 새로운 값으로 정의하고 신규 배열을 만들어 반환하는 함수로, 배열을 순회할 때 주로 사용된다.

 

사용 방법은 arr.map(() => {})이며, 새로운 변수에 저장하거나, log와 같은 이벤트 연결 혹은 UI를 보여줄 수 있다.

      

      

      

    
    

      <javascript />
    
const arr = [1, 2, 3]

// 배열 arr의 값을 2배로 곱한 새로운 배열 반환해 mapArr에 저장
const mapArr = arr.map(item => item*2)
console.log(mapArr) // [2, 4, 6]

 

map()의 매개 변수는 value, index, source가 차례로 오게되며, 각각 value는 각 요소의 값, index는 순서, source는 순회 중인 배열이며, 모든 매개 변수를 사용할 필요는 없다.(JS 문법)

• value : 요소 값
• index : 요소의 index
• source : 순회 대상

      

      

      

    
    

      <javascript />
    
const arr = [1, 2, 3]

arr.map((value, index, source) => {
    console.log(`value : ${value}, index : ${index}, source : ${source}`)
})

// value : 1, index : 0, source : 1,2,3
// value : 2, index : 1, source : 1,2,3
// value : 3, index : 2, source : 1,2,3

 

1.1. 이터러블에서 map() 사용하기

이터러블 객체에서 map()은 아래와 같이 생성하여 사용한다.

      

      

      

    
    

      <javascript />
    
// 학생 리스트
const students = [
    {name : "철수", age : 19},
    {name : "영희", age : 18},
    {name : "미영", age : 17},
]

// Map 함수 직접 생성
const map = (f, item) => {
    let res = []
    for(const a of item) res.push(f(a))
    return res
}

// Map 함수 사용
    
console.log(map(item => item.name, students)) // [ '철수', '영희', '미영' ]

 

함수 map은 어떤 조건으로 새로운 값으로 정의를 할 것인지에 대한 callback 함수과 순회할 이터러블를 매개변수로 받고, 새로운 배열 res를 반환한다.

 

 

2. Filter()

filter는 이름과 같이 데이터에서 특정한 조건을 만족하는 대상을 찾는 경우에 사용되며, 역시 배열에 접근해 조건을 평가 했을 때 true인 데이터가 모인 즉, 주어진 함수의 테스트를 통과 하는 모든 요소를 모은 신규 배열을 반환한다.

      

      

      

    
    

      <javascript />
    
// 학생 리스트
const students = [
    {name : "철수", age : 19},
    {name : "영희", age : 18},
    {name : "미영", age : 17},
]

// Filter 함수 사용
const data = students.filter(item => item.age>17)
console.log(data) // [{ name: '철수', age: 19 }, { name: '영희', age: 18 }]

 

2.1. 이터러블에서 filter() 사용하기

이터러블 객체에서 filter()는 아래와 같이 생성하여 사용한다.

      

      

      

    
    

      <javascript />
    
// Filter 함수 직접 생성
const filter = (f, item) => {
    const res = []
    for(const a of item) f(a) && res.push(a)
    return res
}

// 학생 리스트
const students = [
    {name : "철수", age : 19},
    {name : "영희", age : 18},
    {name : "미영", age : 17},
]

// Filter 함수 사용
const filterStudent = filter(item => item.age>17, students)
console.log(filterStudent) // [{ name: '철수', age: 19 }, { name: '영희', age: 18 }]

 

3. Reduce()

배열를 순회하면서, 리듀서(reducer) 함수를 실행하고, 하나의 결과를 반환하는 함수다.

      

      

      

    
    

      <javascript />
    
const arr = [1, 2, 3]
const sum = arr.reduce((total, val) => total + val, 0)
console.log(sum) // 6

Reduce()의 매개 변수는 total, value, index, source가 차례로 오게되며, 각각 total은 누적값, value는 현재값, index는 순서, source는 순회 중인 배열이며, 모든 매개 변수를 사용할 필요는 없다.(JS 문법)

• total : 누적 값
• value : 현재 값
• index : 요소의 index
• source : 순회 대상

 

3.1. 이터러블에서 filter() 사용하기

이터러블 객체에서 filter()는 아래와 같이 생성하여 사용한다.

      

      

      

    
    

      <javascript />
    
const reduce = (f, acc, item) => {
    for(const a of item){
        acc = f(acc, a)
    }
    return acc
}

const add = (a,b) => a + b

const reduceValue = reduce(add, 0, [1, 2, 3, 4, 5])
console.log(reduceValue) // 15