
## 실행 컨텍스트 (Execution context)

---

> **Execution context**
>  is the abstract concept used by ECMA-262 specification for typification and differentiation of an executable code.

ECMAScript 에서는 실행 컨텍스트를 실행 가능한 코드를 유형화하고 구별하기 위한 추상적인 개념이라고 정의하고 있다.

쉽게 설명하자면 실행 코드의 런타임 환경을 알기 위한 추상적인 개념으로 보면 된다.

실행 컨텍스트는 코드가 처음 실행될 때와 함수가 호출될 때마다 각각 생성되며 이를 각각 전역 컨텍스트 ( Global EC ) 와 함수 컨텍스트 ( Function EC ) 라 한다. 이 컨텍스트들은 스택에서 관리되며 이를 실행 컨텍스트 스택 ( EC Stack ) 혹은 콜 스택 ( Call Stack ) 이라 한다.

### 실행 컨텍스트의 구성 변경 (ES5)

ES3 의 실행 컨텍스트는 실행 환경을 관리하기 위해 변수 객체(Variable Object), 스코프 체인 ( Scope Chain) 과 같은 개념을 사용했었다. 하지만 ES5로 넘어오며 렉시컬 환경( **Lexcial Environment** ) 기반으로 변경되었다.

ES5 에서 변경된 실행 컨텍스트의 구성 요소를 알기 전에, 먼저 렉시컬 환경에 대해 알아야 할 필요가 있다.

## 렉시컬 환경 (Lexical environment)

---

> **Lexical Environment**
>  is a specification type used to define the association of *Identifiers* to specific variables and functions based upon the lexical nesting structure of ECMAScript code.

렉시컬 환경은 코드를 실행하기 위한 필요한 식별자를 찾기 위해서 사용하는 것으로, 스코프 안에서 정의된 변수, 함수의 정보가 담겨져 있다.

렉시컬이라는 표현은 자바스크립트의 스코프 타입과 관련이 있는데, 자바스크립트는 렉시컬 ( 또는 정적 ) 스코프 ( Lexical Scope, Static Scope ) 를 따른다. 이는 식별자가 유효한 상위 스코프를 함수가 어디에 선언되었는지에 따른다는 의미이다.

자바스크립트의 렉시컬 환경은 두 요소로 구성된다

- 환경 레코드 ( Environment Record )
- 외부 환경 참조 ( Refrence to the outer environment )

### 환경 레코드 ( Environment Record )

해당 실행 컨텍스트의 렉시컬 스코프 내에서 생성된 변수, 함수의 식별자 정보를 저장한다. .

컨텍스트가 생성될 때 식별자 정보를 수집하기 때문에 코드가 실행되기 전에도 식별자에 접근이 가능한데, 이것이 호이스팅 ( Hoisiting ) 개념 이다.

렉시컬 스코프는 함수 선언, catch 구문, with 구문 에 따라 새로 생성된다. ES6 이후에는 let, const 의 블록 스코프 개념이 추가되며 블록 구문도 해당 경우에 추가되었다.

### 외부 환경 참조 ( Reference to outer environment )

렉시컬 스코프 기준으로 상위 렉시컬 환경을 레퍼런스한다. 여기서 상위 환경은 렉시컬 스코프를 따르므로 해당 실행 컨텍스트에 해당하는 함수가 선언될 당시의 렉시컬 환경을 말한다.

```jsx
var x = 10;
function foo() {
  var y = 20;

  function bar() {
    var z = 30;
  }

  function baz() {
    var w = 40;
  }
}
```

```jsx
//전역 컨텍스트
globalEnvironment = {
	environmentRecord : {
		//빌트인 변수, 함수
		Object : function,
		Array : function,
		....

		x : 10,
	},
	outer : null
}
// foo 함수 컨텍스트
fooEnvironment = {
	environmentRecord : {
		y : 20
	},
	outer : globalEnvironment
}
// bar 함수 컨텍스트
barEnvironment = {
	environmentRecord : {
		z : 30
	},
	outer : fooEnvironment
}
// baz 함수 컨텍스트
bazEnvironment = {
	environmentRecord : {
		w : 40
	},
	outer : fooEnvironment
}
```

## 실행 컨텍스트의 렉시컬 환경

---

ES5 이후 현재 실행 컨텍스트는 두가지 렉시컬 환경으로 구성된다.

