[화살표 함수 다시 살펴보기] 리뷰

Author: Violet-Bora-Lee

1-js/06-advanced-functions/12-arrow-functions/article.md

@@ -1,31 +1,31 @@
-# 화살표 함수에 대한 재고
+# 화살표 함수 다시 살펴보기
 
 화살표 함수(arrow function)에 대해 다시 논의해봅시다.
 
-화살표 함수들은 단지 "짧게 쓰기 위한" 것이 아닙니다. 화살표 함수는 몇가지 독특하고 유용한 기능을 제공합니다.
+화살표 함수는 단순히 함수를 '짧게' 쓰기 위한 용도로 사용되지 않습니다. 화살표 함수는 몇 가지 독특하고 유용한 기능을 제공합니다.
 
-자바스크립트는 다른 곳에서 실행되는 작은 함수를 써야 하는 상황이 잦습니다. 
+자바스크립트를 사용하다 보면 저 멀리 동떨어진 곳에서 실행될 작은 함수를 작성해야 하는 상황을 자주 만나게 됩니다. 
 
-예시 :
+예시:
 
-- `arr.forEach(func)` -- `func`은 `forEach`를 쓰는 `arr`의 배열 아이템을 순회할 때마다 실행됩니다.
-- `setTimeout(func)` -- `func` 은 `setTimeout`에 내장된 시간이 되면 실행됩니다.
-- 그 외에도 다양한 사례가 많습니다.
+- `arr.forEach(func)` -- `func`는 `forEach`가 호출될 때 배열 `arr`의 요소 전체를 대상으로 실행됩니다.
+- `setTimeout(func)` -- `func`는 내장 스케줄러에 의해 실행됩니다.
+- 기타 등등...
 
-자바스크립트의 특징 중 하나는 함수를 만들어 어딘가로 전달하는 것입니다.
+이처럼 자바스크립트에선 함수를 생성하고 그 함수를 어딘가에 전달하는 것이 아주 자연스럽습니다.
 
-이렇게 전달된 함수들은 실행 컨텍스트를 떠나지 않습니다. 이 점을 응용하면 화살표 함수를 유용하게 사용할 수 있습니다. 
+그런데 이렇게 어딘가에 함수를 전달하게 되면 함수의 컨텍스트를 읽을 수 있습니다. 이럴 때 화살표 함수를 사용하면 현재 컨택스트를 잃지 않아 편리합니다.  
 
 ## 화살표 함수에는 'this'가 없습니다.
 
-<info:object-methods> 챕터를 기억하신다면, 화살표 함수는 `this`를 가지고 있지 않음을 아실 것입니다. 만약 `this`에 접근하면, 이것은 외부를 가리킵니다.
+<info:object-methods> 챕터에서 화살표 함수엔 `this`가 없다는 것을 배운 바 있습니다. 화살표 함수 본문에서 `this`에 접근하면, 그 값은 외부에서 가져오게 됩니다.
 
-예를 들면, 아래는 객체의 메서드 안에서 this를 이용해 외부 배열 students를 순회 하고 있는 예시입니다.
+이런 특징은 객체의 메서드(`showList()`) 안에서 동일 객체의 프로퍼티(`students`)를 대상으로 순회를 하는 데 사용할 수 있습니다.
 
 ```js run
 let group = {
-  title: "Our Group",
-  students: ["John", "Pete", "Alice"],
+  title: "1모둠",
+  students: ["보라", "호진", "지민"],
 
   showList() {
 *!*
@@ -39,19 +39,19 @@ let group = {
 group.showList();
 ```
 
-여기의 `forEach`에서 화살표 함수가 사용되었습니다.  `this.title`은 바깥 메서드 `showList`가 가리키는 대상과 똑같습니다. 즉 `this.title`은 `group.title`을 가리킵니다.
+예시의 `forEach`에서 화살표 함수를 사용했기 때문에 화살표 함수 본문에 있는 `this.title`은 화살표 함수 바깥에 있는 메서드인 `showList`가 가리키는 대상과 동일합니다. `this.title`은 `group.title`과 같죠.
 
-만약 우리가 "일반적인", `function` 키워드를 사용한 함수로 쓴다면 해당 구문은 오류가 납니다.
+위 예시에서 화살표 함수 대신 '일반' 함수를 사용했다면 에러가 발생했을 겁니다.
 
 ```js run
 let group = {
-  title: "Our Group",
-  students: ["John", "Pete", "Alice"],
+  title: "1모둠",
+  students: ["보라", "호진", "지민"],
 
   showList() {
 *!*
     this.students.forEach(function(student) {
-      // Error: Cannot read property 'title' of undefined
+      // TypeError: Cannot read property 'title' of undefined
       alert(this.title + ': ' + student)
     });
 */!*
@@ -61,28 +61,28 @@ let group = {
 group.showList();
 ```
 
-이 에러가 나는 이유는 `forEach`의 함수에서 사용하는 `this`가 기본적으로는  `undefined`이기 때문입니다. 이것을 풀어 써보면, `undefined.title`이므로, `undefined`에 접근을 시도합니다.
+에러는 `forEach`에 전달되는 함수의 `this`가 `undefined` 이어서 발생했습니다. `alert` 함수에서 `undefined.title`에 접근하려 했기 때문에 얼럿창엔 위와 같은 에러가 출력됩니다.
 
