diff --git a/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts new file mode 100644 index 00000000..977fb010 --- /dev/null +++ b/docs/playground/ko/JavaScript/Functions with JavaScript/Function Chaining.ts @@ -0,0 +1,81 @@ +//// { order: 2, compiler: { esModuleInterop: true } } + +// 함수 체이닝 API는 JavaScript에서 흔한 패턴으로, +// JavaScript 의 중첩 특성으로 인해 +// 중간값을 줄이고 가독성을 높혀 +// 코드를 집중시킬 수 있습니다. + +// 체이닝으로 동작하는 흔한 API는 jQuery입니다. +// DefinitelyTyped의 타입과 함께 사용한 +// jQuery 예시입니다.: + +import $ from "jquery"; + +// jQuery API 사용 예시: + +$("#navigation").css("background", "red").height(300).fadeIn(200); + +// 위 라인에 점을 추가해보면, +// 긴 함수 리스트를 보게 될 것입니다. +// 이 패턴은 JavaScript에서 쉽게 재현할 수 있습니다. +// 핵심은 반드시 항상 같은 오브젝트를 반환하는 것입니다. + +// 여기 체이닝 API를 만드는 API 예시가 있습니다. +// 핵심은 내부 상태를 파악하고 있는 외부 함수와 +// 항상 자신을 반환하는 API를 +// 노출하는 오브젝트를 갖는 것입니다. + +const addTwoNumbers = (start = 1) => { + let n = start; + + const api = { + // API에 있는 각 함수를 실행하세요 + add(inc: number = 1) { + n += inc; + return api; + }, + + print() { + console.log(n); + return api; + }, + }; + return api; +}; + +// jQuery에서 본 것처럼 +// 같은 스타일의 API를 허용: + +addTwoNumbers(1).add(3).add().print().add(1); + +// 클래스를 사용하는 비슷한 예시: + +class AddNumbers { + private n: number; + + constructor(start = 0) { + this.n = start; + } + + public add(inc = 1) { + this.n = this.n + inc; + return this; + } + + public print() { + console.log(this.n); + return this; + } +} + +// 여기에서 동작: + +new AddNumbers(2).add(3).add().print().add(1); + +// 이 예시는 JavaScript 패턴에 +// 도구를 제공하는 방법을 제공하기 위해서 +// TypeScript 타입 추론을 사용했습니다. + +// 더 많은 예시: +// +// - example:code-flow