map vs filter , reduce

map 과 filter의 차이를 한 글자로 설명한다면?

map은 배열을 순회하면서 콜백함수의 리턴값으로 각 요소의 값을 반환하지만
filter는 배열을 순회하면서 콜백함수의 리턴값이 참인 요소를 반환한다.
map filter 모두 원본을 훼손하지 않는다.

const oneTwoThree = [1,2,3]

let result = oneTwoThree.map((v)=>{
    console.log(v)
    return v
})

console.log(oneTwoThree) // [1,2,3]
console.log(result) // [1,2,3]
console.log(oneTwoThree === result) // false

result = oneTwoThree.map((v)=>{
    return v + 1
})

console.log(result) // [2,3,4]

result = oneTwoThree.map((v) => {
    if(v % 2 === 0){
        return '짝수'
    } else {
        return '홀수'
    }
})

console.log(result) // [ '홀수', '짝수', '홀수' ]

console.log(oneTwoThree) // 기존 배열을 수정하지 않음

reduce

우선 형태를 알아보자

arr.reduce((누적값,현재값,인덱스,arr) => {return ~},초기값)

reduce 함수는 누산기라고도 하는데 기존 map이나 filter가 동작하는 방식과는 다르게 누적값이라는 새로운 개념이 추가된다.

빠르게 코드로 살펴보자

const oneTwoThree = [8,20,30]

let result = oneTwoThree.reduce((acc,cur,idx)=>{
	console.log(acc,cur,i)
    return acc + cur
},0)

위 코드가 동작하는 방식은

1.초기값 0이 첫번째 acc 즉 누적값이 된다.

acc cur idx return (0,8,1,8)

2.누적값은 return값 즉 8이 되고 cur 은 20이 된다.

acc cur idx return (8,20,2,28)

3.누적값은 return값 즉 28이 되고 cur은 30이 된다.

acc cur idx return (28,30,2,58)

4.배열을 모두 순회했음으로 최종적으로 reduce의 리턴값은 58이 된다.

초기값을 지정해주지 않는 방식

우선 mdn사이트에서는 reduce 함수를 사용할 때 초기값을 지정해주지 않는 방식은 추천하지 않지만 , 그래도 알아두자 크게 차이는 없음

const oneTwoThree = [8,20,30]

let result = oneTwoThree.reduce((acc,cur,idx)=>{
    console.log(acc,cur,iddx)
    return acc + cur
})

1.초기값을 지정해주지 않으면 acc는 배열의 첫번째 인덱스가 된다.
그 이후 배열의 두번째 인덱스부터 순회 를 시작한다.
acc cur idx return (8 20 1 28)

2.나머지는 똑같이 동작한다.
acc cur idx return (28 30 2 58)

3.최종적으로 58 return

reduce 함수는 단순 덧셈이 아니다.

reduce 함수를 설명할 때 내가 위에서 설명한 덧셈 예제 코드가 많아서 나도
처음에는 단순 덧셈 구하는 함수인줄 알았지만 , filter,map등을 reduce로 대체할 수도 있고 , 생각보다 더 많은 걸 구현할 수 있음..

1.평균 구하기

const arr = [10,20,30]

let avg = arr.reduce((acc,cur,idx,{length})=>{
 return	idx === length - 1 ?  (acc+cur)/length   : acc + cur
},0)

2.최대값 구하기

const arr = [10,20,30]

let max = arr.reduce((acc,cur,idx)=>{
	return acc > cur ?  acc : cur   
},0)

3.중첩 구하기

우선 구현하기 전에 알아야 할 사전지식이 몇 가지 있음

3-1.js 의 falsy값 (false로 평가되는 값) 은
undefined,null,0,false,NaN,'' 이 있고 나머지는 모두 true로 평가된다.

3-2.OR(||)의 동작방식
왼쪽 피연산자가 'falsy'일 경우 , 오른쪽 피 연산자를 반환한다.
undefined || 0 -> 0

왼쪽 피연산자가 'truthy'일 경우 , 왼쪽 피 연산자를 반환한다.
'hi' || 0 -> 'hi'

3-3.객체의 key,value 조회

일반적인 객체 리터럴의 형태는 아래와 같음

const obj = {
	name:'john',
    age: 30
}

만약 obj 에서 name이라는 key의 value를 조회하고 싶을 때 2가지 방법이 있음

console.log(obj.name) // 'john'
console.log(obj['name']) // 'john'

obj.age = 31
console.log(obj) // { name: 'john', age: 31 }

const fruits = ['banana','apple','orange','orange','apple']

const value = fruits.reduce((acc,cur)=>{
	acc[cur] = (acc[cur] || 0) + 1
    return acc
},{})

console.log(value) // { banana: 1, apple: 2, orange: 2 }