[ES6] 배열 함수 forEach , map , reduce

2020.09.21 - [웹 프론트엔드/자바스크립트] - [ES6] 프로토타입 prototype에서 class 클래스로

 

---

 이번 포스팅을 쓸까 말까 고민했습니다. ES6 이전 버전에도 이미 배열 함수는 있었고 ES6에서도 크게 다르지 않기 때문입니다. 하지만 글의 카테고리가 자바스크립트인 만큼, 배열 관련 글은 빠질 수가 없기에 간단히라도 집고 넘어가 보겠습니다. 예시로는 URL의 Query String 형식 문자열을 파싱 하는 것으로 해보겠습니다.

 

// 웹 주소에 포함된 이름=나이 정보
var queryString = "kim=18&lee=35&park=29";

// 쿼리 스트링 파싱 함수
function queryStringParse(str) {
  var list = str.split("&");
  var result = {};
  for (var i = 0; i < list.length; i++) {
    var obj = list[i].split("=");
    var key = obj[0];
    var val = obj[1];
    result[key] = val;
  }
  return result;
}
console.log(queryStringParse(queryString)); // {kim: '18', lee: '35', park: '29'}

 

먼저 가장 기본적인 방법으로 구현해봤습니다. 자바스크립트를 조금이라도 아시는 분은 근방 눈에 들어오실 겁니다.

그럼 이번에는 가장 자주 사용하는 forEach, map, reduce 배열 함수를 이용해 보겠습니다. 설명도 주석으로 합니다!

 

// 웹 주소에 포함된 이름=나이 정보
const queryString = "kim=18&lee=35&park=29";

// forEach 함수 사용
function queryStringParse_forEach(str) {
  const list = str.split("&");
  let result = {};
  // 카운드 동작이 필요 없음
  list.forEach((i) => {
    const obj = i.split("=");
    const key = obj[0];
    const val = Number(obj[1]); // 나이를 숫자형으로 변경
    result[key] = val;
  });
  return result;
}
console.log(queryStringParse_forEach(queryString)); // {kim: 18, lee: 35, park: 29}

// map 함수 사용
function queryStringParse_map(str) {
  const list = str.split("&");
  // 결과값으로 새로운 배열을 반환
  const result = list.map((i) => {
    const [key, val] = i.split("=");
    return { name: key, age: Number(val) }; // 배열에 새로운 객체 넣기
  });
  return result;
}
console.log(queryStringParse_map(queryString));
/*
(3) [{…}, {…}, {…}]
0:{name: 'kim', age: 18}
1:{name: 'lee', age: 35}
2:{name: 'park', age: 29}
length:3
*/

// reduce 함수 사용
function queryStringParse_reduce(str) {
  const list = str.split("&");
  return (
    list
      // 배열 형태의 리스트를
      .map((i) => {
        const [key, val] = i.split("=");
        return { name: key, age: Number(val) };
      })
      // 다시 객체(지정한) 형태로 변환
      .reduce((result, obj) => {
        result[obj.name] = Number(obj.age);
        return result;
      }, {}) // 두번째 인자가 원하는 자료형
  );
}
console.log(queryStringParse_reduce(queryString)); // {kim: 18, lee: 35, park: 29}

 

코드에 조금씩 변화를 주면서 총 4가지 방법을 알아봤습니다. 단순한 for동작은 카운트 처리가 들어가지만 대신에 순차적인 i 값을 사용할 수 있고, forEach는 인덱스 오류에서 안전하며, map은 새로운 배열 형태로 사용 가능합니다. 마지막 reduce는 두 번째 인자로 초기값이나 다양한 자료형을 지정할 수 있어 변환이 자유롭습니다.

 

그럼 상황에 맞게 선택은 여러분이!

오늘은 진짜 참 쉽죠?

 

---

2020.10.09 - [웹 프론트엔드/자바스크립트] - [ES6] 커링 함수를 조합해서 사용하기 compose

[ES6] 커링 함수를 조합해서 사용하기 compose