Javascript: 코드 실행의 원리(힙, 스택)

출처: Udemy 자바스크립트 완벽 가이드

 

 

 

자바스크립트 코드의 실행

 

 

• 코드에 어떤 단계가 뒤따르고 이때 사용되는 원리가 무엇인지를 알아봄
• 코드를 실행하는 주체인 자바스크립트 엔진이며 메모리와 실행 단계에 대한 관리가 이루어짐
• 자바스크립트 엔진에는 힙과 스택이 포함되어 있음
• 자바스크립트는 단일 스레드
  • 한 번에 하나의 작업만 수행한다는 의미
  • 한 번에 하나의 함수만을 호출하고 다른 함수는 그 함수의 응답을 기다림(아래 스택 예시에서 확인)
  • 함수의 실행 순서를 보장하고 모든 함수가 어떤 함수와 관련되었는지를 알아볼 수 있게 해 줌

 

 

 

 

 

힙

 

• 장기 메모리
• 메모리 할당과 관련 있음
• 시스템 메모리 데이터를 저장함
• 브라우저가 하는 작업을 말함
• 힙을 관리하고 시스템 메모리에 대한 작업을 수행함
• Javascript 엔진 쪽을 자세히 살펴보면 브라우저가 바로 메모리 할당 작업인 힙을 수행함

 

 

 

 

 

스택

 

• 스택은 코드 실행 시 중요한 역할
• 데이터 또한 중요하지만 스택은 단기메모리 관련 작업
• 프로그램의 흐름을 관리함
• 주로 현재 실행되고 있는 함수를 관리하는 역할
• 새로운 함수를 실행할 때에 현재 실행되고 있는 함수 중 어떤 함수가 데이터를 반환하는지 관리

 

 

---

 

 

 

예시

 

 

functio ngetName() {
	return prompt('Your name: ', '');
}

function greet() {
	const userName = getName();
	console.log('Hello ' + userName);
}

greet();

 

 

• 함수를 정의하면 Javascript가 이를 등록하고 이때 힙에 저장되는데 이는 해당 함수가 일반적으로 긴 수명을 가지며 애플리케이션에 대한 작업으로 오래도록 지속되기 때문 그래서 이 함수를 호출해 주는 것
• 함수 자체는 힙에 저장됨. 브라우저가 이와 같은 함수를 저장하고, 함수가 실행될 때 코드가 실행되는 것이라고 할 수 있음.
• 이제 스크립트가 실행되면 스택이 활성화됨. 브라우저가 스택으로 푸시하는 작업이 이루어짐.
• 스택은 단기 메모리, 힙은 장기 메모리

 

 

 

 

 

• 스택은 스크립트 파일 자체인 익명 코드 실행에서부터 시작됨
• 파일 자체는 이름이 있겠지만 이름을 따로 지정해 놓지 않은 이상 거대한 함수라고 생각하면 됨
• 이 파일에 있는 코드 자체가 이름 없는 함수이기 때문에 스택에 대한 익명 함수 실행이 바로 전체적인 스크립트의 실행이 됨
• 이와 같은 스크립트의 실행은 Javascript가 전체 스크립트를 평가한 뒤에 이루어짐(모든 함수의 정의를 확인한 뒤)

---

• 스크립트를 실행하면 전체 스크립트가 실행되는데 greet 줄이 실행된다는 뜻. -> greet 함수를 호출
• 자바스크립트는 이 greet 함수 실행을 스택으로 이동시킴
• 이때 스택은 단기 데이터 구조라고 볼 수 있는데 함수 실행 내역이 저장되는 곳으로, 브라우저나 JavaScript 엔진이 현재 수행하는 작업을 기록함
• 이때 스택은 여기에 새로운 함수 호출이나 새로운 단기 데이터를 푸시해서 채워지며 더 이상 필요치 않을 때에 해당 항목을 방출함
• 따라서 전체 스크립트의 실행이 시작되고 나면 먼저 익명 함수 실행이 있고 다음으로는 greet 함수가 푸시되어 스택에서 그 윗자리를 차지하는데 스택에서는 맨 위에 있는 항목이 항상 현재 실행 중인 항목이 됨

 

---

 

• 다시 greet 함수를 한번 살펴보면 이 함수에 대해 변수를 생성했었고 이 변수는 다른 함수인 getName을 호출하도록 생성됨.
• JavaScript 엔진이 getName 함수를 스택에 푸시하며 이를 통해서 현재 실행되고 있는 함수가 익명 함수에서 greet 함수를 거쳐 getName 함수까지 전체 스크립트가 실행되었다는 것을 알 수 있음.
• 이제 getName 함수가 실행되며 prompt에 대한 값이 반환됨. 

---

 

 

 

 

• prompt 함수라고는 하지만 사용자가 작성한 것이 아니라 브라우저가 제공한 함수로 JavaScript를 통해서 액세스 가능함.
• 함수 호출에는 해당하므로 이를 통해 스택에 이 작업이 푸시됨.

---

 

 

 

• prompt 함수가 대화 상자를 열고 값을 입력한 후 OK를 누르거나 CANCEL을 누르면 해당 함수는 그 값을 getName에 반환함.
• 함수가 반환을 하거나 실행을 마쳤을 때는 스택에서 방출됨.(스택에서 삭제)
• 해당 함수 정의가 장기 스택에 해당하는 힙에서까지 제거된다는 것은 아님.
• 현재 실행된 사항에 대해서만 삭제되며 이에 대해 할당했던 리소스와 함수 실행을 위해 관리되어야 했던 데이터까지만 제거됨.

---

 

 

• 해당 데이터 즉 이 실행 컨텍스트(Context)가 스택에서 삭제되고이제 getName은 prompt 함수 호출로부터 나온 결과를 가지고 오는데 해당 함수 또한 반환하게 되므로 getName이 해당 데이터를 greet 함수로 반환하게 됨.
• 결과적으로 getName 또한 스택에서 사라지게 됨.
• 스택에선 방출되는 작업은 JavaScript 엔진이 수행하며 이렇게 getName이 방출되고 나면 greet 함수가 계속 실행됨.

---

 

 

 

• 마지막 줄의 실행이 끝나면 greet 또한 스택에서 방출되고 이제 스택에 남는 것은 메인 스크립트뿐임.
• 이 스크립트에서는 greet 실행도 끝났고 더 이상 남은 단계가 없기 때문에 전체 스크립트에 대한 실행이 이렇게 끝남.

 

 

 

 

참고: Udemy 자바스크립트 완벽 가이드