{intro}
<Spacing size="lg" />

## 이벤트 최적화 하기
 
### 쓰로틀(throttle)
 
#### 쓰로틀 정의
 
사전에서 쓰로틀을 찾아보면 다음과 같은 의미를 가지고 있습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1EAdQ4Sgn21ZZGOSo_Jw1pnVQilePn3X-" alt="쓰로틀의 의미" width="482" height="223"/>
 
엔진의 속도를 조절하는 조절판, 즉 속도를 조절한다는 의미를 가지고 있습니다. 최적화 기법에서의 쓰로틀은 연속적으로 이벤트가 발생할 때 지정한 시간 주기로 함수를 호출을 조절하는 방식을 의미합니다. scroll, mouse move, resize 이벤트 같이 연속적으로 무수히 많이 발생할 때 특정 주기로 함수 호출해도 되는 경우 최적화하기 유리합니다.
예를 들어 무한 스크롤을 구현한다고 가정해보곘습니다. 리스트의 가장 아래 부분이 화면에 노출될 때 새로운 데이터를 요청하여 화면에 그려주려고 합니다. 이 때 리스트의 가장 아래 도달했는지 확인하기 위해서 스크롤이 발생할 때마다 매번 함수를 호출할 필요는 없을 것입니다. 따라서 쓰로틀을 적용하여 사용성을 해치지 않을 주기마다 함수가 호출되게 최적화하는 것이 좋습니다. 
(element가 화면에 보여질 때를 감지하는 InterSectionObserver를 사용하는 것도 좋은 선택입니다.)
 
#### 쓰로틀 구현
 
그럼 이제 쓰로틀 함수를 구현해보도록 하겠습니다.
 
```javascript
//thtottle.js
const throttle = (callbackFn, delayTime) => {
 let timer = null;
 
 return (...args) => {
 if (timer) {
 return;
 }
 
 callbackFn(...args);
 
 timer = setTimeout(() => {
 timer = null;
 }, delayTime);
 };
};

const log = () => {
 console.log("함수 호출");
};

window.addEventListener("scroll", throttle(log, 600));
```
 
위 코드와 같이 쓰로틀 함수를 구현해보았습니다.
 
>1. throttle 함수는 인자로 특정 주기마다 실행할 callbackFn과 주기를 결정하는 delayTime을 인자로 받습니다.
>2. throttle 함수는 현재 delayTime에 걸려있는지를 알기 위한 timer 변수가 있으며 초기값은 null입니다.
>3. throttle 함수는 익명의 화살표 함수를 리턴합니다.(클로저를 사용하기 위함) 편의상 리턴 함수라고 부르겠습니다. 이 때 리턴 함수는 매개변수 값을 전달 받을 수 있습니다.
>4. 리턴 함수는 throttle 함수의 timer에 접근해 timer 값에 따라 함수 호출 여부를 결정합니다.
> 1. timer에 값이 있다면 아무일도 하지 않고 함수를 종료합니다.
> 2. timer에 값이 있다면 callbackFn을 실행시키고 timer에 setTimeout의 리턴 값이 timeoutId를 할당합니다.
>5. 지정한 delayTime이 지나면 setTimeout의 callback 함수가 실행되며 timer 값이 null이 됩니다.
 
이와 같은 과정을 통해 delayTime마다 callbackFn을 실행시키는 throttle 함수가 구현되었습니다.
이때 클로저를 사용하여 함수가 실행될 때 마다 timer 값이 초기화 되지 않도록 하였습니다. 이에 대해 자세히 알고 싶으시다면 [클로저 포스트](/posts/Javascript/클로저-알아보기)를 참고해주세요.
 
#### 쓰로틀 적용 전 vs 적용 후
 
자 그럼 이제 쓰로틀을 사용하지 않았을 때와 사용했을 때의 차이를 확인해보겠습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1Rwp0BybjWHPH61sTgDi6VfqAPAtgVWkb" alt="쓰로틀 적용 전" width="802" height="342"/>
 
쓰로틀을 사용하지 않으면 함수 호출이 짧은 시간에 120회 가까이 일어납니다😱 
 
<PostImage src="https://drive.google.com/uc?export=view&id=1PFU-_9yXqIzvGO9tVC_A0dI5tsdXRlI-" alt="쓰로틀 적용 후" width="802" height="342"/>
 
그리고 쓰로틀을 적용한 결과 함수 호출이 1/30 수준으로 줄어들었습니다☺️ 
이렇게 쓰로틀을 통해 연속적으로 일어나는 함수 호출을 최적화 해보았습니다.
 
그리고 혹시 아래 두 코드의 차이를 아시나요?
 
```javascript
//code 1
 window.addEventListener("scroll", throttle(log, 600));
```
 
```javascript
//code2
 window.addEventListener("scroll", throttle);
```
 
제가 처음 코드를 배울 때 헷갈렸던 부분이여서 첨언하자면, code1의 경우는 throttle 함수가 실행되어 throttle 함수가 반환하는 리턴함수가 이벤트리스너의 콜백함수로 전달된 것이고
code2의 경우에는 throttle 함수 자체가 이벤트리스너의 콜백함수로 넘겨진 것입니다.
따라서 code2의 경우 제대로 실행되지 않습니다.
 
```javascript
//code3
const handleScroll = throttle(log,600)

 window.addEventListener("scroll", handleScroll );
```
 
위와 같이 handleScroll에 throttle의 리턴함수를 할당하여 사용할 수도 있습니다. throttle 함수는 초기에 실행되어 종료되고 리턴함수가 throttle 함수의 timer 변수에 접근하여 callbackFn 실행 여부를 결정한다고 이해하시면 좋을 것 같습니다👍
 
### 디바운스(debounce)
 
#### 디바운스 정의
 
디바운스의 사전적 의미는 다음과 같습니다. 
 
<PostImage src="https://drive.google.com/uc?export=view&id=1VuDX22-YYo9LhbliEj73tFjCyVOKZEM7" alt="디바운스의 의미" width="487" height="183" caption="bounce 하지 않는 것, 그것이 debounce니까 끄덕"/>
 
연속적을 발생하는 바운스를 보정한다는 의미를 가지고 있습니다. 최적화 기법에서의 디바운스는 연속적인 이벤트가 발생하고 지정한 시간이 지난 후에 함수를 호출하는 방식입니다. input, change와 같이 연속적으로 이벤트가 발생하지만 이벤트가 종료된 후 함수를 호출해도 되는 경우 최적화하기 유리합니다. 검색창의 자동 완성 기능처럼 input에 값이 입력될 때 마다 api를 요청하면 단 시간에 엄청나게 많은 요청이 발생하게 됩니다. 이를 방지하기 위해 사용자가 input 창에 검색어를 입력하고 특정 시간이 지난 후 함수를 호출하게 하여 최적화할 수 있습니다.
 
#### 디바운스 구현
 
그럼 디바운스도 구현해보겠습니다.
 
```javascript
//html 코드 생략
const input = document.querySelector("#input");

const debounce = (callbackFn, delayTime) => {
 let timer = null;
 return (...args) => {
 if (timer) {
 clearTimeout(timer);
 }
 timer = setTimeout(() => {
 callbackFn(...args);
 }, delayTime);
 };
};

const logMessage = (event) => {
 console.log(event.target.value);
};
 
input.addEventListener(
 "input",
 debounce((event) => logMessage(event),200)
);

```
 
>1. debounce 함수는 인자로 이벤트가 종료되고 특정 시간 뒤에 실행할 callbackFn과 이벤트 종료 후 시간을 결정하는 delayTime을 인자로 받습니다.
>2. debounce 함수는 현재 delayTime에 걸려있는지를 알기 위한 timer 변수가 있으며 초기값은 null입니다.
>3. debounce 함수는 익명의 화살표 함수를 리턴합니다.(클로저를 사용하기 위함) 편의상 리턴 함수라고 부르겠습니다. 이 때 리턴 함수는 매개변수 값을 전달 받을 수 있습니다.
>4. 리턴 함수는 debounce 함수의 timer에 접근해 timer 값에 따라 setTimeout의 타이머를 취소할 지 결정합니다.
> 1. timer에 값이 있다면 timeoutId 값이 할당된 것이므로 clearTimeout을 통해 해당 timeoutId를 가진 타이머를 취소하여 callbackFn이 실행되지 않도록 합니다.
>5. timer에 setTimeout 타이머의 timeoutId를 할당합니다. 이때 setTimeout의 콜백함수에서 callbackFn이 호출될 수 있게 합니다.
>6. 이벤트가 발생하고 delayTime 동안 이벤트가 발생하지 않으면 callbackFn이 실행됩니다.
 

#### 디바운스 적용 전 vs 적용 후
그럼 이제 디바운스를 적용하지 않았을 때와 적용했을 때를 비교해보겠습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1yOInFW8xaXE-HUL0_0cIK1Gh-kYjDpzX" alt="쓰로틀 적용 전" width="802" height="342" caption="강조되고 반복되는 이벤트는 개발자를 불안하게 해요!!"/>
 
<PostImage src="https://drive.google.com/uc?export=view&id=1M1ePp99TMqSKtySE1-zyZE0wDRIjqpNH" alt="쓰로틀 적용 후" width="802" height="342"/>
 
만약 디바운스를 적용하지 않아 값이 입력될 때 마다 api를 호출했다면 짧은 시간 안에 수십번이나 호출되었겠죠.
디바운스를 적용하면 단 두번만 호출됩니다. delayTime은 사용성을 저하하지 않는 수준으로 맞춰보면 좋을 것 같습니다😄
 
## 포스팅을 마무리하며
 
오늘은 DOM 이벤트를 최적화하는 쓰로틀과 디바운스에 대해 알아보고 구현해보았습니다. 간단하게 구현 가능하지만 효과는 엄청났습니다. 더이상 반복되는 이벤트에 불안해마시고 쓰로틀과 디바운스로 최적화해보시기를 바라며 글을 마치도록 하겠습니다👋👋

쓰로틀과 디바운스로 이벤트 최적화하기

{intro}
<Spacing size="lg" />

## 들어가기 전에
 
- 실행 컨텍스트을 먼저 알아보시는 것을 추천합니다.
 
## 클로저란?
 
일단 클로저란 단어의 뜻을 알아보겠습니다. 클로저는 폐쇄라는 뜻이라고 합니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1WS11Sx5ebdS5RqddZqEZxHwmVsvj7fox" alt="클로저는 폐쇄라는 뜻" width="647" height="242"/>
 
무엇을 폐쇄하는 것일까요? [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures)에서는 자바스크립트의 클로저에 대해 아래와 같이 설명하고 있습니다.
 
