📅 TIL #28

👉 sort 구현

• 문제 설명

1. _.sortBy는 배열의 각 요소에 함수 transform을 적용하여 얻은 결과를 기준으로 정렬합니다.
2. transform이 전달되지 않은 경우, 배열의 요소 값 자체에 대한 비교 연산자의 결과를 따릅니다.
3. 예를 들어, number 타입간 비교는 대소 비교이고 string 타입간 비교는 사전식(lexical) 비교입니다.
4. 세 번째 인자인 order는 정렬의 방향을 나타냅니다. 생략되거나 1을 입력받은 경우 오름차순, -1을 입력받은 경우 내림차순으로 정렬합니다.

• 힌트

1. Array.prototype.sort를 사용할 수 있습니다.
2. _.identity를 사용할 수 있습니다. (전달 인자를 그대로 반환하는 함수)

이 문제는 함수 transform이 주어지면 함수에 맞게 정렬을 하는 sortBy라는 함수를 구현하는 문제였다. 실제 메소드 sort를 사용해서 구현할 수 있어서 편했으며 이를 잘 활용해서 실제 sort 메소드처럼 구현하는 문제였다.

나의 코드먼저 살펴보자!

_.sortBy = function (arr, transform, order) {
  //새로운 배열을 하나 복사해온다.
  let newArr = _.slice(arr);
  order = order || 1;
  transform = transform || _.identity;

  return newArr.sort(function (a, b) {
    if (order > 0) {
      // 오름 차순
      return transform(a) < transform(b) ? -1 : 0;
    } else {
      // 내림 차순
      return transform(a) > transform(b) ? -1 : 0;
    }
  });
  return newArr;
};

나는 이런식으로 언더바 sortBy를 구현하였다. 이 문제는 정말 각각 다른 코드들이 나온 것 같다.

수도코드는 간단히 요약하자면.

1.transform이라는 콜백함수가 있을 경우와 없을 경우로 먼저 나눠줘야 겠다는 생각을 했다.

=> 두번째 인자값에 transform이 undefined가 아니라면 콜백함수가 적용될 것이고, undefined이거나 _.identity가 있다면 반드시 _.identity(그대로 반환하는 함수)가 적용 될 것이다.

2.그 다음 새로운 배열을 가져와서 새로운 배열을 정렬해주고 반환을 해줘야 겠다는 생각을 했다. (slice 사용, 빈 객체에다가 push를 하는 분도 계셨음)

=> 원본을 바꾸지 않은 상태에서 새로운 배열을 반환하기 위해서이다. 원본이 수정되면 코드를 써내려가는 과정에서 힘들어질까봐 그랬다.

3.오름 차순, 내림차순 나눌 때가 사실 조금 해맸었는데 저 부분은 sort mdn 을 검색해서 자세히 읽어본 후에 적용할 수 있었다!!

4.조건문을 최대한 간소화 하기 위해 shortcut circuit 을 썼는데, 이것도 알고는 있었지만 정확한 사용법을 모르고 있었다 ㅠㅠ

5.다행히도 오늘 정규시간에 알려주셨고 바로 적용했더니, 적용한 후에 쉽게 풀 수 있었다!

6.그 후에 코드를 조금 수정하였다. 확실히 shortcut circuit 를 사용하니 코드가 5줄 정도 줄었다.. (처음 적은 코드는 20줄 가까이는 됐을 것이다…)

그 다음 레퍼런스 코드를 살펴보자!

_.sortBy = function (arr, transform, order) {
  order = order || 1;
  transform = transform || _.identity;

  const arrCloned = _.slice(arr);
  return arrCloned.sort(function (a, b) {
    if (transform(a) < transform(b)) {
      return -1 * order;
    }
    return order;
  });
};

정말 간결했다… 내 코드의 몇 줄을 1줄로 줄여버리는 마법… 역시 대단하다..

항상 보고 반성하지만… 왜 항상 나는 코드를 간결하게 짜기는 힘든걸까 ㅜㅜ

코드를 보고 “아~…. 이렇게 하면 되는 구나” 하고 바로 이해는 하는데

