uniqBy

haesoo·2021년 9월 17일
0

uniquBy를 구현해보았다.
혼자 3시간을 싸우다가 ... 결국 구글링해보았으며, 도저히 현재 내가 가진 능력 안에서 해결할 수 없다고 판단했다... iterator가 function이 아닐 경우는 구글링을 통해 찾아낸 방법을 토대로, 응용해 만들었다... 이렇게 세줄로 끝나는 스토리지만 응용하기 위해서 또 3시간을 태웠다는 함정... 하지만 이 과정에서 Array.prototype.map()의 사용법?에 대해 조금 더 알게 되었다.
하나의 배열이 주어졌을 때, 순차적으로 값을 담아주고 비교해줄 수 있는 로직을 응용해볼 수 있을 것 같아 아직 해결 못한 메소드들을 풀어낼 수 있겠다는 생각이 든다.

아 재밌당...

const uniqBy = function (array, iterator) {
  const result = [];

  if (typeof iterator !== "function") {
    for (let i = 0; i < array.length; i++) {
      const comparedArray = result.map(element => element[iterator]);
      //  map 은 주어진 함수를 통과하는 새 배열을 만들어주기 때문에 변수에 담아 사용.
      //  element => {'x' : 1} 이기때문에 iterator로 key값을 주고 value를 비교해주기.
      //  element[iterator] => iterator: "x" 니까  element["x"]이고 value는 1.
      //  따라서 위의 과정이 코드가 실행되는 동안 이루어지기 때문에
      //  comparedArray 에는 [1, 2, 1] 이런식으로 순차적으로 담겨진다.
      if (!comparedArray.includes(array[i][iterator])) {
      //  순차적으로 담기기때문에, array[i] => { "x" : 1 } => array[i][iterator] => 1이 없다면
      //  result에는 array[i]가 담기고 있다면 패스.
        result.push(array[i]);
      }
    }
    return result;
  }

  if (typeof iterator === "function") {
    for (const item of array) {
      const mappedUniques = result.map(iterator);
      if (!mappedUniques.includes(iterator(item))) {
        result.push(item);
      }
    }
    return result;
  }
};

// test case
console.log(uniqBy([2.1, 1.2, 2.3], Math.floor));
// => [2.1, 1.2]
// The `_.property` iteratee shorthand.
console.log(uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x'));
// => [{ 'x': 1 }, { 'x': 2 }]
console.log(uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x' : 3}], 'x'));
// => [{ 'x': 1 }, { 'x': 2 }]

✔ lodash의 테스트 코드를 토대로 작성했기 때문에, 모든 케이스에 대응할 수 있다고는 장담할 수 없습니다 ㅠㅠ 보충이 필요한 부분이 있다면 알려주세요!

profile
후론트, 숨참고 딥 다이브

0개의 댓글