## Generator

제네레이터의 개념에 대해 이해하기 전에, 먼저 반복자 (Iterator)에 대해 알아보자.

### 0. Iterator

반복자는, 두개의 속성 (`value`와 `done`)을 반환하는 `next()`메소드를 사용하여 [Iterator protocal](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterator_protocol)을 구현한다. 말이 조금 어려운 것 같으니, 조금 쉽게 설명해보자.

예를 들어 `for ... of` 구문에서 자바스크립트 객체들이 loop되는 것과 같은 iteration 동작을 정의하는 것을 허락하는 것이다. `Array`나 `Map`의 경우에는 default iteration 동작이 담겨져 있다. 

더 쉽게 이야기 하자면, object가 [Symbol.iterator](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator) 키 속성을 가지고 있다는 것을 의미한다. 어떤 객체가 `반복가능`하다면 이 메소드 `@@iterator`가 인수없이 호출이 가능하고, 반환된 iterator는 반복을 통해서 획득한 값을 얻을 때 사용할 수 있다.

```javascript
const hello = ['hello', 'hi']
console.log(hello[Symbol.iterator]) //[Function: values], iterable

const hi = 1
console.log(hi[Symbol.iterator]) // undefined, not iterable
```

`iterable` 프로토콜이 만약 `next()` 메소드를 가지고 있고, 다음과 같은 규칙을 따르고 있다면 `iterator`라고 정의 한다.

- `next`: 아래 두개의 속성을 가진 object를 반환하는 인수가 없는 함수:
 - `done`: (boolean) 작업을 마쳤을 경우 `true` 그렇지 않다면 `false`
 - `value`: (any) `iterator`로 부터 반환되는 모든 자바스크립트 값이며, `done`이 `true`이면 생략 가능하다.

아래의 예시를 살펴보자.

```javascript
const hello = 'hello'
const stringIterator = hello[Symbol.iterator]()

console.log(stringIterator.next()) //{ value: 'h', done: false }
console.log(stringIterator.next()) //{ value: 'e', done: false } 
console.log(stringIterator.next()) //{ value: 'l', done: false }
console.log(stringIterator.next()) //{ value: 'l', done: false }
console.log(stringIterator.next()) //{ value: 'l', done: false }
console.log(stringIterator.next()) //{ value: undefined, done: true }
```

또 이를 활용해서 원하는 iterator를 정의할 수도 있다.

```javascript
var countDown = new Number(5)

countDown[Symbol.iterator] = function() {
 var _count = 0
 var value = +this
 return {
 next() {
 _count++ 
 if (_count < value) { 
 return {value: _count, done: false}
 } else {
 return {done: true}
 }
 }
 }
}

for (let i of countDown) {
 console.log(i) // 1, 2, 3, 4
}

console.log([...countDown]) // [ 1, 2, 3, 4 ]
```

### 1. Genenrator

`Generator`는, 하나의 값을 리턴하는 일반적인 함수와는 다르게 결과의 순서를 생성해 내는 함수라고 볼 수 있다. 앞서 설명한 `iterator`와 동일하게, `next()`를 호출하면, `{value: any, done: boolean}`을 리턴한다.

```javascript
function * generator() {
 yield 'hello'
 yield 'hi'
}

for (let i of generator()) {
 console.log(i) // hello, hi
}
```

- `yield`: 제네레이터 함수의 실행을 일시적으로 중지 시키며, 뒤에 오는 표현식을 반환한다. 즉 일반적인 함수의 `return`문 역할을 하면 된다고 본다. 

- `return`: 수행하고 있는 iterator를 종료시키며, `return`뒤의 표현식은 `{value: return, done: true}` 형태로 반환된다.

`Generator`의 형태가 `Iterator`와 비슷한 걸로 보았을때, `Generator`도 `iterable`하다고 볼 수 있다.

한가지 알아 두어야 할 것은, `next()`와 `yield`가 서로 값을 주고 받을 수 있다는 점이다.

```javascript
function *myGen() {
 const x = yield 1; // x = 10
 const y = yield (x + 1); // y = 20
 const z = yield (y + 2); // z = 30
 return x + y + z;
}

const myItr = myGen();
console.log(myItr.next()); // {value:1, done:false}
console.log(myItr.next(10)); // {value:11, done:false}
console.log(myItr.next(20)); // {value:22, done:false}
console.log(myItr.next(30)); // {value:60, done: true}
```

