EP-01 | JavaScript 작동 방식 🔥& Execution Context

Source: Dev.to

실행 컨텍스트란? (쉽게 말하면)

실행 컨텍스트를 자바스크립스가 일하는 교실이라고 생각해 보세요.

이 교실에서:

• 화이트보드 – 모든 중요한 메모(변수와 함수)가 적히는 곳 → 메모리 컴포넌트
• 선생님 – 지시를 하나씩 읽고 실행하는 사람 → 실행 스레드

1. 메모리 컴포넌트 (변수 환경)

쉽게 말하면
코드를 실행하기 전에 자바스크립스가 데이터를 저장하는 장소.

실생활 예시
교실에 들어가서 선생님이 칠판에 이름을 적는다고 상상해 보세요:

studentName = "Ali"
age = 10
greet = function(){...}

화이트보드가 바로 메모리 컴포넌트이며, 수업이 시작되기 전에 데이터를 저장합니다.

2. 코드 컴포넌트 (실행 스레드)

쉽게 말하면
자바스크립스가 코드를 한 줄씩 실행하는 부분, 마치 선생님이 지시를 차례대로 읽는 것과 같습니다.

실생활 예시
화이트보드(메모리)에 적힌 뒤, 선생님이 노트를 읽기 시작합니다:

1. 학생들에게 인사하기
2. 수업 내용 설명하기
3. 질문하기
4. 답변 기다리기
5. 다음 지시로 이동하기

선생님은 두 줄을 동시에 읽을 수 없습니다. 이것이 실행 스레드입니다.

3. 자바스크립트는 동기식이며 단일 스레드

쉽게 말하면
자바스크립스는 한 번에 하나의 작업만 순서대로 수행합니다.

실생활 예시
학생이 책을 큰 소리로 읽는다고 생각해 보세요. 한 문장을 끝내야 다음 문장을 시작할 수 있고, 두 문장을 동시에 읽을 수 없습니다. 이것이 자바스크립스가 작동하는 방식—단계별, 한 번에 하나씩.

전체 실생활 예시 (전체 흐름)

var name = "Sara";

function sayHi() {
  console.log("Hi " + name);
}

sayHi();

실생활 분석

• 메모리 컴포넌트 (화이트보드)
  • name: "Sara"
  • sayHi: function
• 실행 스레드 (선생님의 읽기 단계)
  1. sayHi() 로 이동
  2. 실행 → "Hi Sara" 출력

자바스크립스는 다음 줄로 넘어가기 전에 이 과정을 모두 마칩니다.