## 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...

자바스크립트의 private

https://redux.js.org/glossary#state

## 용어 모음

### State (상태)

```typescript
type State = any
```

State (State tree라고 도 불리운다)는 Redux API에서는 보통 스토어에서 관리하고, `getState()`에 의해 반환되는 단일 값을 가리킨다.

관례적으로, 가장 최상단의 상태는 객체 또는 키값 형태의 맵이지만, 기술적으로는 어떤 타입도 될 수 있다. 여전히, 이 상태값을 직렬화 될 수 있게 관리할 수 있도록 최선을 다해야 한다.

### Action (액션)

```typescript
type Action = Object
```

액션은 순수한 오브젝트로, 상태의 변경을 어떤식으로 할지를 나타낸다. 액션은 스토어에 저장되어 있는 데이터를 꺼내오는 유일한 방법이다. 네트워크 콜백이든, UI 이벤트든, 혹은 웹소캣과같은 다른 어떠한 이벤트 소스에서오든 데이터 이든지 간에, 결국 액션을 통해서 dispatch해야 한다.

액션은 반드시 액션이 실행되는 type을 가르키는 type 필드를 가지고 있어야 한다. Types은 상수또는 다른 모듈에서 가져오는 방법으로 정의될 수 있다. Symbol보다는 string을 타입으로 사용하는 것이 좋은데, 그 이유는 직렬화 될 수 있기 때문이다.

