forEach()
banana=10&apple=20&orange=30 이라는 문자열을 분리해서 객체로 담는 parse함수 코드입니다.
function parse(qs) {
var queryString = qs.substr(1);
var chunks = qs.split('&');
var result = {};
for(var i = 0; i < chunks.length; i++) {
var parts = chunks[i].split('=');
var key = parts[0];
var value = Number.inNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
result[key] = value;
}
return result;
}
위 코드를 ES6의 forEach() 함수를 사용하면 간단해집니다.
function parse(qs) {
var queryString = qs.substr(1);
var chunks = qs.split('&');
var result = {};
chunks.forEach((chunk) => {
const parts = chunk.split('=');
const key = parts[0];
const value = Number.isNaN(Number(parts[1])) ? parts[1] : Number(parts[1]);
result[key] = value;
});
return result;
}
키와 키값을 구조 분해 할당 방식으로 변호나하면 위의 코드가 더 간결해집니다.
function parse(qs) {
var queryString = qs.substr(1);
var chunks = qs.split('&');
var result = {};
chunks.forEach((chunk) => {
const[key, value] = chunk.split('='); // key = 'banana', value = '10'
result[key] = value; // result = { banana: '10'}
});
return result;
}
Map
forEach문은 let을 사용했다면, 불변 변수만을 사용하려면 map함수를 사용하면 된다.
function parse(qs) {
const queryString = qs.substr(1);
const chunks = qs.split('&');
const result = chunks.map((chunk) => {
const[key, value] = chunk.split('=');
return {key: key, value: value};
});
return result;
}
// 실행 결과
parse('banana=10&apple=20&orange=30') 실행 결과
result = [
{key: 'banana', value = '10'},
{key: 'apple', value = '20'},
{key: 'orange', value = '30'},
];
reduce
만약 배열을 객체로 변환하고 싶다면 reduce() 함수를 사용하면 된다.
reduce함수의 예제를 보자
function sum(numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
sum([1,2,3,4,5,6,7,8,9,10]); //55
reduce 함수를 보면 첫번째 인자에 변환 함수((total, num) => total + num)를, 두번째 인자에는 초기값 0을 전달한다. 그러면 reduce함수는 변환 함수의 첫번째 인자를 이전 결과값, 두번째 인자를 배열의 각 요소값(1,2,3..)으로 생각하여 순환 할당하면서 함수를 실행한다.
즉, 아래와 같은 순서로 연산이 진행된다.
순환 01회차 total: 0 num: 1
순환 02회차 total: 0 + 1 num: 2
순환 03회차 total: 0 + 1 + 2 num: 3
...
순환 10회차 total: 0 + 1 + ... + 9 num: 10
최종 반환값 total: 0 + 1 + ... + 10 num: 55
이 방법을 응용하면 배열을 얼마든지 다른 형태로 변환할 수 있습니다.
앞에서 map함수를 사용한 예제에 reduce함수를 응용하여 배열을 객체로 변환해봅시다.
배열을 객체로 변환하기 위해 reduce함수의 두번째 매개변수인 초기값에 원하는 자료형인 빈 객체를 입력했습니다.
function partse(qs) {
const queryString = qs.substr(1);
const chunks = qs.split('&');
return chunks
.map((chunk) => {
const [key, value] = chunk.split('=');
return {key, value};
})
.reduce((result, item) => {
result[item.key] = item.value;
return result;
}, {});
}
연산 과정
순환 01회차 result: {} item: {key: 'banana', value: '10'}
순환 02회차 result: {banana: '10'} item: {key: 'apple', value: '20'}
순환 03회차 result: {banana: '10', apple: '20'} item: {key: 'orange', value: '30'}
최종 반환값 result: {banana: '10', apple: '20', orange: '30'}
