React ES6 (4) - 배열 함수

배열 함수

• 기존 자바스크립트로 Query String을 문자를 기준으로 분리하여 객체에 담아 변환하는 사용 예제 :

  function func(a) {
      var queryString = a.substr(1);
      var divide = a.split('&');
      var result = {};
      
      for(var i = 0; i < divide.length; i++) {
          var part = divide[i].split('=');
          var key = part[0];
          var val = part[1];
          result[key] = val;
      }
      return result;
  }​

• 결과 :

└ 이 때, 3002, 25, 1997을 문자열로 분리한다.

---

• 3002, 25, 1997을 문자열이 아닌 숫자로 변환하기

  function func(a) {
      var queryString = a.substr(1);
      var divide = a.split('&');
      var result = {};
      
      for(var i = 0; i < divide.length; i++) {
          var part = divide[i].split('=');
          var key = part[0];
          var val = Number.isNaN(Number(part[1])) ? part[1] : Number(part[1]);
          result[key] = val;
      }
      return result;
  }

 

• 위 코드에서 forEach() 함수를 사용하여 더 간략하게 하기

  function func(a) {
      const queryString = a.substr(1);
      const divides = queryString.split('&');
      let result = {};
      
      divides.forEach((divide) => {
          const part = divide.split('=');
          const key = part[0];
          const val = Number.isNaN(Number(part[1])) ? part[1] : Number(part[1]);
          result[key] = val;
      });
      return result;
  }

 

• 위 코드를 키와 키값을 구조 분해 할당 방식으로 변환하여 더 간략하게 하기

  function func(a) {
      const queryString = a.substr(1);
      const divides = queryString.split('&');
      let result = {};
      
      divides.forEach((divide) => {
          const [ key, val ] = divide.split('=');
          result[key] = val;
      });
      return result;
  }​

  └ 가변 변수 let을 사용하였음

 

• ES6의 map() 함수 :
  • 불변 변수만을 사용하려면 map() 함수를 사용하면 됨
  • map() 함수는 각 배열 요소를 정의된 함수를 통해 변환한 결과값들로 새 배열을 반환
    

 

• map() 함수를 사용한 예제 :

  function func(a) {
      const queryString = a.substr(1);
      const divides = a.split('&');
      const result = divides.map((divide) => {
          const[key, val] = divide.split('=');
          return {key: key, val: val};
      });
      return result;
  }​

• 결과 :

└ map() 함수는 결과값을 바로 반환하므로 가변 변수를 사용하지 않아도 됨
    여기서 얻은 결과값은 객체가 아닌 배열임

---

 

• reduce() 함수 :
  • 배열을 객체로 변환할 때 reduce() 함수를 사용

 

• reduce() 함수를 사용한 예시 :

  function sum(num) {
      return num.reduce((total, number) => total + number, 0);
  }
  sum([1,2,3,4,5]);​

  └ reduce() 함수에서 첫 번째 인자에는 변환 함수를 두 번째 인자에는 초기값을 전달함
      첫 번째 인자를 이전 결과값으로 두 번째 인자를 배열의 각 요소값으로 생각하여 순환 할당함
      (초기값으로 전달한 0은 이전 결과값인 total에 해당됨)
  
• 결과 :

 

---

• map() 함수 + reduce() 함수 사용 예시 :

  function func(a) {
      const queryString = a.substr(1);
      const divides = a.split('&');
      return divides
          
      .map((divide) => {
          const[key, val] = divide.split('=');
          return { key, val };
      })
          
      .reduce((result, info) => {
          result[info.key] = info.val;
          return result;
      }, {});
  }

• 결과 :

└ 배열을 객체로 변환하기 위해 reduce() 함수의 두 번째 매개변수인 초기값에 빈 객체 {}를 사용함