<React 파헤치기-07> ES6주요문법 - 5. 배열함수(foreach, map, reduce)

foreach

for이 for(int i =0; i<str.length; i++) 의 형태로 쓰인 것과 비교했을 때 i++과 str.length를 따로 선언하는 과정을 생략할 수 있다.

function parser(qs){
    const queryStr = qs.substr(1); //queryString = "vanilla=10,mango=15,matcha=20"
    const splitedStr = queryString.split(','); //splitedStr = "vanilla=10mango=15matcha=20"
    let result = {};
    splitedStr.forEach((str)=>{
    	const [key, value] = str.split('=');
        result[key]=value; // result = { 'vanilla' : '10' }
	});
    return result;
}

//  result = {
//	'vanilla' : '10',
//	'mango' : '15' },
//	'matcha' : '20' }
//  };

 

map

foreach는 let을 이용해 result를 선언하였다. 불변 변수인 const 를 사용하려면 map을 이용할 수 있다.

map() 은 각 배열 요소를 정의된 함수를 통해 새배열을 반환한다. 예시를 통해 살펴보자.

 

function parser(qs){
    const queryStr = qs.substr(1); //queryString = "vanilla=10,mango=15,matcha=20"
    const splitedStr = queryString.split(','); //splitedStr = "vanilla=10mango=15matcha=20"
    let result = splitedStr.map((str)=>{
    	const [key, value] = str.split('=');
        return { key : key , value : value }; //{ key:'vanilla', value:'10' }
	});
    return result;
}
//  result = [
//	{ key : 'vanilla', value : '10' },
//	{ key : 'mango', value : '15' },
//	{ key : 'matcha', value : '20' }
//  ];

 

reduce

reduce 함수는 처음 접했을 때는 낯설어 이해가 필요했다. 기본 형태와 예제를 먼저 확인하고 넘어가보자.

 

기본 형태

function testReduce(array){
	return array.reduce((result, item)=> formula, initValue);
}

reduce는 foreach, map과 마찬가지로 배열과 같은 리스트를 순회한다.

매개변수로 전달된 리스트의 각 요소가 item이다.

formula에는 reduce함수 내에서 실행될 계산식 등이 들어가고, initValue에는 초기값을 적어준다.

result는 formula를 통해 계산된 값이 들어가는 '이전 결괏값'으로 reduce함수가 순회를 1번 했을 때 result의 값은 initValue가 된다.

말로 설명하기가 역시 쉽지 않다. 예제로 알아보자.

 

예제

function sum(numbers){ // numbers = [1,2,3,4,5,6,7,8,9,10]
	return numbers.reduce((total,num)=>total+num,0);
}

	reduce((total, num) => total + num, 0)	total	num
순환 1회차	( 0, 1 ) => ( 1, 1 )	1	1
순환 2회차	( 1, 2 ) => ( 3, 2 )	0+1+2	2
순환 3회차	( 3, 3 ) => ( 6, 3 )	0+1+2+3	3
순환 4회차	( 6, 4 ) => ( 10, 4 )	0+1+2+3+4	4
. . .	. . .	. . .	. . .
순환 10회차	( 0, 1 ) => ( 55, 10 )	0+1+2+3+4+5+6+7+8+9+10 = 55	10

 

-> 순환 n회차의 total에는 순환 n-1회차의 total+num이 전달된다.

 

 

map, reduce함수를 사용하여 배열을 객체로 변환하기

function parser(qs){
    const queryStr = qs.substr(1); //queryString = "vanilla=10,mango=15,matcha=20"
    const splitedStr = queryString.split(','); //splitedStr = "vanilla=10mango=15matcha=20"
    return splitedStr
    .map((str)=>{
    	const [key, value] = str.split('=');
        return { key : key , value : value }; //{ key:'vanilla', value:'10' }
	}) 
    .reduce((result, item) => {
    	result[item.key] = item.value;
    	return result;
    },{});
}

// map 결괏값 : [{key:'vanilla', value:'10'},{key:'mango', value:'15'},{key:'matcha', value:'20'}];

	reduce((result, item) => {...},{})	result	item
순환 1회차	({}, {key:'vanilla', value:'10'}) => {...},{key:'vanilla', value:'10'}	{}	key:'vanilla', value:'10'
순환 2회차	( {'vanilla' : '10'},  {key:'mango', value:'15'}) => {...},{key:'mango', value:'15'}	{'vanilla' : '10'}	key:'mango', value:'15'
순환 3회차	( { 'vanilla' : '10','mango' : '15'}, {key:'matcha', value:'20'} ) => {...},{key:'matcha', value:'20'}	{ 'vanilla' : '10', 'mango' : '15'}	key:'matcha', value:'20'
최종 parser 함수 return값	{ 'vanilla' : '10', 'mango' : '15', 'matcha' : '20' }	-	-