> **A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment).** 
> In other words, a closure gives a function access to its outer scope. In JavaScript, closures are created every time a function is created, at function creation time.

 
(Chat GPT가) 번역하자면
 
> **클로저(closure)는 함수와 그 함수가 참조하는 주변 상태(렉시컬 환경)가 함께 묶인 조합입니다.** 즉, **클로저는 함수에 외부 스코프에 접근할 수 있는 능력을 제공**합니다. 
> 
>다시 말해, 클로저는 함수가 정의된 위치의 스코프(외부 환경)를 기억하고, 그 함수가 실행될 때도 그 스코프에 접근할 수 있게 해줍니다. 자바스크립트에서 클로저는 함수가 생성될 때마다 자동으로 만들어집니다.

 
설명을 읽어도 이해하기 쉽지 않습니다. 천천히 정리해보겠습니다. 클로저(폐쇄)란 함수의 스코프가 형성되어 외부에서 접근할 수 없는 상황(폐쇄된 상황)에서 **스코프 안에 선언된 내부 함수를 통해 폐쇄된 함수의 렉시컬 환경을 기억하고 접근할 수 있도록 하는 것**입니다. 여기서 렉시컬 환경에 대해 잠시 이야기하고 넘어가겠습니다. 렉시컬 환경은 실행 컨텍스트에서 함수에 선언된 식별자 정보와 외부 환경에 참조 정보를 가지고 있으며 이를 통해 식별자에 참조할 수 있는 유효범위인 스코프를 형성하게 됩니다. 또한 렉시컬 환경은 선언될 당시의 위치에 따라 결정됩니다. 즉 클로저를 통해 **외부에서 직접적으로 식별자에 접근하는 것을 막고 함수 안에 선언된 내부 함수를 통해서만 식별자에 접근할 수 있게 됩니다. 말로 풀어 설명하려니 어쩐지 미궁에 빠진 것 같습니다😅 코드를 보면 오히려 쉽게 이해할 수 있습니다.
 
```javascript
const outerFunc = () => {
 const number = 0;
 const innerFunc = () => {
 console.log(number);
 };
 return innerFunc;
}

const logNumber = outerFunc();

logNumber(); // 0
```
 
outerFunc는 변수 number와 함수 innerFunc가 선언되어 있고 innerFunc를 리턴하는 함수입니다. 
innerFunc는 outerFunc에 선언된 number 변수를 참조하여 출력합니다.
 
이제 위 코드의 흐름을 살펴보겠습니다.
 
>1. outerFunc가 호출되며 실행 컨텍스트가 콜스택에 추가됩니다. 이때 내부에 선언된 변수 number와 함수 innerFunc는 outerFunc의 렉시컬 환경에 의해 형성된 스코프에 의해 외부에서 직접적으로 참조할 수 없게 폐쇄됩니다. 그리고 현시점에서 innerFunc가 실행되지는 않지만 렉시컬 환경은 선언된 시점에 결정되기 때문에 innerFunc는 자신이 선언된 위치의 렉시컬 환경을 기억하게 됩니다. 
>2. outerFunc가 종료되며 반환한 innerFunc는 logNumber에 할당되고, outerFunc의 실행 컨텍스트는 콜스택에서 제거됩니다.
>3. logNumber(innerFunc)가 호출되며 innerFunc의 실행 컨텍스트가 생성됩니다. 앞서 언급했듯 렉시컬 환경은 선언 시점에 결정되기 때문에 innerFunc의 외부 환경 참조는 outerFunc의 렉시컬 환경이 되며 outerFunc의 렉시컬 환경에 참조할 수 있게 됩니다. 
 
이처럼 클로저는 스코프에 의해 폐쇄된 환경에서 함수(outerFunc)의 실행이 끝난 후에도 내부함수(innerFunc)가 선언된 당시의 렉시컬 환경을 기억하여 함수(outerFunc)의 식별자를 참조할 수 있는 현상을 의미합니다.
 
## 어떤 상황에서 사용할까?
 
이제 클로저가 무엇인지 알아보았으니 어떤 상황에서 사용하는지도 알아보겠습니다.
 
### 1. 데이터 은닉하여 캡슐화를 해야할 때
 
앞서 이야기한대로 외부에서 직접 변수에 접근할 수 없도록 막을 수 있습니다. 이를 데이터를 은닉하여 캡슐화 한다고 하며 이때 캡슐화는 데이터를 외부에서 직접 접근하지 못하도록 보호하는 것을 의미합니다.
 
```javascript
const makeCounter = function () {
 let privateCounter = 0;
 function changeBy(val) {
 privateCounter += val;
 }
 return {
 increment() {
 changeBy(1);
 },

 decrement() {
 changeBy(-1);
 },

 value() {
 return privateCounter;
 },
 };
};

const counter = makeCounter();

counter.increment();
console.log(counter.value()); // 1 

counter.decrement();
console.log(counter.value()); // 0
```
 
MDN에서 가져온 예시코드입니다.
makeCounter라는 함수는 내부에 privateCounter라는 변수를 가지고 privateCounter를 증가시키는 increment 함수, 감소시키는 decrement 함수와 privateCounter을 리턴하는 value 함수가 포함된 객체를 리턴합니다. 
외부에서 직접적으로 privateCounter에 접근할 수 없으며 makeCounter가 리턴하는 함수를 통해서만 privateCounter에 접근할 수 있게 됩니다. 즉 privateCounter 변수를 은닉하여 캡슐화한 것입니다.
 
### 2. 변수의 상태를 유지해야 할 때
 
클로저를 통해 함수가 호출될 때마다 변수가 초기화되지 않고 상태를 유지할 수 있습니다. 함수가 실행될 때 마다 초기화 되지 않고 상태를 유지해야하는 변수가 있다면 외부함수에 선언하고 내부함수에서 접근하는 방식을 통해 변수의 상태를 유지할 수 있습니다. 
지금 바로 생각나는 예제는 쓰로틀 함수입니다. 쓰로틀은 자바스크립트 이벤트 최적화 기법 중 하나로 브라우저의 스크롤 이벤트 같이 연속적으로 무수히 많은 이벤트가 발생할 때 특정 주기에만 함수가 실행되도록 합니다.
쓰로틀에 대해 더 자세히 알아보고 싶으시다면 [쓰로틀 & 디바운스 포스트](/posts/Javascript/쓰로틀과-디바운스로%20-이벤트-최적화-하기)를 참고해주세요.
 
```javascript
 const simpleThrottle = (callbackFn) => {
 let timer;
 const innerFunc(){
 if (timer) {
 return;
 }
 callbackFn();
 timer = setTimeout(() => {
 timer = null;
 }, 1000);
 }
 return innerFunc;
 };
 const logScroll = () => {
 console.log("y :", window.scrollY);
 console.log("time :", new Date().toLocaleTimeString());
 };

 window.addEventListener("scroll", simpleThrottle(logScroll));
```
 
위 코드는 인자로 받은 콜백함수를 1000ms 주기로 호출하는 간단한 쓰로틀 함수입니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1QePamgiolCJRK8782fya6l-GjIh9HYMZ" alt="1초 간격으로 로그가 찍히는 중" width="698" height="546"/>
 
스크롤 이벤트가 발생할 때 1000ms 간격으로 logScroll 함수가 실행되는 걸 확인할 수 있습니다.
 
코드를 자세히 살펴보겠습니다.
 
>1. simpleThrottle 함수(외부함수)가 호출되며 addEventListener의 콜백함수로 simpleThrottle이 반환하는 innerFunc(내부함수)가 전달 된 후 simpleThrottle는 종료됩니다.
>2. 스크롤 이벤트가 일어날 때마다 innerFunc가 호출됩니다. innerFunc는 simpleThrottle의 timer 변수에 접근합니다.(클로저) timer 변수에 값이 있으면 innerFunc를 종료시킵니다.
timer 변수에 값이 없으면 simpleThrottle이 인자로 전달받은 logScroll 함수를 호출하고 timer 변수에 setTimeout 함수의 타이머 식별 값인 timeoutID를 할당합니다.
>3. 스크롤 이벤트는 연속적으로 일어나고 있지만 timer 변수에 timeoutID가 할당되어 있으므로 logScroll를 호출하지 않습니다.
>4. 1000ms 후에 setTimeout의 콜백함수가 실행되며 timer의 값이 null로 재할당됩니다. timer의 값이 falshy하니 다시 logScroll를 호출하고 timer에 timeoutID를 할당합니다.
 
이렇게 스크롤 이벤트가 일어날 때 마다 1000ms 주기로 함수를 실행시킬 수 있게 되었습니다. 
 
만약 클로저를 사용하지 않고 timer 변수를 사용하면 어떻게 될까요?
 
```javascript
const simpleThrottle = (callbackFn) => {
 let timer;
 if (timer) {
 return;
 }
 callbackFn();
 timer = setTimeout(() => {
 timer = null;
 }, 1000);
};

const logScroll = () => {
 console.log("y :", window.scrollY);
 console.log("time :", new Date().toLocaleTimeString());
 }

window.addEventListener("scroll", () => {
 simpleThrottle(logScroll);
});
```
 
<PostImage src="https://drive.google.com/uc?export=view&id=1I7Eb1wgtCD2xdbqIa7UJifyS4afRj3Bs" alt="로그가 무수히 찍히는 중" width="698" height="546"/>
 
scroll 이벤트가 발생할 때 마다 timer 값이 undefined로 초기화되며 연속적으로 logScroll 함수가 실행됩니다😓
 
때문에 timer 변수는 인자로 받아오는 콜백함수가 일정한 주기로 호출될 수 있게 timeoutID 값을 유지하고 있어야 합니다. 이와 같이 함수가 호출될 때 마다 변수가 초기화 되지 않고 상태가 유지되어야 할 때 클로저가 아주 유용하게 사용됩니다👍
 
덧붙이자면 클로저는 잘 모를때는 timer 변수를 전역에 선언하기도 했습니다. 그렇게 사용해도 코드는 의도대로 동작하지만 실제로 timer 변수가 필요한 곳과 너무 동떨어져 있어 코드 가독성이 안좋아지기 때문에 클로저를 사용하는 것을 적극 권장합니다. 
 
## 포스팅을 마무리하며
 
오늘은 자바스크립트의 클로저에 대하여 알아보았습니다. 사실 클로저는 자바스크립트에서만 사용되는 것은 아니고 함수를 인자로 전달 받거나 함수를 리턴하는 고차함수를 사용하는 언어에서 통용되는 개념이라고 합니다. 클로저의 설명만 봐서는 무슨 내용인지 이해하기 어려워서 어려운 개념인가? 싶지만 실제로 코드를 작성해보면 재밌고 유용하다는 것을 알 수 있습니다. 게다가 이미 종료된 함수의 식별자를 기억해서 사용한다니...? 낭만적이기까지 합니다.
 