문제를 풀 당시에는 전~~~혀 생각이 안난다. 일단 풀고 봐야하니까.. 언젠간 더 잘해지면 간결한 코드도 짤 수 있을거라고 생각한다.

👉 sort 예제

sort 란?

sort 란?

배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 메소드

확실히 sort함수는 예제코드를 봐야 이해가 된다.

sort 타입마다 정렬

• 문자 정렬

const alpa = ["c", "e", "a", "d", "b"];

alpa.sort(); // ["a", "b", "c", "d", "e"]

• 숫자 정렬

const number = [3, 5, 1, 2, 4, 6];

// 오류
number.sort(); // 숫자에는 적용되지 않음 (ASCII 문자 순서로 정렬되어 있기 때문이다.)

// 오름 차순
number.sort(function (a, b) {
  return a - b;
}); // 1, 2, 3, 4, 5, 6

// 내림 차순
number.sort(function (a, b) {
  return b - a;
}); // 6, 5, 4, 3, 2, 1

• 객체 정렬

const whoAmI = [
  {name: "우성", age: 28},
  {name: "코딩", age: 40},
  {name: "깃블로그", age: 1},
  {name: "재밌어요", age: 99}
];

/* 이름순 */
whoAmI.sort(function (a, b) {
  // 오름차순
  return a.name < b.name ? -1 : a.name > b.name ? 1 : 0;
  // 깃블로그, 우성, 재밌어요, 코딩
});

whoAmI.sort(function (a, b) {
  // 내림차순
  return a.name > b.name ? -1 : a.name < b.name ? 1 : 0;
  // 코딩, 재밌어요, 우성, 깃블로그
});

/* 나이순 */
whoAmI.sort(function (a, b) {
  // 오름차순
  return a.age - b.age;
  // 1, 28, 40, 99
});

whoAmI.sort(function (a, b) {
  // 내림차순
  return b.age - a.age;
  // 99, 40, 28, 1
});

정렬할 Array의 요소의 개수가 2개 미만일 경우 ‘sort is not a function’ 오류가 난다.

👉 short-circuit ?

오늘 논리연산자 OR || 에 대해 배웠기 때문에, 블로깅을 해볼 것 이다!

true || true;
// true

true || false;
// true;

false || false;
// false

자바스크립트 논리 연산자에는 두가지 중요한 특성이 있다.

첫째, 왼쪽부터 오른쪽 방향으로 evalutae를 한다.
둘째, 만약 첫번째 피연산자 함수가 true이면 숏서킷은 두번째 피연산자 함수를 확인조차 하지 않는다.

true || ????
//true

그러면 아래 예제코드를 보면서 이해를 해 보자!

객체 내부에는 name과 age가 있다. 하지만 객체 whoAreYou의 job을 알아보고자 할때,

문제는 jop이라는 key값이 존재하는지 여부를 알지 못한다는 것이다. 이때 ||와 숏서킷을 사용하여 이문제를 해결할 수 있다.

const whoAreYou = {
  name: "Useong",
  age: 28
};
console.log(whoAreYou.job || "unemployed");
// 'unemployed'

whoAreYou.job이 존재하지 않으면 undefined 를 반환한다. undefined는 거짓 값이다.

그렇다면 여기서 ||의 다른 부분에 있는 value값이 무엇이든 그곳에 있는 값을 반환할 것이다.

또 다른 예제

const a;
const b = null;
const c = undefined;
const d = 7;
const e = "true";

const f = a || b || c || d || e;

console.log(f); // ???

정답은??

• 답안

정답은 7이다!!

const a; //  undefined (falsy value)
const b = null; // null (falsy value)
const c = undefined; //  undefined (falsy value)
const d = 7; //  number (NOT falsy)
const e = "true"; // assigment short circuits before reaching here

const f = a || b || c || d || e;

console.log(f); // 7

숏서킷 개념이 헷갈리면 다시 이걸 보면서 이해하면 좋을 것 같다!

오늘 과제도 제 때 잘 끝내서 한결 기분이 좋은 하루다~!

이렇게 언더바 스프린트도 끝이났다!!!:punch: :punch: :punch:

👊 내일의 TIW(today I Will)

설날 연휴 동안 프로그래머스 1단계 다 풀기!! (기회되면 2단계도 풀기)