[DEV] 04 - map (함수형프로그래밍 es06)

headerimg
함수형 프로그래밍과 javascript es6를 깊게 파보기.


map

Array.prototype.map()과 비슷한 map()이라는 함수를 만들어 이터레이션 프로토콜에 좀더 대해 느껴보자.

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

// Array.protortype.map() 보단 간단하지만 비슷한 일을한다.
const map = (func, iter) => {
  // 인자로 함수와, 이터러블을 받는다.
  let res = [];
  for(const a of iter){
    // 인자로 들어온 func()함수를 실행후 값을 res에 push한다.
    res.push(func(a));
  }
  // 만들어진 배열을 반환한다.
  return res;
}
/*
원래의 Array.prototype.map()은 인자값을 체크하고 iterable의 길이를 체크하는 등. 
훨신 더 복잡하다
*/

// name 
let names = map(p => p.name, products);
console.log(names)

// 특히 이 map 함수는 이터레이션 프로토콜을 따르기 때문에 nodeList에도 사용할 수 있다.


진짜 map 함수

let arr = [1,4,9];
let t1 = arr.map(a => a + 1); // [2, 5, 10];
let t2 = arr.map(Math.sqrt);  // [1, 2, 3];
console.log(arr); // [1, 4, 9]

mapcallback함수를 각각 요소에 대해 한번씩 순서대로 불러오고 그 함수들의 반환 값으로 새로운 배열을 만든다. Array.prototype.map()이다.

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

let reformatted = products.map((obj)=>{
  let newObj = {};
  newObj[obj.name] = obj.price;
  return newObj;
});
console.log(reformatted);

![imgG](/assets/img/post/functional/Screenshot_3.png){:.center}

var map = Array.prototype.map;
var a = map.call('Hello World', function(x) { return x.charCodeAt(0); });
// a는 이제 [72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
dataSet.map(function)
dataSet.map.call(dataSet, function)
[].map.call(dataSet, function)
Array.prototype.map.call(dataSet, function)

© 2018. All rights reserved.