## Generator 제네레이터의 개념에 대해 이해하기 전에, 먼저 반복자 (Iterator)에 대해 알아보자.  ### 0. Iterator  반복자는, 두개의 속성 (`value`와 `done`)을 반환하는 `next()`메소드를 사용하여 [Iterator protocal](https://developer.mozilla.org/en-US/docs/W...

자바스크립트 제네레이터

## var let const, 그리고 호이스팅

### var

우리가 모두 아는 `var` 키워드는 아래와 같은 특징을 가지고 있다.

1. 함수레벨 스코프를 가지고 있다.
   
   대부분의 프로그래밍 언어들이 블록 레벨 스코프를 사용하고 있지만, `var`로 선언된 키워드는 함수레벨 스코프를 갖는다. 
   ```javascript
    var name = 'hello'

    function t() {
        var name = 'hi'
        console.log(name) // hi
    }

    t()
    console.log(name) // hello
   ```

2. `var` 키워드는 생략이 가능하다.
   
   생략이 가능하기 때문에, 함수가 선언한 환경의 `this`에 영향을 받는다. 일반적인 웹 환경에서는 `window`일 것이다.

3. 중복 선언이 가능하다.
   
    ```javascript
    var name = 'hello'
    var name = 'hi'
    console.log(name) // hi
    ```

4. 호이스팅 당한다.

    호이스팅이란 

    > 스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것 
    
    이다. 자바스크립트 인터프리터가 코드를 해석할 때 함수의 선언, 할당, 실행을 모두 나눠서 처리하기 때문이다. 예를 들어보자.

    ```javascript
    console.log(name) // undefined
    var name = 'hello'
    ```

    이 코드는 참조 에러가 나지 않고, `undefined`를 리턴한다. 그 이유는 자바스크립트가 호이스팅을 하면서 아래와 같은 방식으로 코드를 해석하기 때문이다.

    ```javascript
    var name // undefined
    console.log(name)
    name = 'hello'
    ```

### 2. let

`let`은 es6에서 가장 잘 알려진 기능 중 하나다. `var`랑 비슷한 것 같지만, 사실 몇가지 다른 점이 있다. 

1. 블록 수준 스코프를 가지고 있다.

    아래의 예를 살펴보자.

    ```javascript
    {{{var name = 'hello'}}}
    console.log(name) // hello

    {{{let name2 = 'hi'}}}
    console.log(name2) // ReferenceError: name2 is not defined
    ```

    `let`과 `const`는 모두 블록 수준의 스코프를 사용 하고 있다. 따라서 블록 내부에서 선언한 변수는 모두 지역변수로 취급된다. 때문에 블록 내부에서 선언한 변수들을 참고할 수가 없다.

2. 키워드 생략이 불가능하다.

    키워드를 생략하면 `var`처럼 작동하게 된다.

3. 중복선언이 불가능하다.

    그렇다.

4. 호이스팅 당한다.

    가끔 인터넷을 뒤지다보면, `let`과 `const`는 호이스팅 당하지 않는다는 이야기가 있는데, 이는 잘못된 사실이다. 두 키워드 모두 호이스팅 당하기는 마찬가지이다.

    이것을 이해하기 위해서는, `Temporary Dead Zone`에 대해 알아야 한다.


### Temporary Dead Zone

아래 코드를 살펴보자.

```javascript
name = 'hello' // ReferenceError: Cannot access 'name' before initialization
let name = 'hi'
```

자. 만약 `name`이 호이스팅 되지 않았다면, 두 번째 `let`선언에서 already declared에러가 났었어야 했다. 근데 현실은 초기화 하기전에 엑세스 할 수 없다는 에러를 내뱉었다.


아래 코드는 어떨까?

```javascript
function sayHello() {
  return name
}
let name = 'hi'
console.log(sayHello()) // hi
```

별탈없이 hi를 내뱉은 것을 볼 수 있다. 그 말인 즉, name이 분명 호이스팅 되었다는 뜻이다.

