[JavaScript] Core: Variable declaration, Hoisting

Programming/JavaScript

Isaac S. Lee 2023. 10. 11. 11:51

🍁변수 선언하기

var, let, const를 JavaScript에서 사용할 수 있다.

var과 let은 변수를 선언할 때, const는 상수(final 변수)를 선언할 때 사용한다.

var은 BOM때부터 있었고, DOM에 와서도 여전히 지원하며 사용하고 있다.

var변수는 function-scoped이기 때문에 제어문을 영역으로 인식 불가능하다.

var a = 10;
var a = 20;
console.log(a);

var변수는 중복 선언이 가능하다. 하지만 의도적으로 안 할 뿐이며, 상수 선언을 할 수 없다.

let변수는 ES6(ECMAScript 2015) 때 만들어진 변수이다.

let변수는 block-scoped를 가지므로 함수와 제어문에서 사용할 수 있다.

let은 변수를 선언할 때 사용하며, 중복 선언이 불가능하다.

만약 중복 선언을 하면 위와 같이 오류가 발생한다.

let a = 10; //전역 변수

function m1() {
    let b = 20; //지역 변수(m1)
}

if (a > 0) {
    let c = 30; //지역 변수(if)
    var d = 40; //전역 변수
}
console.log(c); //c is not defined
console.log(d);

let변수는 함수 내에 선언하면 지역 변수가 되므로, var보다 우리가 알고 있는 변수의 사용법에 더 가깝다.

ES6(ECMAScript 2015) 때 만들어진 변수를 만드는 키워드이다.
const변수는 let변수와 마찬가지로 block-scoped를 가지므로 함수와 제어문에서 사용할 수 있다.

중복 선언이 불가능하며 상수(final 변수) 선언이 가능하다.

const PI = 3.14;
PI = 3.3333;

상수는 수정할 수 없으므로 수정하려고 하면 에러가 발생한다.

호이스팅(Hoisting)에는 변수 호이스팅과 함수 호이스팅이 있다.

일반적으로 호이스팅은 함수 호이스팅을 말하는 것이다.

호이스팅은 자바 스크립트를 실행하기 전에, 코드를 재배치하여 변수/함수 선언문을 해당 스코프의 최상단으로 끌어올린다.

function m1() {
    alert('m1');
}

m1();

m2();

function m2() {
    alert('m2');
}

코드는 위에서부터 아래로 실행하는데, 위 코드는 함수를 선언하기 전에 호출하기 때문에 말이 안 되는 코드이다.

m1만 호출이 되어야 할 상황이지만, m2도 alert로 호출이 된다. m2가 호출되는 이유는 함수 호이스팅이 발생하여 함수가 있는 코드를 잘라서 최상단으로 붙여 넣었기 때문이다.

개발자 스스로가 이렇게 코드를 작성하는 경우는 거의 없기 때문에 큰 영향을 미치는 것은 아니다. 그래서 호이스팅이라는 존재를 몰라도 아무 문제가 없다.

function m3() {
    alert(a);
    var a = 10;
}

m3();

not defined variable는 변수가 선언이 되지 않았을 때 발생하고, undefined는 변수는 선언을 했지만 초기화하지 않았을 때 발생한다.

function m3() {
    var a;
    alert(a);
    a = 10;
}

m3();

이 코드는 위와 같이 선언문만 위로 올라가고 초기화하는 부분만 아래에 남게 된다.

function m3() {
    alert(a);
    let a = 10; //not defined variable a (X)
}

m3();

let으로 선언한 변수도 변수 호이스팅이 발생하기는 하지만, 명시적으로 에러가 발생한다.