2-자바스크립트-코드-실행-과정-및-용어정리

---

목차

1-자바스크립트 코드 실행 과정

평가(Evaluation)→실행(Execution)→값→렌더링

console.log(name);  
var name = "John";

function greet() {
    return "Hello " + name;
}

let message = greet();

1-1-[평가 (Evaluation)]

• 변수, 함수(호이스팅) 등록 → 자바스크립트 엔진이 실행 전에 코드를 쭉 훑어보고,변수와 함수 정보를 메모리에 미리 등록합니다.

👉 var는 undefined로 초기화, let은 아직 초기화 안 됨 (TDZ: 초기화 전 영역에 있음) 👉 greet는 전체 함수 코드까지 메모리에 등록

---

1-2-[실행 (Execution)]

• 이제 한 줄씩 실제로 실행합니다. →실제 코드 실행 (함수를 호출하며 값을 계산합니다) 1️⃣ console.log(name) 실행 → name은 평가 단계에서 undefined로 등록되어 있으므로, undefined 출력 2️⃣ var name = "John" 실행 → name에 "John" 저장 3️⃣ function greet()는 이미 평가 단계에서 등록 끝남 (따로 실행 안 함) 4️⃣ let message = greet() 실행 → greet() 호출하고, 결과를 message에 저장 3-실행컨텍스트와 스코프

---

1-3- [값 생성(Value Creation)] 연산 결과, 리턴 값 생성

• greet() 함수 실행 중에서:
  • "Hello " + name 연산 수행
  • 현재 name은 "John"이므로, "Hello John" 생성
  • 이 값이 message에 저장됨 👉 message에 "Hello John"이라는 값 생성

---

1-4- [런타임 (Runtime)] 실행 중 전체 시간과 환경

• 위 코드가 실행되는 전체 시간이 런타임
• 이 시간 동안 메모리에는 아래와 같은 값이 올라가 있음

• 이 상태와 시간 전체를 런타임이라고 함

---

1-5- 최종 정리 흐름도

평가 단계에서 변수와 함수를 미리 등록하고, 실행 단계에서 실제 코드가 동작하며, 값이 생성되고, 전체 실행 시간이 런타임이 된다.

---

2-주요용어

2-1-선언 (Declaration)

• 변수, 함수, 클래스 등 이름을 먼저 등록하는 작업입니다.
• "이런 이름을 사용할 거야"라고 알려주는 단계입니다.
• 실제 값을 저장하거나 동작을 만들지는 않고, 이름만 등록하는 상태입니다.
• ex) 변수 선언, 함수 선언

---

2-2- 생성 (Creation)

• 실제로 메모리에 공간을 확보하여, 데이터를 저장할 준비를 하는 과정입니다.
• 프로그램이 실행되는 시점에서, 메모리에 자리를 잡고 데이터를 넣거나 구조를 만드는 작업을 말합니다.
• 즉, 선언된 이름을 실제 데이터와 연결해주는 과정입니다.

---

2-3-할당 (Assignment)

• 이미 선언된 변수에 값을 저장하는 작업입니다.
• 값이 저장될 때마다 할당이 일어난다고 표현합니다.
• "이 이름에 이 값을 넣을 거야"라고 내용을 채우는 단계입니다.
• 선언과 동시에 할당할 수도 있고, 나중에 할당할 수도 있습니다.

---

2-4- 정의 (Definition)

• 보통 함수나 클래스 같은 큰 단위에서 많이 쓰는 표현입니다.
• 단순히 이름만 등록하는 선언과 달리, 어떤 기능을 갖는지 구체적인 내용까지 작성하는 것을 뜻합니다.
• 즉, 선언 + 구체적인 동작 내용 작성을 합친 개념입니다.
• 함수 정의, 클래스 정의처럼 쓰입니다.

---

2-5-값 (Value)

• 값은 말 그대로 데이터 자체를 의미합니다.
• 사람이 눈으로 보고, 프로그램이 처리할 수 있는 실제 데이터입니다.
• 예를 들어, 숫자, 글자, 참/거짓, 객체, 배열 등 모든 데이터가 값입니다.
• 프로그램이 동작하면서 계산하거나 비교하고, 저장하는 대상이 값입니다.

---

2-6- 리터럴 (Literal)

• 리터럴은 값을 표현하는 방법입니다.
• 값을 직접 눈에 보이는 형태로 작성한 것을 말합니다.
• 프로그래밍 언어에서 특정 값을 나타내는 고정된 표기법입니다.
• 값을 생성하기 위해 미리 약속한 표기법

---

✔️ 요약

• 선언= 이름을 등록하는 작업
• 생성= 실제 메모리 공간을 확보하고, 데이터를 저장할 준비를 하는 과정
• 할당= 값을 저장하는 작업
• 정의= 이름 등록과 동작 내용 작성까지 모두 포함하는 작업(함수)
• **값 = **계산결과
• 리터럴 = 값을 생성하기 위해 미리 약속한 표기법