Level 4-2. JavaScript 심화 개념

soheey·2021년 5월 25일

underscore.js
lodash
콜백 함수: 다른 함수의 인자로써 전달되는 함수

Underbar

이전에는 배열 메소드가 브라우저에서 자체적으로 지원되지 않던 시절이 있었습니다. 그 당시에 사람들은 보다 나은 방법으로 배열이나 객체를 다루기 위해 라이브러리, 즉 배열이나 객체를 다루기 위한 도구 모음집을 만들었습니다. 이번 스프린트 Underbar는 배열, 객체를 다루는 라이브러리입니다. 여러분이 이 라이브러리를 직접 만들어보면서, 배열 메소드의 작동원리를 보다 더 심도있게 이해할 수 있습니다.

Underbar의 모티브가 되는 라이브러리로는, underscore.js, lodash가 있습니다. 이 라이브러리는 여전히 JavaScript 생태계에서 많이 쓰이는 인기있는 라이브러리입니다. 여러분들도 보다 나은 프로그래밍을 해주는 라이브러리를 만들어서 효율적이고 아름다운 프로그래밍으로 한 발자국 더 나아가봅시다.

Before You Learn

배열 메소드(forEach, map, filter 등)의 사용 방법에 대해 이해하고 있어야 합니다.
함수를 인자로 넘기는 방법과, 파라미터로 받은 함수를 사용하는 방법에 대해 이해하고 있어야 합니다.
... (rest parameter)를 사용하여 인자의 개수를 알 수 있고, 각 인자에 접근할 수 있어야 합니다.

Getting Started

이 repository에는 대부분의 함수들에 대한 코드가 누락되었습니다. 여러분들은 함수들을 구현하며 라이브러리를 수정하게 됩니다. 함수들은 두개의 섹션으로 나뉘어져 각각에 대해 별도의 test suite가 있습니다.

spec 디렉토리 안에 test suites 파일이 있습니다. 누락된 함수들을 구현하여 모든 테스트를 통과시키는것이 목표입니다. 브라우저에서 SpecRunner.html을 열어 모든 테스트를 실행하세요.

src 디렉토리 안의 파일에는 함수에 대한 정의 및 설명이 들어 있습니다. 모든 테스트를 통과시켜 각 함수들을 구현하세요.

Bare Minimum Requirements

Part 1의 테스트를 통과합니다.

Higher Order Function을 활용하여 기존에 만든 함수를 callback으로 재사용 할 수 있다.
iteratee가 callback 함수임을 이해할 수 있다.
callback 함수명을 기반으로 사람이 읽기 쉬운 코드를 짤 수 있다.

Part 2의 테스트를 통과합니다.

rest parameter를 자유자재로 사용할 수 있다.
_.flatten을 재귀적으로 풀 수 있다.
_.shffule에서 immutable 개념을 복습할 수 있다.

주의 사항
브라우저는 여러분들이 구현할 일부 기능과 같은 내장 함수들(forEach, map, reduce, filter 등)을 제공합니다. 이번 과제에서 극히 일부를 제외한 모든 내장 함수들은 사용이 금지되어 있습니다.
과제 제출 시, console.log를 모두 제거하셔야 합니다.

Advanced Challenge

Advanced의 테스트를 통과합니다.
여러분이 구현한 코드를 실제 라이브러리에 있는것과 비교해보세요. 이 과제는 원래 라이브러리에서 약간의 복잡성을 제거했습니다. 어디에서 변경된 부분들이 있는지 살펴보시고, 원래 라이브러리는 대응하고 있지만 여러분의 함수에서 대응하지 못하는 edge cases는 어떤 것들이 있는지 이해하려고 해보세요.

Tips

많은 함수에서 collections라는 파라미터가 있는 것을 발견할 수 있습니다. 함수의 인자 collections은 배열 혹은 객체가 될 수 있으며. 일부 함수는 두 경우를 모두 처리할 수 있어야 합니다.
- Array.isArray(obj)를 사용하여 객체가 배열인지 여부를 확인할 수 있습니다.
얼마나 많은 인자들이 전달될지 미리 알 수 없다면 ... (rest parameter)를 사용해보세요.
functions을 작성하면서, 이 function 이 어떤 인자(arguments)를 받는지 혹은 어떻게 작동하는지 궁금할 때가 있습니다. 만약 주석들이 명쾌하지 않을때는 underscore.js 또는 lodash의 공식 라이브러리의 문서를 참고하세요.
실제 underscore.js 코드와 test suite 를 다운로드하고, 어떻게 작동하는지 이해하려고 노력하세요. 이를 수행하는 가장 좋은 방법은 코드를 부분별로 나눠보고 어떤 테스트가 실패하는지 확인하는 것입니다.

비동기 호출

실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분입니다.

대표적으로

클라이언트-서버
이벤트 핸들링
애니메이션
등이 대표적인 예제입니다.

동기와 비동기의 개념을 익히고, 다음에 있을 타이머 세션을 준비합시다.

this - 1

연습문제

var obj = {
  fn: function(a,b) {
    return this;
  }
};

var obj2 = {
  method: obj.fn
};

console.log(obj2.method() === obj2);
console.log(obj.fn() === obj);

this - 2

연습문제

아래와 같은 코드가 있다고 가정해봅시다.

let fn = function (one, two) {
  console.log(this, one, two);
};

let r = {r:1};
let g = {g:1};
let b = {b:1};
let y = {y:1};

r.method = fn;

다음과 같이 호출할 때 각 케이스에서 this 의 값은 무엇일까요?

// (1)
r.method(g,b);

// (2)
fn(g,b);

// (3)
fn.call(r,g,b);

// (4)
r.method.call(y,g,b)

throttle

Syntax

_.throttle(func, wait)

wait milliseconds 시간 내에 최대 한번 함수 func이 호출될 수 있도록 만들어 주세요. 이 함수는 비싼 APIs에 대한 접근을 제한할때 유용합니다. 사용 방법을 살펴 보겠습니다.

Examples

let counter = 0;
let increment = function() {
  counter = counter + 1;
  return counter;
};

// throttle 함수를 이용해서 throttledIncrement라는 함수를 만듭니다.
// 이 함수는 100ms마다 최대 한 번만 호출 가능합니다.

let throttledIncrement = _.throttle(increment, 100);

// counter는 현재 1입니다.
throttledIncrement(); // return 1

// increment 함수는 100ms 안에 실행되도록 예약되어있습니다.
throttledIncrement(); // return 1

// (아직 100ms가 지나지 않았으므로) 이 함수는 아무일도 하지 않을 것입니다.
throttledIncrement(); // return 1

Description

throttled 함수에 전달 된 인자(arguments)는 원래 함수에 전달되어야 합니다.
throttled 함수는 original function이 가장 최근에 반환한 값을 return 해야합니다.
대기 시간이 100ms이고 함수가 마지막으로 100ms 이내에 호출된 경우, throttled function 에 대한 다른 호출은 대기 시간이 끝난 후 바로(0ms 후) 호출을 예약해야 합니다.

이 함수의 실행 방식이 이해가 되지 않으면, lodash 사이트에서 개발자 콘솔을 열어 위에 있는 코드를 직접 실행해보시기 바랍니다.