그런데 아쉬운 점은 제가 실제로 클로저를 사용해본 것은 예시로 들었던 쓰로틀과 디바운스 함수를 작성할 때 뿐이었다는 것입니다. 혹시 클로저를 사용해보셨다면 어떤 상황에서 사용하셨는지 경험을 공유해주시면 너무 좋을 것 같습니다. 그럼 여기까지 글 읽어주셔서 감사드리고 이만 마무리해보도록 하겠습니다👋👋

클로저 알아보기

{intro}
<Spacing size="lg" />

## 자바스크립트 엔진과 런타임 환경
 
<PostImage src="https://drive.google.com/uc?export=view&id=1GWut_okKW71WPVL7UY066r99i0-t_Ysh" alt="자바스크립트 런타임 환경" width="992" height="584"/>
 
**자바스크립트 엔진**은 자바스크립트 코드를 해석하고 실행하는 프로그램입니다. 자바스크립트가 싱글 스레드 언어이기 때문에 자바스크립트 엔진은 **한 번에 하나의 일만 수행 가능**하며 이는 함수의 실행을 관리하는 **콜 스택이 하나**라는 의미이기도 합니다. 대표적으로 크롬과 Node.js에서 사용하는 V8엔진이 있습니다.
 
**자바스크립트 런타임 환경**은 자바스크립트가 실행되는 환경, 즉 크롬과 같은 **브라우저(혹은 Node.js)** 입니다. 브라우저에서 제공하는 Web API들(fetch, setTimeOut, eventListner...)을 통해 **비동기 작업을 지원**하며 이벤트 루프를 통해 비동기 작업의 우선 순위를 정하고 처리합니다.
 
### 콜 스택 (Call Stack)
 
**콜 스택**은 자바스크립트 엔진이 **함수의 실행 순서를 관리하기 위해 사용하는 스택(Stack) 자료구조**입니다. 함수가 호출되며 생성된 실행 컨텍스트가 콜 스택에 차곡차곡 쌓이게 되며 가장 나중에 호출된 함수가 가장 먼저 실행되는**LIFO(Last In First Out)** 구조입니다.
 
### 태스크 큐 (Task Queue)
 
**태스크 큐**는 **브라우저에서 태스크(작업)를 관리하는 큐(Queue) 자료구조**입니다. 비동기적으로 처리되는 작업들(event listner의 콜백함수, setTimeOut 함수의 콜백함수 등)을 관리하는 일종의 **대기소 역할**을 합니다. setTimeOut에서 지정한 시간이 됐거나 click 이벤트가 발생한 시점에 작업(콜백함수)을 태스크 큐에 넣어두어 대기시킨 후 콜 스택이 비워졌을 때 가장 먼저 들어온 작업부터 하나씩 콜 스택으로 이동하는 **FIFO(First In First Out)** 구조입니다.
 
### 마이크로태스크 큐 (Microtask Queue)
 
**마이크로태스크 큐**는 브라우저에서 promise의 콜백함수 즉, then, catch, finally와 mutation observer의 콜백함수 등을 관리하는 큐(Queue) 자료구조입니다. **태스크 큐 보다 높은 우선 순위**를 가지며 콜 스택이 비워졌을 때 먼저 들어온 작업부터 하나씩 콜 스택으로 이동시켜 실행시킵니다. 태스크 큐와 마이크로태스크 큐가 나누어진 이유는 작업 처리에 우선 순위를 두어 **태스크 큐에 있는 작업에 영향을 받지 않고 마이크로태스크를 동일한 환경에서 처리할 수 있기 때문**이라고 합니다.
 
## 이벤트 루프 (Event Loop)란?
 
**이벤트 루프**는 브라우저에 내장된 **비동기 작업을 처리하는 매커니즘**입니다. 말 그대로 계속 루프를 돌며 콜 스택과 태스크 큐, 마이크로태스크 큐를 관찰하며 처리할 작업(콜백함수)이 있다면 순서대로 처리합니다. 
 
## 이벤트루프를 통한 비동기 작업 순서
 
앞서 본 이미지를 보며 비동기 작업이 어떤 순서로 진행되는지 알아보겠습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1GWut_okKW71WPVL7UY066r99i0-t_Ysh" alt="자바스크립트 런타임 환경" width="992" height="584"/>
 
1. 이벤트 루프는 콜 스택이 비워져 있는지 확인합니다.
2. 콜 스택이 비워져 있지 않다면 작업을 콜 스택으로 이동시키지 않습니다. 
3. 콜 스택이 비워져 있다면 마이크로태스크 큐에 있는 작업들을 들어온 순서대로 하나씩 콜 스택으로 이동시킵니다. 앞서 언급했듯 마이크로태스크 큐는 태스크 큐보다 높은 우선 순위를 갖습니다. 
- 콜 스택으로 이동한 콜백함수가 실행, 종료 된 후 콜 스택이 비워지게 되면 다시 마이크로태스크 큐에 있는 작업을 콜 스택으로 이동시킵니다. 이 과정은 마이크로태스크 큐에 있는 모든 작업이 비워질 때까지 반복됩니다. 만일 콜 스택에서 함수가 실행되고 있는 중간에 마이크로태스크 큐에 작업이 추가된다면 해당 작업마저 모두 실행된 후 마이크로태스크 큐가 비워져야 합니다.
4. 콜 스택이 비워져 있고 마이크로태스크 큐에 들어가 있는 작업이 없다면 태스트 큐에 들어있는 작업을 하나씩 들어온 순서대로 처리합니다. 태스크 큐에 있는 모든 작업이 비워질 때 까지 1~4를 반복합니다.
 
이벤트 루프는 위와 같은 과정을 통해 비동기 작업을 처리합니다. 
 
실제로 코드를 통해 이벤트 루프 동작을 살펴볼 겸 한가지 재밌는 실험을 해볼까요?
setTimeOut(()=>{}, 0)이 정말 0ms 후에 실행되는지 알아보겠습니다.
 
```javascript
const runAfterZero = () => {
 const runTime = performance.now();
 console.log("시작!"); // 1번 
 setTimeout(() => {
 const afterTime = performance.now();
 console.log(`실행하는데 걸린 시간 : ${afterTime - runTime}ms`); //2번
 }, 0);
 console.log("끝!"); //3번
 };
runAfterZero();
```
 
<PostImage src="https://drive.google.com/uc?export=view&id=1uuDOMCraKrFf4VQTGAR87CVDNPxOcjZ0" alt="이벤트 루트 동작 확인" width="982" height="162" caption="setTimeOut 0는 0ms 뒤에 실행 되지...않았습니다...!"/>
 
>1. 전역 컨텍스트가 생성되어 콜 스택에 쌓입니다.
>2. runAfterZero 함수가 호출되며 콜 스택에 runAfterZero 함수의 실행 컨텍스트가 쌓입니다.
>3. 1번 로그가 찍힙니다.
>4. setTimeOut이 호출되며 0ms 후에 태스크 큐에 콜백함수가 들어가게 됩니다.
>5. 2번 로그가 찍힙니다.
>6. 함수의 실행 모두 종료된 후 함수 컨텍스트가 콜 스택에서 제거됩니다.
>7. 전역의 코드가 모두 종료된 후 전역 컨텍스트가 콜 스택에서 제거됩니다.
>8. 콜 스택이 모두 비워진 후 태스크 큐에 있는 setTimeOut의 콜백함수가 실행되며 3번 로그가 찍힙니다. 실행되는데 걸린 시간은 0.5ms이네요.🤓

 
여기서 주목해야 할 점은 콜 스택이 비워져 있어야 남아있는 작업을 처리할 수 있다는 것입니다. 만약 실행되는데 아주 오래 걸리는 코드가 있다면 어떨까요? 그 시간동안 마이크로태스크 큐, 태스크 큐에 등록된 작업들은 그저 대기하고 있을 수 밖에 없습니다. 
 
```javascript
const runAfterZero = () => {
 const runTime = performance.now();
 console.log("시작!"); // 1번 코드
 setTimeout(() => {
 const afterTime = performance.now();
 console.log(`실행하는데 걸린 시간 : ${afterTime - runTime}ms`); //2번 코드
 }, 0);
 console.log("끝!"); //3번 코드
 };
runAfterZero();

const start = Date.now();
const duration = 3000;
while (Date.now() - start < duration) {
 const elapsed = Date.now() - start;
}
```
 
아까와 같은 코드이지만 전역에 3초 동안 실행되는 반복문을 추가해보았습니다. 어떨게 될까요? 두근두근
 

<PostImage
 src="https://drive.google.com/uc?export=view&id=1c6camld3ESi41yDJXZKSflvEm6MLzFMv" alt="3초 후 실행" width="498" height="86" />
 
3초 동안 반복문이 실행되고 전역 코드가 모두 종료되어 전역 컨텍스트가 제거된 후 setTimeOut의 콜백함수가 실행됩니다.😱
이렇게 되면 성능에도 좋지 않고 사용자가 화면을 클릭 했을 때 등록된 이벤트 리스너 콜백이 바로 실행되지 않는 등 사용성이 굉장히 떨어질 수 밖에 없습니다.
따라서 setTimeOut(()=>{},0)을 사용하여 복잡한 코드를 나누어 태스크 큐에 넣어두는 방식으로 작업을 관리할 수 있습니다. (저는...그렇게까지 코드 관리해 본 적은 없지만요...)
 
그리고 브라우저는 성능 최적화와 안정적인 사용자 환경을 위해 콜 스택에 있는 함수가 모두 실행된 후 화면의 변경을 업데이트합니다. 보통의 경우에는 60fps (약 16ms) 주기로 업데이트 되지만 콜 스택에서 굉장히 오랫동안 실행되는 코드가 있다면 정상젹으로 UI가 업데이트 되지 않는 이슈가 발생할 수 있기 때문에 역시 너무 크고 복잡한 작업을 나누어 관리하는 것이 중요합니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1iJg8OtBfWQJJYKAhPlLN70GPzxOxyI4a" alt="UI 업데이트 테스트" width="792" height="144" caption="콜 스택에서 함수가 실행될 동안 mouse hover로 인한 UI 업데이트가 되지 않음" />
 

## 포스팅을 마치며
 
오늘은 자바스크립트 런타임 환경에서의 이벤트 루프에 대해 알아보았습니다. 코드를 한줄 한줄 읽어서 실행하는 인터프리어 언어..(하지만 호이스팅!), 싱글 스레드를 가진 동기식 언어..(자, setTimeOut에 코드를 비동기로 싸서 드셔보세요😋) 자바스크립트 당신은 도대체...? 종잡을 수 없지만 알고 보면 다 나름의 이유가 있기 때문에 자바스크립트를 열심히 공부하는 것이 중요하다고 생각됩니다.
 
