자바스크립트 변수, 함수 정의 및 사용

자바스크립트 변수

• ECMAScript에서 표준화를 진행하였다.

현재, 변수 선언은 ECMAScript6(2015)이후부터 이전에 var 하나의 방법으로만 선언할 수 있었던 변수를 let과 const로 선언할 수 있게 되었다.

• var : 재선언 가능 + 재할당 가능 + 함수레벨 스코프
  • 호이스팅 발생 with Initialization
• let : 재선언 불가 + 재할당 가능 + 블록레벨 스코프
  • 호이스팅 발생 without Initialization (Reference Error)
• const : 재선언 불가 + 재할당 불가 + 블록레벨 스코프
  • 호이스팅 발생 without Initialization (Reference Error)

스코프

• 변수에 대한 접근 영역을 의미한다.
• 함수 스코프와 블록스코프로 나눌 수 있다.

함수 스코프

함수가 생성 시 스코프 영역이 생겨난다.

function function_scope() {
  var i = 100
  for (var i = 0; i < 5; i++) {
    console.log(i)
  }
  return i
}
const returned = function_scope()
console.log('result : ', returned)

0
1
2
3
4
'result : ' 5

블록 스코프

블록 생성 시 스코프 영역이 생겨난다.

function block_scope() {
  let i = 100
  for (let i = 0; i < 5; i++) {
    console.log(i)
  }
  return i
}

const returned = block_scope()
console.log('result : ', returned)

0
1
2
3
4
'result : ' 100

---

자바스크립트의 엔진 수행 방식

• 자바스크립트의 엔진 수행 방식 즉 함수 실행 원리가 무엇인지 보자면
• 자바스크립트 엔진은 자바스크립트 파일을 실행하는 것이 아닌 함수를 실행하는 것이고 파일은 main 함수인 셈이다.
• 자바스크립트 엔진의 자바스크립트 파일 구동 방식은 자바스크립트 함수 구동 방식과 동일하다.
  (자바스크립트 파일 구동 방식 = 자바스크립트 함수 구동 방식)
• 이에 자바스크립트 엔진의 자바스크립트 함수 구동 방식에 대해 아래 간단히 2개의 Phase 로 나누어 진행된다.
  - Creation Phase : 실행에 앞서 어떤 변수와 함수가 정의되어 있는지 분석하는 역할을 한다.
  - Execution Phase : 변수에 값을 할당하고 함수를 실행하는 역할을 한다.

자바스크립트 엔진 구성 : Stack + Heap

1. 실행 : 싱글 스레드
2. 메모리 : Stack + Heap 두 개만 기억
   • (Call) Stack - 함수 실행 순서대로 적재 및 수행을 진행한다.
     • 간단하게, 함수 실행 및 순서는 Stack
   • Heap - 선언 및 할당된 변수 및 함수를 저장한다.
     • 간단하게, 여러 변수 및 함수를 담는 바구니는 Heap

자바스크립트 엔진 내 함수 동작원리 : Stack(실행 컨텍스트) + Heap(렉시컬 환경)**

자바스크립트 엔진은 Stack + Heap 두개만 기억 = 자바스크립트 함수 동작 원리 이해도 마찬가지로 두개만 기억

• 함수 실행을 위한 메모리 영역 = 실행 컨텍스트 + 렉시컬 환경
  • Stack : 실행 컨텍스트 = 함수 실행 환경
  • Heap : 렉시컬 환경 (Lexical Environment) = 변수/함수 저장소

실행 컨텍스트(Execution Context)

프로그램에 메모리와 CPU 자원을 할당한 뒤 구동하면 프로세스라고 한다.

• 모든 함수의 구동은 그 함수 구동을 위한 메모리 영역을 확보하는것에서부터 시작한다.
• 이때 자바스크립트에서 함수 구동을 위한 메모리 영역을 실행 컨텍스트 라고 부른다.

Creation(Pre-parsing) Phase : 함수(파일) 분석하며 메모리 내 변수 함수 적재

: 함수(파일) 분석하며 메모리(실행 컨텍스트, 렉시컬 환경) 내 변수와 함수를 적재한다.

• 변수 선언 & 함수 선언 = Declaration
  • 변수 선언 + Hoisting 호이스팅 : 변수 할당 전에 변수를 선언하기에 변수를 어디에 선언하든 선선언 된다.
  • 함수 선언 + Lexical Scope 박제 : 함수에서 변수 참조 시 함수가 선언된 시점(Lexing)의 변수를 참조한다.

Execution Phase : 함수 실행을 위한 메모리 영역 확보 및 실행

: 함수 실행을 위해 먼저 메모리(실행 컨텍스트, 렉시컬 환경) 확보 후 실행한다.

• 변수 할당 & 함수 실행
  • 변수 할당 + Scope Chain : 변수 할당 시 앞선 함수 호출지엔 선언이 없을까? 호출지를 찾아나선다.
    • Scope Chain 시 어디에도 없으면 Global (웹 브라우저에서는 Window) 내 선언 후 할당한다.
    • let 은 선언과 동시에 초기화되지 않기에, 호이스팅이 발생해도 할당 전에 초기화 안되어있어 오류가 발생한다.
  • 함수 실행 : 함수 실행 시 함수 선언지로부터 연결된 메모리 영역을 확보 후 그 안에서 함수를 실행한다.

---

Lexical Scope + Scope Chain + Hoisting

• Lexical(Static) Scope : 함수 호출 시점에서의 스코프가 아닌 함수 선언 시점에서의 스코프이다. = 박제
• Scope Chain : Execution Phase 시 변수 선언이 안되어있을때, 호출 순서로 이전 실행 컨텍스트에서 검색을 진행한다.

 var name = 'zero';
function log() {
  console.log(name);
}

function wrapper() {
  name = 'nero'; // 이때 어떤 결과가 나올지 생각해보고, var name = 'nero'; 일땐 어떨까?
  log();
}
wrapper();

• Scope Chain : Execution Phase 시 변수 선언이 안 되어 있을 때, 호출 순서로 이전 실행 컨텍스트에서 검색한다.
  • Global Execution Context 까지 다 찾아보았음에도 없을 시, 그 자리에 var 선언 및 할당을 진행한다.