S2) Unit3. [실습] Underbar

📣  js 메서들을 직접 구현해보자

➰ 구현하면서 헷갈렸거나 헤맸던 메서드들만 정리

 

 

1️⃣ reduce

➰ 배열을 순회하며 각 요소에 iteratee 함수를 적용한다.

➰ 그 결과값을 계속 누적한다.

➰ 최종적으로 누적된 결과값을 리턴한다.

➰ iteratee(acc, ele, idx, arr) -> 차례대로 누적값, 데이터, 접근자, collection

_.reduce = function (arr, iteratee, initVal) {
  // TODO: 여기에 코드를 작성합니다.
  let result = initVal;

  _.each(arr, function(ele, idx, arr){
    if(result === undefined){
      result = arr[0];
    }
    else {
      result = iteratee(result, ele, idx, arr);
    }
  });

  return result;
};

➰ result : 누적할 변수
➰ each로 배열에 있는 요소를 하나씩 돈다.
➰ 함수 매개변수로 initVal이 주어지지 않았다면 undefined이므로 배열의 첫번째 요소를 초기값으로 준다.
➰ 초기값이 있다면, 그 초기값을 iteratee 누적값으로 준다.
➰ iteratee 에 계속 result를 주고, 그 값을 다시 result에 할당하기 때문에 값이 계속 누적된다.

 

2️⃣ once

➰ 콜백함수를 한번만 호출하는 함수를 리턴한다.

➰ once가 리턴하는 함수를 여러 번 호출해도 콜백함수는 한 번 이상 호출되지 않는다.

_.once = function (func) {
  // TODO: 여기에 코드를 작성합니다.
  let isCalled = false;
  let result;

  return function () {
    // TIP: arguments 키워드 혹은, spread operator를 사용하세요.
    if(isCalled === false){
      result = func(...arguments);	//arguments는 콜백함수의 인자
      isCalled = true;
    }
    return result;
  };
};

➰ 콜백함수가 호출되면 isCalled 를 true로 바꿔서 더 이상 호출되지 않게 한다.

 

3️⃣ defaults

➰ 여러 개의 객체를 입력받아, 순서대로 객체를 결합한다.

➰ 첫번째 객체를 기준으로 이미 있는 속성은 덮어쓰지 않는다.

➰ 최종적으로 속성이 추가 된 첫번째 객체를 리턴한다.

_.defaults = function (obj, ...rest) {
  // TODO: 여기에 코드를 작성합니다.
  _.each(rest, function(obj2){
    for(let key in obj2){
      if(obj.hasOwnProperty(key) === false){
        obj[key] = obj2[key];
      }
    }
  });

  return obj;
};

➰ 객체가 몇개 들어올지 모르니 spread로 인자를 받아온다.
➰ 들어온 객체를 each로 하나씩 돌아주고, 각 객체의 key를 for문으로 돌아준다.
➰ hasOwnProperty(key) 함수는 객체가 key를 가지고 있는지 여부를 리턴해준다.
➰ 만약 obj2에 있는 key가 obj에는 없다면 추가해준다.

 

4️⃣ zip

➰ 여러 개의 배열을 입력받아, 같은 index의 요소들을 묶어 배열로 만든다.

➰ 최종적으로 리턴되는 배열의 각 요소의 길이는 입력으로 전달되는 배열 중 가장 긴 배열의 길이로 통일한다.

_.zip = function (...rest) {
  // TODO: 여기에 코드를 작성합니다.
  let result = [] ;
  let maxLength = 0;

  _.each(rest, function(arr){
    if(arr.length > maxLength){
      maxLength = arr.length;
    }
  });

  for(let i=0; i<maxLength; i++){
    let addArr = [];
    _.each(rest, function(arr){
      if(arr[i] === undefined){
        addArr.push(undefined);
        }
      else {
        addArr.push(arr[i]);
      }
    });
    result.push(addArr);
  }
  return result;
};

