[JavaScript] Map, Filter, Reduce

MAP()

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

 

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

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 : 순회 대상

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

 

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

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

// 학생 리스트
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를 반환한다.

 

 

Filter()

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

// 학생 리스트
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 }]

 

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

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

// 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 }]

 

Reduce()

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

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 : 순회 대상

 

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

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

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