map

const products = [
    {name: '반팔티', price: 15000},
    {name: '긴팔티', price: 20000},
    {name: '핸드폰케이스', price: 15000},
    {name: '후드티', price: 30000},
    {name: '바지', price: 25000}
  ]

<aside> 💡 위의 상품들의 이름이나 가격들을 따로 모아서 출력을 하는 경우 보통 아래와 같이 표현할 수 있을 것이다

</aside>

let names = []
for(const el of products) {
  names.push(el.name)
}
console.log(names) // [ '반팔티', '긴팔티', '핸드폰케이스', '후드티', '바지' ]

let prices = []
for(const el of products) {
  prices.push(el.price)
}
console.log(prices) // [ 15000, 20000, 15000, 30000, 25000 ]

• 함수형 프로그래밍에선 인자와 리턴값으로 소통하는 것을 권장하기 때문에 map을 아래와 같이 구현해볼 수 있다

const map = (iter) => {
  let res = []
  for (const el of iter) {
    res.push(el.price)
  }
  return res
}

console.log(map(products)) // [ 15000, 20000, 15000, 30000, 25000 ]

<aside> 💡 하지만 위와 같은 경우에는 추상화를 통한 재사용이 힘든 함수가 된다 변수로 받은 iter에서 추출하고 싶은 데이터를 직접 코딩해야 하기 떄문에 아래와 같이 추상화를 적용해주자

</aside>

• 재사용이 가능한 나이스한 함수가 됐다!

const map = (f, iter) => {
  let res = []
  for (const el of iter) {
    res.push(f(el))
  }
  return res
}

console.log(map((el) => el.price, products)) // [ 15000, 20000, 15000, 30000, 25000 ]
console.log(map((el) => el.name, products)) // [ '반팔티', '긴팔티', '핸드폰케이스', '후드티', '바지' ]

목차로 이동🚀

이터러블 프로토콜을 따른 map의 다향성

• html에서 우리는 아래와 같은 결과를 확인해볼 수 있습니다

<script>
  console.log(document.querySelectorAll('*'))
</script>

<aside> 💡

배열과 같은 결과를 받았으니 map을 통해서 순회해봅시다!

</aside>

<script>
  console.log(document.querySelectorAll('*').map(el => el))
</script>

• ?? 함수가 없다구요 ??