- VariableEnvironment
- LexicalEnvironment

![](/posts/notes/js/execution-context.png)

### LexicalEnvironment

직역 : 실행 컨텍스트 내부에 있는 코드에 의해 만들어진 식별자를 탐색하는데 쓰이는 렉시컬 환경

렉시컬 환경은 기본적으로 해당 실행 컨텍스트에 따르지만, catch 구문, block 구문 등에 따라서도 새로운 환경이 나오게 된다. LexicalEnvironment 는 바로 이 환경을 지칭하며, 보통 렉시컬 환경이라고 하면 이쪽을 말한다.

### VariableEnvironment

직역 : 실행 컨텍스트 내의 변수선언에 의해 생성된 환경 레코드를 지니고 있다.

실행 컨텍스트가 생성될 당시 변수 정보를 지닌 환경으로, 이전 구성요소인 변수 객체 (Variable Object) 과 유사한 개념이다. LexicalEnvironment 의 하위 요소와도 같은 개념인데, 이는 위에서 렉시컬 환경을 변경하는 catch 나 block 구문이 끝났을 때 이전 정보를 기억할 필요가 있기 때문이다.

아래와 같은 케이스를 참고하자.

```jsx
function foo() {
  var a = 0;
  let b = 1;
  {
    var c = 2;
    let d = 3;
    console.log(c); //2
    console.log(d); //3
  }
  console.log(a); //0
  console.log(b); //1
  console.log(c); //2
  console.log(d); //d is not defined
}
```

## 클로저 ( Closure )

---

클로저는 렉시컬 환경과 일급 함수의 특징으로 나오는 개념이다. 따라서 자바스크립트만의 개념이 아닌 이러한 특징을 가진 언어라면 공통적으로 존재하는 개념이다.

클로저를 MDN 에서는 아래와 같이 정의하고 있다.

> A **closure** is the combination of a function bundled together (enclosed) with references to its surrounding state (the **lexical environment**).

직역하면 “클로저는 렉시컬 환경 참조와 묶여진 함수의 조합이다.” 인데, 무슨 말인지 알기 어렵다. 위의 내용을 이해한 뒤에 예시부터 보면 이해가 빨라진다.

```jsx
function foo() {
  var x = 10;
  function bar() {
    console.log(x);
  }
  return bar;
}

var baz = foo();
baz(); //10
```

위와 같은 케이스에서 foo 함수는 내부함수인 bar 를 반환한 뒤 실행이 끝났다. 즉, foo 함수 실행 컨텍스트가 제거되었다. bar 를 반환받은 함수를 호출하자 foo 내부의 변수에 접근이 가능하다는 것을 확인할 수가 있다.

이는 내부함수 bar 가 선언 당시의 렉시컬 환경을 기억하고 있기 때문이다. 여기서 x, 즉 함수 내부 변수나 인수도 아닌 변수를 자유 변수 ( Free variable ) 이라 하는데, 렉시컬 환경을 기억하여 이 자유 변수에 대한 접근이 가능하다.

클로저 개념은 전역 변수의 사용을 줄이거나 private 과 같은 효과를 내는데 사용이 가능하다.

## This

---

자바스크립트의 this 에는 함수가 호출될 때, **호출되는 방식**에 따라 동적이고 ( dynamically ) 암묵적으로 ( implicitly ) 바인딩할 객체가 결정된다. 여기서 동적이라는 말은 정적 (렉시컬) 방식의 반대로 함수의 선언 방식이 아닌 호출 방식에 따른다는 말이다.

this 에 바인딩되는 객체를 결정하는 호출 방식들은 다음과 같다.

1. 일반 함수 호출
2. 객체 내 메소드 호출
3. 생성자 함수 호출
4. apply, call, bind 호출

### 일반 함수 호출

전역, 함수, 내부 함수 호출의 경우 this 는 전역 객체에 바인딩 된다.

```jsx
console.log(this); // window
function foo() {
  console.log(this); // window
  function bar() {
    console.log(this); // window
  }
  bar();
}
foo();
```

### 객체 내 메소드 호출

객체 내 메소드 호출의 경우 this 는 해당 객체에 바인딩된다. 다만 메소드의 경우에도 일반 함수 방식으로 호출된다면 this 는 호출 방식에 따라 전역 객체에 바인딩되는 점에 주의한다.

