[충돌해결 및 번역] Part1 6.10 함수 바인딩

Author: meanzzi

1-js/06-advanced-functions/10-bind/5-question-use-bind/solution.md

@@ -1,9 +1,4 @@
-
-<<<<<<< HEAD
-에러는 `ask`가 함수 `loginOk`, `loginFail`을 객체 없이 가지고 오기 때문에 발생합니다.
-=======
-The error occurs because `askPassword` gets functions `loginOk/loginFail` without the object.
->>>>>>> upstream/master
+에러는 `askPassword`가 함수 `loginOk`, `loginFail`을 객체 없이 가지고 오기 때문에 발생합니다.
 
 ask는 `loginOk`, `loginFail`을 호출할 때 `this=undefined`라고 자연스레 가정합니다.
 
@@ -37,9 +32,13 @@ askPassword(user.loginOk.bind(user), user.loginFail.bind(user));
 이제 잘 동작합니다.
 
 이 외에도 다른 답이 있는데, 아래에서 확인 가능합니다.
+
 ```js
 //...
-askPassword(() => user.loginOk(), () => user.loginFail());
+askPassword(
+  () => user.loginOk(),
+  () => user.loginFail(),
+);
 ```
 
 이렇게 화살표 함수를 사용하는 방법 또한 대개 잘 동작하며 가독성도 좋습니다.

1-js/06-advanced-functions/10-bind/article.md

@@ -1,5 +1,6 @@
 libs:
-  - lodash
+
+- lodash
 
 ---
 
@@ -30,7 +31,7 @@ setTimeout(user.sayHi, 1000); // Hello, undefined!
 
 `this.firstName`이 "John"이 되어야 하는데, 얼럿창엔 `undefined`가 출력됩니다.
 
-이렇게 된 이유는 `setTimeout`에 객체에서 분리된 함수인 `user.sayHi`가 전달되기 때문입니다. 위 예시의 마지막 줄은 다음 코드와 같습니다. 
+이렇게 된 이유는 `setTimeout`에 객체에서 분리된 함수인 `user.sayHi`가 전달되기 때문입니다. 위 예시의 마지막 줄은 다음 코드와 같습니다.
 
 ```js
 let f = user.sayHi;
@@ -72,19 +73,22 @@ setTimeout(() => user.sayHi(), 1000); // Hello, John!
 
 `setTimeout`이 트리거 되기 전에(1초가 지나기 전에) `user`가 변경되면, 변경된 객체의 메서드를 호출하게 됩니다.
 
-
 ```js run
 let user = {
   firstName: "John",
   sayHi() {
     alert(`Hello, ${this.firstName}!`);
-  }
+  },
 };
 
 setTimeout(() => user.sayHi(), 1000);
 
 // 1초가 지나기 전에 user의 값이 바뀜
-user = { sayHi() { alert("또 다른 사용자!"); } };
+user = {
+  sayHi() {
+    alert("또 다른 사용자!");
+  },
+};
 
 // setTimeout에 또 다른 사용자!
 ```
@@ -104,11 +108,11 @@ let boundFunc = func.bind(context);
 
 `func.bind(context)`는 함수처럼 호출 가능한 '특수 객체(exotic object)'를 반환합니다. 이 객체를 호출하면 `this`가 `context`로 고정된 함수 `func`가 반환됩니다.
 
-따라서 `boundFunc`를 호출하면 `this`가 고정된 `func`를 호출하는 것과 동일한 효과를 봅니다. 
+따라서 `boundFunc`를 호출하면 `this`가 고정된 `func`를 호출하는 것과 동일한 효과를 봅니다.
 
 아래 `funcUser`에는 `this`가 `user`로 고정된 `func`이 할당됩니다.
 
-```js run  
+```js run
 let user = {
   firstName: "John"
 };
@@ -119,19 +123,15 @@ function func() {
 
 *!*
 let funcUser = func.bind(user);
-funcUser(); // John  
+funcUser(); // John
 */!*
 ```
 
-<<<<<<< HEAD
-여기서 `func.bind(user)`는 `func`의 `this`를 `user`로 '바인딩한 변형'이라고 생각하시면 됩니다.
-=======
-Here `func.bind(user)` is a "bound variant" of `func`, with fixed `this=user`.
->>>>>>> upstream/master
+여기서 `func.bind(user)`는 `this=user`로 고정된 `func`의 '바인딩한 변형'이라고 생각하면 됩니다.
 
 인수는 원본 함수 `func`에 '그대로' 전달됩니다.
 
-```js run  
+```js run
 let user = {
   firstName: "John"
 };
@@ -150,7 +150,6 @@ funcUser("Hello"); // Hello, John (인수 "Hello"가 넘겨지고 this는 user
 
 이제 객체 메서드에 `bind`를 적용해 봅시다.
 
-
 ```js run
 let user = {
   firstName: "John",
@@ -177,50 +176,42 @@ user = {
 
 `(*)`로 표시한 줄에서 메서드 `user.sayHi`를 가져오고, 메서드에 `user`를 바인딩합니다. `sayHi`는 이제 '묶인(bound)' 함수가 되어 단독으로 호출할 수 있고 `setTimeout`에 전달하여 호출할 수도 있습니다. 어떤 방식이든 컨택스트는 원하는 대로 고정됩니다.
 
-아래 예시를 실행하면 인수는 '그대로' 전달되고 `bind`에 의해 `this`만 고정된 것을 확인할 수 있습니다. 
+아래 예시를 실행하면 인수는 '그대로' 전달되고 `bind`에 의해 `this`만 고정된 것을 확인할 수 있습니다.
 
 ```js run
 let user = {
   firstName: "John",
   say(phrase) {
     alert(`${phrase}, ${this.firstName}!`);
-  }
+  },
 };
 
 let say = user.say.bind(user);
 