타입 이 외에는, 액션 오브젝트의 구조는 개발자의 손에 달려있다. 만약 액션이 어떻게 구조화되는지 관심있다면, [Flux Standard Action](https://github.com/redux-utilities/flux-standard-action)을 참조하길 바란다.

#### 액션은

```typescript
{
 type: 'ADD_TODO',
 payload: new Error(),
 error: true
}
```

반드시 (MUST)

- 순수 자바스크립트 오브젝트여야 한다.
- `type` 속성을 가지고 있어야 한다.

되도록 (MAY)

- `error`속성을 가지고 있으면 좋다
- `payload`속성을 가지고 있으면 좋다
- `meta`속성을 가지고 있으면 좋다

#### type

액션의 타입은 컨슈머에 액션이 일으키는 속성을 가르킨다. 만약 타입이 똑같다면, 이들은 엄격하게 일치해야한다 (===)

#### payload

`payload`는 어떤 타입의 값이든 가질 수 있다. 이는 액션이 가지는 `payload`를 의미한다. `type`또는 `status`를 제외한 액션의 정보는 모두 `payload`에 있어야 한다. 관례적으로, `error`가 `true`라면, `payload`는 에러 객체를 가지고 있어야 한다. 이는 오류의 promise가 오류시 오류 객체를 리턴하는 것과 같다.

#### error

옵셔널 속성인 `error`는 만약 액션에 에러가 있을 경우 `true`로 세팅된다. error가 true인 액션은 리젝트된 promise와 유사하다. 관례상 payload는 오류 객체가 되어야 한다.

만약 `error`에 `null`을 포함하여 `true`외 에 다른 값이 있는 경우, 해당 액션을 오류로 보지 않는다.

#### meta

옵셔널 속성인 `meta`는 어떤 타입의 값이든 될 수 있다. 여기에는 `payload`의 일부가 될 수 없는 추가적인 정보를 담기위해 설정되어있다.

### Reducer

```typescript
type Reducer<S, A> = (state: S, action: A) => S
```

리듀서는 (리듀싱 함수라고도 불리운다) 파라미터(`accumulation`)를 받아서 새로운 파라미터를 반환하는 함수다. 이는 value의 모음을 하나의 value로 축약하는데 사용된다.

리듀서는 리덕스만의 독특한 것이 아니다. 이는 함수형 프로그래밍의 기초적인 컨셉이다. 심지어 자바스크립트와 같은 비 함수적인 언어에서도 리듀싱을 위한 api가 존재한다. [Array.prototype.reduce()
](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)

리덕스에서 누적되는 값 (리듀싱 되는 값)은 상태 오브젝트이며, 여기의 값들은 action에 의해 누적된다. 리듀서는 이전의 상태와 액션을 기반으로 새로운 상태를 만들어 낸다. 이들은 모두 순수함수여야만 한다. 함수들은 주어진 입력값으로 정확히 같은 결과값을 내야 한다. 또한 사이드 이펙트에서 자유로워야 한다. 이러한 전제는 핫 리로딩이나 타임 트래블 (과거의 값을 가져오는)을 가능하게 해준다.

### Dispatching function

```typescript
type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
```

dispatching function (간단히 dispatch function)는 함수가 액션 또는 비동기 액션을 받아드리는 것을 의미한다.

여기에서 일반적인 function dispatching과 어떠한 미들웨어를 거치지 않은 스토어에 제공하는 dispatch function 을 구별해야 한다.

`Base Dispatch function`은 스토어의 리듀서에 동기 액션을 제공해야 하는데, 여기에는 이전의 상태값을 통해서 계산된 새로운 상태값이 포함되어야 한다.

미들웨어는 `dispatch function`을 래핑한다. 이는 `dispatch function`이 비동기 액션을 다룰 수 있도록 한다. 미들웨어는 transform, delay, ignore 등 action을 interpret하는 어떤 것이 될수도 있다. 또한 다음 미들웨어에 넘기기전 비동기 액션이 될 수도 있다. 자세한 것은 하단의 내용을 참고하길 바란다.

### Action Creator

```typescript
type ActionCreator = (...args: any) => Action | AsyncAction
```

`Action Creator`는 간단히 말해서 액션을 만드는 함수다. 액션은 payload정보, `Action Creator`는 액션을 만들기 위한 팩토리 임을 구별해야 한다.

`Action Creator`를 호출한다는 것은 단순히 액션을 만드는 것이지, dispatch하는 것이 아니다. 값에 변화를 주기 위해서는 dispatch를 사용해야 한다. 이 따금 `bound action creator`라는 용어가 나오는데, 이는 action creator를 호출하고 그즉시 그 결과를 특정 스토어에 dispatch하는 것을 의미한다.

만약 `Action Creator`가 현재 상태를 읽어오거나, API호출을 하거나, 라우팅 전환 같은 작업을 수행해야 하는 경우 비동기 액션을 반환해야 한다.

### Async Action

```typescript
type AsyncAction = any
```

비동기 액션은 dispatching function에 내보내 지는 값이지만, 아직 리듀서에서 사용할 준비가 안된 값이다. 이는 dispatch 함수를 통해 보내지기 전에 미들웨어를 통해 처리될 필요가 있다. 비동기 액션은 미들웨어에 따라서 다양한 타입이 될 수 있다. 이것들은 Promise나 thunk같은 비동기 원시타입이 될 수 있는데, 이들은 리듀서에 바로 넘길 수는 없지만, 작업이 끝나게 되면 dispatch할 수 있다.

### Middleware

```typescript
type MiddlewareAPI = { dispatch: Dispatch; getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
```

미들웨어는 higher-order function으로 dispatch function 을 compose해 새로운 dispatch function을 만든다. 때로는 비동기 액션을 액션으로 바꾸기도 한다.

미들웨어는 함수 합성으로 만들 수 있다. 미들웨어는 액션에 로그를 남기거나, 라우팅, 비동기 API 호출 등 사이드 이펙트를 발생시키는 것들을 동기 액션 내에서 사용할 때 유용하다.

[여기](https://redux.js.org/api/applymiddleware)를 참고하여 미들웨어가 어떻게 생겼는지 살펴보자.

### Store

```typescript
type Store = {
 dispatch: Dispatch
 getState: () => State
 subscribe: (listener: () => void) => () => void
 replaceReducer: (reducer: Reducer) => void
}
```

store란 애플리케이션의 상태 트리를 가지고 있는 객체다. 리덕스 앱에서는 다양한 리듀서레벨을 합성하여 단하나의 스토어만 둘 수 있다.

- [dispatch(action)](https://redux.js.org/api/store#dispatchaction)은 base dispatch를 의미한다.
- [getState()](https://redux.js.org/api/store#getState)는 현재 스토어의 상태 값을 리턴한다.
- [subscribe](https://redux.js.org/api/store#subscribelistener)는 상태의 변화가 있을때 호출되는 함수를 등록할 수 있다.
- [replaceReducer(nextReducer)](https://redux.js.org/api/store#replacereducernextreducer) 핫리로딩이나 코드 스플리팅에 사용할 수 있다. 대부분의 경우 사용할 일이 없다.

[여기](https://redux.js.org/api/store#dispatchaction)에서 자세한 내용을 확인할 수 있다.

### Store creator

```typescript
type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
```

`Store creator`는 리덕스 스토어를 만드는 함수다. dispatching function과 마찬가지로, 리덕스 패키지에서 내보낸 [createStore(reducer, preloadedState)](https://redux.js.org/api/createstore)와 store enhancer에서 반환되는 store creator를 구분해야 한다.

### Store enhancer

```typescript
type StoreEnhancer = (next: StoreCreator) => StoreCreator
```

store enhancer는 higher-order function으로 store creator로 새로운 store creator를 반환하는 함수다. 이는 composable한 방식으로 스토어를 변형할 수 있다는 것에서 미들웨어와 비슷하다.

store enhancer는 리액트의 higher-order 컴포넌트와 매우 비슷한데, 리액트에서도 이를 `component enhancer`로 부른다.

스토어는 인스턴스가 아니라 단순한 객채의 집합인 함수이기 때문에, 원래 스토어를 변형시키지 않고도 복사분을 쉽게 만들고 수정할 수 있다. [여기](https://redux.js.org/api/compose)에서 예제를 찾아볼 수 있다.

그러나 아마 이를 쓸일이 별로 없을 것이다. 그러나 개발 툴에서 제공하는 것을 사용할 수 있다. 일례로 앱에서 일어나는 것을 타임 트레블로 녹화하거나 재생할 때 사용된다. 재밌게도, 리덕스의 미들웨어 구현은 그자체가 store enhancer다.

https://redux.js.org/glossary#state ## 용어 모음  ### State (상태)  ```typescript type State = any ```  State (State tree라고 도 불리운다)는 Redux API에서는 보통 스토어에서 관리하고, `getState()`에 의해 반환되는 단일 값을 가리킨다.  관례적으로, 가장...

리덕스 공부해보기 (3) - 용어

<a href="https://redux.js.org/glossary#state">https://redux.js.org/glossary#state</a>
<h2 id="용어-모음">용어 모음</h2>
<h3 id="state-상태">State (상태)</h3>
<pre class="language-typescript"><code class="language-typescript">type State = any
</code></pre>
State (State tree라고 도 불리운다)는 Redux API에서는 보통 스토어에서 관리하고, <code>getState()</code>에 의해 반환되는 단일 값을 가리킨다.
관례적으로, 가장 최상단의 상태는 객체 또는 키값 형태의 맵이지만, 기술적으로는 어떤 타입도 될 수 있다. 여전히, 이 상태값을 직렬화 될 수 있게 관리할 수 있도록 최선을 다해야 한다.
<h3 id="action-액션">Action (액션)</h3>
<pre class="language-typescript"><code class="language-typescript">type Action = Object
</code></pre>
액션은 순수한 오브젝트로, 상태의 변경을 어떤식으로 할지를 나타낸다. 액션은 스토어에 저장되어 있는 데이터를 꺼내오는 유일한 방법이다. 네트워크 콜백이든, UI 이벤트든, 혹은 웹소캣과같은 다른 어떠한 이벤트 소스에서오든 데이터 이든지 간에, 결국 액션을 통해서 dispatch해야 한다.
액션은 반드시 액션이 실행되는 type을 가르키는 type 필드를 가지고 있어야 한다. Types은 상수또는 다른 모듈에서 가져오는 방법으로 정의될 수 있다. Symbol보다는 string을 타입으로 사용하는 것이 좋은데, 그 이유는 직렬화 될 수 있기 때문이다.
타입 이 외에는, 액션 오브젝트의 구조는 개발자의 손에 달려있다. 만약 액션이 어떻게 구조화되는지 관심있다면, <a href="https://github.com/redux-utilities/flux-standard-action">Flux Standard Action</a>을 참조하길 바란다.
<h4 id="액션은">액션은</h4>
<pre class="language-typescript"><code class="language-typescript">{
 type: 'ADD_TODO',
 payload: new Error(),
 error: true
}
</code></pre>
반드시 (MUST)
<ul>
<li>순수 자바스크립트 오브젝트여야 한다.</li>
<li><code>type</code> 속성을 가지고 있어야 한다.</li>
</ul>
되도록 (MAY)
<ul>
<li><code>error</code>속성을 가지고 있으면 좋다</li>
<li><code>payload</code>속성을 가지고 있으면 좋다</li>
<li><code>meta</code>속성을 가지고 있으면 좋다</li>
</ul>
<h4 id="type">type</h4>
액션의 타입은 컨슈머에 액션이 일으키는 속성을 가르킨다. 만약 타입이 똑같다면, 이들은 엄격하게 일치해야한다 (===)
<h4 id="payload">payload</h4>
<code>payload</code>는 어떤 타입의 값이든 가질 수 있다. 이는 액션이 가지는 <code>payload</code>를 의미한다. <code>type</code>또는 <code>status</code>를 제외한 액션의 정보는 모두 <code>payload</code>에 있어야 한다. 관례적으로, <code>error</code>가 <code>true</code>라면, <code>payload</code>는 에러 객체를 가지고 있어야 한다. 이는 오류의 promise가 오류시 오류 객체를 리턴하는 것과 같다.
<h4 id="error">error</h4>
옵셔널 속성인 <code>error</code>는 만약 액션에 에러가 있을 경우 <code>true</code>로 세팅된다. error가 true인 액션은 리젝트된 promise와 유사하다. 관례상 payload는 오류 객체가 되어야 한다.
만약 <code>error</code>에 <code>null</code>을 포함하여 <code>true</code>외 에 다른 값이 있는 경우, 해당 액션을 오류로 보지 않는다.
<h4 id="meta">meta</h4>
옵셔널 속성인 <code>meta</code>는 어떤 타입의 값이든 될 수 있다. 여기에는 <code>payload</code>의 일부가 될 수 없는 추가적인 정보를 담기위해 설정되어있다.
<h3 id="reducer">Reducer</h3>
<pre class="language-typescript"><code class="language-typescript">type Reducer&#x3C;S, A> = (state: S, action: A) => S
</code></pre>
리듀서는 (리듀싱 함수라고도 불리운다) 파라미터(<code>accumulation</code>)를 받아서 새로운 파라미터를 반환하는 함수다. 이는 value의 모음을 하나의 value로 축약하는데 사용된다.
리듀서는 리덕스만의 독특한 것이 아니다. 이는 함수형 프로그래밍의 기초적인 컨셉이다. 심지어 자바스크립트와 같은 비 함수적인 언어에서도 리듀싱을 위한 api가 존재한다. <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce">Array.prototype.reduce()
</a>
리덕스에서 누적되는 값 (리듀싱 되는 값)은 상태 오브젝트이며, 여기의 값들은 action에 의해 누적된다. 리듀서는 이전의 상태와 액션을 기반으로 새로운 상태를 만들어 낸다. 이들은 모두 순수함수여야만 한다. 함수들은 주어진 입력값으로 정확히 같은 결과값을 내야 한다. 또한 사이드 이펙트에서 자유로워야 한다. 이러한 전제는 핫 리로딩이나 타임 트래블 (과거의 값을 가져오는)을 가능하게 해준다.
<h3 id="dispatching-function">Dispatching function</h3>
<pre class="language-typescript"><code class="language-typescript">type BaseDispatch = (a: Action) => Action
type Dispatch = (a: Action | AsyncAction) => any
</code></pre>
dispatching function (간단히 dispatch function)는 함수가 액션 또는 비동기 액션을 받아드리는 것을 의미한다.
여기에서 일반적인 function dispatching과 어떠한 미들웨어를 거치지 않은 스토어에 제공하는 dispatch function 을 구별해야 한다.
<code>Base Dispatch function</code>은 스토어의 리듀서에 동기 액션을 제공해야 하는데, 여기에는 이전의 상태값을 통해서 계산된 새로운 상태값이 포함되어야 한다.
미들웨어는 <code>dispatch function</code>을 래핑한다. 이는 <code>dispatch function</code>이 비동기 액션을 다룰 수 있도록 한다. 미들웨어는 transform, delay, ignore 등 action을 interpret하는 어떤 것이 될수도 있다. 또한 다음 미들웨어에 넘기기전 비동기 액션이 될 수도 있다. 자세한 것은 하단의 내용을 참고하길 바란다.
<h3 id="action-creator">Action Creator</h3>
<pre class="language-typescript"><code class="language-typescript">type ActionCreator = (...args: any) => Action | AsyncAction
</code></pre>
<code>Action Creator</code>는 간단히 말해서 액션을 만드는 함수다. 액션은 payload정보, <code>Action Creator</code>는 액션을 만들기 위한 팩토리 임을 구별해야 한다.
<code>Action Creator</code>를 호출한다는 것은 단순히 액션을 만드는 것이지, dispatch하는 것이 아니다. 값에 변화를 주기 위해서는 dispatch를 사용해야 한다. 이 따금 <code>bound action creator</code>라는 용어가 나오는데, 이는 action creator를 호출하고 그즉시 그 결과를 특정 스토어에 dispatch하는 것을 의미한다.
만약 <code>Action Creator</code>가 현재 상태를 읽어오거나, API호출을 하거나, 라우팅 전환 같은 작업을 수행해야 하는 경우 비동기 액션을 반환해야 한다.
<h3 id="async-action">Async Action</h3>
<pre class="language-typescript"><code class="language-typescript">type AsyncAction = any
</code></pre>
비동기 액션은 dispatching function에 내보내 지는 값이지만, 아직 리듀서에서 사용할 준비가 안된 값이다. 이는 dispatch 함수를 통해 보내지기 전에 미들웨어를 통해 처리될 필요가 있다. 비동기 액션은 미들웨어에 따라서 다양한 타입이 될 수 있다. 이것들은 Promise나 thunk같은 비동기 원시타입이 될 수 있는데, 이들은 리듀서에 바로 넘길 수는 없지만, 작업이 끝나게 되면 dispatch할 수 있다.
<h3 id="middleware">Middleware</h3>
<pre class="language-typescript"><code class="language-typescript">type MiddlewareAPI = { dispatch: Dispatch; getState: () => State }
type Middleware = (api: MiddlewareAPI) => (next: Dispatch) => Dispatch
</code></pre>
미들웨어는 higher-order function으로 dispatch function 을 compose해 새로운 dispatch function을 만든다. 때로는 비동기 액션을 액션으로 바꾸기도 한다.
미들웨어는 함수 합성으로 만들 수 있다. 미들웨어는 액션에 로그를 남기거나, 라우팅, 비동기 API 호출 등 사이드 이펙트를 발생시키는 것들을 동기 액션 내에서 사용할 때 유용하다.
<a href="https://redux.js.org/api/applymiddleware">여기</a>를 참고하여 미들웨어가 어떻게 생겼는지 살펴보자.
<h3 id="store">Store</h3>
<pre class="language-typescript"><code class="language-typescript">type Store = {
 dispatch: Dispatch
 getState: () => State
 subscribe: (listener: () => void) => () => void
 replaceReducer: (reducer: Reducer) => void
}
</code></pre>
store란 애플리케이션의 상태 트리를 가지고 있는 객체다. 리덕스 앱에서는 다양한 리듀서레벨을 합성하여 단하나의 스토어만 둘 수 있다.
<ul>
<li><a href="https://redux.js.org/api/store#dispatchaction">dispatch(action)</a>은 base dispatch를 의미한다.</li>
<li><a href="https://redux.js.org/api/store#getState">getState()</a>는 현재 스토어의 상태 값을 리턴한다.</li>
<li><a href="https://redux.js.org/api/store#subscribelistener">subscribe</a>는 상태의 변화가 있을때 호출되는 함수를 등록할 수 있다.</li>
<li><a href="https://redux.js.org/api/store#replacereducernextreducer">replaceReducer(nextReducer)</a> 핫리로딩이나 코드 스플리팅에 사용할 수 있다. 대부분의 경우 사용할 일이 없다.</li>
</ul>
<a href="https://redux.js.org/api/store#dispatchaction">여기</a>에서 자세한 내용을 확인할 수 있다.
<h3 id="store-creator">Store creator</h3>
<pre class="language-typescript"><code class="language-typescript">type StoreCreator = (reducer: Reducer, preloadedState: ?State) => Store
</code></pre>
<code>Store creator</code>는 리덕스 스토어를 만드는 함수다. dispatching function과 마찬가지로, 리덕스 패키지에서 내보낸 <a href="https://redux.js.org/api/createstore">createStore(reducer, preloadedState)</a>와 store enhancer에서 반환되는 store creator를 구분해야 한다.
<h3 id="store-enhancer">Store enhancer</h3>
<pre class="language-typescript"><code class="language-typescript">type StoreEnhancer = (next: StoreCreator) => StoreCreator
</code></pre>
store enhancer는 higher-order function으로 store creator로 새로운 store creator를 반환하는 함수다. 이는 composable한 방식으로 스토어를 변형할 수 있다는 것에서 미들웨어와 비슷하다.
store enhancer는 리액트의 higher-order 컴포넌트와 매우 비슷한데, 리액트에서도 이를 <code>component enhancer</code>로 부른다.
스토어는 인스턴스가 아니라 단순한 객채의 집합인 함수이기 때문에, 원래 스토어를 변형시키지 않고도 복사분을 쉽게 만들고 수정할 수 있다. <a href="https://redux.js.org/api/compose">여기</a>에서 예제를 찾아볼 수 있다.
그러나 아마 이를 쓸일이 별로 없을 것이다. 그러나 개발 툴에서 제공하는 것을 사용할 수 있다. 일례로 앱에서 일어나는 것을 타임 트레블로 녹화하거나 재생할 때 사용된다. 재밌게도, 리덕스의 미들웨어 구현은 그자체가 store enhancer다.

yceffort

var let const, 그리고 호이스팅

자바스크립트 데코레이터

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

자바스크립트의 private

리덕스 공부해보기 (3) - 용어