고차함수와 내장 메소드 만들기(언더바)

고차함수 (복습하기)

고차 함수(higher order function) 의 가장 큰 특징은 함수를 인자로 받는 것이다.
그렇기 때문에 함수의 형태로 리턴도 가능하다.

• 함수를 리턴하는 함수

• 함수를 인자로 받는 함수

함수에서 다른 함수의 인자로 전달받는 함수는 콜백함수 라고 한다. 고차함수가 콜백함수를 전달받게 되면 호출이 가능하게 된다.

ex. 1) 다른 함수를 인자로 받을 때

function Plus(num) {
	return num ++;
}


function plusNum(func, num) {
	return func(num);

}

// plusNum은 함수를 인자로 받고 있다. (고차함수)
//func가 그러면 plusNum의 콜백함수이다. 

let result = plusNum(plus, 7);
console.log(result); // 14

ex 2) 함수를 리턴할 때

function double(doubles) {
 return function(num) {
 	return num * dobles 
  }
}

//리턴에서 다른 익명 함수를 리턴하는 고차 함수 

let output = double(2)(6) // 12

console.log(output) // 12


//따로 변수에 할당 가능하다. 

const double1 =double(4)
result = double1(3)
console.log(result)// 12

자주 쓰이는 고차함수 메소드 (map, filter, reduce)

- map()

map()메소드는 새로운 배열로 리턴한다. 반복문처럼 배열의 요소를 다 돌면서 각각의 요소가 주어진 함수를 호출한 결과값을 모은다. 그렇기 때문에 처음 인자로 받은 배열과 결과값의 배열의 길이는 같다.

let arr1 = [1,2,3,4,5]

function plus(arr1){
	return arr1.map(el => el + 2)
}

let result = plus(arr1)
console.log(result) // [3, 4, 5, 6, 7]

언더바라는 내장 메소드를 만들어서 map의 기능 구현을 시켜본다.

먼저 each를 만들어서 탐색할 수 있게 메소드를 저장한다. 

_.each = function (collection, iteratee) {
  if(Array.isArray(collection)){
    for(let el = 0; el < collection.length; el++){
      iteratee(collection[el],el,collection)
    }
  }else{
    for(let key in collection){
      iteratee(collection[key],key,collection)
    }
  }
};

map에서는 each를 이용해 arr를 탐색하고 iteratee를 통해 결과값을 내보낸다.
 * iteratee는 함수의 인자로 전달되는 함수이므로 callback 함수

_.map = function (arr, iteratee) {
  let result = []
  _.each(arr, function(el){
    result.push(iteratee(el))
  })
  return result
};

- filter()

filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환한다.

function same(arr, alike) {
  return arr.filter(ele => ele === alike)
}

배열이 들어오면 filter로 arr의 요소와 alike의 요소의 일치하는 값만 리턴한다.

언더바로 구현

_.filter = function (arr, test) {
 let result = []
 _.each(arr, function(el){
   if(test(el)){
     result.push(el)
   }
  })
 return result 
}

- reduce()

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
누산기 (acc)/ 현재 값 (cur) /현재 인덱스 (idx) / 원본 배열 (src)를
인자로 가진다.

let arr = [1,2,3,4,5]


function add(arr) {    
  return arr.reduce((acc,cur) => {
    return acc+cur
  },0)  // ----> 이 부분이 초기값 :0
}

let result = add(arr)
console.log(result) // 15

언더바로 구현

initVal는 초기값이다. 


_.reduce = function (arr, iteratee, initVal) {
  if(initVal === undefined){
    initVal = arr[0]
    arr = _.slice(arr,1)
  }
  _.each(arr, function(el,idx){
    initVal = iteratee(initVal, el, idx, arr)
  })
  return initVal
};