-<<<<<<< HEAD
 say("Hello"); // Hello, John (인수 "Hello"가 say로 전달되었습니다.)
 say("Bye"); // Bye, John ("Bye"가 say로 전달되었습니다.)
-=======
-say("Hello"); // Hello, John! ("Hello" argument is passed to say)
-say("Bye"); // Bye, John! ("Bye" is passed to say)
->>>>>>> upstream/master
 ```
 
 ````smart header="`bindAll`로 메서드 전체 바인딩하기"
 객체에 복수의 메서드가 있고 이 메서드 전체를 전달하려 할 땐, 반복문을 사용해 메서드를 바인딩할 수 있습니다.
 
 ```js
 for (let key in user) {
-  if (typeof user[key] == 'function') {
+  if (typeof user[key] == "function") {
     user[key] = user[key].bind(user);
   }
 }
 ```
 
-<<<<<<< HEAD
-자바스크립트 라이브러리를 사용해도 대규모 바인딩을 할 수 있습니다. lodash 라이브러리의 [_.bindAll(object, methodNames)](http://lodash.com/docs#bindAll)이 그 예입니다.
-=======
-JavaScript libraries also provide functions for convenient mass binding , e.g. [_.bindAll(object, methodNames)](https://lodash.com/docs#bindAll) in lodash.
->>>>>>> upstream/master
+자바스크립트 라이브러리를 사용해도 대규모 바인딩을 할 수 있습니다. lodash 라이브러리의 [\_.bindAll(object, methodNames)](https://lodash.com/docs#bindAll)이 그 예입니다.
+
 ````
 
 ## 부분 적용
 
 지금까진 `this` 바인딩에 대해서만 이야기해보았습니다. 한 단계 더 나아가 봅시다.
 
-`this` 뿐만 아니라 인수도 바인딩이 가능합니다. 인수 바인딩은 잘 쓰이진 않지만 가끔 유용할 때가 있습니다. 
+`this` 뿐만 아니라 인수도 바인딩이 가능합니다. 인수 바인딩은 잘 쓰이진 않지만 가끔 유용할 때가 있습니다.
 
 `bind`의 전체 문법은 다음과 같습니다.
 
@@ -258,11 +249,7 @@ alert( double(5) ); // = mul(2, 5) = 10
 
 이런 방식을 [부분 적용(partial application)](https://en.wikipedia.org/wiki/Partial_application)이라고 부릅니다. 부분 적용을 사용하면 기존 함수의 매개변수를 고정하여 새로운 함수를 만들 수 있습니다.
 
-<<<<<<< HEAD
-위 예시에선 `this`를 사용하지 않았다는 점에 주목하시기 바랍니다. `bind`엔 컨텍스트를 항상 넘겨줘야 하므로 `null`을 사용했습니다.
-=======
-Please note that we actually don't use `this` here. But `bind` requires it, so we must put in something like `null`.
->>>>>>> upstream/master
+위 예시에선 `this`를 사용하지 않았다는 점에 주목하기 바랍니다. `bind`엔 컨텍스트를 항상 넘겨줘야 하므로 `null`을 사용했습니다.
 
 부분 적용을 사용해 3을 곱해주는 함수 `triple`을 만들어보겠습니다.
 
@@ -294,7 +281,7 @@ alert( triple(5) ); // = mul(3, 5) = 15
 
 네이티브 `bind`만으로는 컨텍스트를 생략하고 인수로 바로 뛰어넘지 못합니다.
 
-다행히도 인수만 바인딩해주는 헬퍼 함수 `partial`를 구현하는 건 쉽습니다. 
+다행히도 인수만 바인딩해주는 헬퍼 함수 `partial`를 구현하는 건 쉽습니다.
 
 아래와 같이 말이죠.
 
@@ -336,8 +323,9 @@ lodash 라이브러리의 [_.partial](https://lodash.com/docs#partial)을 사용
 
 `func.bind(context, ...args)`는 `this`가 `context`로 고정되고 인수도 고정된 함수 `func`을 반환합니다.
 
-`bind`는 보통 객체 메서드의 `this`를 고정해 어딘가에 넘기고자 할 때 사용합니다. `setTimeout`에 넘길 때 같이 말이죠. 
+`bind`는 보통 객체 메서드의 `this`를 고정해 어딘가에 넘기고자 할 때 사용합니다. `setTimeout`에 넘길 때 같이 말이죠.
 
 기존 함수의 인수 몇 개를 고정한 함수를 *부분 적용(partially applied)* 함수 또는 *부분(partial)* 함수라고 부릅니다.
 
-부분 적용은 같은 인수를 여러 번 반복하고 싶지 않을 때 유용합니다. `send(from, to)`라는 함수가 있는데 `from`을 고정하고 싶다면 `send(from, to)`의 부분 함수를 구현해 사용하면 됩니다. 
+부분 적용은 같은 인수를 여러 번 반복하고 싶지 않을 때 유용합니다. `send(from, to)`라는 함수가 있는데 `from`을 고정하고 싶다면 `send(from, to)`의 부분 함수를 구현해 사용하면 됩니다.
+````