[React JS] ES6의 3가지 배열 함수

■ foreach() 함수

* 반복문의 순번 또는 배열의 크기를 따로 변수에 저장하지 않고도 반복작업이 가능하다.

* 반환값이 없어도 된다.

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

// 결과 : 
// result = {banana: "10", apple: "20", orange: "30"}

---

■ map() 함수

* 각 배열 요소를 정의된 함수를 통해 변환한 결괏값들로 변환하고 새 배열을 반환한다.

* 반환값이 있어야 한다.

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

/*
결과:
result = [
  { key: 'banana', value: '10'},
  { key: 'apple', value: '20' },
  { key: 'orange', value: '30'}
];
*/

---

■ reduce() 함수

* 첫번째 요소부터 마지막 요소까지의 각 배열 요소의 형태를 가공하거나 변환하여 1개의 값(또는 객체)을 반환한다.

* 반환값이 있어야 한다.

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

/*
결과:
{banana: "10", apple: "20", orange: "30"}
*/