다른 이야기로 넘어가서, 자바스크립트에서는 총 3단계에 걸쳐서 변수를 생성한다.

1. 선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.
2. 초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 `undefined`다.
3. 할당(Assignment): 변수 객체에 값을 할당한다.

`var`는 선언과 동시에 초기화가 이루어진다. 즉, 선언과 동시에 undefined가 할당된다.

그러나 `let`과 `const`는 다르다. 선언만 될뿐, 초기화가 이루어지지 않는다. 바로 이단계에서 TDZ에 들어가게 되는 것이다. 즉, 선언은 되어있지만, 초기화가 되지 않아 이를 위한 자리가 메모리에 준비되어 있지 않은 상태라는 것이다.


### const

`const`에서 구별되는 특징만 몇가지 살펴보자.

1. `const`는 초기화와 동시에 선언이 이루어져야 한다.

    ```javascript
    let hello
    hello = 'hello'

    const hi //SyntaxError: Missing initializer in const declaration
    hi = 'hi'
    ```

2. `const` 자체가 값을 불변으로 만드는 것이 아니다.

    아래 코드는 당연히 안된다.

    ```javascript
    const hello = 'hello'
    hello = 'hi' // TypeError: Assignment to constant variable.
    ```

    그렇다고 이것도 안되는 것은 아니다.
    
    ```javascript
    const hello = ['hi']
    hello.push('hello')
    ```

    ```javascript
    const hello = 'hello'
    var hi = hello
    hi = 'hi'
    console.log(hello) // hello
    console.log(hi) // hi
    ```

    객체 자체를 동결시키기 위해서는 [Object.freeze](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze)를 사용하면 된다.

3. 상수를 선언할 때 사용한다.


### 결론

- 호이스팅은 변수의 선언을 최상단에 끌어올린다는 뜻이다.
- `var` `let` `const`는 모두 호이스팅 된다.
- `let`  선언과 동시에 `TDZ`에 들어가서 초기화가 필요한 별도의 상태로 관리된다.
- `const` 는 선언과 동시에 초기화, 할당까지 이루어진다.
- `var`는 왠만하면 쓰지말자
- `let`대신 `const`를 사용하자. `let`으로 선언되어 있다면, 어디선가 이 변수가 바뀔지도 모른다는 생각을 가지고 있어야 하므로, 코드를 읽기가 어려워진다. 반면 `const`는 초기화, 선언, 할당까지 되어 있으니 변경되지 않을 것이다라는 확신으로 코드를 볼 수 있다. (물론 객체의 속성은 바뀔 수 있음.)

## var let const, 그리고 호이스팅 ### var  우리가 모두 아는 `var` 키워드는 아래와 같은 특징을 가지고 있다.  1. 함수레벨 스코프를 가지고 있다.        대부분의 프로그래밍 언어들이 블록 레벨 스코프를 사용하고 있지만, `var`로 선언된 키워드는 함수레벨 스코프를 갖는다.     ```javascript     var ...

var let const, 그리고 호이스팅

<h2 id="var-let-const-그리고-호이스팅">var let const, 그리고 호이스팅</h2>
<h3 id="var">var</h3>
우리가 모두 아는 <code>var</code> 키워드는 아래와 같은 특징을 가지고 있다.
<ol>
<li>
함수레벨 스코프를 가지고 있다.
대부분의 프로그래밍 언어들이 블록 레벨 스코프를 사용하고 있지만, <code>var</code>로 선언된 키워드는 함수레벨 스코프를 갖는다.
<pre class="language-javascript"><code class="language-javascript"> var name = 'hello'

 function t() {
 var name = 'hi'
 console.log(name) // hi
 }

 t()
 console.log(name) // hello
