📅 TIL #27

오늘은 우리가 흔히 사용하는 배열 내장 메소드들을 구현하는 과제가 주어졌다.

Underbar는 underscore.js, lodash 라이브러리를 모티브로 하여 코드스테이츠에서 직접 만든 배열 내장 메소드 구현 과제이다.

나는 이번에 배열 내장 메소드들을 직접 어떻게 구현할 지 생각해보고 하는 과정이 알고리즘 풀 때 처럼 정말 재밌게 느껴졌다!!

실제로 메소드들이 어떻게 쓰였는지 생각해보면서 문제를 풀었던 것 같다!

그래서 이번 과제는 정말 즐겁게 했던 것 같다 :)

많은 배열 메소드를 구현했지만 오늘은 그 중에서 대표적으로 몇 개만 블로깅 해볼 예정이다!

👉 each 구현

• 문제 설명

1. _.each는 collection의 각 데이터에 반복적인 작업을 수행합니다.
2. collection(배열 혹은 객체)과 함수 iteratee(반복되는 작업)를 인자로 전달받아 (iteratee는 함수의 인자로 전달되는 함수이므로 callback 함수)
3. collection의 데이터(element 또는 property)를 순회하면서
4. iteratee에 각 데이터를 인자로 전달하여 실행합니다.

이 문제는 배열인지 객체인지 구분을 하고 주어진 함수 iteratee를 잘 활용해서 반복문 처럼 구현하는 문제였다.

흔히 알고있는 forEach 메소드인 것 같다.

_.each = function (collection, iteratee) {
  if (Array.isArray(collection)) {
    // 배열인지 구분
    for (let i = 0; i < collection.length; i++) {
      iteratee(collection[i], i, collection); // collection의 요소, 인덱스, 배열 자체에 접근한다.
    }
  } else if (typeof collection === "object") {
    for (let key in collection) {
      iteratee(collection[key], key, collection);
    }
  }
};

이런식으로 언더바 과제를 해결하는 것이였다. 중요한 포인트는 타입을 구분하고 주어진 함수로 접근하는 것이였다!

👉 filter 구현

• 문제 설명

1. .filter는 test 함수를 통과하는 모든 요소를 담은 새로운 배열(샐로우 카피)을 리턴합니다.
2. test(element)의 결과(return 값)가 truthy일 경우, 통과입니다.
3. test 함수는 각 요소에 반복 적용됩니다.

정말 친숙한 문제였다. filter는 많이 쓰는 메소드이기 때문에 쉽게 풀어볼 수 있었다.

_.filter = function (arr, test) {
  let result = [];

  _.each(arr, function (item) {
    if (test(item)) {
      result.push(item);
    }
  });
  return result;
};

test 함수를 통과한 요소만 담아주기! 말 그대로 걸러주기였다!

👉 uniq 구현

• 문제 설명

1. _.uniq는 주어진 배열의 요소가 중복되지 않도록 새로운 배열을 리턴합니다.
2. 중복 여부의 판단은 엄격한 동치 연산(strict equality, ===)을 사용해야 합니다.
3. 입력으로 전달되는 배열의 요소는 모두 primitive value라고 가정합니다.

이 문제는 미리 구현한 indexOf를 활용해서 풀 수 있었다.(실제 indexOf와 같음)

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

  _.each(arr, function (item) {
    if (_.indexOf(result, item) === -1) {
      result.push(item);
    }
  });
  return result;
};

indexOf가 -1이면 중복되는 값이 없다는 뜻이므로 이 점을 활용해서 문제를 풀었다.

👉 reduce 구현

• 문제 설명

1. 배열을 순회하며 각 요소에 iteratee 함수를 적용하고,
2. 그 결과값을 계속해서 누적(accumulate)합니다.
3. 최종적으로 누적된 결과값을 리턴합니다.

이 문제는 실제 reduce 메소드를 구현하는 것과 같았다.

그래서 초기값이 있을때와 없을때를 구분지어 어떻게 조건을 만들어서 풀지가 관건이었다.

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

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

나같은 경우는, 가장 먼저 초기값이 없는지와 있는지를 구분하였다.

그 후에 없는 경우는 초기값을 배열의 첫번째 요소로 해주고 그뒤로는 반복작업을 해주는 iteratee를 활용했다.

그렇다면 초기값이 있는 경우에는?

초기값을 모든 요소에 접근해서 반복작업을 거친 후, 다시 할당을 해주었다.

오늘 과제는 정말 여유롭게 잘 마무리 한 것 같아서 기분이 좋다!

내일 언더바 과제 part2 까지 끝내면 언더바 스프린트도 끝이다.

👊 내일의 TIW(today I Will)

언더바 part2