Array.reduce() 자세히 알아보기

JEON HAN BIT·2023년 3월 16일

JavaScript

javaScript

목록 보기

2/6

공부하게된 계기

배열 내장메소드 3대장이라 불리우는 forEach,map,reduce

forEach와 map은 사용법도 쉽고 배울 때 유스케이스가 확 와닿아 자주 사용했지만
reduce는 사용법도 그렇고 정이 안가고 어려워서 이악물고 외면 & 기피했었다.

그러던 와중 코테 사이트에서 타인의 풀이를 볼때면 reduce를 사용해 푸는데
답안이 엄청 간결하고 직관적인 것이었다. 그래서 찾아봄

MDN에 정의된 reduce()

reduce()
배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reduce의 사전적의미 : 축소하다 , 줄이다

✨배열 ⇒ 조작 => [배열or숫자or문자or불리언or객체] & 하나의 결과값으로 !

reduce 함수 구조

어떠한 값=배열.reduce(콜백함수,[초기값])

function 콜백함수 ( acc,cur ) {
	//...some codes
}

acc
콜백함수의 return 값을 누적한다.
초기값을 따로 설정하지 않으면 첫 순회때 배열의 첫번째 요소가 됩니다.
빈 배열에 reduce를 사용할경우 초기값 설정이 되어있지 않으면 에러발생함.

current
처리할 현재 요소

초기값
결국 얘가 결과값의 자료형이됨

예제1 ( 배열의 각 요소 더하기 )

const arr = [1,2,3,4]

let result = arr.reduce( (total,cur) => {
		return total+cur
} )

//결과 : 10
//초기값 설정 X

	total	cur
1번째 순회	1	2
2번째 순회	3	3
3번째 순회	6	4

예제2 ( 배열의 각 요소 붙이기 )

const arr = [1,2,3,4]

let result = arr.reduce( (total,cur) => {
		return total+cur
} , '')

//결과 : '1234'
//초기값 : ' ' 
//문자열+숫자 => 문자열

	total	cur
1번째 순회	‘ ‘	1
2번째 순회	‘1’	2
3번째 순회	‘12’	3
4번째 순회	‘123’	4

예제3 ( 이름과 직업 골라내기 )

const idList = [
	{
		name:'jane',
		age:40,
		job:'casher'
	},
	{
		name:'max',
		age:45,
		job:'student'
	},
	{
		name:'harry',
		age:23,
		job:'magician'
	},
] 

let result = idList.reduce( (total,cur) => {
		total[cur.name]=cur.job	
    	return total
} , {})

// 결과 : {jane: 'casher', max: 'student', harry: 'magician'}
// 초기값 : {}
// 빈 배열을 초기값으로 놓고,
// 순회마다 대괄호 표기법을 사용해 key와 value을 추가한 것

	total	cur
1번째 순회	{jane:’casher’}	jane객체
2번째 순회	{jane: 'casher', max: 'student'}	max객체
3번째 순회	{jane: 'casher', max: 'student', harry: 'magician'}	harry객체

예제4 ( 쿼리스트링 값을 객체로 만들기 )

const 쿼리를객체로만들어줌 = (qs) =>{
    const queryString = qs.substr(1);
    const queryArr = queryString.split('&')
		// ['userid=cute123', 'password=1234']
    const filteredData = queryArr.map((query)=>{
        return query.split('=')
    }) 
		
		// [ ['userid', 'cute123'],['password', '1234'] ]
    const result = filteredData.reduce((total,query)=>{
        const [key,value] = query 
        total[key]=value // total[userid] = 'cute123'
        return total
    },{})
		
    return result
}
쿼리를객체로만들어줌('?userid=cute123&password=1234')

// 결과 : {userid: 'cute123', password: '1234'}