</code></pre>
</li>
<li>
<code>var</code> 키워드는 생략이 가능하다.
생략이 가능하기 때문에, 함수가 선언한 환경의 <code>this</code>에 영향을 받는다. 일반적인 웹 환경에서는 <code>window</code>일 것이다.
</li>
<li>
중복 선언이 가능하다.
<pre class="language-javascript"><code class="language-javascript">var name = 'hello'
var name = 'hi'
console.log(name) // hi
</code></pre>
</li>
<li>
호이스팅 당한다.
호이스팅이란
<blockquote>
스코프 안에 있는 선언들을 모두 스코프의 최상위로 끌어올리는 것
</blockquote>
이다. 자바스크립트 인터프리터가 코드를 해석할 때 함수의 선언, 할당, 실행을 모두 나눠서 처리하기 때문이다. 예를 들어보자.
<pre class="language-javascript"><code class="language-javascript">console.log(name) // undefined
var name = 'hello'
</code></pre>
이 코드는 참조 에러가 나지 않고, <code>undefined</code>를 리턴한다. 그 이유는 자바스크립트가 호이스팅을 하면서 아래와 같은 방식으로 코드를 해석하기 때문이다.
<pre class="language-javascript"><code class="language-javascript">var name // undefined
console.log(name)
name = 'hello'
</code></pre>
</li>
</ol>
<h3 id="2-let">2. let</h3>
<code>let</code>은 es6에서 가장 잘 알려진 기능 중 하나다. <code>var</code>랑 비슷한 것 같지만, 사실 몇가지 다른 점이 있다.
<ol>
<li>
블록 수준 스코프를 가지고 있다.
아래의 예를 살펴보자.
<pre class="language-javascript"><code class="language-javascript">{{{var name = 'hello'}}}
console.log(name) // hello

{{{let name2 = 'hi'}}}
console.log(name2) // ReferenceError: name2 is not defined
</code></pre>
<code>let</code>과 <code>const</code>는 모두 블록 수준의 스코프를 사용 하고 있다. 따라서 블록 내부에서 선언한 변수는 모두 지역변수로 취급된다. 때문에 블록 내부에서 선언한 변수들을 참고할 수가 없다.
</li>
<li>
키워드 생략이 불가능하다.
키워드를 생략하면 <code>var</code>처럼 작동하게 된다.
</li>
<li>
중복선언이 불가능하다.
그렇다.
</li>
<li>
호이스팅 당한다.
가끔 인터넷을 뒤지다보면, <code>let</code>과 <code>const</code>는 호이스팅 당하지 않는다는 이야기가 있는데, 이는 잘못된 사실이다. 두 키워드 모두 호이스팅 당하기는 마찬가지이다.
이것을 이해하기 위해서는, <code>Temporary Dead Zone</code>에 대해 알아야 한다.
</li>
</ol>
<h3 id="temporary-dead-zone">Temporary Dead Zone</h3>
아래 코드를 살펴보자.
<pre class="language-javascript"><code class="language-javascript">name = 'hello' // ReferenceError: Cannot access 'name' before initialization
let name = 'hi'
</code></pre>
자. 만약 <code>name</code>이 호이스팅 되지 않았다면, 두 번째 <code>let</code>선언에서 already declared에러가 났었어야 했다. 근데 현실은 초기화 하기전에 엑세스 할 수 없다는 에러를 내뱉었다.
아래 코드는 어떨까?
<pre class="language-javascript"><code class="language-javascript">function sayHello() {
 return name
}
let name = 'hi'
console.log(sayHello()) // hi
</code></pre>
별탈없이 hi를 내뱉은 것을 볼 수 있다. 그 말인 즉, name이 분명 호이스팅 되었다는 뜻이다.
다른 이야기로 넘어가서, 자바스크립트에서는 총 3단계에 걸쳐서 변수를 생성한다.
<ol>
<li>선언(Declaration): 스코프와 변수 객체가 생성되고, 스코프가 변수 객체를 참조한다.</li>
<li>초기화(Initialization): 변수 객체 값을 위한 공간을 메모리에 할당한다. 이 때 할당되는 값은 <code>undefined</code>다.</li>
<li>할당(Assignment): 변수 객체에 값을 할당한다.</li>
</ol>
<code>var</code>는 선언과 동시에 초기화가 이루어진다. 즉, 선언과 동시에 undefined가 할당된다.
그러나 <code>let</code>과 <code>const</code>는 다르다. 선언만 될뿐, 초기화가 이루어지지 않는다. 바로 이단계에서 TDZ에 들어가게 되는 것이다. 즉, 선언은 되어있지만, 초기화가 되지 않아 이를 위한 자리가 메모리에 준비되어 있지 않은 상태라는 것이다.
<h3 id="const">const</h3>
<code>const</code>에서 구별되는 특징만 몇가지 살펴보자.
<ol>
<li>
<code>const</code>는 초기화와 동시에 선언이 이루어져야 한다.
<pre class="language-javascript"><code class="language-javascript">let hello
hello = 'hello'

