30일차, underbar

2021. 08. 30 월요일

1. Today's Key points!🔑

• 고차함수
• callback
• Underbar

2. 정리해보자!🧹

고차함수는 다른 함수를 인자로 전달받을 수 있다. 고차함수의 인자로 전달되는 함수를 콜백 함수(Callback function)이라고 한다. 고차함수는 다른 함수를 리턴할 수 있다.

오늘은 배열, 객체를 다루는 라이브러리 Underbar를 구현하면서 자바스크립트 내장 메소드가 어떻게 callback 함수를 활용하는지 학습했다. 그래서 바로 스프린트 과제를 복기해보고자 한다.

3. Sprint과제 복기!🧐

👉🏻_.each

_.each = function (collection, iteratee) { //collection은 배열 또는 객체이다. iteratee는 함수이다.
  if(Array.isArray(collection)){ //collection이 배열이면
    for(let i = 0; i < collection.length; i++){ // iteratee 함수에 배열의 요소, 인덱스, 배열 그자체를 전달해준다.
      iteratee(collection[i], i, collection);
    }
  }
  else { // 객체이면
    for(let key in collection){ //객체의 값, 속성, 객체 그자체를 전달한다.
      iteratee(collection[key], key, collection);
    }
  }
};
//forEach메소드는 for문 처럼 반복해주는 메소드이다.

👉🏻._indexOf

_.indexOf = function (arr, target) { //배열과 인덱스값을 찾고싶은 요소를 입력받는다.
  let result = -1; //못찾으면 -1을 리턴하기위해 초기값을 -1로 할당. 그리고 중복되는 요소가 있으면 가장 앞의 인덱스를 리턴하기 위함.

  _.each(arr, function (item, index) {
    if (item === target && result === -1) { //배열안의 요소와 찾고싶은 요소가 일치하고, 찾은 요소가 첫번째 요소이면
      result = index; //result에 index값 할당.
    }
  });

  return result;
};
//왜 가장 앞의 인덱스를 찾게되는 것인가? 
//위의 조건문에서 배열안의 item과 찾고자하는 target이 처음 일치했을 때, 처음 result값은 -1이기 때문에 조건문에 들어갈 수 있게되고, 
//해당하는 인덱스값이 result에 할당이 되서 더이상 -1이 아니게 되므로 item과 target이 일치한다 하더라도 더이상 조건에 들어갈 수 없게된다. 
//그래서 가장 앞의 인덱스가 리턴되는 것이다.

👉🏻_.filter

_.filter = function (arr, test) { //배열과 boolean값을 리턴하는 함수 즉, test함수를 입력받는다. 
  const newArr = []; 
  _.each(arr, function(element){ 
    if(test(element)){ //test가 true이면 
      newArr.push(element); //해당하는 요소를 newArr에 담아준다. 
      } 
    }) 
  return newArr;
}

👉🏻_.uniq

_.uniq = function (arr) { //배열을 입력받으면 중복되는 요소를 없애주는 메소드이다. 
  const newArr = []; // 중복된 요소를 제거한 것만 담기위한 배열
  _.each(arr, function(element){ 
    if(_.indexOf(newArr, element) === -1){ // 배열에 중복되는 요소가 없으면 
      newArr.push(element); // 그 요소를 newArr에 넣어준다. 
    } 
  }) 
  return newArr; 
};

👉🏻_.map

_.map = function (arr, iteratee) {//배열과 배열에 처리해줄 함수를 입력받는다. 
  const newArr = []; 
  _.each(arr, function(element){ 
    newArr.push(iteratee(element)); //처리해줄 함수에 요소를 넣어 결과값을 newArr에 넣어준다. 
  }) 
  return newArr; 
};

👉🏻_.reduce

_.reduce = function (arr, iteratee, initVal) { //배열, 함수, 초기값 
  let result = initVal; //reduce함수는 결국 결과값에 값이 계속 누적이 된다. 초기값을 입력받은 초기값으로 설정 
  _.each(arr, function(item, idx, items){ 
    if(initVal === undefined && idx === 0){ //입력받은 초기값이 없을경우, 
      result = item; //배열의 첫번째 요소를 할당한다. 
    } 
    else { //그 외에는 
      result = iteratee(result, item, idx, items); //result에 결과값을 중첩시켜준다. 
    } 
  }); 
  return result; 
};