JS [변수][스코프][호이스팅]

3 minute read

자바스크립트 변수

: 참고블로그 링크

var, let, const 차이점 5가지

중복선언 가능 여부
재할당 가능 여부
변수 스코프 유효범위
변수 호이스팅 방식
전역객체 프로퍼티 여부

중복선언 가능 여부

(1) var: 중복 선언이 가능

// 첫번째 변수 선언+초기화
var a = 10;
console.log(a); // 10


// 두번째 변수 선언+초기화
var a = 20;
console.log(a); // 20


// 세번째 변수 선언(초기화X)
var a;
console.log(a); // 20

(2) const, let: 중복 선언 불가능

// let 중복 선언
let a = 10;
let a = 20; // SyntaxError: Identifier 'a' has already been declared

// const 중복 선언
const b = 10;
const b = 20; // SyntaxError: Identifier 'b' has already been declared

재할당 가능 여부

(1) var, let: 값의 재할당이 ‘가능’한 변수

var a = 10;
a = 20;
console.log(a);  // 20 재할당


let b = 111;
b = 222;
console.log(b);  // 222 재할당

(2) const: 값의 재할당이 ‘불가능’한 상수다.

const c = 111;
c = 222;  // TypeError: Assignment to constant variable.

참고) const는 처음 선언할 때 반드시 초기화(값 할당)를 해주어야 한다.
jsconst a = 10;  
const b;  // SyntaxError: Missing initializer in const declaration

스코프

(1) var: 함수 레벨 스코프(function-level scope)

function hello(){
    var a = 10;     // 함수 내부에만 선언된 var변수는 무조건 지역변수다.
    console.log(a);
}

hello(); // 10

console.log(a);  //ReferenceError: a is not defined

if(true) {
    var a = 10;     // 함수에 정의된 것이 아니므로 무조건 전역변수다.
    console.log(a); // 10
}

console.log(a);  // 10

var는 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주한다.
var는 함수를 제외한 영역에서 var로 선언한 변수는 무조건 ‘전역변수’로 취급된다.

즉, 함수가 아닌 if문, for문, while문, try/catch 문 등의 코드 블럭{ … } 내부에서 var로 선언된 변수를 전역 변수로 간주한다.

(2) let, cost: 블록 레벨 스코프(block-level scope)

if(true) {
    let a = 10;
    console.log(a); // 10
}

console.log(a);  // ReferenceError: a is not defined

function hello() {
    let a = 10;
    console.log(a); // 10
}

console.log(a);  // ReferenceError: a is not defined

if문의 블럭 내부에서 let으로 선언된 변수는 외부에서 참조되지 않음을 알 수 있다.
당연히 함수 내부에서 선언된 변수도 외부에서 참조할 수 없다.

호이스팅

: 자바스크립트의 호이스팅(hoisting)은 끌어올린다는 의미를 가진다. 코드를 실행하기 전, 일종의 ‘코드 평가 과정’을 거치는데, 이 때 ‘변수 선언문’을 미리 실행두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다.

(1) var: 변수 호이스팅이 발생한다.

console.log(a);  // undefined
var a = 10;
console.log(a);  // 10

(2) let, const: 변수 호이스팅이 발생한다. 하지만 다른 방식으로 작동한다.

console.log(a);  // ReferenceError: Cannot access 'a' before initialization
let a = 10;

let a = 10;  // 전역변수 a선언

if(true){
    console.log(a);  // ReferenceError: Cannot access 'a' before initialization
    let a = 20;  // 지역변수 a 선언
}

위 에러는 호이스팅이 발생하지 않는 것처럼 보이지만 사실 이 에러가 호이스팅이다.

let, const의 호이스팅 과정이 var와 다르게 진행된다.
변수의 선언과 초기화 사이에 일시적으로 변수 값을 참조할 수 없는 구간을 TDZ(Temporal Dead Zone)라고 한다.
let, const 로 변수를 선언하는 경우 호이스팅된다면 TDZ 구간이 만들어지면서 에러가 발생한다.

핵심
참고블로그) 링크
누군가가 호이스팅을 물어왔을 때 단순히 “선언을 끌어올리는 거야.”가 아니라 구체적으로 함수선언문과 함수표현식을 나눠서 선언부분만 떼어올리는 개념을 이해하고 설명해줄 수 있어야 한다.

전역객체 프로퍼티 여부

(1) var: var로 선언된 변수는 전역객체(브라우저 환경의 경우 window)의 프로퍼티다.

var a = 10;

console.log(window.a);  // 10
console.log(a);  // 10

(2) let, const: let/const 로 선언된 변수는 전역객체 프로퍼티가 아니다.

let a = 10;

console.log(window.a);  // undefined
console.log(a);  // 10

마치며

1순위: const를 최우선적으로 사용한다.
2순위: let은 변수 값을 재할당할 필요가 있을 때만 사용한다.
3순위: var는 ES6 이후 부터… 특별한 경우를 제외하곤 쓸 필요가 없어 보인다.

const와 let만 사용하는 편이며, var는 테스트 할때 외에는 거의 사용하지 않는다고 한다.

참고
구글의 자바스크립트 스타일 가이드에 다음과 같은 문장이 있다.
Use const and let
Declare all local variables with either const or let.
Use const by default, unless a variable needs to be reassigned.
The var keyword must not be used.

const와 let을 이용해서 변수를 선언하라.

값을 재할당하는 경우가 아니라면, const를 디폴트로 사용하라.

var는 절대로 사용하지 말라

Share on

Twitter Facebook LinkedIn