실행컨택스트, 콜스택, 스코프, 클로저 정리
흐름이야
📌 실행 컨텍스트(Execution Context)
- 코드의 실제 진행 상황을 추적하는데 필요한 정보들을 모아둔 구조이다.
코드가 실행 되고 자스엔진은 실행 컨텍스트를 생성한다.
어떤코드를 실행하고 있는지 컨텍스트엔 어떤 변수들이 있는지 알 수 있는 정보들이 있다.
함수가 ()로 호출되면 실행 컨텍스트가 새롭게 만들어진다.
함수가 종료되면 실행 컨텍스트는 사라진다.
예제로 살펴보기
function sum(x,y){ //1 let result = x+b;//3 return result; //4 } let num = sum(2,3);//2
📌 콜 스택 (Call stack)
- 현재 실행되고 있는 실행 컨텍스트를 추적하기 위한 구조체이다.
- 자바엔진은 콜스택을 통해 현재 실행중인 실행 컨텍스트가 어떤것인지 알수 있다.
- 콜 스택의 바닥엔 전역 컨텍스트가 존재한다.
- 함수가 호출될 때 호출된 함수의 실행 컨텍스트가push, 종료되면 pop된다.
📌 스코프 (Scope)
- 현재 접근할 수 있는 변수들의 범위(그럼 스코프 = 메모리? 스코프체인 = 메모리참조주소?)
- 현재 실행중인 실행컨텍스트에서 변수를 찾을 수 없으면, 이전 실행 컨텍스트에서 변수를 찾고 이를
- 스코프 체인 이라고 한다.
var 바나나개수 = 1;
function 철수집() {
var 사과개수 = 1;
function 개수카운터(){
var 총개수 = 바나나개수 + 사과개수
}
}
📌 클로저 (Closure)
- 함수가 함수를 반환할 때, 반환되는 함수는 자신을 둘러싼 메모리 환경을 가지고 반환된다.
- 클로저는 변수를 은닉할때 사용한다. 즉, 변수를 직접접근해서 변경하지 못하도록 할때 클로저라는걸 사용하는거다.
//상황 = num이라는 변수는 무조건 numPlus()로만 변경이가능하고 아래처럼 변수에 직접접근해서 변수를
// 바꾸지 못하도록 할려고 한다. =>클로저를 사용해야한다.
let num =0;
function numPlus(){
num = num+1;
}
console.log(num); //0
numPlus();
console.log(num); //1
num =100;
numPlus();
console.log(num); //101- 상황 : num이라는 변수는 무조건 numPlus()로만 변경이가능하고 아래처럼 변수에 직접접근해서 변수를
바꾸지 못하도록 할려고 한다. 하지만 전역 변수이기 때문에 접근이 가능하기하다. 그래서 num이라는 변수를 접근 할 수 없도록 해야 하는데 이때 클로저를 사용하는 것이다.
클로저 구현
function closure() {
let num =0;
function numPlus(){
num = num+1;
}
function consoleNum(){
console.log(num);
}
return {
numPlus,
consoleNum,
}
}
const numPlusClosure = closure()
console.log(numPlusClosure) //{ numPlus: [Function: numPlus] }
numPlusClosure.numPlus(); //1증가
// num =100; closure()의 지역변수이기때문에 밖에서 참조 불가
//numPlus(); 그대신 numPluse() 도 closure()의 지역변수이기때문에 실행 불가
// 이때 numPlus()를 사용하기위해 함수를 리턴해준다
//console.log(num) //불가
//변수 num을 출력해주는 함수를 만들어야한다.
numPlusClosure.consoleNum(); // 1이렇게 클로저를 구현함으로써 변수 num을 바꿀수 있는 방법은 numPlus() 함수를 사용하는것 뿐이다.
이런식으로 변수를 은닉(직접 접근하지못하게)하고싶을때 클로저를 사용한다.
다른기능을 구현하고 싶을때 함수를 구현하고 return하는 방식으로 기능을 구현할 수 있다.