5. 서버를 위한 Javascript 문법(1) - 변수 선언

변수 선언의 3가지 방법

변수 선언에 이용되는 세가지 var, let, const에 대해 알아보자

1. var

var은 variable의 약자라고 한다. 저 코드를 통해 var이 가지는 특징을 살펴보자.

console.log(a);
// undefined
//@ 'hoisting' 이루어짐
var a = 'this is var';
console.log(a);
// this is var

var a = 'var은 중복 선언이 가능함!'
console.log(a);
//SyntaxError: Identifier 'a' has already been declared

a = 'var은 값 재할당도 가능함!';
console.log(a);
// var은 값 재할당도 가능함!

a = 'var의 function level scope 테스트용 - 함수 내의 지역변수로 간주되는지?'
function x() {
  a = 'a is "function level scope" ';
}
console.log(a);
// 'var의 function level scope 테스트용 - 함수 내의 지역변수로 간주되는지?'

x()
console.log(a);
// a is "function level scope"

 

a. hoisting

 - 자바스크립트는 분명 코드를 한 줄씩 번역하고 실행하는 것이 맞다. 하지만, 코드를 실행하기 전에, 코드를 평가하는 과정이 이루어지는데, 여기서 변수 선언문이 먼저 실행되어  변수 선언이 뒤에서 일어나도, 앞 코드에서 참조할 수 있는 '호이스팅'이 일어난다고 한다. line 1 ~ 6을 보면, a를 선언하기도 전에 a를 참조하는 문장을 냈으나, 오류가 발생하지 않고, 값이 비어있다는 undefined를 출력했다는 것에서 호이스팅이 일어남을 알 수 있다.

 

b. 중복선언, 재할당

- line 4~ 14를 보면, a를 선언한 이후에 line 8에서 a를 한번 더 선언하고 출력한 결과 바뀌었음을 알 수 있다. 마찬가지로 line 12에서 a를 재할당 한 이후 출력하여 결과가 바뀜을 확인할 수 있다!

 

c. Scope(유효한 참조 범위)

- var은 함수 내부에서 선언했을 때에만 지역변수로 간주되는 '함수 레벨 스코프'를 가지고 있다. x라는 함수 안에서 a를 재할당 해준 뒤, a를 출력했을 때, 결과값이 바뀌지 않았다. 이는 a의 재할당이 x함수 안에서만 허용되는 것을 알 수 있다. 그 후 함수를 실행한 뒤< 'x()' > 에는 a값이 바뀌었다.

2. let

과거 자바스크립트의 변수선언은 var 하나만 존재했다. ES6부터 let과 const가 추가되었는데, let부터 먼저 알아보자.

let a = 'this is let';
console.log(a);
// 'this is let'

a = 'let은 값 재할당 가능함!';
console.log(a);
// let은 값 재할당 가능함!

function x() {
  a = 'a is "block level scope" 이므로 이 문장은 출력되지 않음';
}
console.log(a);
// let은 값 재할당 가능함!

var b = 'var';
if(true) {
    let a = 'block level scope라서 지역변수로 간주!';
    var b = 'var은 function level scope라서 블록 내에서는 전역변수로 간주!';
}
console.log(a);
console.log(b);
// let은 값 재할당 가능함!
// var은 function level scope라서 블록 내에서는 전역변수로 간주!

a. hoisting

- line1에서 보다시피, 참조에러(Reference Error)가 발생한 것을 알 수 있다. 그렇다면 let은 hoisting이 일어나지 않는것인가? 그렇지 않다! let에서 hoisting은 분명 일어난다. 이게 무슨 소리야?

코드 평가 과정에서 변수 선언이 이루어질 때, let, const는 var과 달리 변수가 저장되는 공간이 다르기 때문에 일어나는 현상이다. 코드가 실행되는 과정에서 TDZ(Temporal Dead Zone)이라는 것이 발생하여, 참조오류가 생기게 된다.

요약하자면, let도 hoisting은 발생하지만, 방식이 달라서 오류가 발생한다.

b. 중복선언, 재할당

- line 8~ 14에서 알 수 있듯이, a를 중복선언시 오류가 발생하는 반면, 재할당시 결과가 바뀜을 알 수 있다

c. Scope

let은 함수뿐만 아니라 블록 내부에서 선언했을 때에도 지역변수로 간주되는 '블록 레벨 스코프'를 가지고 있다. 함수내에서 선언해도 바뀌지 않았음을 알 수 있고, if문 블록안에서 선언해도 결과가 바뀌지 않았다. 반면에, var의 경우 if문 block에서 선언한 값이 전역변수로 적용되어 결과값이 바뀐것을 확인할 수 있었다!

 

 

3. const

a. hoisting

- line1에서 보다시피, 참조에러(Reference Error)가 발생한 것을 알 수 있다. const는 let과 hoisting의 과정이 동일하다.

 

b. 중복선언, 재할당

- line 8~ 14를 살펴보자. 위에 두 선언과 달리 const의 경우 중복선언과 재할당이 모두 안되는 것을 알 수 있다. 이는 곧 코드를 작성할 때, var보다 안정성이 뛰어나다는 것을 의미하기도 한다. 

 

c. Scope

const는 let과 같이 함수뿐만 아니라 블록 내부에서 선언했을 때에도 지역변수로 간주되는 '블록 레벨 스코프'를 가지고 있다. line 16 ~ 에서 함수내에서 선언해도 바뀌지 않았음을 알 수 있다.

 

d. 초기화 값

const는 var, let과 달리 초기화시 반드시 값을 선언해주어야 한다. 그렇지 않으면 line 22에서 처럼 에러가 발생하게 된다.

---

 

이로서 세가지 변수 선언의 특징을 알아보았다