TIL - 3주차

TIL 20일차

underbar 문제 풀이 및 복습

Today’s Key 🔑

밤 사이에 굳은 머리를 풀기 위해 풀리지 않던 알고리즘 문제를 풀었다.
배열의 요소를 오름차순, 내림차순으로 정렬하는 방법에 대해서 학습하였다.
underbar 문제를 풀면서 콜백함수와 클로저 등에 대한 내용을 복습하였다. (아직도 어렵다.)
기본적인 화살표 함수에 대해서 학습했다. (바로 아래에 정리)
화살표 함수

// MDN 공식 예제

materials.map(function(material) { 
  return material.length; 
}); // [8, 6, 7, 9]

// 위에 있는 함수를 화살표 함수를 이용해 아래와 같이 표현할 수 있다
materials.map((material) => {
  return material.length;
}); // [8, 6, 7, 9]

// 파라미터(parameter)가 오직 하나일 경우, 그것을 감싸는 괄호를 삭제할 수 있다.
materials.map(material => { 
   return material.length; 
}); // [8, 6, 7, 9]

materials.map(({length}) => length); // [8, 6, 7, 9]

추가로 공부하자 🔥

위의 링크에 주어진 화살표 함수에 대해서 더욱 깊게 공부할 필요가 있다.
클로저 개념과 그것의 스코프에 대해서 추가적으로 공부할 필요성을 절실히 느꼈다.

자꾸자꾸 보고 적고 직접 치면서 늘어나는 javascript 상식! (으쌰!) 🚀

복습하기 1. 문자열이 들어오는 배열의 오름, 내림차순!
배열 요소들을 오름, 내림 차순으로 정렬하는 간단한 방법을 알고리즘 풀이를 위해 검색했다. 문자열이 주어진 배열의 세번째로 긴 문자열을 뱉어야 하는 조건이 있었다. 그래서 기본적으로 주어진 배열을 내림차순으로 정리하고 3번째 요소를 불러내면 되는 것이 이었다.

function thirdGreatest(arr) {
  // array.sort() 를 사용해본다.
  let newArr = arr.sort((x, y) => {
      return y.length - x.length;
  })
  return newArr[2];
}

내림차순 정렬은 다음과 같다. (길이가 긴 것부터 정렬한다.)

sort((x, y) => {
   y.length - x.length
}

오름차순 정렬은 다음과 같다. (길이가 작은 것 부터 정렬한다.)

sort((x, y) => {
   x.length - y.length
}

복습하기 2. 한 번만 작동하는 콜백함수를 받는 _.once 함수 작성하기
언더바 과제를 해결하면서 가장 어려운 내용은 reduce 일 것이라 생각했다. 하지만 그것은 아무것도 아니었다. _.once 함수를 작성하면서 멘붕의 연속이 왔다. 아래에 내가 해결을 한(?) 코드를 적긴 하지만, 스스로 명확한, 누군가에게 명확한 설명을 하기 위해서는 해당 코드를 나노 단위로 분석할 필요가 있어 보인다.

_.once = function (func) {
    // TIP: 아래 변수는 클로저 scope (바깥 함수 범위)에 저장되며, 리턴된 새로운 함수가 호출될 때마다,
    // 여전히 클로저 scope 내에 존재하므로, 리턴된 함수에서 사용할 수 있습니다.
    let alreadyCalled = false;

    let result;
    /**
     * TIP: `once` 함수는 새로운 함수를 리턴합니다. 이 함수는 이전에 한 번도 호출 된적이 없을 때만
     * input으로 받은 함수를 실행합니다.
     */
    return function (...a) {
      // alreayCalled => true => 이 함수는 result를 뱉고 끝내라.
      if (alreadyCalled) {
        return result;
      }

      result = func(...a)
      alreadyCalled = true;

      return result;
    };
  };


// 예제 문제 
it("리턴 된 함수에 Input으로 주어진 arguments들을 정확히 전달해야합니다.", function () {
   const add = _.once(function (x, y, z) {
      return x + y + z;
   });

   expect(add(1, 2, 3)).to.equal(6);
});

힘내자!