실행 컨텍스트(Excution Context)

Concept By 실행 컨텍스트 (Concept By Excution Context)

 

실행 컨텍스트

• 코드의 실제 진행 상황을 추적하는데 필요한 정보를 모아둔 구조

 

자바스크립트가 로드 되고 엔진이 이를 처리하면서 실행 컨텍스트를 만듭니다. 실행 컨텍스트는 어떤 코드를 실행하고 있고 이 컨텍스트에는 어떤 변수가 있는지에 대한 정보를 가지고 있습니다.

 

예시

function appedString(str1, str2) { //(1)
	let result = `${str1}${str2}`;
	return result;
}

let appended = appendString("류호진","붙임"); //(2)

전역 실행 컨텍스트	전역 메모리
	appendString :  fn  (1) appended : (2)

먼저 전역에 선언된 함수나 변수를 전역 실행 컨텍스트의 메모리에 등록합니다. 1번 라인의 appendString함수를 전역메모리에 등록해 줍니다. 그 후, appendString의 결과값이 담길 appended 변수를 만들어 메모리에 등록합니다.

 

function appedString(str1, str2) {
	let result = `${str1}${str2}`; //(2)
	return result;
}

let appended = appendString("류호진","붙임"); //(1)

전역 실행 컨텍스트		전역 메모리
appendString("류호진","붙임") (1) (2)		appendString :  fn   appended :
함수 실행 컨텍스트	지역 메모리
	str1 : 류호진 str2 : 붙임 result :

함수명 뒤에 ()를 붙여 함수를 호출해 줍니다. 위의 예시에서는 appendString("류호진","붙임")을 호출해 줍니다. 그 후 str1 매개변수에 "류호진" str2 매개변수에 "붙임"을 할당한 후 result 변수를 지역메모리에 생성합니다.

 

function appedString(str1, str2) {
	let result = `${str1}${str2}`; //(1)(2)
	return result; //(3)
}

let appended = appendString("류호진","붙임");

전역 실행 컨텍스트		전역 메모리
appendString("류호진","붙임")		appendString :  fn   appended : "류호진붙임" (3)
함수 실행 컨텍스트	지역 메모리
result = `str1str2` (1)	str1 : 류호진 str2 : 붙임 result : "류호진붙임" (2)

str1,str2 문자열 합치기 연산을 실행하여 result에 할당하고 해당 result를 반환하여 전역메모리의 appended에 할당합니다.

function appedString(str1, str2) {
	let result = `${str1}${str2}`;
	return result;
}

let appended = appendString("류호진","붙임"); // (1)

전역 실행 컨텍스트	전역 메모리
(1)	appendString :  fn  appended : "류호진붙임"

이렇게 appendString 함수가 종료되고 나면 함수의 실행컨텍스트와 내부 정보들은 모두 사라지게 됩니다.

 

정리 하자면, 함수 뒤에 ()를 붙여 서브루틴이 호출되면 실행 컨텍스트가 만들어지고 해당 함수가 끝나면 실행컨텍스트가 사라지게 됩니다. 실행 컨텍스트엔 함수 실행에 필요한 정보가 모여 있다고 볼 수 있습니다.

 

좀 더 알고가기 => 자바스크립트의 함수 객체

• 서브 루틴으로 수행될 수 있는 객체
• 동작을 나타내는 실행 코드가 있으면 .(dot)을 이용해 일반 객체와 동일하게 취급이 가능합니다.
  ex) ryuhojin.job = 'front'

 

DeepDive By 실행 컨텍스트(DeepDive By Excution Context)

 

실행 컨텍스트

• 실행할 코드에 제공할 환경을 모아놓은 객체로써, 동일한 스코프에 있는 코드들을 실행할 때 필요한 환경정보를 모아 컨텍스트를 구축하고 이를 스택(콜 스택)에 쌓아서 실행순서를 보장합니다.

 

실행 컨텍스트 구성요소

• 변수 객체(arguments, variable)
• scope chain
• this

 

실행 컨텍스트의 종류

• 전역 컨텍스트 : 특정 함수가 실행되지 않는 한 전역 컨텍스트에서 실행됩니다.
• 함수 컨텍스트 : 함수가 실행될 때 마다 실행 컨텍스트가 생성되고 함수가 동작을 다하면 콜스택에서 삭제됩니다.
• Eval함수 실행 컨텍스트 : eval 함수도 자신만의 실행 컨텍스트를 가집니다.
  (eval 함수: 문자열을 코드로 인식하게 하는 함수 eval('2+2') => 4, eval is evil이라는 말도 있으니 지양하는 것이 좋음. 쓸 필요성을 크게 못느끼면 쓰지 않는게 좋음

 

예시

CODE

var work = "프로그래밍"
function doing(value){
	console.log(`${value} ${work} 중 입니다`);
}
function whatareyoudoing(){
	var work = "문서작업";
	doing("나는");
}

whatareyoudoing();

이 소스코드의 결과 값은 모두 다 아시겠지만 나는 프로그래밍 입니다. 이러한 결과가 어떻게 나오는지 좀 더 명확하게 보기 위해서 해당 코드의 실행컨텍스트들을 보겠습니다.

 

STRUCTURE

1) 전역 컨텍스트

{ //전역 컨텍스트
	"변수 객체" : {
		arguments : null,
		variable : ["work","doing","whatareyoudoing"]
	},
	scopeChain : ["전역 변수 객체"],
	this : window
}

2) whatareyoudoing 함수 컨텍스트

{ //whatareyoudoing 함수 컨텍스트
	"변수 객체" : {
		arguments : null,
		variable : ["work"]
	},
	scopeChain : ["whatareyoudoing 변수 객체","전역 변수 객체"],
	this : window
}

3) doing 함수 컨텍스트

{ //doing 함수 컨텍스트
	"변수 객체" : {
		arguments : [{value : "나는"}],
		variable : null
	},
	scopeChain : ["doing 변수 객체","전역 변수 객체"],
	this : window
}

사용자가 whatareyoudoing을 호출하였을 때, 내부의 doing함수 실행컨텍스트에서 doing의 스코프체인에 의해서 whatareyoudoing에서 work를 가져오지 않고 전역변수 객체 내부에서 가져오기 때문에 결과가 "나는 프로그래밍 중 입니다." 라고 나오는 것입니다. 이렇게 보니깐 정확히 실행 컨텍스트가 어떤 역할을 하고 어떤 구조로 되어 있는지 감이 잡히시나요?

 

오늘은 자바스크립트 코어의 첫 장 실행 컨텍스트에 대해서 알아 보았습니다. 다음 챕터에서는 실행컨텍스트의 연계 과정인 콜 스택에 대해서 알아 보겠습니다. 글에 대한 피드백 감사합니다.

 

참고 : NHN FRONT-END CONFERENCE