특히 이번에 이벤트 루프를 정리하며 제가 전역 컨텍스트에 대해서 오해하고 있다는 걸 알게 되었습니다. 저는 전역 컨텍스트가 앱이 실행되는 동안에 계속 콜 스택에 남아 있다고 생각했습니다. 그래서 전역 컨텍스트가 있는데 어떻게 콜 스택이 비워질 수 있지? 하고 고뇌했는데 알고보니 코드 실행이 종료되면 전역 컨텍스트도 사라지게 되는거였습니다. (급하게 실행 컨텍스트 포스트를 수정하러 가는 중 🏃‍♀️🏃‍♀️🏃‍♀️) 이렇게 글로 정리해보며 기존에 잘못 알고 있던 것들도 바로 잡을 수 있어서 블로그를 운영하는 목적을 잘 달성하고 있는 것 같아서 기분이 좋습니다. (하지만 피그마 실력은 도통 나아지질 않습니다... 괴롭...) 
 
뜬금 없지만 내일이 바로 추석입니다. 이 글을 읽으신 분들 모두 즐거운 추석 보내시길(혹은 보내셨길) 바라며 글을 마치겠습니다.🌝👋👋

이벤트루프 알아보기

{intro}
<Spacing size="lg" />
## 실행 컨텍스트란?
 
실행 컨텍스트란 코드를 실행할 때 필요한 문맥을 의미합니다. 글을 읽을 때 문맥을 파악하라는 말을 자주 하죠? 어휘의 의미와 문장의 앞 뒤 상황을 이해하여 글의 흐름을 파악하라는 말인데요. 실행 컨텍스트도 이와 비슷합니다. **실행 컨텍스트는 코드의 실행과 관련된 환경 정보**입니다. 이를 통해 현재 실행되는 코드 내의 식별자 정보와 외부 환경 참조, 함수 실행 순서 등을 관리하게 되는 것이죠.
 
## 실행 컨텍스트의 생성/제거 시점
 
실행 컨텍스트는 코드가 실행되기 전 생성되며, 코드 실행이 완료되면 제거됩니다. 
자바스크립트 소스 코드 타입에 따른 실행 컨텍스트가 생성/제거 시점은 다음과 같습니다
 
### - 전역 코드
함수, 코드 블럭 외부의 코드로 코드가 처음 실행될 때 컨텍스트가 생성되고 코드가 모두 실행되면 제거됩니다.
 
### - 함수 코드
함수 내부에 존재하는 코드로 함수가 호출 될 때 컨텍스트가 생성되고 함수가 종료되는 시점에서 컨텍스트가 제거됩니다. if문, for문과 같은 문(statement)에서는 실행 컨텍스트가 생성되지 않습니다.
 
### - eval 코드
 문자열로 표현된 코드를 실행할 수 있게 해주는 **eval** 함수에 인수로 전달되어 실행되는 코드입니다. eval 함수가 호출될 때 컨텍스트가 생성되고, **eval** 함수가 실행한 코드가 종료되는 시점에 컨텍스트가 종료됩니다.
 
<Callout icon="🚨">
eval은 문자열로 입력받은 코드가 악의적인 내용을 포함하는 등 보안상 위험이 생길 수 있기에 사용을 지양하고 있습니다.
</Callout>
 
### - module 코드
자바스크립트 module 내부에 존재하는 코드로 module이 import 되는 순간 컨텍스트가 생성되며 해당 모듈 코드가 종료될 때 컨텍스트가 제거됩니다.
 
## 콜 스택을 통한 함수 실행 순서 관리
 
일단 콜 스택에 대해 알아보기 전에, 스택에 대해 알고 계시나요? 스택이란 후입선출(LIFO, Last In First Out) 방식의 자료구조를 의미합니다. 즉, **마지막에 들어온 데이터가 가장 먼저 나가게 되는 것**이죠.
 
<PostImage src="https://drive.google.com/uc?export=view&id=14L-2EurAc37t_OeTgtjXLR3eDdOuTTSe" alt="스택" width="375" height="439"/>
 
콜 스택은 자바스크립트에서 함수 호출 시 생성되는 실행 컨텍스트를 관리하는 스택 자료구조입니다. 함수가 호출될 때 마다 콜 스택에 호출된 함수의 실행 컨텍스트가 차곡차곡 쌓이게 됩니다. 이때 가장 위에 쌓인 실행 컨텍스트를 가진 함수가 가장 먼저 실행됩니다. 즉 가장 니중에 호출된 함수가 가장 먼저 실행되는 것이죠. 
 
함수 실행이 완료되면, 그 함수의 실행 컨텍스트는 콜 스택에서 제거되고 그 다음으로 쌓인 실행 컨텍스트의 함수가 실행됩니다. 이렇게 콜 스택을 통해 함수의 실행 순서를 보장하게 되는 것이죠.
 
```javascript

console.log("1. 전역 컨텍스트");

function outerFunc () {
	console.log("1. outerFunc 컨텍스트");
	
	function innerFunc () {
		console.log("2. innerFunc 컨텍스트");
	}
	
	innerFunc();
}

outerFunc();

console.log("4. 함수 실행 컨텍스트가 모두 제거 된 후 전역 컨텍스트만 call stack에 남음");
```
 
위와 같은 코드가 있을 때 콜 스택에 컨텍스트가 쌓이는 과정을 보겠습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1Fce2nPOfLqWtHkuYP-4kPc6vDcyZosRs" alt="실행 컨텍스트가 call stack에 쌓이는 과정" width="688" height="523"/>
 
> 1. 전역 컨텍스트 생성 -> 콜 스택에 쌓임 -> 'console.log("1. 전역 컨텍스트")' 실행 
> 2. outerFunc 호출 -> outerFunc 실행 컨텍스트 생성 -> 콜 스택에 쌓임 -> 'console.log("2. outerFunc 컨텍스트");' 실행
> 3. innerFunc 호출 -> innerFunc 실행 컨텍스트 생성 -> 콜 스택에 쌓임 -> 'console.log("3. innerFunc 컨텍스트")' 실행
> 4. innerFunc 함수 종료 -> 콜 스택에서 제거.
> 5. outerFunc로 복귀 -> outerFunc 함수 종료 -> 콜 스택에서 제거.
> 6. 전역 컨텍스트로 복귀 -> console.log("4. 함수 실행 컨텍스트가 모두 제거 된 후 전역 컨텍스트만 call stack에 남음"); 실행, 코드가 모두 실행된 후 콜 스택에서 제거.
 
이와 같이 코드가 실행되다가 함수가 호출되면 해당 함수의 실행 컨텍스트가 콜스택에 쌓이게 되고 해당 함수가 실행됩니다. 함수가 종료되고 콜스택에서 제거되면 이전 컨텍스트의 함수가 이어서 실행되게 됩니다. 
 
## 실행 컨텍스트에 담긴 정보
 
그럼 이제 실행 컨텍스트에 어떤 정보가 담겨있을지 알아보도록 하겠습니다.
 
### - VariableEnvironment (변수 환경)
 
VariableEnvironment는 컨텍스트 생성 시의 식별자 정보와 외부 환경 참조 정보를 가지고 있습니다. 컨텍스트 생성 될 때 컨텍스트의 내의 식별자를 수집합니다. var의 경우 수집과 동시에 undefined로 초기화됩니다. 컨텍스트 생성 당시의 상태를 기억하며 코드 진행 중에 값이 변경되지 않습니다. LexicalEnvironment와 동일한 구조를 가지기 때문에 자세한 구조에 대해선 LexicalEnvironment에서 이야기 해보겠습니다. 
 
### - LexicalEnvironment (어휘적 환경)
 
LexicalEnvironment 역시 식별자 정보와 외부 환경 참조 정보를 가지고 있습니다. 컨텍스트가 생성 될 시점에는 VariableEnvironment를 복사하기 때문에 값이 동일하지만 코드가 실행됨에 따라 식별자 정보를 업데이트 합니다. (const, let으로 선언한 변수의 초기화, 변수 값 할당, 재할당 등) 실제로 코드가 실행되는 동안에는 LexicalEnvironment를 통해 식별자 정보가 관리됩니다.
 
#### - environmentRecord (환경 기록)
컨텍스트 내에서 수집된 식별자 정보가 있습니다.
 
#### - outerEnvironmentReference (외부 환경 참조)
현재 실행 컨텍스트의 외부 환경을 참조하는 정보입니다. 현재 컨텍스트에 식별자가 존재하지 않을 경우 외부 스코프에서 식별자를 검색합니다. 이를 통해 상위 스코프의 식별자에 접근할 수 있는 것을 스코프체인이라고 합니다. 내부 함수에서는 외부 함수의 식별자를 참조할 수 있지만 외부 함수에서 내부 함수에 참조할 수 없는 이유이기도 합니다.
 
<Callout title="호이스팅">
코드가 실행되기 전 식별자를 수집하는 과정에서 식별자가 코드의 상단으로 끌어올려진 것처럼 동작하는 호이스팅 현상이 발생하게 됩니다. 즉, 실제로 식별자가 코드 위로 끌어올려진 것이 아니라 **environmentRecord**에 수집된 식별자를 컨텍스트 내에서 접근할 수 있게 되는 것이죠. 이로인해 var를 사용한 변수 선언, 함수 선언문에 도달하지 않아도 해당 식별자에 접근할 수 있게 됩니다.
</Callout>
 
<Callout title="var와 const, let의 차이">
var는 변수 선언이 수집됨과 동시에 undefined로 초기화 되기 때문에 변수 선언문 전에 해당 변수에 접근이 가능했습니다. 이런 예기치 못한 동작을 보완하기 위해 나온 const, let은 선언문 이전에 변수가 초기화 되지 않는데요. 코드가 실행됨에 따라 변수 선언문에 도달했을 때 비로소 변수가 초기화되고 LexicalEnvironment가 업데이트 됩니다. 따라서 세 가지 키워드로 선언된 변수 모두 호이스팅 현상이 발생하지만 const, let은 변수 수집 후 초기화 되기 이전 영역인 TMZ(일시적 사각지대)에서는 변수에 접근할 수 없기 때문에 변수 선언문 이전에 접근할 수 없게 되는 것이죠.
</Callout>
 
