[JavaScript] 자바스크립트 변수, var, let, const

JavaScript는 웹개발에 있어서 HTML, CSS와 함께 언급되는 기본적인 개발 언어이다.

 

HTML과 CSS는 프로그래밍 언어가 아닌 마크업 언어에 해당하지만, Javascript는 프로그래밍 언어라고 할 수 있다.

 

우리의 Web을 더 풍성하게 해줄 JavaScript의 변수에 대해서 알아보자.

 

 

 

Javascript에서는 다른 프로그래밍 언어들과 같이 정수형, 실수형, 문자형으로 나뉘어지지 않는다.

오로지 var, let, const의 세 가지로만 정의할 수 있다.

 

 

var은 Javascript에서 오랫동안 있었던 변수형이며, ES5를 사용했던 2015년까지는 유일한 변수형이었다.

하지만 이후에 ES6와 함께 let, const라는 변수형들이 나오게 되었고, var의 고질적인 문제들을 보완할 수 있게 되었다.

 

var

val을 사용하면 중복 선언이 가능하다.

var a = 1;
var b = 23;

var a = 100;
var b;

console.log(a);
console.log(b);

 

위와 같이 코드를 작성한다면, Python, C, Java와 같은 프로그래밍 언어라면 선언한 변수가 다시 나왔으므로 에러가 발생할 것이다.

하지만 javascript에서 var을 사용하여 변수를 선언한다면 문제가 발생하지 않는 것을 확인할 수 있다.

이처럼 var 변수는 중복선언이 가능하다. 

 

 

또, var 변수는 var를 붙이지 않고도 var 변수로 선언할 수 있다.

a = 1;
console.log(a);
var a = 5;
console.log(a);

 

위처럼 a = 1이라고 바로 적어도 기본적으로 var 변수로 인식한다.

변수형을 따로 붙이지 않으면 var 변수로 인식한다는 점을 잘 기억해두자.

 

 

변수 Hoisting

Javascript를 공부하는 사람들이라면 변수를 선언할 때 var 변수보다는 let을 사용하라는 말을 들은 적이 있을것이다.

그 이유는 var 변수의 고질적인 문제들 때문인데, 그 문제 중 하나가 "호이스팅(Hoisting)" 이다.

아래 코드를 보자.

var num = 2;

function fun(){
    console.log(num);
    var num = 5;
    console.log(num);
}

fun();

 

위 코드를 실행한다면 어떤 결과가 나올 거 같은가 ?

 

2가 출력된 후에 5가 출력될 거 같지만, 결과는 다르다.

결과는 undefined와 5가 순서대로 출력되는 것을 알 수 있다.

그렇다면, undefined가 출력된 것을 보아 제일 처음의 var num = 2는 출력에 아무 영향을 끼치지 못한 것으로 보인다.

 

var 변수는 block레벨 스코프(변수가 할당되어 데이터가 소멸되지 않고 유지되는 구간이 블록 단위인 것)가 아닌 function 레벨 스코프(함수 내의 범위만큼 데이터가 유지)이다.

만약 var 변수가 함수 이외의 위치에서 선언되었다면, 그 변수는 전역변수로써 데이터를 가지게 된다.

의도치 않게 전역 변수를 사용할 수 있다는 말이다.

 

 

 

위와 같은 이상한 결과가 나오는 이유가 위에서 말했던 호이스팅(hoisting) 때문이다.

호이스팅이란 javascript만의 고유한 성질인데, var 변수를 사용해서 선언할 때, 해당 범위의 최상단으로 끌어올려지는 것을 의미한다.

 

위 코드를 호이스팅이 일어난 순서대로 다시 정리하면 아래와 같이 변한다.

var num = 2;

function fun(){
    var num; // 선언부분 올라옴!
    console.log(num);
    num = 5; // 선언부분 올라가고 남은 부분!
    console.log(num);
}

fun();

 

var num = 5라는 한 코드가 var num; 과 num = 5; 두 개의 코드로 나뉘어져 선언 부분이 상단으로 올라간 것을 볼 수 있다.

 

그리고, 제일 첫 줄의 var num = 2라는 코드는 출력에 아무런 영향을 끼치지 않는다. var 변수는 function 레벨 스코프이기 때문에 fun()이라는 함수에서 num은 바깥의 var num = 2 가 아니라 함수 내부의 var num 를 사용하게 되는 것이다.

 

fun 함수 내에서 첫번째 console.log(num) 출력 전에는 num이라는 변수가 var로 선언만 되었으므로 값이 없다.

따라서 undefined라는 값이 출력되는 것이다.

 

그 다음의 console.log(num) 에서는 바로 위의 num = 5;를 통해 5라는 값이  num 에 저장되었으므로 5가 출력된다.

 

 

 

호이스팅(hoisting), function레벨 스코프의 특징 때문에 자칫 원하지 않는 방향으로 코드가 흘러갈 수 있다.

위의 예시들은 비교적 간단해서 문제가 없을 지 몰라도, 여러 코드들이 있다면 분명히 혼란스러운 상황이 발생한다.

 

그렇기에, 현시점에서는 var 변수를 사용하기보다 let 변수를 사용하기를 권장한다.

 

 

 

let

var 변수와 다른 점 중 하나는 중복 선언이 불가능하다는 것이다.

let a = 2;
console.log(a);
let a = 5;
console.log(1);

 

위처럼 let a 를 두 번 선언하면 중복 선언이 불가능하기 때문에 결과적으로 에러가 발생한다.

 

따라서, let 변수는 중복 선언을 해서는 안된다.

 

 

 

두번째로,  let 변수는 block 레벨 스코프를 가진다.

function 레벨 스코프를 가진 var과는 달리, 보통의 프로그래밍 언어에서 기본적으로 사용하는 것과 같이 block 단위의 변수 할당범위를 가진다.

let a = 10;

function fun(){
    let a = 100;
    console.log(a);
}
fun();

console.log(a);

 

fun 함수 밖의 a 와 함수 안의 a가 존재한다.

fun()을 실행한 후에는 fun 함수 내부의 a가 출력되므로 100이 먼저 출력되고, 이후의 console.log(a)에서는 함수 밖의 a값인 10이 출력된다.

 

 

 

 

 

 

 

const

const는 let과 비슷하지만, 값을 한번 설정하면 변경할 수 없다는 특징을 가지고 있다.

값을 초기에 선언함과 동시에 고정되기 때문에 선언과 값 설정을 나누어 쓸 수 없다!

const a = 10;

const b; // 선언과 값 설정을 따로 사용 불가
b = 5; // 선언과 값 설정을 따로 사용 불가

 

그리고, 한번 설정한 값을 변경할 수 없다.

const a = 10;

a = 30;

console.log(a);

 

위처럼 코드를 작성하면 TypeError가 발생한다.

 

 

 

 

 

---

 

 

 

결론

 

var : 중복 선언 가능, function 레벨 스코프, 변수형을 적지 않으면 기본적으로 var로 세팅, 권장하지 않음

let : 중복 선언 불가, block 레벨 스코프, 여러 프로그래밍 언어의 기본적인 변수와 유사. 사용 권장

const : 선언과 동시에 값 할당해야함, 선언된 값을 변경할 수 없음, 고정되는 값에 사용하여 유지보수에 도움을 줌. 사용 권장