호이스팅 클로저 실행 컨텍스트 위 3가지 내용에 대하여 정리해봤습니다.

1. 발표자 : zero86
Javascript study
호이스팅, 클로저, 실행 컨텍스트

2. INDEX
01
호이스팅(Hoisting)
02
클로저(Closure)
03
실행 컨텍스트
(Execution Context)

3. 호이스팅(Hoisting)
정의
- 사전적 의미로 들어올리다, 끌어올리다 라는 의미를 지님(명사로는 승강장치)
- 무엇을 끌어올리는데? (해당 컨텍스트 최상단으로!)
1. 변수 선언
2. 함수 선언
예제
01 - Javascript 호이스팅
console.log(a());
console.log(b());
console.log(c());
function a() {
return 'a function..';
}
var b = function b() {
return 'b function..';
}
var c = function() {
return 'c function..';
}
a() 선언부가 아래에 있지만, 정상 실행이 된다.
이게 바로 호이스팅이다.
할당은 해당사항이 아니다.
function a() {
return 'a function..';
}
var b;
var c;
console.log(a());
console.log(b());
console.log(c());
b = function b() {
return 'b function..';
}
c = function() {
return 'c function..';
}

4. 호이스팅(Hoisting)
예제2
- 호이스팅에서 변수가 우선일까? 함수가 우선일까? (호이스팅 순위)
01 - Javascript 호이스팅
옆에 예제를 실행시켜보면, 동일한 변수, 함수 일 경우. 할당이
일어나기전에는 함수 타입으로 나오고, 할당 후에는 string 으
로 바뀌는걸 볼 수 있다.
var myName = "hi";
console.log(typeof myName); // string
console.log(typeof yourName); // function
function myName() {
console.log("yuddomack");
}
function yourName() {
console.log("everyone");
}
var yourName = "bye";
console.log(typeof myName); // string
console.log(typeof yourName); // string

5. 클로저(Closure)
정의
- 클로저는 함수와 함수가 선언된 어휘적 환경(lexical environment)의 조합
- 선언될 당시의 환경정보 사이의 조합(scope와 깊은 관계가 있다)
- 클로저를 잘 활용하면, 캡슐화, 모듈화 작업을 수행할 수 있다. (IIFE가 클로저를 이용한 패턴)
- 일반적으로 함수가 종료되면, 메모리에서 소멸이 되지만 클로저는 이러한 환경 자체를 기억!
예제
02 - Javascript 클로저
function a() {
var x = 1;
function b() {
console.log(x);
}
return b;
}
var c = a();
c();
console.dir(c);
외부에서, x변수 값을 바꿀수 없다.
function a() {
var x = 1;
return {
_get : b,
_set : function(setX) {
x = setX;
}
}
function b() {
console.log(x);
}
}
var c = a();
c._set(100);
c._get();
a함수 내부에서 접근
권한을 부여
* 스코프는 정의될 대 결정된다.

6. 실행 컨텍스트(Execution Context)
정의
- 실행 가능한 코드를 형상화 하고, 구분하는 추상적인개념
- 실행 가능한 JS 코드 블록이 실행되는 환경
- 실행 가능한 코드는 함수, Eval(), 전역 코드
03 - Javascript 실행 컨텍스트
Global 실행 컨텍스트는 제일 먼저 생성된 실행 컨텍스트를 의미.
JS를 처음 실행하면, 글로벌 실행 컨텍스트가 생성이 된다.
execution context Stack 은 실행 컨텍스트를 관리하며, 최상위에
있는 context가 실행중인 컨텍스트다.

7. 실행 컨텍스트(Execution Context)
- 실행 컨텍스트는 call stack 과 유사
- JS가 처음 실행을 하면, 글로벌 컨텍스트 또는 전역 컨텍스트가 생성
- 이후로는, 함수 또는 eval() 실행마다, 해당 실행 컨텍스트가 생성
- 실행 컨텍스트 생성 시, 변수객체(활성객체)를 생성하여 실행에 필요한 정보를 담는다
03 - Javascript 실행 컨텍스트
실행 컨텍스트 흐름
1. 초기화 과정(creation)
Variable Object(변수객체 : VO) 생성
- 변수 / 함수 / 매개변수, 인수, arguments 객체 정보를 담는다.
- 함수 표현식은 제외.
- 변수 undifined로 셋팅. (실제 값은 실행 시, 할당이 된다)
- Scope Chain 정보 생성
- this 바인딩 (글로벌 컨텍스트 에서는 글로벌 객체가 바인딩)
- 호이스팅
2. 실행 과정(Execution)
코드 실행 및, 변수에 값을 할당

8. 실행 컨텍스트(Execution Context) – 인프런 강의 참조
03 - Javascript 실행 컨텍스트