[ES6] Array.prototype.map() 을 직접 구현해보자.

눈 감고도 쓰던 map 을 직접 구현해 본다면?

아래 예시 코드를 살펴보면,

const students = ['Kim', 'Han', 'Choi']
const studentsWithOrder = students.map((lastName, index) => ({ lastName, order: index }))

// studentsWithOrder = [
//   {
//     lastName: 'Kim',
//     order: 0,
//   },
//   {
//     lastName: 'Han',
//     order: 1,
//   },
//   {
//     lastName: 'Choi',
//     order: 2,
//   }
// ]
    

ES6 문법에 익숙한 분들이라면 아주 편안하게 코드를 읽으셨을 거에요.

보기에 굉장히 간단해 보이는 이 map 메서드를 그럼 직접 구현해보겠습니다!

map 함수가 하는일 정의하기

구현에 들어가기에 앞서 map 메서드가 하는 일을 먼저 정의하고 시작해야겠죠?

map 메서드가 하는 일(조건)

1. 배열의 각 요소를 '가공' 하는 함수와 가공할 iterable/iterator 를 인자로 받는다. (인자 2개)
2. 인자로 받은 함수의 return 값을 새로운 요소로 하는 배열을 만들어 반환한다.

정리하고 나니 생각보다도 더 간단하네요.

그럼 바로 정의한대로 구현에 들어가보도록 하겠습니다.
(혹시 iterable/iterator 에 대한 개념이 생소하게 느껴지신다면 구글링을 해보시거나 저의 글을 한 번 살펴보고 오시면 좋습니다.)

map 함수 구현

하나만 짚고 넘어가자면,
원래의 map 은 Array.prototype 객체 속한 함수(메서드)로써 구현되어 있는데 저는 그냥 함수로 구현해보도록 하겠습니다!

함수 인자 정의

function map(func, iter) {
  // func 변수에는 iterable/iterator 의 각 요소에 적용시킬 함수가 들어오고,
  // iter 변수에는 가공할 iterable/iterator 가 들어옵니다.
}

함수 구현

function map(func, iter) {
  // 가공된 요소들을 넣어줄 배열 선언
  const result = []
  
  // for ... of 구문을 통해 iterable/iterator 순회하며 각 요소를 가공하여 배열에 넣어줌
  for (let item of iter) {
    const processedItem = func(item)
    result.push(processedItem)
  }
  
  // 새롭게 구성된 배열 반환
  return result
}

구현부가 정말 간단하네요.

이제 작성한 코드를 테스트 해보겠습니다.

테스트

이제 구현한 함수를 테스트해보도록 할게요.

const numberArrayDoubled = map((number) => number * 2, [1, 2, 3])
const userAges = map((user) => user.age, [{ name: 'Kim', age: 20 }, { name: 'Han', age: 25 }])

console.log({ numberArrayDoubled }) // { numberArrayDoubled: [2, 4, 6]
console.log({ userAges }) // { userAges: [20, 25] }

우리가 늘 사용하던 map 메서드 처럼 동작하는 것을 확인할 수 있습니다.