const hi //SyntaxError: Missing initializer in const declaration
hi = 'hi'
</code></pre>
</li>
<li>
<code>const</code> 자체가 값을 불변으로 만드는 것이 아니다.
아래 코드는 당연히 안된다.
<pre class="language-javascript"><code class="language-javascript">const hello = 'hello'
hello = 'hi' // TypeError: Assignment to constant variable.
</code></pre>
그렇다고 이것도 안되는 것은 아니다.
<pre class="language-javascript"><code class="language-javascript">const hello = ['hi']
hello.push('hello')
</code></pre>
<pre class="language-javascript"><code class="language-javascript">const hello = 'hello'
var hi = hello
hi = 'hi'
console.log(hello) // hello
console.log(hi) // hi
</code></pre>
객체 자체를 동결시키기 위해서는 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/freeze">Object.freeze</a>를 사용하면 된다.
</li>
<li>
상수를 선언할 때 사용한다.
</li>
</ol>
<h3 id="결론">결론</h3>
<ul>
<li>호이스팅은 변수의 선언을 최상단에 끌어올린다는 뜻이다.</li>
<li><code>var</code> <code>let</code> <code>const</code>는 모두 호이스팅 된다.</li>
<li><code>let</code> 선언과 동시에 <code>TDZ</code>에 들어가서 초기화가 필요한 별도의 상태로 관리된다.</li>
<li><code>const</code> 는 선언과 동시에 초기화, 할당까지 이루어진다.</li>
<li><code>var</code>는 왠만하면 쓰지말자</li>
<li><code>let</code>대신 <code>const</code>를 사용하자. <code>let</code>으로 선언되어 있다면, 어디선가 이 변수가 바뀔지도 모른다는 생각을 가지고 있어야 하므로, 코드를 읽기가 어려워진다. 반면 <code>const</code>는 초기화, 선언, 할당까지 되어 있으니 변경되지 않을 것이다라는 확신으로 코드를 볼 수 있다. (물론 객체의 속성은 바뀔 수 있음.)</li>
</ul>

## 데코레이터

### 0. 설명자

데코레이터에 대해 시작하기 전에, 설명자(Descriptor)에 대해 알아보자.

설명자란, 객체의 프로퍼티가 쓰기가 가능한지, 그리고 열거가 가능한지 여부를 나타낸다. 그리고 설명자를 구현하기 위해서는, [Object.getOwnPropertyDescriptor(obj, propName)](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/getOwnPropertyDescriptor) 를 사용해야 한다. 아래의 예를 살펴보자.

```javascript
const hello = {
 get hi() {
 return 'hello'
 },
 number: 42
}

console.log(Object.getOwnPropertyDescriptor(hello, 'hi'))
console.log(Object.getOwnPropertyDescriptor(hello, 'number'))

Object.defineProperties(hello, {
 hell: {
 value: 1, 
 enumerable: false,
 configurable: false,
 writable: false
 }
})
console.log(Object.getOwnPropertyDescriptor(hello, 'hell'))
```

```json
{
 get: [Function: get hi],
 set: undefined,
 enumerable: true,
 configurable: true
},
{ value: 42, writable: true, enumerable: true, configurable: true },
{ value: 1, writable: false, enumerable: false, configurable: false }
```

- `writable`은 객체의 프로퍼티가 쓰기 가능한지의 여부다.

```javascript
hello.number = 41
console.log(hello.number) //41 로 바꼈다.

hello.hell = 10
console.log(hello.hell) // 1이 리턴되며, 바뀌지가 않는다.
```

- `enumberable`은 객체의 프로퍼티가 열거 가능한지의 여부이며, false라면 `Object.keys`, `Object.values`, `Object.entries`등에서도 해당 프로퍼티를 볼 수 없다.

```javascript
console.log(Object.keys(hello)) // [ 'hi', 'number' ] 가 뜨며, hell은 안보인다 ㅠㅠ
``` 

