[Modern Javascript deep dive] 식별자

식별자

 변수 이름을 식별자 라고 하는데, 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다.

 

변수, 함수, 클래스 등의 이름과 같은 식별자는 네이밍규칙을 준수해야 하며, 선언에 의해 자바스크립트 엔진에 식별자의 존재를 알린다.

 

- ES5 vs ES6

var 키워드는 여러 단점이 있는데, 가장 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다.

의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다

 

1. 블록 레벨 스코프 (Block Level Scope [const let] )

let foo = "I'm foo";
if(true) {
    let bar = "I'm bar";
    console.log(foo);   //I'm foo
    console.log(bar);   //I'm bar
}

console.log(foo);   //I'm foo
console.log(bar);   //Uncaught ReferenceError: bar is not defined.

블록은 0개 이상의 구문(statement)을 묶기위해 사용하고, 중괄호{}로 경계를 구분합니다.
블록 스코프 변수는 함수 밖에서 선언하면 함수 스코프 변수처럼 전역 접근할 수 있습니다. 블록 안에서 선언하면 자신을 정의한 블록과 하위 블록에서만 접근이 가능합니다.

 

2. 함수 레벨 스코프 (Function level scope [var])

var a = "I'm a";
function foo() {
    var b = "I'm b";
    console.log(a);        //I'm a - 전역변수. 출력가능.
    if(true) {
        var c = "I'm c";
        console.log(b);    //I'm b - 해당 함수 내 선언한 변수. 출력 가능.
    }
    console.log(c);        //I'm c - 해당 함수 내 선언한 변수. 출력 가능.
}
foo();
function bar() {
    var d = "I'm d";
    console.log(d);    //I'm d - 해당 함수 내 선언한 변수. 출력 가능.
    console.log(a);    //전역변수. 출력가능.
    console.log(b);    //해당 함수 내 선언한 변수가 아님. Error
    console.log(c);    //해당 함수 내 선언한 변수가 아님. Error
}
bar();

제일 먼저 있었던 var 키워드는 함수 스코프 변수를 선언할 때 사용합니다.
함수 밖에서 선언한 함수 스코프 변수는 전역 범위를 가지고, 함수 안에서 사용하면 함수 밖을 제외한 내부 어디서든 접근이 가능합니다. 이러한 함수 스코프 레벨 변수는 메모리 누수, 디버깅이 어렵고 가독성이 떨어진다는 문제점이 있습니다.

 

var scope;

위 변수 선언문은 다음과 같이 변수 이름을 등록 하고 값을 저장한 메모리 공간을 확보한다.

확보된 메모리 공간에는 자바스크립트 엔진에 의해 undefined라는 값이 암묵적으로 할당되어 초기화 된다.

  *undefined 는 자바스크립트에서 제공하는 원시 타입의 값이다.

 

자바스크립트 엔진은 변수 선언을 다음과 같은 2단계에 거쳐 수행하는데,

 1. 선언 단계 : 변수 이름을 등록해서 자바스크립트 엔진에 변수의 존재를 알림.

 2. 초기화 단계 : 값을 저장하기 위해 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화 한다.

 

var 키워드는 선언 단계와 초기화 단계가 동시에 진행된다, 변수 이름을 score로 등록하고 암묵적으로 undefined를 할당해 초기화 한다.

변수를 사용하려면 반드시 선언이 필요하며, 선언하지 않은 식별자에 접근하면 ReferenceError(참조 에러)가 발생한다.