[C/F TIL] 24일차 - JavaScript underbar 함수

Code States
Front-end boost camp
Today
I
Learned

💀 부트캠프의 5분의 1이 흘렀다.. 24일차, 5월 15일 수업 시작

💀 underbar 함수 문제풀기

지난 시간 고차함수와 배열 매서드 filter, map, reduce 활용을 토대로, underbar 함수 문제를 푸는 시간을 가져보았다.

✔️ identity

_.identity = function (val) {
  return val
};

✔️ slice

_.slice = function (arr, start, end) {
  
  if (start) {

  }
  // 변수를 선언할 경우, 아래와 같이 콤마(,)를 이용해 선언할 수 있습니다.
  // 이때, 콤마로 연결된 변수들은 모두 동일한 선언 키워드(let, const)가 적용됩니다.
  // 이런 코딩 스타일도 가능하다는 것을 보여드리기 위한 예시일 뿐, 사용을 권장하는 것은 아닙니다.
  // 오픈 소스에 기여하든, 회사 내에서 개발을 하든 본인이 속한 조직의 코딩 스타일, 코딩 컨벤션을 따르면 됩니다.
  // 그리고 아래와 같은 코딩 스타일을 봐도 당황하지 않고 해석할 수 있으면 됩니다.
  let _start = start || 0, // `start`가 undefined인 경우, slice는 0부터 동작합니다.
    _end = end;

  // 입력받은 인덱스가 음수일 경우, 마지막 인덱스부터 매칭한다. (예. -1 => arr.length - 1, -2 => arr.length - 2)
  // 입력받은 인덱스는 0 이상이어야 한다.
  if (start < 0) _start = Math.max(0, arr.length + start);
  if (end < 0) _end = Math.max(0, arr.length + end);

  // `end`가 생략될 경우(undefined), slice는 마지막 인덱스까지 동작합니다.
  // `end`가 배열의 범위를 벗어날 경우, slice는 마지막 인덱스까지 동작합니다.
  if (_end === undefined || _end > arr.length) _end = arr.length;

  let result = [];
  // `start`가 배열의 범위를 벗어날 경우, 빈 배열을 리턴합니다.
  for (let i = _start; i < _end; i++) {
    result.push(arr[i]);
  }

  return result;
};

✔️ take

_.take = function (arr, n) {

  if (!n || n < 0) {
    return [];
  }
  // TODO: 여기에 코드를 작성합니다.
  return _.slice(arr, 0, n);
};

// _.drop는 _.take와는 반대로, 처음 n개의 element를 제외한 새로운 배열을 리턴합니다.
// n이 undefined이거나 음수인 경우, 전체 배열을 shallow copy한 새로운 배열을 리턴합니다.
// n이 배열의 길이를 벗어날 경우, 빈 배열을 리턴합니다.
_.drop = function (arr, n) {
  // TODO: 여기에 코드를 작성합니다.
  if (n > arr.length - 1) {
    return [];
  } else if (!n || n < 0) {
    return arr;
  }

  return _.slice(arr, n, arr[arr.length - 1]);
};

✔️ last

_.last = function (arr, n) {
  // TODO: 여기에 코드를 작성합니다.

  if (n > arr.length - 1) {
    return arr;
  } else if (n === 0) {
    return [];
  } else if (!n || n < 0) {
    return _.slice(arr, -1);
  }

  return _.slice(arr, -n)
};

✔️ each

_.each = function (collection, iteratee) {
  // TODO: 여기에 코드를 작성합니다.

  if (collection instanceof Array) { // Array isarray 도 가능
    for (let i = 0; i < collection.length; i++) {
      iteratee(collection[i], i, collection);
    }
  }
  else {
    for (let key in collection) {
      iteratee(collection[key], key, collection);
    }
  }    
};

✔️ indexOf

_.indexOf = function (arr, target) {
  // 배열의 모든 요소에 접근하려면, 순회 알고리즘(iteration algorithm)을 구현해야 합니다.
  // 반복문을 사용하는 것이 가장 일반적이지만, 지금부터는 이미 구현한 _.each 함수를 활용하여야 합니다.
  // 아래 _.indexOf의 구현을 참고하시기 바랍니다.
  let result = -1;

  _.each(arr, function (item, index) {
    if (item === target && result === -1) {
      result = index;
    }
  });

  return result;
};

✔️ filter

_.filter = function (arr, test) {
  // TODO: 여기에 코드를 작성합니다.
  let newArr = [];

  _.each(arr, function(el) {
    if (test(el)) {
      return newArr.push(el);
    }
  })
  return newArr;


};

✔️ reject

// _.reject는 _.filter와 정반대로 test 함수를 통과하지 않는 모든 요소를 담은 새로운 배열을 리턴합니다.
_.reject = function (arr, test) {
  // TODO: 여기에 코드를 작성합니다.
  let newArr = [];

  _.each(arr, function(el) {
    if (test(el) === false) {
      return newArr.push(el);
    }
  })
  return newArr;
};

✔️ uniq

_.uniq = function (arr) {
  let result = [];

  _.each(arr, function(element) {            
    for (let i = 0; i < arr.length; i++) {   
      if (result[i] === element) {
        return false; // for문안에서 result[i]가 element와 같을때 false로 리턴해서 for문 밖으로 넘어가는것을 막아준다.
      }
    }
    result.push(element); // each와 for문안에서 중복되지 않은 요소들 push.
  });
  return result;
};

✔️ map

_.map = function (arr, iteratee) {
  // TODO: 여기에 코드를 작성합니다.
  // _.map 함수는 매우 자주 사용됩니다.
  // _.each 함수와 비슷하게 동작하지만, 각 요소에 iteratee를 적용한 결과를 리턴합니다.
  let result = [];

  _.each(arr, function(el) {
    return result.push(iteratee(el));
  })
  return result;
};

✔️ pluck

_.pluck = function (arr, keyOrIdx) {
  // _.pluck을 _.each를 사용해 구현하면 아래와 같습니다.
  // let result = [];
  // _.each(arr, function (item) {
  //   result.push(item[keyOrIdx]);
  // });
  // return result;
  // _.pluck은 _.map을 사용해 구현하시기 바랍니다.
  // TODO: 여기에 코드를 작성합니다.
  let result = [];

  _.map(arr, function(el) {
    result.push(el[keyOrIdx]);
  });
  return result;
};

✔️ reduce

_.reduce = function (arr, iteratee, initVal) {
  let result = initVal;

  _.each(arr, function (item, idx, items) {
    if (initVal === undefined && idx === 0) {
      result = item; 
    } else {
      result = iteratee(result, item, idx, items);
    }
  });
  return result;
};

💀 24일차 수업을 마치며...

reduce... 너 대체 몬데... 페어분과 고민, 나혼자 고민, 헬씨어 스터디 에이스 선생님에게 설명 들으며 고민, 나혼자 또다시 고민해도... 아직 .. 잘.. 모르겠으니 오늘 목표는 이거 이해하고 자기..