```jsx
var foo = {
  bar: function () {
    console.log(this);
  },
};
foo.bar(); // { bar : function }
var baz = foo.bar;
baz(); // window
```

### 생성자 함수 호출

new 를 붙어 호출하는 생성자 함수의 경우 this 에는 새롭게 생성된 객체가 바인딩한다. 다만 자바스크립트에서 생성자 함수는 따로 없고 new 에 의해 결정된다. 따라서 new 를 붙이지 않는다면 일반함수 방식으로 호출되는 점에 주의한다.

```jsx
function Foo() {
  console.log(this);
}
new Foo(); // Foo{}
Foo(); // window
```

### apply, call, bind 호출

apply, call, bind 는 Function 의 메소드이며 this 를 명시적으로 바인딩할 수 있는 방법이다. 각각 인자로 전달되는 객체를 this 에 명시적으로 바인딩한다.

apply, call 의 경우 새로운 함수가 바로 호출되며, bind 의 경우 새로운 함수를 리턴한다.

```jsx
function foo() {
  console.log(this);
}
var bar = { x: 1 };
foo.apply(bar); // { x : 1 }
foo.call(bar); // { x : 1 }
foo.bind(bar)(); // { x : 1 }
```

apply, call 의 차이점은 두번째 이후의 인자를 해당 함수의 매개변수에 전달하는 방식에 차이점이 있다.

```jsx
function foo(word1, word2) {
  //...
}
foo.apply(bar, [1, 2]);
foo.call(bar, 1, 2);
```

### 주의사항 : 화살표 함수 ( Arrow Function )

ES6 에서 추가된 화살표 함수의 경우 this 는 특별한 케이스를 따르는데, 기존의 동적 방식이 아닌 정적 ( 렉시컬 ) 방식을 따른다.

즉, 기존 this 방식이 아닌 외부 렉시컬 환경을 바인딩 하는 방식을 따르게 된다.

```jsx
var foo = {
  bar: () => this,
  baz: function () {
    var arrow = () => this;
    return arrow();
  },
};
foo.bar(); // window
foo.baz(); // { bar : f, baz : f }
```

## Reference

