React - 배열함수(ES6 forEach(), ES6 map(), reduce())

React - 배열함수 ( ES6 forEach(), ES6 map(), reduce() )

---

출처 : 

http://www.yes24.com/Product/Goods/87631428

Do it! 리액트 프로그래밍 정석 - YES24

 

 

이전 포스팅

React - 리액트에 필요한 자바스크립트 ES6 문법 (화살표 함수)

React - 리액트에 필요한 자바스크립트 ES6 문법 (클래스)

React - 리액트에 필요한 자바스크립트 ES6 문법 (변수 let, const)

React - 리액트에 필요한 자바스크립트 ES6 문법 (템플릿 문자열, 연산자)

 

 

 

ES6의 forEach() 함수

forEach() 함수의 유용함을 알아보기 위해 for문을 먼저 사용하여 비교해보겠습니다.

아래 예제는 쿼리 스트링 ['apple=10&banana=20&lemon=30'] 을 & 문자로 분리해서 객체에 담아 반환하도록하는 parse() 함수 입니다.

• 쿼리 스트링(Query String) 이란
  • http://localhost:3000?key=value&key=value
  • 쿼리 스트링은 위 처럼 URL에서 물음표 뒤에 작성합니다.
  • 추가적인 정보를 [key - value] 로 엮어서 서버에 전달합니다.
  • 추가적인 정보가 여러개 일 경우 & 문자로 분리합니다.

function parse(qs) {
	var queryStr = qs.substr(1); // querystring = 'apple=10&banana=20&lemon=30'
    var chunks = qs.split('&');
    var result = {};
    
    for(var i=0; i<chunks.length; i++) {
    	var parts = chunks[i].split('=');
        var key = parts[0]; // key = 'apple'
        var value = parts[1]; // value = '10'
        var result[key] = value; // result = { apple:'10' }
    }
    return result;
}

다시 위 예제를 살펴보면, for문을 이용하여 apple, banana, lemon과 10, 20, 30을 분리하는 것을 확인할 수 있습니다.

 

 

function parse2(qs) {
	const queryStr = qs.substr(1); //querystring = 'apple=10&banana=20&lemon=30'
    const chunks = queryStr.split('&'); // chunks = ['apple=10', 'banana=20', 'lemon=30']
    let result = {};
    
    chunks.forEach((chunk) => {
    	const parts = chunk.split('='); // chunk = 'apple=10' , parts = ['apple', '10']
        const key = parts[0]; // key = 'banana'
        const value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
        result[key] = value; // result = { banana: 10}
    });
    return result;
}

위 예제는 forEach() 함수를 적용한 코드입니다. 또한, 10, 20, 30을 문자열이 아닌 숫자로 반환하기 위한 코드도 추가했습니다. for문에서 처럼 반복문의 length와 순번(i++) 을 따로 변수에 저장하지 않아도 됩니다.

 

function parse3(qs) {
	const queryStr = qs.substr(1); //querystring = 'apple=10&banana=20&lemon=30'
    const chunks = queryStr.split('&'); // chunks = ['apple=10', 'banana=20', 'lemon=30']
    let result = {};
    
    chunks.forEach((chunk) => {
    	const [ key, value ] = chunk.split('='); // key = 'apple', value = '10'
        result[key] = value; // result = { apple: '10' }
    });
    return result;
}

위 코드는 key, value를 할당 방식으로 변환한 예제입니다. 코드를 더 간결하게 사용할 수 있습니다.

 

 

ES6의 map() 함수

forEach() 함수에서 [let, 가변 변수] 를 사용했는데, [const, 불변 변수] 로만 배열 코드를 작성하시려면 map() 함수를 사용하면 됩니다. map() 함수는 배열을 가공하여, 새로운 배열을 만들어내는 함수입니다. map() 함수는 결괏값을 바로 반환하므로 가변 변수를 사용하지 않아도 됩니다.

 

function parse4(qs) {
    const queryStr = qs.substr(1); // querystring = 'apple=10&banana=20&lemon=30'
    const chunks = queryStr.split('&'); // chunks = ['apple=10', 'banana=20', 'lemon=30']
    const result = chunks.map((chunk) => {
    	const [ key, value ] = chunk.split('='); // key = 'apple', value = '10'
    	return { key: key, value: value }; // { key: 'apple', value: '10' }
    });
    return result;
}

/*
* parse4('apple=10&banana=20&lemon=30') 실행 결과
*/
// result = [
//   { key: 'apple', value: '10' },
//   { key: 'banana', value: '20' },
//   { key: 'lemon', value: '30' }
// ];

 

 

reduce() 함수

forEach() 함수, map() 함수로 작성된 코드로 얻는 결괏값은 배열입니다. reduce() 함수를 작성된 코드로 얻는 결괏값은 객체입니다. 객체의 결괏값을 얻고 싶다면, reduce() 함수를 사용하면 됩니다. 

 

function parse5(qs) {
    const queryStr = qs.substr(1); // querystring = 'apple=10&banana=20&lemon=30'
    const chunks = queryStr.split('&'); // chunks = ['apple=10', 'banana=20', 'lemon=30']
    
    return chunks
    	.map((chunk) => {
        	const [ key, value ] chunk.split('='); // key = 'apple', value = '10'
            return { key, value }; // { key: 'apple', value: '10' }
    	})
        .
        reduce((result, item) => { // result = {}, item = { key: 'apple', value: '10' }
        	result[item.key] = item.value; // result = { apple: '10' }
            return result;
        }, {});
}



/*
* reduce() 함수 연산 과정
*/
// 순환 1회차 result: {} -> item: {key: 'apple', value: '10'}
// 순환 2회차 result: {apple: '10'} -> item: {key: 'banana', value: '20'}
// 순환 3회차 result: {apple: '10', banana: '20'} -> item: {key: 'lemon', value: '30'}
// 최종 반환값 result: {apple: '10', banana: '20', lemon: '30'}

위 예제에서 map() 함수의 반환 배열에는 [ {key:..., value:...} ] 구조로 구성된 객체들이 들어있습니다. reduce() 함수는 key를 key 값으로, value를 값으로 구성하는 객체로 반환합니다. 위 코드의 reduce() 함수 연산 과정을 참고해 주세요!