아래 예시 코드를 살펴보면,
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
메서드가 하는 일(조건)
- 배열의 각 요소를 '가공' 하는 함수와 가공할 iterable/iterator 를 인자로 받는다. (인자 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
메서드 처럼 동작하는 것을 확인할 수 있습니다.