티스토리 뷰

Frontend/Javascript

# 실행 컨텍스트

zoeful 2020. 10. 27. 11:39

자바스크립트 - Javascript

 

저희의 두번째 스터디 내용은 실행 컨텍스트 였어요!

이름만 듣고는 뭔지 전혀 감도 안잡혔는데 이번 스터디를 통해서 실행 컨텍스트에 관한 다양한 개념들을 알게 되었답니다 : )

개발자스럽게 말 할 수 있는 단어가 또 하나 늘었네요 😎😎

 


 

실행 컨텍스트란?

실행 컨텍스트 : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체

 

실행 컨텍스트는 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다.

자바스크립트는 어떤 실행 컨텍스트가 활성화 되는 시점선언된 변수를 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고(VariableEnvironment), this 값을 설정하는 등의 동작을 수행함으로써 다른 언어에서는 발견 할 수 없는 특이한 현상들이 발생합니다.

이러한 실행 컨텍스트를 이해하기 위해선 스택(stack)과 큐(queue)의 개념을 먼저 파악해야겠습니다.

 

스택 : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조

 

스택 - stack

 

비어있는 스택에 순서대로 데이터 a, b, c, d를 저장하면 꺼내올때는 d, c, b, a의 순으로 꺼내지는 데이터 구조를 말합니다.

데이터를 100개만 저장 할 수 있는 스택에 100개 이상의 데이터를 넣으려고 하면 에러를 던지게 됩니다.

 

콜스택 초과 시 발생하는 에러

 

: 한쪽은 입력만, 다른 한쪽은 출력만 담당하는 파이프 같은 데이터 구조

큐 - queue

 

비어있는 큐에 순서대로 데이터 a, b, c, d를 입력하면 꺼내올때 역시 a, b, c, d의 순으로 출력되는 데이터 구조를 말합니다.

 

실행 컨텍스트가 활성화 되면 컴퓨터는 전체 코드의 환경과 순서를 보장하며 실핼 컨텍스트를 수행하게 됩니다.

 

 

  1. 필요한 환경정보들을 모아 컨텍스트를 구성 
  2. 구성한 컨텍스트를 콜 스택(call stack)에 순서대로 쌓아 올림
  3. 가장 위에 쌓여 있는 컨텍스트와 관련있는 코드부터 실행

 

실행 컨텍스트를 구성 할 수 있는 방법에는 전역공간, eval () 함수, 함수, 블럭 {} 등이 있습니다.

자동으로 생성되는 전역공간과 왠만하면 사용을 지양하는 eval () 함수를 제외하면 일반적으로 우리가 흔히 실행 컨텍스트를 구성하는 방법은 함수를 실행하는것 뿐입니다.

/* 실행 컨텍스트와 콜 스택 */


var a = 1;

function outer(){

	function inner(){
    
    	console.log(a); // undefined
        
        var a = 3;
    
    }
    
    inner();
    console.log(a); // 1

}

outer();

console.log(a); // 1

'Frontend > Javascript' 카테고리의 다른 글

# 데이터 타입  (0) 2020.10.21
# TypeScript를 시작하며  (0) 2020.09.29
# Javascript 클로저  (2) 2020.08.30
# export / import  (0) 2019.10.31
# express 라우트 메소드 .get()과 .post()  (0) 2019.09.16
댓글
공지사항