- `configurable`은 해당 프로퍼티가 `defineProperty`를 통해 설정될 수 있는지 여부이며, false라면 `defineProperty`로 해당 객체를 설정할 수가 없다.

```javascript
// 다시 define 해보자
Object.defineProperties(hello, {
 hell: {
 value: true, 
 enumerable: true,
 configurable: true,
 writable: true
 }
}) // TypeError: Cannot redefine property: hell
```

- 위에서 본 것처럼 `getter`와 `setter`도 있는데, 이는 주로 동적으로 계산한 값을 반환하는 프로퍼티에 접근하거나, 메소드 호출을 하지 않고도 내부 변수에 접근해야 하는 경우 등에 사용한다. 


### 1. 데코레이터

데코레이터는 클래스의 프로퍼티 / 메소드 / 클래스 자체를 수정하는데 사용되는 자바스크립트 함수다. `@xxx`로 작성 될 수 있으며 수정할 프로퍼티 / 메소드 / 클래스 윗줄에 추가해주면 된다. 이는 적용된 메소드가 호출되거나, 인스턴스가 만들어지는 것과 같은 런타임에 실행된다.

#### 클래스 데코레이터

클래스 위에 선언되어, 클래스 자체를 수정하는 예제.

```typescript
// 클래스의 constructor를 덮어쓴다.
function setName(name: string) {
 return <T extends { new(...args: any[]): {} }>(constructor: T) => {
 return class extends constructor {
 name = name
 } 
 } 
}


@setName('trump')
class President {
 
 name: string

 constructor(name: string) {
 this.name = name
 }

 sayHello() {
 console.log(`hello, ${this.name}`)
 }
}

const t = new President('obama')
console.log(t.sayHello()) // hello, trump
```



#### 메소드 데코레이터

아래 예제에서는 메소드에 데코레이터가 쓰였으며, 메소드에 logger를 달거나, readOnly등의 속성으로 `writable`을 손쉽게 막을 수 있다.

```typescript
function readOnly(isReadOnly: boolean) {
 return function(target: Person, propName: string, description: PropertyDescriptor) {
 description.writable = isReadOnly;
 }
}

const logger = (message: string) => (target: Person, propName: string, description: PropertyDescriptor) => {
 const value = description.value

 description.value = function (...args: any) {
 console.log('LOG >>>', message)
 return value.apply(this, args)
 }
 }

class Person {
 name: string;
 
 constructor(name: string) {
 this.name = name
 }

 @logger('Say hello name')
 @readOnly(false)
 sayHello() {
 return `hello, ${this.name}`
 }
}

const trump = new Person('trump')

console.log(trump.sayHello())
// LOG >>> Say hello name
/// hello, trump

trump.sayHello = () => 'hi xxx'
// Cannot assign to read only property 'sayHello' of object '#<Person>'
```

#### 접근자 데코레이터 (Access Decortaor)

접근자 데코레이터는, 접근자를 선언하기 바로 직전에 선언된다. 이를 이용해 접근자의 정의를 관찰, 수정, 교체 하는 등에도 사용할 수 있다. 


```typescript
function configurable(value: boolean) {
 return function (target: any, propertyKey: string, descriptor: PropertyDescriptor) {
 descriptor.configurable = value;
 };
}

class Person {
 private name: string;
 constructor(name: string) {
 this.name = name;
 }

 @configurable(false)
 get hi() { return this.name; }
}
```

이 밖에도 프로퍼티 데코레이터, 매개변수 데코레이터 등이 있다. 이 두가지 케이스는, `reflect-metadata`를 사용해야 하고, 아직 공식적으로 ECMA에 채택되지도 않았다.

## 데코레이터 ### 0. 설명자  데코레이터에 대해 시작하기 전에, 설명자(Descriptor)에 대해 알아보자.  설명자란, 객체의 프로퍼티가 쓰기가 가능한지, 그리고 열거가 가능한지 여부를 나타낸다. 그리고 설명자를 구현하기 위해서는, [Object.getOwnPropertyDescriptor(obj, propName)](https://develo...

자바스크립트 데코레이터

ES6에서부터 생긴 `arrow function`은 일반적으로 `()=>{}`의 모양을 하고 있으며, 동작도 비슷해보인다. 하지만 이 두 선언방식은 두가지 분명한 차이를 가지고 있다.

