[JS] 변수

co_mong·2021년 7월 22일

자바스크립트 문법

목록 보기

1/6

기존의 Javascript는 var를 사용해서 변수를 선언했습니다.
하지만 ES6부터 const와 let이 추가되었고 이들의 차이점을 정리하겠습니다.

var와 let의 경우 값을 초기화하고 나중에 값의 재할당이 가능합니다.

var x = 1;
x = 100;
console.log(x);
//x = 100

let x = 1;
x = 100;
console.log(x);
//x = 100

하지만 const의 경우 한번 초기화 이후 값의 재할당이 불가능합니다.

const x = 1;
x = 100;
console.log(x);

var의 경우 변수를 중복해서 선언해도 문제되지 않습니다.

var x = 1;
var x = 2;

하지만 const와 let의 경우 변수 중복선언이 불가능하고 중복선언 할 경우 아래와 같은 에러 메세지가 출력됩니다.

let x = 1;
let x = 2;

const x = 1;
const x = 2;

변수의 중복선언이 가능한 문제는 코드가 짧을 경우 문제가 되지 않습니다.

하지만 코드가 길어졌을때 변수를 중복선언하게 되면 어디에서 문제가 발생했는지 찾기 어렵기 때문에 var 대신 let이나 const를 사용하는것이 좋습니다.

우선 스코프란 변수를 사용할수 있는 유효범위를 말합니다.
그리고 var,const,let은 변수의 스코프에 차이가 존재합니다.

var의 경우 함수 레벨 스코프입니다.
함수 레벨 스코프란 말그대로 함수 내부에서 선언된 변수는 함수 내부에서만 사용이 가능하고 그 외에는 전역변수로 취급하는 것을 의미합니다.

function func(){
    var x = 'hola';
    console.log(x);
}
func();//hola
console.log(x);//x is not defined

위의 경우 print 함수 내부에서 선언된 x는 print 함수 내부에서만 유효합니다.
따라서 print의 경우 hola가 정상적으로 출력되고
console.log(x)의 경우 ReferenceError가 발생하게 됩니다.

이에 반해 const와 let의 경우는 스코프가 좀더 작은 범위까지 나눠지는 블록 레벨 스코프입니다.

function func(){
    if(true){
        let x = 'hola';
    }
    console.log(x);
}
func();//x is not defined
console.log(x);//x is not defined

위의 경우 var과는 다르게 print와 console.log(x) 둘다 ReferenceError가 발생하게 됩니다. 👉 const의 경우도 동일합니다.

호이스팅이란 변수나 함수의 선언을 스코프를 상단으로 끌어올려 실행하는 것을 의미합니다.
그리고 자바스크립트에서는 var, const, let, function등을 모두 호이스팅해줍니다.

하지만 초기화과정에서 var와 const,let의 차이가 생깁니다.
var의 경우 선언과 초기화의 단계가 같이 실행됩니다.

console.log(hola); //undefined

var hola;
console.log(hola); //undefined

hola = 'hola';
console.log(hola); //hola

그 결과 hola에 값을 넣어주지 않아도 초기화가 되어있어 undefined가 출력되는것을 볼수 있습니다.

const, let의 경우는 선언과 초기화가 분리되어 실행됩니다.

console.log(hola); //ReferenceError

let hola;
console.log(hola); //undefined

hola = 'hola';
console.log(hola); //hola

위의 코드에서 hola를 선언했을때 초기화가 되지 않아서 처음에는 ReferenceError가 발생합니다.
그리고 초기화가 이루어지고 난 뒤에는 undefined가 출력되고
값을 할당한 뒤에는 hola가 정상적으로 출력되는 것을 볼 수 있습니다.

참고자료