Javascript - 만들면서 배우는 map 함수의 정의와 사용 방법

이번 글에서는 자바스크립트의 map() 함수를 만들어보겠습니다. 이전에 filter()를 구현했던 것과 같이 map()을 직접 정의해보면서 map() 함수에 대해 알아가 보도록 하겠습니다. map() 함수도 filter() 함수처럼 구현하는 내용이 어렵지 않기 때문에 글 내용을 따라 코드를 작성해보시기를 추천드립니다.

map()를 사용하는 이유

 map() 함수는 새로운 자료구조 혹은 객체를 정의할 때 사용하는 함수입니다. 객체보다는 주로 새로운 자료구조를 필요로 하는 경우에 많이 사용한다는 점을 알아주세요. 예를 들어 성과 이름으로 나누어진 사용자 데이터가 주어졌을 때 성과 이름을 합친 사용자 데이터 사용해야 하는 상황이 발생한 경우에 map()을 사용할 수 있습니다. map()은 주어진 값을 새로운 값으로 구성하는 함수라고도 말할 수 있습니다. 선언적인 프로그래밍 방식으로 이 문제를 해결한다면 for문 혹은 while문을 사용해서 다음과 같은 방식으로 코드를 작성할 수 있습니다.

const users = [
  { firstName: 'a', lastName: 'A' },
  { firstName: 'b', lastName: 'B' },
  { firstName: 'c', lastName: 'C' },
  { firstName: 'd', lastName: 'D' },
  { firstName: 'e', lastName: 'E' },
  { firstName: 'f', lastName: 'F' },
  { firstName: 'g', lastName: 'G' },
];

const result = [];

for (let i = 0; i < users.length; i++) {
  const user = users[i];
  result.push(`${user.firstName}_${user.lastName}`);
}

console.log(result);

 map()를 적용하면 아래와 같이 코드를 작성할 수 있습니다.

const users = [
  { firstName: 'a', lastName: 'A' },
  { firstName: 'b', lastName: 'B' },
  { firstName: 'c', lastName: 'C' },
  { firstName: 'd', lastName: 'D' },
  { firstName: 'e', lastName: 'E' },
  { firstName: 'f', lastName: 'F' },
  { firstName: 'g', lastName: 'G' },
];

const result = users.map(user => `${user.firstName}_${user.lastName}`);

console.log(result);

 자바스크립트 배열 객체가 가지고 있는 map() 함수를 적용하면 예제 코드처럼 쉽게 코드 라인 수를 줄일 수 있고 가독성이 좋은 코드를 만들 수 있습니다. 간단하지만 예제를 통해 map() 함수를 사용하는 코드를 확인해보았습니다. 그럼 map() 함수를 사용하는 이유와 장점을 확인했으니 map() 함수를 구현하는 방법을 알아보도록 하겠습니다.

map() 함수를 만들어보자

 map() 함수를 만드는 방법은 쉽습니다. 막연하게 어렵다고 생각해서 만들어본 적이 없을 뿐 구현한다면 filter()처럼 어렵지 않게 구현할 수 있습니다. 그럼 본격적으로 map() 함수를 만들어보겠습니다.

function _map(array, mapper) {
  const arrayLength = array == null ? 0 : array.length;
  const result = [];

  for (let i = 0; i < arrayLength; i++) {
    result.push(mapper(array[i]));
  }
  return result;
}

 map() 함수는 원천 데이터 대상(array)과 값 재정의 방법(mapper)을 사용해 구현할 수 있습니다. 여기서 값을 재정의하는 방법(mapper)은 일급 함수입니다. 아직 일급 함수에 대한 개념을 정리한 글이 없어서 자세하게 설명드릴 수 없지만 간단히 이야기하면 일급 함수는 함수가 값으로 다루어지는 개념을 이야기합니다. 또한 예제 코드를 통해 정의한 map() 함수는 함수를 인자로 받아 사용하기 때문에 고차 함수가 된다는 점도 알아두시면 좋아요. map()의 구현에서 주의 깊게 볼 부분은 재정의 방법(mapper)을 인자로 받아서 사용한다는 점입니다. map을 사용하는 사람은 값의 구현 방법만 정의해서 인자로 전달하면 반복문(while문이나 for문)을 사용하지 않고 새롭게 정의된 데이터 목록을 얻을 수 있습니다. 

 

 이 글에서 정의한 예제 코드에서는 map() 함수의 옵션 부분까지 구현하지 않았습니다. MDN에서 정의한 map 사양과 동일하게 구현하면 좋지만 옵션은 학습에 불필요하다고 생각했기 때문이에요.

Lodash의 map() 함수

Lodash - map()

 위에서 캡처 내용은 Lodash에서 정의한 map()의 구현 부분입니다. while문을 사용해 map()를 구현 한 방법이 궁금하시다면 이 링크를 확인해보세요.

끝맺음

_map(users, user => `${user.firstName}_${user.lastName}`);
users.map(user => `${user.firstName}_${user.lastName}`);

 

 filter() 구현에 관한 글의 마지막까지 보고 오신 분이라면 이미 고민해보신 부분입니다. 예제 코드에서 사용한 map() 함수들을 나란히 놓고 보면 함수를 조합해서 사용하는 경우와 객체가 가진 기능을 사용하는 경우에 차이가 있다는 부분을 알 수 있습니다. 끝으로 이 차이점이 가지는 각각의 장단점을 고민해보면 좋을 것 같네요.

 

 이 글에서 사용한 코드는 Github 저장소를 통해서도 제공합니다. filter()를 활용하는 방법에 대해서도 정리한 map() 함수의 활용 방법 글이 있습니다.