<Callout icon="🤔" title="블록은 어떻게 스코프를 생성할까?">
실행 컨텍스트는 함수 호출 시에 생성된다고 이야기 했습니다. 그렇다면 블록에서는 어떻게 스코프가 만들어질까요? 바로 블록 코드가 실행될 때 LexicalEnvironment가 생성되기 떄문입니다. 이를 통해 블록 내부 식별자를 관리하고 스코프 체인을 통해 외부 환경의 식별자에도 접근할 수 있게 됩니다. 그리고 블록 내의 코드가 모두 종료 되었을 때 LexicalEnvironment가 제거됩니다.
</Callout>
 
### - ThisBinding(This 바인딩)
 
**This Binding**은 **this**의 값을 결정하는 정보로, 함수 호출 시 **this**가 참조할 객체를 결정합니다.
 
## 포스팅을 마무리하며
 
이렇게 자바스크립트 코드가 실행될 때의 환경 정보인 실행 컨텍스트에 대해서 알아보았습니다. 이를 통해 호이스팅, 스코프 체이닝, this 바인딩 등 자바스크립트에서 발생하는 다양한 현상들에 대해 이해할 수 있었습니다. 이번 포스팅을 통해 원래 그런 것, 그냥 그런 것은 없다는 사실도 다시끔 느끼게 되었네요. 
 
사실 실행 컨텍스트는 블로그를 시작하며 언젠가 꼭 다뤄야지 했던 주제입니다. 처음 변수 포스팅을 할 때도 '아 이걸 설명하려면 실행 컨텍스트 이야기를 해야하는데' 하면서 어디부터 어디까지 이야기해야하나 참 고민이 많았는데 이렇게 포스팅할 수 있게 되어서 숙제를 덜어낸 기분입니다. 그럼 후련한 마음으로 글을 마무리 하도록 하겠습니다. 여기까지 긴 글 읽어주셔서 감사합니다.😊

실행 컨텍스트 알아보기

this 바인딩 알아보기

{intro}
<Spacing size="lg" />

## 프로토타입이란?
 
 사전적 의미의 프로토타입은 원래의 형태 또는 전형적인 예, 기초 또는 표준입니다. 원래의 형태, 즉 원형에 주목하여 자바스크립트에서의 프로토타입을 정의하면 **특정 객체의 원형이 되는 부모 객체**라고 할 수 있습니다. 자바스크립트에서 대부분의 객체는 원형 객체, 즉 프로토타입을 가지게 되며 프로토타입에 있는 프로퍼티와 메서드를 상속 받아 사용할 수 있게 됩니다.
 
```javascript
const obj = {};

console.log(obj)

console.log(obj.[[Prototype]]);
// SyntaxError: Unexpected token '['
console.log(Object.getPrototypeOf(obj))
```
 
<PostImage src="https://drive.google.com/uc?export=view&id=1rxr4x95OyzOjQky0mx6QH4HSLJt6xDR6" alt="obj의 프로토타입" width="400" height="263" />
 
객체 리터럴을 통해 빈 객체 obj를 만들고 콘솔을 통해 확인해보면 [[prototype]]에 Object 프로토타입이 존재하는 것을 확인할 수 있습니다. 또한 프로토타입에 정의된 메서드를 사용할 수도 있죠.
 
다만 직접 프로토타입에 접근하려고 할 때 obj.[[Prototype]]으로는 접근할 수 없고 Object.getPrototypeOf() 메서드를 사용하여 객체의 프로토타입에 접근할 수 있습니다. 
 

 
## 프로토타입을 사용하는 이유
 
**자바스크립트는 객체 지향 프로그래밍 언어**입니다. 객체 지향 프로그래밍이란 데이터를 객체 단위로 묶고, 객체 간의 상호작용을 통해 프로그램을 구성하는 방식을 말하는데요. 
객체 지향 프로그래밍의 특징으로는 **각 객체 간의 공통된 속성(프로퍼티)과 기능(메서드)을 추려 정의**하는 <HighlightText type="background" fontWeight={700}>추상화</HighlightText>가 있습니다.
 
아이돌 그룹 에스파를 예로 들어볼까요? (사심 1000%)
 
에스파 각 멤버들의 공통된 속성을 떠올려봅시다. 멤버들은 이름, 포지션(메인보컬, 메인 댄서…)과 같은 속성(프로퍼티)을 가지고 있을 것이고 랩, 댄스, 노래와 같은 공통된 기능(메서드)을 수행합니다. 이렇게 공통된 특징을 추리고 정의하는 것을 추상화라고 합니다. 
 
```javascript
function Idol(name, role) { 
// 각 멤버들의 공통된 속성과 기능을 정의 (추상화)
	this.name = name;
 this.role = role;
 this.rap = () => {
		console.log(`${this.name}이(가) 랩을 한다.`);
 };
 this.dance = () => {
	 console.log(`${this.name}이(가) 춤을 춘다.`);
 };
 this.sing = () => {
	 console.log(`${this.name}이(가) 노래를 한다.`);
 };
}

// Idol 생성자 함수를 통해 멤버(instance) 생성
const karina = new Idol("카리나", "메인 댄서"); 
const winter = new Idol("윈터", "메인 보컬");
const ningning = new Idol("닝닝", "리드 보컬");
const giselle = new Idol("지젤", "메인 랩퍼");

console.log(karina);
console.log(winter);
console.log(ningning);
console.log(giselle);

```
 
<PostImage src="https://drive.google.com/uc?export=view&id=15Y3Ftl1Ka_r0jI3BEx7tEThXU107Yhmk" alt="프로토타입 체이닝" width="400" height="449"/>
 
이렇게 각 멤버들의 공통된 프로퍼티와 메서드를 추상화하여 Idol 생성자 함수를 만들고 생성자 함수를 통해 멤버(인스턴스)들을 만들 수 있게 되었습니다. 
 
그런데 name과 role처럼 인스턴스마다 고유한 값을 가지는 경우가 아닌 항상 동일한 기능을 수행하는 rap, dance, sing을 살펴봅시다. 완전히 같은 기능을 수행하는 메서드가 각 인스턴스 마다 포함되어 있는데요. 이렇게 되면 생성자 함수를 통해 만들어진 인스턴스의 수만큼 같은 코드가 중복으로 생성되게 됩니다. 실제로 각 메서드는 완전히 동일하지만 각각 중복으로 메모리에 저장되어있기 때문에 값을 비교하면 false가 나오게 되는 것을 알 수 있습니다.
 
 ```javascript
console.log(karina.dance === winter.dance); // false
```
 
이처럼 인스턴스가 생성될 때마다 같은 코드가 중복으로 생성되어 메모리에 저장된다면 프로그램의 성능이 저하될 수 있겠죠.
 
이런 불필요한 중복 방지를 위해 필요한 것이 바로 <HighlightText type="background" fontWeight={700}>상속</HighlightText>입니다. 상속이란 **특정 객체의 속성이나 프로퍼티를 다른 객체가 그대로 이어받아 사용할 수 있는 것**을 말합니다. 그리고 자바스크립트는 바로 프로토타입을 사용하여 상속을 구현합니다.
 
```javascript
function Idol(name, role) {
	this.name = name;
 this.role = role;
}

Idol.prototype.rap = () => {
 console.log(`${this.name}이(가) 랩을 한다.`);
};
Idol.prototype.dance = () => {
	console.log(`${this.name}이(가) 춤을 춘다.`);
};
Idol.prototype.sing = () => {
	console.log(`${this.name}이(가) 노래를 한다.`);
};

const karina = new Idol("카리나", "메인 댄서"); 
const winter = new Idol("윈터", "메인 보컬");

console.log(karina.dance === winter.dance); //true
```
 
생성자 함수를 통해 생성된 인스턴스는 해당 생성자 함수의 prototype 프로퍼티를 프로토타입으로 가지는데요.
(저는 예전에 karina의 프로토타입이 Idol이라고 착각한 적이 있는데 Idol은 생성자함수인 것이고 Idol.prototype이 karina의 프로토타입이 됩니다.)
 
위와 같이 Idol.prototype을 통해 공통된 메서드를 정의하게 된다면 이제 모든 인스턴스들은 프로토타입에 정의된 메서드를 상속받아 사용할 수 있게 되고 더이상 여러번의 불필요한 코드 중복을 발생시키지 않게 됩니다. karina.dance와 winter.dance를 비교해도 true가 나오는 것을 알 수가 있습니다.
 
이처럼 프로토타입은 자바스크립트의 객체 지향 프로그래밍에서 상속을 구현할 수 있게 하며 자바스크립트가 프로토타입 기반의 객체 지향 언어라고 불리는 이유이기도 합니다.
 
## 상속 구현하기
 
이제 우리는 프로토타입이 무엇인지 프로토타입을 왜 사용하는지에 대해 알게 되었습니다. 
그럼 이제 프로토타입을 이용하여 상속을 구현해봅시다.
 
```javascript
function Singer(name){
	this.name = name;
}
 
Singer.prototype.sing = function () {
	console.log(`${this.name}이(가) 노래를 한다.`);
};

function Idol(name, role) {
 Singer.call(this, name); // Singer 생성자 함수를 호출
	this.role = role;
}

Idol.prototype = Object.create(Singer.prototype); // prototype 연결

Idol.prototype.rap = function () {
	console.log(`${this.name}이(가) 랩을 한다.`);
};

Idol.prototype.dance = function () {
	console.log(`${this.name}이(가) 춤을 춘다.`);
};

const karina = new Idol("카리나", "메인 댄서");

karina.dance();

```
 
1. Object.create('Signer.prototype') 을 사용하여 새 객체를 생성합니다. 이때 첫번째 인자에 들어가는 값이 생성되는 객체의 프로토타입이 됩니다. 
즉 Idol.prototype은 Singer.prototype을 프로토타입으로 갖게 됩니다. (프로토타입탈트 붕괴..)
2. Idol 생성자 함수에서 Singer 함수를 호출합니다. 이때 call 메서드를 사용하여 this와 인자값을 전달합니다.
 
이제 Singer.prototype을 상속받아 karina.sing()를 호출할 수 있습니다!
 
## 프로토타입 체이닝
 
위 예제에서 karina 객체 내부에 dance 메서드가 없어도 실행시킬 수 있었는데요. 이는 객체에서 프로퍼티를 찾을 때 객체 내부에 해당 프로퍼티가 없다면 그 객체의 프로토타입을 확인하며 계속 위로 올라가면서 찾는 과정인 프로토타입 체이닝이 있기 때문입니다. 이를 통해 자바스크립트는 상속을 구현하게 됩니다. 그리고 프로토타입 체이닝의 끝에는 최상위 프로토타입인 Object.prototype이 있습니다. 즉 거의 모든 자바스크립트 객체는 Object.prototype를 상속 받게 됩니다.
(맨 처음 프로토타입을 정의할 때 예시코드에서도 빈 객체인 user에 Object 프로토타입이 있었죠?)
 
