컨플릭트를두려워하지말자

실행 문맥(excution context)이란 코드가 실행되는 동안 필요한 정보를 담고 있는 환경을 말한다. 

함수 선언-실행 과정에서 실행 문맥이 어떻게 생성되는지를 연관지어 생각해보면 이해하기 더 쉽다. 

이것으로 예시를 들면 

console.log(square(5));

function square(n) {
  return n * n;
}

1.  함수 선언 : 함수는 실행되기 전 변수 환경에 저장(메모리 할당)된다.

(square가 메모리에 할당됨)

2. 함수 호출 : 함수가 호출되는 이때 새로운 실행 문맥이 생성된다. (call stack에 저장) 또한 함수 내부의 지역변수와 매개변수가 변수 환경에 할당된다. 

(console.log로 호출하는 부분. 여기서는 호이스팅을 사용해 선언 전에 호출했다.)

함수 호출이 발생하면 새로운 실행 문맥이 생성되고,

이때 함수 내부에서 사용하는 변수와 매개변수가 변수 환경에 저장된다.

그다음 함수 내부의 코드가 실행되면서 렉시컬 환경을 기준으로 변수와 값을 검색하고 업데이트하는 과정을 거친다.

이 과정에서 함수 내부에서 필요한 변수는 현재 렉시컬 환경에서 찾고, 현재 환경에 없으면 상위 스코프로 올라가면서 값을 검색한다.

3. 함수 실행 종료 : 마지막으로, 함수 실행이 끝나면 생성되었던 실행 문맥이 스택에서 제거되고, 함수와 관련된 변수와 메모리도 해제된다.

즉, 함수 호출 과정에서는 실행 문맥이 생성되고, 코드 실행을 관리하며, 실행이 종료되면 사라지는 흐름이 반복된다.

~,~

console.log(square(5)); 

function square(n) {
  return n * n;
}

위 예제와 같이 함수를 선언전에 사용하는 것을 *호이스팅이라 하고, 이경우엔 에러가 발생하지 않는다.
그러나

console.log(square(5)); //에러 발생!

const square = (n) =>{
  return n * n ; 
}

이렇게 함수를 변수로 선언하여 사용하는 경우에는 변수만 선언되고, 함수내용은 초기화 되지 않기 때문에
선언 전에 호출하면 reference error가 발생한다.

만약 비동기 함수의 경우에는? 우선 콜스택에 들어간 다음(실행문맥생성) 작업을 위해 콜스택에서 제거되고 webapi로 보내진다. 작업이 끝나고 큐로 이동된 비동기 함수는 동기함수의 처리가 끝나면 다시 콜스택에 들어가고 다시 새로운 실행문맥이 생성된다. 그리고 실행이 끝나면 콜스택에서 제거된다.