-화살표 함수는 `this` 가 없을 뿐만 아니라, `this`로 화살표 함수 기능에 영향을 줄 수도 없습니다.
+화살표 함수는 `this` 자체가 없기 때문에 이런 에러가 발생하지 않습니다. 
 
 ```warn header="화살표 함수는 `new`와 함께 실행할 수 없습니다."
-`this`가 없다는 것은 자연스럽게 또 다른 한계를 의미합니다. 화살표 함수는 생성자를 사용할 수 없습니다. 즉, 화살표 함수는 `new`로 호출할 수 없습니다.
+`this`가 없기 때문에 화살표 함수는 생성자 함수로 사용할 수 없다는 제약이 있습니다. 화살표 함수는 `new`와 함께 호출할 수 없습니다.
 ```
 
-```smart header="화살표 함수 VS bind"
-화살표 함수의  `=>`와 일반적인 함수인 `.bind(this)` 사이에는 미묘한 차이가 있습니다.
+```smart header="화살표 함수 vs. bind"
+화살표 함수의 `=>`와 일반 함수를 `.bind(this)`를 사용해서 호출하는 것 사이에는 미묘한 차이가 있습니다.
 
-- `.bind(this)`는 함수 안의 "한정된 버전"을 만듭니다.
-- 화살표 함수의 `=>`는 어떤 바인딩도 되지 않습니다. 이 함수는 단순히 `this`가 없는 것입니다. 일반적인 변수 검색과 마찬가지로 `this`의 검색은 외부 렉시컬 환경에서 이루어집니다.
+- `.bind(this)`는 함수의 '한정된 버전(bound version)'을 만듭니다.
+- 화살표 함수의 `=>`는 어떤 것도 바인딩시키지 않습니다. 화살표 함수엔 단지 `this`가 없을 뿐입니다. 화살표 함수에서 `this`가 사용된 경우엔 일반적인 변수 검색과 마찬가지로 `this`의 값을 외부 렉시컬 환경에서 찾습니다.
 ```
 
-## 화살표들은 '인수'가 없습니다
+## 화살표 함수엔 'arguments'가 없습니다.
 
-또한 화살표 함수들은 `인수`가 없습니다.
+화살표 함수는 일반 함수와는 다르게 모든 인수에 접근할 수 있게 해주는 `arguments` 유사 배열 객체를 지원하지 않습니다.
 
-데코레이터(decorator)에서 현재의 `this`와 `arguments`를 함수 포워딩해야할 때, 인수가 없다는 것은 좋은 일입니다.
+이런 특징은 현재 `this` 값과 `arguments` 정보를 함께 실어 호출을 포워딩해 주는 데코레이터를 만들 때 유용하게 사용됩니다.
 
-아래의 예제에서 `defer(f, ms)` 함수는 다른 함수를 인자로 받으며, `ms` 밀리초 뒤에 실행되는 래퍼 함수를 반환합니다.
+아래 예시에서 데코레이터 `defer(f, ms)`는 함수를 인자로 받고 이 함수를 래퍼로 감싸 반환하는데, 인수로 전달받은 함수를 `ms` 밀리초 후에 호출될 수 있도록 해줍니다.
 
 ```js run
 function defer(f, ms) {
@@ -96,10 +96,10 @@ function sayHi(who) {
 }
 
 let sayHiDeferred = defer(sayHi, 2000);
-sayHiDeferred("John"); // 2000 밀리 초 뒤 Hello, John가 얼럿으로 뜹니다.
+sayHiDeferred("John"); // 2초 후 Hello, John이 출력됩니다.
 ```
 
-아래는 화살표 함수가 없는 것입니다.
+화살표 함수 없이 동일한 기능을 하는 데코레이터 함수를 만들면 다음과 같습니다.
 
 ```js
 function defer(f, ms) {
@@ -112,15 +112,15 @@ function defer(f, ms) {
 }
 ```
 
-이 함수는 `setTimeout` 내부에서 `this`와 전달받은 인수를 사용할 수 있도록, `args`와 `ctx`라는 변수를 추가 생성해 넣어주어야 합니다.
+일반 함수에선 `setTimeout` 안의 함수에서 사용할 추가 변수 `args`와 `ctx`를 반드시 만들어줘야 합니다.
 
 ## 요약
 
-화살표 함수는
+화살표 함수가 일반 함수와 다른 점은 다음과 같습니다.
 
 - `this`를 가지지 않습니다.
-- 인수를 가지지 않습니다.
-- `new` 키워드로 호출할 수 없습니다.
-- (화살표 함수들은 물론 `super`를 가지지 않습니다만, 아직 해당 부분은 다루지 않았습니다. 해당 내용은 <info:class-inheritance> 챕터에서 다룰 것입니다.)
+- `arguments`를 지원하지 않습니다.
+- `new`와 함께 호출할 수 없습니다.
+- 이 외에도 화살표 함수는 `super`가 없다는 특징도 있는데, 아직 `super`에 대해 배우지 않았기 때문에 본 챕터에선 해당 내용을 다루지 않았습니다. 화살표 함수와 `super`의 관계는 <info:class-inheritance> 챕터에서 학습할 예정입니다.
 
-화살표 함수들은 자신의 "컨텍스트"가 없고, 오히려 현재 컨텍스트에서 작동하는 짧은 코드를 위해 만들어졌습니다. 그리고 이 목적에 매우 합치합니다.
+화살표 함수는 컨텍스트가 있는 긴 코드보다는 자체 '컨텍스트'가 없는 짧은 코드를 담을 용도로 만들어졌습니다. 그리고 이 목적에 잘 들어맞는 특징을 지닙니다.