## 상속 확인 하기
 
이렇게 상속이 이어지다 보면 특정 인스턴스가 어떤 생성자 함수를 통해 만들어졌는지 헷갈릴 수도 있을텐데요. 이럴때는 instandeOf 연산자를 사용하여 확인하면 됩니다. 인스턴스 instanceof 생성자 생성자 함수를 통해 생성된 인스턴스이면 true, 아니라면 false를 리턴합니다.
 
```javascript
console.log(karina instanceof Singer)// true;
console.log(karina instanceof Idol) //true;
console.log(karina instanceof Actor) //false
```
 
## 오버라이딩
 
같은 프로토타입을 공유하고 있는 객체 중 하나의 객체에서만 프로퍼티나 메서드를 수정하고 싶을 땐 어떻게 해야할까요? 이를 위해 프로토타입에 정의된 메서드를 하위 객체에서 재정의하는 오버라이딩에 대해 알아봅시다.
 
에스파의 메인보컬인 닝닝은 주로 고음을 담당합니다. 닝닝의 sing 메서드를 수정해봅시다.
 
```javascript
ningning.sing = ()=>{
	console.log(`${this.name}은(는) 고음을 부른다.`);
}

ningning.sing(); //닝닝은(는) 고음을 부른다.
giselle.sing(); //지젤이(가) 노래를 부른다.

```
 
ningning.sing을 재정의하여 ningning.sing이 오버라이딩 되었습니다. 하지만 giselle.sing은 기존의 메서드를 유지하고 있죠. 
 
<PostImage src="https://drive.google.com/uc?export=view&id=1Tn8U4kWBrZno1r4QlFeG00n1z1m68DEc" alt="Idol의 instance" width="400" height="177"/>
 
이것은 ningning.sing을 오버라이딩 할 때 프로토타입의 메서드를 수정한 것이 아니라 ningning 인스턴스에 메서드로 추가된 것이기 때문입니다. 이처럼 인스턴스 프로퍼티(프로퍼티와 메서드를 모두 포함)에 의해 프로토타입 프로퍼티가 가려지는 현상을 프로퍼티 섀도잉이라고 합니다.
 
## 포스팅을 마치며
 
여기까지 프로토타입의 의미, 왜 프로토타입이 사용되는지, 프로토타입을 통한 상속 구현에 대해 알아보았습니다. (더 상세한 내용을 알고 싶으시다면 자바스크립트 딥다이브 책을 추천드려요. 무려 50 페이지에 걸친 방대한 내용이 여러분을 기다리고 있습니다.) 
 
사실 요즘에는 Class 문법을 사용하는 추세지만 그래도 그 근간에는 프로토타입이 있기 때문에 자바스크립트를 사용하는 개발자라면 프로토타입에 대해 알아두는 것이 중요할 것 같습니다.
 
포스팅 시작 전에 말했듯 프로토타입에 대해 어렴풋이 알고 있었지만 말로 설명하기가 어려웠는데요. 일단 프로토타입에 대해 완전히 이해하지 못한 상태였고 또 너무 방대한 내용이여서 어디부터 어디까지 이야기 해야할지 몰랐던 것 같기도 합니다. 하지만 이번 기회를 통해 프로토타입에 대해 명확히 알 수 있었고 자바스크립트 상속 매커니즘을 엿볼 수 있어서 재밌었습니다. 가끔 인스턴스, 프로토타입탈트 붕괴 현상이 찾아오긴 했지만.. 글을 읽으시는 분들도 많이 헷갈리실 것 같아서 걱정이 듭니다. 긴 글 읽어주셔서 감..사건은 다가와 Oh Eh 👻

프로토타입(ProtoType) 알아보기

{intro}
<Spacing size="lg" />

## 원시 타입 (Primitive Type)
 
- 원시타입에는 총 6가지의 데이터 타입이 있습니다. (아래 표 참고)
- 변수에 **실제 값이 직접 저장**되는 데이터 타입입니다.
- **불변한(immutable)** 값이며 재할당 시 기존 메모리 공간을 덮어 쓰는 것이 아니라 새로운 메모리 공간에 값을 저장하고 식별자는 새로운 메모리 주소를 가리키게 됩니다.
- 원시 값을 갖는 변수를 다른 변수에 복사하면 원본의 **값 자체가 복사**됩니다.
 
| 데이터 타입 | 예시 값 | 부연 설명 |
| --- | --- | --- |
| 문자열 (string) 타입 | ‘가나다’, ‘1234’ | |
| 숫자 (number) 타입 | 123, -123, infinite, NaN (Not a Number) | |
| boolean 타입 | 논리 값, 참 (true)과 거짓 (false) | |
| undefined 타입 | undefined (변수에 값이 할당되지 않았을 때 초기 값) | |
| null 타입 | null (’값이 없음’을 명시할 때 사용) | typeof 사용 시 object가 나옴 |
| symbol 타입 | 변경 불가능한 원시타입 값 | |
 
<PostImage src="https://drive.google.com/uc?export=view&id=1SeVPcTnmDHVUgCGwWAcncEzvDP-kJsBt" alt="원시형 데이터" width="660" height="795"/>
> 1. 실제 값 123456가 password 변수에 저장됩니다.
> 2. password를 복사한 copyPassword는 password의 값 123456을 복사합니다.
> 3. password에 654321로 값을 재할당하면 기존의 123456 값을 수정하는 것이 아니라 새로운 메모리 공간에 저장되며 password 식별자는 새로운 값이 담긴 메모리 주소를 가르킵니다.

 
<Callout title="데이터 타입을 확인하고 싶을땐?">
typeof 연산자를 사용하면 데이터 타입을 문자열로 반환합니다.
</Callout> 
 
```javascript
console.log(typeof true); // boolean
console.log(typeof "true") //string
```
 
## 객체 타입 (Object Type)
 
- 원시형 데이터가 아닌 모든 데이터 타입이 객체 타입 데이터입니다. (객체, 배열, 함수 등)
- 객체 데이터는 **크기가 동적으로 바뀔 수 있기에 힙 메모리에 저장**되며 변수에는 **데이터의 메모리 주소가 저장**됩니다.
- **변경 가능(mutable)**한 값이며 객체의 프로퍼티를 바꾸는 것이 가능합니다.
- 객체 타입 변수를 다른 변수에 복사하면 원본의 **메모리 주소 값이 복사**됩니다.
- 같은 주소를 바라보고 있기 때문에 **복사한 객체를 수정하면 원본 객체도 같이 수정됩니다.**
 
<PostImage src="https://drive.google.com/uc?export=view&id=1PlT7EDKxpr3AAoqW9WGBHwYvJO8Ymkr3" alt="" width="660" height="972"/>
 
> 1. userInfo는 객체가 저장된 주소를 저장합니다.
> 2. copyUserInfo는 userInfo 객체가 저장된 주소 값을 복사합니다.
> 3. 객체 타입 데이터는 변경 가능한 값이므로 프로퍼티를 바꾸는 것이 가능합니다. userInfo.name이 '김유저'에서 '이유저'로 변경
> 4. userInfo와 copyUserInfo는 같은 객체를 참조하고 있기 때문에 userInfo.name도 '이유저'가 됩니다. 

 
<Callout title="배열은 무슨 타입일까?">
array는 배열이지만 데이터 타입은 **object**로 나오는 걸 볼 수 있습니다. 객체형 데이터 중 function만 예외적으로 **function** 타입을 반환합니다.
Array.isArray() 메서드를 사용하여 배열인지 아닌지 확인할 수 있습니다.
</Callout>

 
```javascript
const array = [];
const func = function (){}

console.log(typeof func) //function
console.log(typeof array); // object
console.log(Array.isArray(array)) //true

```
 
## 🚨객체형 데이터를 다룰 때 주의해야 할 점
 
```javascript
const userInfo = {
	id: 1,
	name: "김유저",
};

const copyUserInfo = userInfo;

copyUserInfo.name = "이유저"; // 복사한 객체에서 데이터 수정

console.log(userInfo.name) // "이유저", 복사한 객체를 수정하였지만 원본 객체도 수정되었다!
```
 
위 코드 처럼 copyUserInfo를 수정하면 원본인 userInfo도 수정됩니다. **두 변수가 같은 메모리 주소를 바라보고 있기 때문입니다.** 원본을 수정하려고 의도한 것이 아니었다면 예기치 못한 에러가 날 수도 있겠죠. 때문에 객체형 데이터를 복사할 때는 원본 데이터에 영향을 미치지 않도록 **불변성을 유지하는 것이 중요합니다.**
 
## 불변성을 유지하며 객체 타입 복사하기
 
객체의 복사는 얕은 복사와 깊은 복사가 있습니다. <HighlightText type="background" fontWeight={700}>얕은 복사</HighlightText>란 **복사 데이터의 속성이 원본 데이터와 같은 참조를 공유하는 경우**이고 <HighlightText type="background" fontWeight={700}>깊은 복사</HighlightText>는 **원본 데이터와 공유하는 참조값이 없는 복사**로 원본 데이터의 불변성을 유지할 수 있습니다.
 
### 얕은 복사(Shallow Copy)
 
#### 1. spread 연산자 
객체와 배열을 쉽게 복사할 수 있는 방법으로 spread 연산자(...)가 있습니다. spread 연산자를 사용하면 배열이나 객체를 펼쳐서 개별 요소로 분리할 수 있습니다. 사용하기도 쉽고 보기에도 간결하기 때문에 저는 많은 경우 spread 연산자를 사용하여 객체 데이터를 복사합니다.
 
```javascript
const user = {
	id:123456,
	address: "우리 집",
};
const copyUser = {...user};

console.log(user === copyUser) //false


const colors = ["빨강", "주황", "노랑"];
const copyColors = [...colors];

console.log(colors === copyColors) //false
```
 
user와 colors를 spread 연산자로 분리한 후 새로운 객체와 배열로 만들었습니다. 원본 데이터와 비교해보면 false가 나오는 걸 볼 수 있습니다.
이제 복사 데이터를 변경해도 원본 데이터에 영향이 가지 않습니다.
 
```javascript
const userList = [
 {
 id: 1,
 name: "김유저",
 },
 {
 id: 2,
 name: "이유저",
 },
 {
 id: 3,
 name: "박유저",
 },
];

const copyUserList = [...userList];
console.log(userList === copyUserList);// false
console.log(userList[0] === copyUserList[0]); 
//true, 같은 메모리 주소를 가지고 있음, 불변성 보장 ❌
```
 
다만 spread 연산자는 얕은 복사를 하기 때문에 최상위 속성만 복사하며 중첩된 객체, 배열의 불변성을 보장하지 않습니다.
 