[https://262.ecma-international.org/6.0/#sec-lexical-environments](https://262.ecma-international.org/6.0/#sec-lexical-environments)

[http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/](http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition/)


실행 컨텍스트와 렉시컬 환경


## this

---

Javascript 에서는 클래스와 인스턴스와 같은 객체 지향에 나오는 개념이 없고, 생성자 함수와 프로토타입이라는 개념으로 유사하게 구현하고 있다.따라서, Javascript 에서의 this 도 c++ 나 Java 의 this 와는 완전히 다른 개념을 가지고 있다. (혼동하면 안된다.)

Javascript 에서는 함수가 호출될 때마다 렉시컬 환경에 대한 정보를 참조하고, 바로 이 this 에 대해서도 참조값이 결정된다. **this 는 함수 호출 방식에 따라 참조하는 값이 달라지며, 이를 this 바인딩이라고도 부른다.**

## 기본 함수 호출

---

```js
var foo = function () {
  console.log(this);
  var bar = function () {
    console.log(this);
  };
  bar(); // log : window
};

foo(); // log : window
```

this 에는 기본적으로 전역객체가 바인딩된다. 브라우저 환경에서는 window, nodejs 에서는 global 이다.
외부 함수, 내부 함수 여부에 상관없이 일반적인 방식으로 함수를 호출했다면 this 에는 전역객체가 바인딩된다.

```js
var foo = function () {
  console.log(this);
};
setTimeout(foo, 1000);
```

콟백 함수의 경우에도 마찬가지다. 호출 시점만 달라질 뿐 일반적인 호출 방식이기 때문에 this 에는 전역객체가 바인딩된다.

## 객체 메소드 호출

---

```js
var obj = {
  name: "foo",
  foo: function () {
    console.log(this);
    console.log(this.name);
  },
};
obj.foo();
//log : {name: 'foo', foo: ƒ}, "foo"
```

함수가 객체의 메소드로서 호출되는 경우, this 는 그 객체를 바인딩한다.

```js
var obj = {
  name: "foo",
  foo: function () {
    console.log(this);
    console.log(this.name);
  },
};
var bar = function (fun) {
  fun();
};
var baz = obj.foo;

bar(obj.foo); //콜백(일반)함수로 실행
//log : window, ""
baz(); //일반 함수로 참조하여 실행
//log : window, ""
```

메소드로서 호출된다는 것이 중요하다. 호출되는 함수가 메소드인 사실은 전혀 상관이 없다.
위와 같이 메소드가 다른 방식으로 실행되는 경우에는 다른 방식으로 바인딩된다는 점에 주의한다.

## 일반 함수 호출 with Strict mode

```js
function foo() {
  "use strict";
  console.log(this);
}

foo(); //log : undefined
window.foo(); // log : window
```

엄격 모드 하에서 일반 함수 호출 시에는 this 에 전역 객체가 바인딩되지 않는다.
엄격 모드가 기본 세팅인 프레임워크를 사용할 때 주의해야한다.

_이는 자바스크립트 내에서 설계상의 실수로, 일반 함수를 호출 시에는 this 바인딩이 되지 않는 것이 원칙적으로 맞는 과정이라고 한다._

## 생성자 함수 호출

---

```js
function Foo(name) {
  this.name = name;
  console.log(this);
}

new Foo("foo"); // log : Foo {name: 'foo'}
Foo("foo"); //log : window
```

new 키워드로 호출된 생성자 함수의 경우에는 새로 생성된 인스턴스다.
생성자 함수가 대문자로 시작하는 것은 어디까지나 약속에 지나지 않는다. 일반 함수로 호출해버리면 마찬가지로 전역객체가 바인딩된다.

## Apply, Call, Bind

---

```js
var foo = function () {
  console.log(this);
};

foo.call("foo"); // log : "foo"
foo.apply("foo"); // log : "foo"
foo.bind("foo")(); // log : "foo"
```

명시적으로 this 를 원하는 객체로 바인딩하는 방법도 있다. Apply, Call, Bind 메소드를 사용하면 원하는 함수의 this 에 원하는 객체를 참조시킬 수 있다.

## 화살표 함수

---

```js
var obj = {
  name: "foo",
  foo: function () {
    console.log(this);
    var bar = () => console.log(this);
    bar(); // log : {name: 'foo', foo: ƒ}
  },
};

obj.foo(); // log : {name: 'foo', foo: ƒ}
```

화살표 함수의 경우 완전히 다르게 작동한다. 호출되는 방식에 따라 결정되는 것이 아니라, 선언되었던 시점의 렉시컬 환경을 참조한다.

위 코드의 경우, bar 는 일반함수로 되었지만 선언되었던 시점의 환경을 참조하여 객체를 this 에 바인딩한다.

이런 방식 때문에 메소드로는 사용을 추천하지 않고, 의미가 없어지는 생성자 함수로는 애초에 생성하지 못하고 오류가 난다. apply, bind, call 도 적용이 되지 않는다.


자바 스크립트의 this


## Redux

---

Redux 는 현재 가장 많이 사용하고 있는 전역 상태 관리 라이브러리 중 하나이다. React 는 포함한 프레임워크는 물론 순수 Javascript 에서도 사용 가능한 라이브러리이다.
구현 방식이 다양하여 처음 시작하기 어려운 부분이 많다. Redux 를 구현할 수 있는 가장 기본적인 방식을 토대로, 기초 구조에 대해 정리한다.

## Reducer

---

Redux 는 전역 상태 (state) 를 관리하는 라이브러리로, 상태 제어는 Reducer 함수를 통해서만 이루어진다. 전역 상태를 변경하는 방식을 Reducer 함수에서 사전에 정의하고, 이를 통해서만 전역 상태를 변경하게 한다.

```js
const initialState = {
  counter: 0,
};
```

Reducer 함수로 관리할 state 의 초기값을 정의하는 것부터 시작한다. 여기서는 counter 라는 이름의 숫자 변수 하나만 관리한다.

```js
const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case INCREMENT:
      return {
        ...state,
        counter: state.counter + 1,
      };
    case DECREMENT:
      return {
        ...state,
        counter: state.counter - 1,
      };
    case INPUT:
      return {
        ...state,
        counter: action.number,
      };
    default:
      return state;
  }
};
```

Reducer 함수는 state, action 두 인수를 전달받아 사용한다.

함수이 호출된 시점의 (현재) 상태가 state 에 들어오고, 위에서 정의한 초기값을 이용한다.

action 은 state 변경 방식을 정의하는 객체이다. action 으로 정의한 변경 방식만 reducer 를 통해 사용할 수 있다. action 은 수행할 작업을 구분하기 위해 필수적인 type 필드와 필요에 따라 다른 필드를 가진다.

state 는 항상 immutable 하게 변경되어야 한다. 변경되는 객체를 새로 카피하여 리턴하는 방식으로 이전 state 는 변경이 없어야 한다.

## Store

---

```js
const store = createStore(counterReducer);
```

상태 관리를 주체하는 store 객체를 만든다.

store 객체는 하나만 사용해야 한다. 만약 관리해야할 상태가 많아져 주제별로 분리해야 할 경우, reducer 함수를 분리하여 생성하고, combineReducer 함수를 이용하여 하나로 통합한 이후에 사용한다.

## Provider

---

```js
const store = configureStore({
  reducer: counterReducer,
});

root.render(
  <Provider store={store}>
    <App />
  </Provider>
);
```

생성한 store 을 사용하기 위해서는 Provider 객체를 생성해야 한다. Provider 의 하위 자식 컴포넌트 들은 모두 store 에 접근이 가능해지며, 따라서 일반적으로 App 의 부모 컴포넌트로 지정한다.

## useSelector, useDispatch

---

```js
const counter = useSelector((state) => state.counter);
```

```js
const dispatch = useDispatch();
const handleIncrement = () => {
  dispatch({ type: INCREMENT });
};
```

각 컴포넌트에서 state 를 사용하고 변경하는 방법에는 여러가지가 있다.
mapStateToProps, mapDispatchToProps 함수를 이용하는 방법과 useSelector, useDispatch hook 을 사용하는 방법이 있는데, 여기서는 후자에 대해서만 섦명한다. (근본적인 방식에 큰 차이는 없다.)

useSelector 는 state 값을 가져오는데 사용한다. 간단하게 값을 받아올 수도 있고, 함수 형식으로 로직을 추가하여 받아올 수도 있다. 이 hook 은 자동으로 state 를 subscribe 해주기 때문에, 다른 곳에서 state 가 변경이 되더라도 자동으로 re-render 가 이루어진다.

useDispatch 는 dispatch 함수를 받아오는데 사용한다. 이 함수를 통해서만 reducer 함수를 사용할 수 있다. reducer 에서 정의한 action 을 매개변수로 넘겨주어 사용한다.


Redux 기초 구조와 기본 구현 방법


## Redux Toolkit

---

Redux Toolkit (RTK) 는 Redux 를 쉡가 사용하기 위해 공식적으로 제공하는 개발도구이다. 단순한 작업을 위해 필요한 많은 코드량, 복잡도 증가 등을 개선하기 위해 만들어졌고, 현재 기준으로 특별한 경우가 아닌 이상 대부분 원래 Redux 가 아닌 RTK 를 사용하도록 가이드하고 있다.

## Slice

---

```js
const initialState = {
  counter: 0,
};

export const counterSlice = createSlice({
  name: "counter",
  initialState,
  reducers: {
    increment: (state) => {
      state.counter += 1;
    },
    decrement: (state) => {
      state.counter -= 1;
    },
    input: (state, action) => {
      state.counter = action.payload;
    },
  },
});

export const { increment, decrement, input } = counterSlice.actions;
export default counterSlice.reducer;
```

Slice 는 기존 Redux 의 ㅁction 과 Reducer 함수를 한번에 생성할 수 있는 개념이다.

- state 변경을 immutable 하게 처리를 해주지 않아도 된다. mutable 로 처리해도, RTK 는 내부적으로 immutable 방식으로 변경해준다.
- 생성한 slice 에서 action 을 바로 받을 수 있다.
- 생성한 slice 에서 Reducer 함수를 바로 받을 수 있다.

## Store

---

```js
const store = configureStore({
  reducer: counterReducer,
});

// const store = configureStore({
//   reducer: {
//     a: aReducer,
//     b: bReducer,
//   },
// });
```

Store 은 configureStore 함수를 이용하여 생성한다. 두 개 이상의 reducer 함수를 사용할 경우, 추가적인 함수를 사용할 필요없이 객체를 넘겨주는 것으로 store 을 간단하게 생성할 수 있다.


RickSW.dev

Notes

Javascript

Redux