하지만 그전에 this를 알아야 한다.

## 0. this

`this` 는 현재 실행 문맥을 뜻한다. 즉, 호출한 것이 누구냐는 것이다.

```javascript
console.log(this === window) // true
```

위 코드에서는 `console.log`를 호출한 것이 window이기 때문에 true를 리턴한다.

```javascript
const hello = {
  hi: function() {
    console.log(this === window)
    console.log(this)
  },
}
hello.hi() // false
```

위 코드에서 `this`는 `hi`다. 즉, `this`는 현재 실행 문맥을 의미한다.

## 1. this와 arguments의 차이

화살표 함수는 `this`와 `arguments`를 바인딩하지 않는다. 그 대신, 일반적인 `this`와 `arguments`와 동일한 범위를 가지고 있다.

```javascript
function createObject() {
  console.log('Inside `createObject`:', this.foo, this);
  return {
    foo: 42,
    bar: function() {
      console.log('Inside `bar`:', this.foo, this);
    },
  };
}

createObject.call({foo: 21}).bar();
```
위 함수의 결과는

```
Inside `createObject`: 21, {foo: 21}
Inside `bar`: 42, bar: f
```

가 된다. 위 `console.log`에서의 this는 `call`인자로 넘겨준 `{foo:21}`이고, `bar`가 호출되는 시점에서 `this`는 `bar`이다. `bar`시점에서 `this.foo`는, `{foo:42}`가 된다.


그러나 화살표 함수에서는 약간 다르다.

```javascript
function createObject() {
  console.log('Inside `createObject`:', this.foo, this);
  return {
    foo: 42,
    bar: () => console.log('Inside `bar`:', this.foo, this),
  };
}

createObject.call({foo: 21}).bar(); 
```

결과는

```
Inside `createObject`: 21, {foo: 21}
Inside `bar`: 21, {foo: 21}
```

즉, 화살표 함수안에서의 `this`는 `createObject`안의 `this`를 따르게 된다.  이는 화살표 함수가 현재 환경의 `this`를 따르게 하고 싶을 때 유용하다는 뜻이다. 



## 2. 화살표 함수는 `new`로 호출할수 없다.

es2015에서는 `callable`한 것과 `constructable`한 것과의 차이를 두고 있다. 어떤 함수가 `constructable`하다면, 이는 `new`로 호출되어야 한다. ex) `new User()` 그리고 만약 함수가 `callable`하다면, 이 함수는 `new`없이도 호출이 되어야 한다 .ex) 일반적인 함수 호출

일반적인 함수의 경우 `callable`하며 `constructable`하다. 그러나 화살표 함수는 오로지 `callable`할 뿐이다. 반대로 `class`의 경우에는 오로지 `constructable`할 뿐이다. 

## 정리

서로 바꿔서 쓸 수 있는 경우
- `this`, `arguments`를 쓰지 않는 경우
- `bind(this)`를 사용하는 경우

서로 바꿔쓸 수 없는 경우
- `constructable` 함수
- `prototype`에 추가된 함수나 메소드
- `arguments`를 함수의 인자로 사용하는 경우



ES6에서부터 생긴 `arrow function`은 일반적으로 `()=>{}`의 모양을 하고 있으며, 동작도 비슷해보인다. 하지만 이 두 선언방식은 두가지 분명한 차이를 가지고 있다. 하지만 그전에 this를 알아야 한다.

javascript 일반 함수와 화살표 함수의 차이