#### 2. Object.asign()
Object.assign()는 첫 번째 인자인 대상 객체에 두 번째 이후의 인자인 소스 객체들의 속성을 대상 객체에 복사하고 병합한 후 대상 객체를 반환하는 메서드입니다.
이또한 얕은 복사이기에 중첩 객체 데이터의 불변성은 보장되지 않습니다.
 
```javascript
const targetObj = {
 a : 1,
 b : 2
}
const sourceObj = {
 c : 3,
 d : 4
}

const assignedObj = Object.assign(targetObj,sourceObj); 
// targetObj에 sourceObj의 속성을 복사하고 병합한 후 targetObj가 반환
console.log(assignedObj);
// {
// a : 1,
// b : 2,
// c : 3,
// d : 4
// }
console.log(targetObj ===assignedObj) // true
```
 
targetObj에 sourceObj의 속성을 복사한 후 병합할 수 있습니다.
 
```javascript 
const userInfo = { 
 id : 1,
 name : "김유저"
};
const copyUserInfo = Object.assign({},userInfo); 
//대상 객체 {}에 userInfo 객체의 속성을 복사하고 병합하여 대상 객체를 반환

console.log(userInfo === copyUserInfo); // false
```
 
이런 식으로 얕은 복사를 할 수 있게 됩니다.
 
#### 3. Array.from()
 
Array.from()은 원본 배열을 얕게 복사한 새로운 배열을 반환합니다.
```javascript
const userList = [
 {
 id: 1,
 name: "김유저",
 },
 {
 id: 2,
 name: "이유저",
 },
 {
 id: 3,
 name: "박유저",
 },
];
const copyUserList = Array.from(userList);
console.log(userList===copyUserList);//false

```
 
#### 4. 새로운 배열을 리턴하는 배열 메서드
 
배열의 경우 map, filter, slice, concat, reduce 등 **새로운 배열을 리턴하는 배열 메서드**를 사용하여 얕은 복사가 가능합니다.
대표적으로 많이 쓰이는 map의 경우를 살펴보겠습니다.
 
```javascript
const userList = [
 {
 id: 1,
 name: "김유저",
 },
 {
 id: 2,
 name: "이유저",
 },
 {
 id: 3,
 name: "박유저",
 },
];
const copyUserList = userList.map((userItem)=>({...userItem}));
console.log(userList===copyUserList);//false
console.log(userList[0] ===copyUserList[0])//false

```
 
배열 메서드도 얕은 복사를 하지만 callback 함수 안에서 userList의 원소인 userItem을 다시 한번 복사하는 것이 가능합니다.
 

### 깊은 복사(Deep Copy)
깊은 복사를 하기 위해서는 재귀함수를 사용하여 deepCopy 함수를 구현하거나 deepCopy 기능을 제공하는 라이브러리를 사용하시면 됩니다.
(라고 Chat GPT가 알려줬습니다. 저는 프로젝트에서 깊은 복사를 해본 경험은 없네요😥) 
프로젝트에 따라 직접 구현 또는 관련 라이브러리 도입을 고민해보면 될 것 같습니다. 저는 공부 목적으로 깊은 복사를 직접 구현해보겠습니다.
 
#### 1. deepCopy 함수 구현하기
 
> **목표 : 데이터를 돌면서 프로퍼티 혹은 원소가 object 타입이 아닐때까지 재귀적으로 값을 얕은 복사하여 결과적으로 원본 데이터와의 참조 값을 완전히 끊어낸다.**
> 
> 1. base case : 인자로 받아온 data의 타입을 체크한 한 후 object 타입이 아니라면 data를 리턴.
> 2. data가 배열인 경우 : map을 사용하며 원소를 재귀적으로 복사 후 리턴.
> 3. data가 object인 경우 : for in 반복문을 사용하여 속성을 재귀적으로 복사 후 result에 추가, result 리턴

 
```javascript
const deepCopy = (data) => {
 // null의 type이 object이므로 주의해서 조건에 추가.
 if (data === null || typeof data !== "object") {
 return data;
 }
 if (Array.isArray(data)) {
 return data.map((item) => deepCopy(item));
 }
 const result = {};
 for (key in data) {
 result[key] = deepCopy(data[key]);
 }
 return result;
};

const userList = [
 {
 name: "김유저",
 address: {
 country: "한국",
 city: "서울",
 coordinates: [126.978, 37.5665],
 },
 hobbies: ["달리기", "책 읽기"],
 },
 {
 name: "이유저",
 address: {
 country: "미국",
 city: "워싱턴 DC",
 coordinates: [74.006, 40.7128],
 },
 hobbies: ["게임하기", "등산"],
 },
 {
 name: "박유저",
 address: {
 country: "일본",
 city: "도쿄",
 coordinates: [35.6828, 139.7595],
 },
 hobbies: ["영화보기", "테니스"],
 },
];

const copiedUserList = deepCopy(userList);
console.log(
 userList[1].address.country[0] === copiedUserList[1].address.coordinates[0]
 ); //false
```
재귀적으로 데이터를 얕은 복사하는 deepCopy 함수를 쓰니 배열안의 객체안의 배열의 값을 비교해도 false가 나옵니다 🎉
 
(딴소리지만 재귀함수를 사용할 때는 재귀함수 종료 조건인 base case를 잘 설정해줍시다. 
조건을 data === null <HighlightText type="background">&&</HighlightText> typeof data !== "object"로 넣었다가 눈물이 찔끔 나왔버렸습니다.)
<PostImage src="https://drive.google.com/uc?export=view&id=1WC-1hkUU_hwYWNap9E6gD7F4FByIEtX-" alt="스택오버플로우" width="440" height="177"/>

 
## 포스팅을 마치며
 
오늘은 원시형 데이터와 객체형 데이터의 특징과 데이터의 불변성을 유지하는 방법에 대해 알아보았습니다. 처음 포스팅을 시작할 때도 이야기했듯이 자바스크립트를 처음 배울 때는 원시형 데이터와 객체형 데이터를 나누는 큰 특징보다는 원시형 데이터에 더 집중해서 공부했었습니다. 그러다 리액트를 접하게 되고 객체형 데이터의 특성을 이해하는 것이 중요하다는 것을 알게 되었습니다. 리액트는 state의 변화에 따라 화면을 리렌더링 하기 때문에 객체를 변경해도 주소 값이 같다면 리렌더링이 안 되는 이슈가 발생할 수 있었기 때문이죠. 따라서 원본 객체와 다른 주소 값을 가지는 새로운 객체를 만들어 원본 객체의 불변성을 유지할 필요가 있었습니다. (물론 리액트를 사용하지 않더라도 복사된 데이터에 의해 원본 데이터가 수정되지 않도록 불변성을 유지하는 것은 중요한 일입니다.) 이때 다시 한 번 느끼게 된 것은 어떤 라이브러리를 사용하더라도 자바스크립트의 특성을 알고 있는 것이 중요하다는 것이었습니다. 만약 객체형 데이터의 특성을 모른다면 리렌더링 이슈가 발생했을 때 왜 이런 이슈가 발생하는지 파악하기 힘들 테니까요. 그리고 빠르게 변화하는 프론트엔드 생태계 특성상 언제 어떤 라이브러리가 리액트의 자리를 대신하게 될지 모르지만 자바스크립트 지식이 탄탄하게 깔려 있다면 쉽게 적응할 수 있다고 생각합니다. 저도 아직 많이 배우는 단계이기에 그런 경지에 오르기 위해 많이 공부하고 노력해야될 것 같습니다. 여기까지 긴 글 읽어주셔서 감사드리고 앞으로도 꾸준히 공부하며 기록하도록 하겠습니다.🤓

원시형과 객체형

{intro}
<Spacing size="lg" />

## 프로그래밍에서 변수란?
 
프로그래밍에서 변수란 **하나의 값을 저장하기 위해 이름이 붙은 메모리 공간**을 뜻합니다.
 
```javascript 
var password = 123456; 
```
 
위와 같이 변수를 선언하고 값을 할당하면 3단계에 걸쳐 변수에 값이 저장됩니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1WtfApWevV7lzHhaKIx6mF-KktJy5wZBo" alt="변수 선언 과정" width="580" height="392"/>
 
> 1. 선언 : 자바스크립트 엔진이 **변수의 식별자를 인식하는 단계**입니다. 식별자만 인식할 뿐 값이 저장되지는 않습니다.
> 2. 초기화 : 변수 식별자가 인식된 후, **메모리 공간을 확보하고 초기값을 설정하는 단계**입니다. 이 때 식별자는 확보된 메모리 공간의 주소값을 가르킵니다. 초기 값이 명시되어 있지 않은 경우 undefined로 초기화 됩니다.
> 3. 할당 : 식별자가 가르키고 있는 주소의 **메모리 공간에 값을 저장하는 단계**입니다.
 
## var와 const, let의 차이
 
이제 자바스크립트에서 변수를 선언할 때 사용하는 세가지 키워드 var와 const,let의 차이점에 대해 알아봅시다.
 
### 1. 재선언 , 재할당 가능 여부
 
#### 재선언과 재할당이란?
 
**재선언** : 이미 선언된 변수 식별자를 다시 사용하여 변수를 선언하는 것을 의미합니다.
 
```javascript 
var password = 123456; 
var password = 654321; // 이미 사용된 password 식별자를 사용하여 변수를 재선언

console.log(654321); // 재선언 시 할당된 654321이 출력된다.
```
 
**재할당** : 변수에 값을 다시 할당하는 것을 의미합니다.
 
```javascript 
var password = 123456; 
password = 654321; // password 값에 값을 재할당

console.log(654321); // 재할당 된 654321 값이 출력된다.
```
 
var와 const, let의 재선언, 재할당 여부는 아래와 같습니다.
 
| 변수 선언 키워드| 재선언 | 재할당 |
| ----------- | ------ | ------ |
| var | O | O |
| const (ES6) | X | X |
| let (ES6) | X | O |
 
1. **var** : 재선언과 재할당 **모두 가능**합니다.
2. **const** : 재선언과 재할당 **모두 불가능**합니다. 값이 변하지 않으니, 선언과 동시에 값이 할당되어야 합니다. 재할당이 허용되지 않으므로 상수(constance)라고도 합니다.
3. **let** : **재할당만 가능**하고 재선언은 허용되지 않습니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=14fhjKXNkr4VFS8JnRq4UDa8c052BeEp9" alt="챗지피티한테 let의 의미를 물어보았다." width="558" height="266" caption="그래서 let이 무슨 뜻이냐고요..."/>
 
#### 재선언의 위험성 🚨
 