➰ 각 index 값을 묶은 일차원 배열을 다시 다른 배열에 넣어주는 형식으로 구현했다.
➰ 입력으로 들어온 배열 중 가장 긴 길이를 maxLength에 넣어주고, for문을 maxLength까지 순회한다.
➰ 입력으로 들어온 배열을 each로 하나씩 순회한다.
➰  만약 길이가 작아서 undefined이라면 추가할 배열에도 undefined를 넣어준다.
➰ undefined이 아니라면 그 값을 추가할 배열에 넣어준다.
➰ for문이 끝날 때마다 addArr을 result에 넣어주고, addArr은 다시 초기화해준다.

 

5️⃣ sortBy

➰ 각 요소에 함수 transform을 적용하여 얻은 결과를 기준으로 정렬한다.

➰ transform이 주어지지 않은 경우 배열 요소의 값을 기준으로 정렬한다.

➰ order가 주어지지 않거나 1인 경우 오름차순, -1인 경우 내림차순으로 정렬한다.

_.sortBy = function (arr, transform, order) {
  if(transform === undefined){
    transform = _.identity;
  } 
  if(order === undefined){
    order = 1;
  }

  arr = [...arr];

  if(typeof arr[0] === 'string'){
    if(transform !== _.identity){
      arr.sort(function(a, b){
        if(order === 1){
          return transform(a) - transform(b);
        }
        else if(order === -1){
          return transform(b) - transform(a);
        }
      });
    }
    else{
      if(order === 1){
        arr = arr.sort();
      }
      else if(order === -1){
        arr = arr.sort().reverse();
      }
    }
  }

  else{
    arr.sort(function(a, b) {
    a = transform(a);
    b = transform(b);


    if(order === 1){
      return a - b;
    }
    else if(order === -1){
      return b - a;
    }
    });
  }
  return arr;
};

➰ 더 깔끔하게 구현할 방법이 있을 것 같은데.....
➰ 배열 요소가 string일 경우 && transform이 주어지지 않은 경우에는 sort()로 바로 정렬 가능하다.
➰ string이 아닐 경우(number일 경우), sort함수는 문자열을 기준으로 정렬하기 때문에 콜백 함수로 조건을 주어야 한다.

 

6️⃣ memoize

➰ 콜백함수에 메모이제이션을 적용한다.

➰ 메모이제이션 : 이미 해결한 문제는 다시 풀지 않는 기법

➰ 앞서 진행했던 연산 결과를 저장해두고 같은 연산이 들어온 경우 저장된 결과를 리턴해준다.

_.memoize = function (func) { // 캐시기능?
  // TODO: 여기에 코드를 작성합니다.
  let memo = {};  // 전 실행 값 저장하는 곳

  return function(...arguments){  //func 매개변수로 뭐가 들어올지 모르니
    let key = JSON.stringify(...arguments); // 객체에 키로 넣어주기 위해서 json.stringify 사용

    if(memo[key] === undefined){  // memo에 없다면
      memo[key] = func(...arguments)  // 값 넣어주기
    }
    return memo[key]; // memo에서 값 꺼내서 리턴해주기
  }

};

➰ 이미 진행한 연산 결과를 저장해 둘 객체를 만들고, 함수의 인자로 들어온 값을 key로 넣어준다.
➰ 그 키의 값이 없다면 연산한 적이 없는 것이므로 함수의 결과를 넣어주고, 리턴한다.
➰ 이미 그 키의 값이 있다면 연산한 적이 있는 것이므로 저장된 객체에서 값을 가져온다.

 

7️⃣ throttle

➰ 입력으로 전달되는 시간 동안에 콜백함수를 단 한번만 실행하는 함수를 반환한다.

_.throttle = function (func, wait) {
  // TODO: 여기에 코드를 작성합니다.
  let canStartCallback = true;
  
  return function(){
    if(canStartCallback){
      func();
      canStartCallback = false;
      setTimeout(function(){
        canStartCallback = true;
      }, wait)
    }
  }
};

➰ canStartCallback으로 콜백함수가 실행될 수 있는지 여부를 판단한다.
➰ 처음 실행했을 때 콜백함수를 실행해주고 실행 여부를 false로 바꿔준다.
➰ setTimeout으로 wait 시간만큼 기다린 뒤 실행 여부를 true로 바꿔주면 그 시간 동안에는 콜백 함수가 한번만 호출 된다.

 

📌 argument, spread, 콜백함수를 연습하기에 좋은 과제였다.