Javascript 변수 선언과 var, let, const 차이

JavaScript에서 주로 사용하던 변수 키워드는 var이다. 하지만 ES6 문법에서 다양한 변수 선언을 위해 let 과 const를

추가로 만들었다. 그 이유를 알아보자

 

const testNumber = 10002;
//변수명 : testNumber
// 해당 변수 값의 메모리 주소 : 123G123X
// 변수 값 : 10002

변수에 값을 할당하면 위와 같이 메모리에 저장된다. 자바스크립트는 Managed Language 언어이기 때문에 개발자가

직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 접근하지 않아도 변수 선언을

통해 안전하게 값을 가져올 수 있다.

 

여기서 변수명(testNumber)은 값을 기억하는게 아닌 메모리 주소값을 기억하고 있어 호출했을 경우 메모리 주소로 접근하여 저장된 값을 가져온다.

 

이처럼 변수에 값을 저장하는 것을 할당(assignment)이라 하며, 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 또한 변수명을 자바스크립트 엔진에게 알리는 것을 선언(Declaration)이라 한다.

 

변수 선언

변수의 선언은 ES6 문법에서 추가된 let, const를 포함하여 var, let, const 키워드를 사용하여 선언할 수 있다.

 

자바스크립트에서 변수 선언은 선언 -> 초기화 단계를 거쳐 수행된다.

 

    * 선언 단계 : 변수명을 등록하여 자바스크립트 엔진에게 변수의 존재를 알린다.

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

var obo;
console.log(obo);

var obo; 라는 var 키워드를 사용하여 변수를 선언하고 초기화까지 동시에 진행됐다. obo 변수에 암묵적으로 undefined를 할당해 초기화했으므로 console.log 에 undefined가 찍힌걸 볼 수 있다.

 

하지만 변수명을 선언하기전에 console.log를 찍어봐도 반환 값은 undefined로 나온다.

console.log(obo2);
var obo2;

이는 변수 선언이 런타임시 되는 것이 아니라 그 이전 단계에서 실행되기 때문이다. 자바스크립트 엔진은 싱글쓰레드이므로 코드를 한줄 씩 순차적으로 실행한다. 하지만 그 전에 변수 선언을 포함한 모든 선언문(변수 선언, 함수 선언 등)을

찾아내 먼저 실행한다.

변수 선언이 어디에 있든 상관없이 다른 코드보다 먼저 실행되는 특징을 호이스팅(hoisting) 이라한다.

변수 선언(var, let, const), 함수 선언(function, function*, class) 키워드를 사용하여 선언한 모든 식별자는 호이스팅 된다.

 

* 자바스크립트 엔진은 코드를 실행 전 변수 선언, 함수 선언 등 모든 선언문을 찾아내 실행하는 호이스팅 특징이 있다.

 

스코프(Scope)

스코프는 식별자(변수, 함수, 클래스명)의 유효범위를 뜻하며 선언된 위치에 따라 유효 범위가 다르다.

전역에 선언된 변수는 전역 스코프, 지역에 선언된 변수는 지역 스코프를 갖는다.

 

전역에 선언된 전역 변수는 어디에서든지 참조가 가능한 값이며, 지역에 선언된 지역변수는 함수에 선언된 변수이며

자신의 지역 스코프 및 하위 스코프에서 유효하다.

 

모든 코드 블록(if, for, while 등)에서 지역 스코프를 만들며 이러한 특성을 블록 레벨 스코프라고 한다.

하지만 var 키워드로 선언된 변수는 함수의 코드 블록만을 지역 스코프로 인정한다. 이를 함수 레벨 스코프라고 한다.

var a = 25;

if(true){
    var a = 5;
};

위와 같이 var 키워드를 사용해 a 라는 변수를 만들었다. 함수의 코드 블록을 사용하지 않았으므로 전역 변수로 취급한다. 기존에 생성한 a 변수에 25를 할당했지만 결과 값은 5가 출력되는 걸 볼 수 있다.

 

전역 변수로 인해 재할당이 발생하거나 전역 스코프를 공유하기 떄문에 어딘가에 동일한 이름이 있다면 예상치 못한

결과를 가져올 수 있다. 

 

이러한 이유 때문에 함수 코드 블록만을 지역 스코프로 인정하는 var 대신 블록 레벨 스코프를 지원하는 const, let을

사용하는걸 권장한다.

 

var, let, const 차이

 

var

- 변수 중복 선언 가능하며, 예상치 못한 값을 반환할 수 있다.

- 함수 레벨 스코프만 지역 스코프로 인정하기 때문에 함수 바깥에서는 모두 전역변수로 선언된다.

- 변수 선언문 이전에 변수를 참조하면 언제느 undefined를 반환한다.

 

let

- 블록 레벨 스코프 지원한다.

- let 키워드로 변수 중복 선언이 불가능하다.

- 재할당은 가능하다.(변수 데이터 변경)

 

const

- 블록 레벨 스코프 지원한다.

- 변수 선언과 동시에 초기화를 진행해야 한다.

- let 과 마찬가지로 변수 중복 선언이 불가능하다.

- let 과 다른점은 재할당도 불가능하다.

 

하지만 재할당의 경우 원시 값은 불가능하지만 객체는 객체안의 변수값 재할당은 가능하다.