```javascript 
var password = 123456; 

// 1000 lines later ...🐌

var password = 654321; 
// 코드가 너무 길어져 실수로 위에 선언된 password를 덮어쓴다면?!😱
```
 
위와 같이 코드가 길어지거나 다른 개발자와 협업하여 일하는 경우 기존에 변수가 재선언되어 덮어써진다면 생각지 못한 에러가 발생하겠죠? 이런 상황을 미연에 방지하기 위해 **재선언을 허용하지 않는 키워드인 const와 let을 사용하는 것이 좋습니다.**
 
#### 어떤 상황에서 const를 쓰고 let을 써야할까요?🤔
 
 **변수에 값을 재할당해야 할 이유가 없는 모든 경우에 const를 쓰는 것이 바람직합니다.** const는 재할당조차 허용하지 않는 가장 엄격한 키워드이기 때문에 의도치 않게 값을 변경시키는 일이 발생하지 않기 때문입니다.
 
```javascript
const password = 123456; 

password = 654321; 
// TypeError: Assignment to constant variable
```
 
 부득이하게 값이 재할당 되어야 할 때는 let을 사용하면 됩니다. 저는 주로 if문, switch문 같은 조건문에서 조건에 따라 값을 다르게 할당해야하는 경우에 사용했습니다. 
 (~~만약문이라고 쓰고 5초간 뭐가 이상한지 몰랐던 사람이 바로 저예요~~)
 
### 2. 스코프 (scope)
 
#### 스코프란?
 
스코프(scope)는 **변수에 접근할 수 있는 유효 범위**를 뜻합니다. 
 
**전역 스코프 (Global Scope)** : 함수나 블럭 바깥의 최상위 공간입니다. 전역 스코프에 선언된 변수는 어디서나 접근 가능하며 이를 전역 변수라고 합니다.
**지역 스코프 (Local Scope)** : 함수나 블럭 내부를 뜻합니다. 지역 스코프에 선언된 변수는 해당 스코프 내에서만 접근 가능하여 이를 지역 변수라고 합니다.
 
<PostImage src="https://drive.google.com/uc?export=view&id=1ZAsj37PaM6f7rCxrv65DjyHeVz4BMqy_" alt="스코프" width="558" height="266"/>
 
>1. 전역 스코프에 선언된 변수는 어디서나 접근 가능합니다.
>2. 지역 스코프에 선언된 변수는 전역 스코프에서 접근할 수 없습니다.
 (전역 스코프에서 outerFunction에 선언된 outerVar에 접근할 수 없음)
>3. 함수가 중첩된 경우 하위 함수에서는 상위 함수에 선언된 변수에 접근할 수 있지만 외부 함수에서 내부 함수에 선언된 변수에 접근할 수 없습니다.
 (outerFunction에서 innerFunction에 선언된 innerVar에 접근할 수 없음)
>4. 변수에 접근할 때 함수 내부에 선언되지 않았다면 상위 스코프로 올라가서 찾습니다. (스코프 체인)
 (innerFunction은 outerFunction, 전역 스코프에 있는 변수에 모두 접근이 가능)

 
#### var와 const, let의 스코프 차이
 
- **var의 스코프** : **함수 레벨** (function level)
- **const, let의 스코프** : **블럭 레벨** (block level)
 
#### 함수 스코프의 단점
 
함수 선언 시에 블럭이 사용되니 둘이 비슷한 것이 아닌가? 라는 생각이 들수도 있지만 함수 레벨의 유효 범위에서는 if문, for문처럼 함수가 아닌 문(statement) 안에서 선언한 변수가 전역변수가 되어 코드 여기저기서 참조할 수 있게 될뿐더러 다른 변수와 충돌할 가능성이 있습니다. 때문에 **안정적이고 예측 가능한 변수 사용을 위해 블록 스코프인 const와 let을 사용하는 것이 좋습니다.**
 
```javascript
for (var i = 0; i < 10; i++) {
 var a = "a";
}
console.log(i); // 10 => 루프 헤더에 선언된 i에 접근 가능
console.log(a); // 'a' => for문 안에 선언된 a에도 접근 가능

if (false) {
 var b = "b";
}

console.log(b); 
// undefined => if문의 조건이 거짓이므로 값을 할당되지 않았지만 전역변수이기에 접근은 가능하다🙄
``` 
 
### 3. 호이스팅 (Hoisting) 현상
 
<Callout>
자바스크립트는 런타임 환경에서 코드를 한 줄 한 줄 읽어내려가는 인터프리터 언어이다.
</Callout>
 
자바스트립트를 공부하면 제일 처음 배우게 되는 자바스크립트의 특징입니다. ~~(근데 이제 공부할 수록 가장 큰 혼란을 주는)~~
위의 자바스크립트의 특징을 잘 기억해둔 후 아래 코드를 살펴봅시다.
 
```javascript
console.log(password); //undefined

var password = 123456;
```
 
위 코드는 에러가 나야할 것 같지만 undefined가 출력될 뿐 에러 없이 코드가 돌아갑니다. (~~어째서..~~ 🤦)
 
이는 “끌어올리다”라는 뜻을 가진 <HighlightText type="background" fontWeight={700}>호이스팅</HighlightText>으로 인해 나타나는 현상으로 자바스크립트 엔진이 코드를 실행 하기 전에 **코드의 변수, 함수, 클래스의 선언부를 스코프의 최상단으로 끌어올리는 것처럼 동작하는 현상**을 말합니다. 
(함수 선언문 위에서 함수 실행이 가능한 이유도 호이스팅 때문이죠.)
 
var의 경우 호이스팅 시 **선언과 동시에 undefined로 초기화**되기 때문에 변수 선언문 이전에 변수를 참조해도 에러 없이 undefined 값을 얻을 수 있게 됩니다.
 
#### var의 호이스팅
 
<PostImage src="https://drive.google.com/uc?export=view&id=1Fp1-ZFQeIhvim7xyAgEHu-O6iagpDqjA" alt="var의 호이스팅" width="728" height="445"/>
 
> 1. 초기화 된 undefined 출력 😱
> 2. 선언 후 값을 할당하지 않았으므로 undefined로 초기화
> 3. undefined 출력
> 4. 123456 할당
> 5. 123456 출력

 
그럼 const와 let은 어떨까요?
 
<Callout icon="🚨">
 <HighlightText textColor="red">ReferenceError: Cannot access 'userName' before initialization</HighlightText >
</Callout>
 
‘userName’이 초기화되기 전에 접근할 수 없다는 참조 에러가 뜨게 됩니다. 
해당 코드 라인이 실행되는 시점에서 선언하지 않는 변수에 접근할 수 없는 게 우리가 예측할 수 있는 동작이므로 안심이 됩니다.
그런데 한 가지 의문인 점은 왜 ReferenceError: userName is not defined가 아닌 걸까요?
그 이유는 const와 let 또한 호이스팅 현상이 발생하기 때문입니다. 다만 var와의 차이점은 **const와 let은 호이스팅과 동시에 변수가 초기화 되지 않는다는 것**입니다. 
<HighlightText type="background" fontWeight={700}>TDZ(Temporal Dead Zone)</HighlightText>, 일시적 사각지대라고 하여 **변수 선언이 인식된 후 변수가 초기화 되기 전까지의 구간에서 const와 let 키워드로 선언한 변수에 접근하면 참조 에러가 발생**하게 됩니다.

const와 let으로 선언한 변수는 자바스크립트 엔진이 변수 선언문에 도달했을 때 초기화되고 접근이 가능해집니다. 이때 **const는 재할당이 불가능하기 때문에 초기화와 동시에 값이 할당**되어야 합니다. let은 할당 값이 없다면 undefined로 초기화됩니다.
 
#### const의 호이스팅
 
<PostImage src="https://drive.google.com/uc?export=view&id=1e6ONONIaXB_0jj3nXJUnFdZbrImqp5EH" alt="const의 호이스팅" width="728" height="373"/>
 
> 1. 변수 선언이 끌어올려진 후 초기화 되지 않아 접근할 수 없음 (ReferenceError: Cannot access 'password' before initialization)
> 2. 값을 재할당 할 수 없는 상수(constant)이기에 초기화와 동시에 할당
> 3. 할당된 값 123456 출력

 
#### let의 호이스팅
 
<PostImage src="https://drive.google.com/uc?export=view&id=1IwziOv60kqGAzwjJjoAO8oqOFbVeNE-v" alt="let의 호이스팅" width="728" height="445"/>
 
> 1. 변수 선언이 끌어올려진 후 초기화 되지 않아 접근할 수 없음 (ReferenceError: Cannot access 'password' before initialization)
> 2. 선언 후 값을 할당하지 않으면 undefined로 초기화 
> 3. 초기화 된 undefined 출력
> 4. 값 123456 할당
> 5. 할당된 123456 출력

 
## var를 지양해야 하는 이유
 
 - 재선언이 가능해 기존 선언을 덮어 쓸 수 있는 위험이 있습니다.
 - 호이스팅으로 인하여 변수 선언문 이전에 변수에 접근 가능한 예기치 못한 동작이 발생합니다.
 - 함수 스코프이기 때문에 if문, for문 등 문에서 쓰인 변수가 전역 변수가 되어 코드 여기 저기서 접근이 가능하고 변수 간 충돌이 발생할 수 위험이 있습니다.
 
=> 따라서 코드의 예측 가능성과 안정성을 저하시키는 var를 지양하고 이를 보완하기 위해 나온 const와 let을 사용하는 것을 적극 권장합니다👍
 
## 포스팅을 마치며
 
이렇게 var의 특징과 그 특징으로부터 발생하는 위험성에 대해 알아보았습니다. var를 사용하면 코드가 일단 돌아는가지만 왜 돌아가는지 혼란스럽고, 왜 여기서 내가 예상한 동작과 다른 버그가 발생하는지 파악하는 데 시간을 허비하게 될 가능성이 크겠죠. 그렇기 때문에 요즘에는 var를 사용하지 않는 추세입니다. 다만 사용하지 않으니 알아두지 않는 것이 아니라 어떤 특징을 가지고 있었는지, 그 특징으로부터 어떤 불편함이 발생했는지, 불편을 해소하기 위해 어떻게 해야 하는지 알아두는 것이 중요하다고 생각합니다. 그리고 ES6가 나온 이후에 개발을 시작한 것이 얼마나 큰 행복인지도요🥹

.css-y59011{position:relative;}.css-y59011::after{content:"";position:absolute;right:0;bottom:0;width:0;height:2px;background-color:var(--color-secondary);-webkit-transition:width 200ms ease-in-out;transition:width 200ms ease-in-out;} 쓰로틀과 디바운스로 이벤트 최적화하기