[JavaScript] JavaScript의 기본 원리

Frontend Master의 'JavaScript: The Hard Parts'를 보고 정리한 글의 일부입니다.

Principles of JavaScript

Global Execution Context ( 전역 실행 환경 )

const num = 3;
function multiplyBy2 (inputNumber) {
    const result = inputNumber*2;
    return result;
}
const name = "Will"

해당 코드를 실행하면 어떤 일이 일어나는가?

1. num이라는 변수 3을 저장한다.
2. multiplyBy2라는 함수를 생성한다. ( 함수 안으로는 절대 들어가지 않는다 호출하지 않는 이상 )
3. name이라는 변수에 "Will"을 저장한다.

JavaScript의 Thread

• Single thread - 한 번에 한 가지 일만 가능하다.
• Synchronous execution - 동기적 실행을 한다.

Local Execution Context

Running / Calling / Invoking a function

const num = 3;
function multiplyBy2 (inputNumber) {
    const result = inputNumber*2;
    return result;
}
const output = multiplyBy2(4);
const mewOutput = multiplyBy2(10);

JavaScript에서 함수를 실행할 때에는 parenthesis(괄호)를 사용하면 된다.

// 함수의 실행
const output = mulitplyBy2(4);

Local execution context가 생성된다.

Local execution context

• Local Memory와 Local Thread로 이루어진다.
• Processs
  1. parameter로 받은 값을 inputNumber라는 변수에 저장한다.
  2. result라는 변수에 inputNumber*2를 저장한다.
  3. result의 값을 반환한다.
  4. 절차가 끝나면 Local execution context는 사라진다.

cf) output의 값은 multiplyBy2(4)의 반환값으로 할당되기 전까지 undefined이다.

Call Stack

현재 진행해야하는 Global execution context와 Local execution context의 절차 및 과정을 알 수 있게 하는 자료구조이다.

Stack이라는 이름 그대로 우리가 흔히 아는 Stack 자료구조의 특징인 LIFO(Last In First Out)의 특징을 띄게 된다.

Call Stack은 JavaScript 엔진에서 돌아가는 Runtime의 일부이다.

위의 코드의 Call Stack의 변화는 다음과 같다.

1. global execution context가 push된다.
2. multiplyBy2(4)라는 local execution context가 push된다.
3. 해당 local execution context가 끝나고 Call Stack에서 pop한다.
4. multiplyBy2(10)라는 local execution context가 push된다.
5. 해당 local execution context가 끝나고 Call Stack에서 pop한다.
6. 마지막으로, global execution context를 끝내고 Call Stack을 비우면서 절차를 마무리한다.