이 글은 [은닉을 향한 자바스크립트의 여정](https://meetup.toast.com/posts/228)을 요약한 글입니다.

## History

자바스크립트에서는 객체에 private 한 속성을 만들 수가 없었다. 그래서 보통 자바스크립트 개발자는 private한 것이다 라는 약속으로 `_` prefix를 붙여서 사용하고는 했었다.

```javascript
function Hello() {
  this.publicProp = "public"
  this._privateProp = "private"
}
```

물론 자바스크립트 개발자들은 `_`의 존재로 해당 속성을 건들지 말아야겠다는 것을 암묵적으로 공유했지만, 어디까지나 암묵적인 것일 뿐, 실제로는 밖에서 얼마든지 접근 할 수 있다.

좀 더 이 문제를 자바스크립트스럽게 해결하기 위해서는, 클로저를 활용하면 된다.

```javascript
function Hello() {
  this.publicProp = "public"
  const privateProp = "private"

  _doWithPrivateProp = () => {
    // do something
  }
}
```

비록 `this`와 `const`가 짬뽕이 되면서, 가독성이 떨어지긴 하지만, 효과적으로 데이터를 격리 시켰다. 위와 같은 방법을 사용해서 메소드도 숨길 수 있다.

```javascript
function Hello() {
  const publicProp = "public"
  const privateProp = "private"

  _doWithPrivateProp = () => {
    // ...
  }

  const publicMethod = () => {
    _doWithPrivateProp()
    // ...
  }

  return {
    publicProp,
    publicMethod,
  }
}
```

`Symbol`을 사용해 볼 수도 있다.

```javascript
const privateMethodName = Symbol()
const privatePropName = Symbol()

class Hello {
  [privatePropName] = "private"
  publicProp = "public";

  [privateMethodName]() {
    // ...
  }

  publicMethod() {
    this[privateMethodName](this[privatePropName])
  }
}
```

`Symbol`은 생성될 때 마다 고유의 값을 가지므로, 외부에서는 이를 export하지 않는 이상 접근할 수 없다.

## # 의 등장

해당 제안 내용은 [여기](https://github.com/tc39/proposal-class-fields/)에서 자세히 확인할 수 있다.

```javascript
class Hello {
  #message = 'hello'
}

const hello = new Hell()
hello.#message
```

```
Uncaught SyntaxError: Private field '#message' must be declared in an enclosing class
```

private 하기 때문에 접근 할 수 없다는 메시지가 뜬다.

여기에서 `#`은 prefix이기 때문에 꼭 접근시에 `#`을 써야 한다.

```javascript
class Hello {
  #message = "hello"

  getMessage() {
    return this.message // 안됨
  }
}
```

상속을 받는다 하더라도 접근이 되지 않는다.

```javascript
class Hello {
  #message = "hello"

  getMessage() {
    return this.#message
  }
}

class Hi extends Hello {
  getHiMessage() {
    return this.#message
  }
}

const hi = new Hi()
hi.getHelloMessage() // Uncaught SyntaxError: Private field '#message' must be declared in an enclosing clas
```

추가로 모든 private 필드는 클래스 별로 독립된 고유한 스코프를 갖는다.

```javascript
class Hello {
  #message = "hello"

  getMessage() {
    return this.#message
  }
}

class Hi extends Hello {
  #message = 'hi'

  getHiMessage() {
    return this.#message
  }
}

const hi = new Hi()
const hello = new Hello()
console.log(hello.getMessage()) // hello
console.log(hi.getHiMessage()) // hi
```

## 타입스크립트에서는?

https://www.typescriptlang.org/docs/handbook/classes.html#ecmascript-private-fields
https://www.typescriptlang.org/docs/handbook/classes.html#understanding-typescripts-private

위에서 언급한 `#` 문법과 더불어 (3.8부터) `private` 키워드 도 지원한다.

https://devblogs.microsoft.com/typescript/announcing-typescript-3-8-beta/#ecmascript-private-fields

여기에 좋은 내용이 정리되어 있다.

- Private 필드는 `#`으로 시작된다. 
- 모든 private 필드는 속한 클래스에서 고유한 스코프를 가지고 있다.
- `#`은 타입스크립트의 `public` `private`과 함게 사용할 수 없다.
- Private 필드는 클래스 밖에서 접근하거나 알아챌 수 없다. (JS도 마찬가지)


이 글은 [은닉을 향한 자바스크립트의 여정](https://meetup.toast.com/posts/228)을 요약한 글입니다. ## History  자바스크립트에서는 객체에 private 한 속성을 만들 수가 없었다. 그래서 보통 자바스크립트 개발자는 private한 것이다 라는 약속으로 `_` prefix를 붙여서 사용하고는 했었다.  ```javas...

yceffort

javascript

자바스크립트 제네레이터

var let const, 그리고 호이스팅

자바스크립트 데코레이터

javascript 일반 함수와 화살표 함수의 차이

자바스크립트의 private