권돌선생님의 블로그

흔히 자바스크립트에서 사용하는 자료구조에서 선언하는 변수 및 상수의 경우,

제목과 같이 var, const , let 으로 사용할 것이다.

필자의 경우 이것들에 대해 잘 모르는 경우가 많았어서, var 만 사용한 경우가 훨씬 많았다.

아니, 사실 var 이외의 것들이 존재하는 지도 잘 몰랐다.

시간이 흐르고 이것에 대해서 헷갈려 하는 분들이 있을 수 있어 자료를 남긴다.

1. var

사실 자바스크립트 프로그래밍을 하다보면 아마 제일 많이 쓸 것이다.

왜냐하면 var로 선언할 경우 전역 변수이기 때문에 어디에서 사용하던 간에

어지간하면 타입 에러나 쓰는 순서를 잘못 써서 생기는 에러가 거의 없기 때문이다.

* 사용법

1) 2개 이상 변수 한번에 선언 및 초기화

2) 다수 변수 초기화

var x = 0;
function f(){
  var x = y = 1; // x는 지역변수로 선언됩니다. y는 아닙니다!
}
f();
console.log(x, y); // 0, 1 // x는 예상대로 전역이다

2. let

let은 해당하는 블록 내에서 사용하는 지역 변수이다.

let은 var와 같은 전역 변수가 아니기 때문에 특정 구간에서만 사용되므로,

특정 함수내에서 주로 실행한다.

let x = 1;
if (x === 1) {
x = 2;
console.log(x); // expected output: 2
}
console.log(x); // expected output: 2

다음 코드를 보면, x = 1이므로 x에 2의 값을 할당하여

console.log()를 실행하여 2의 값이 나오는 것을 확인할 수 있다.

즉 x의 값이 2로 할당된 것이다.​

이와 다르게 다른 방식도 보겠다.

이 코드는 위에 선언된 x의 값을 바꾸는 것이 아니라 if 함수 내

let x 라는 지역변수를 새로 할당하여 값을 표기하는 것이다. 그러므로

제일 위쪽의 let x = 1 이라는 코드에 관여하는 것이 아니므로

블록을 벗어난 코드를 작성했을 경우 출력결과가 1인 것이다.

이러한 점을 들어, var 와 비교해보겠다.

function varTest() {
    var x = 1;
  if (true) {
       var x = 2; // 같은 변수!
       console.log(x); // 2
  }
console.log(x); // 2 }
function letTest() {
    let x = 1;
 if (true) {
    let x = 2; // 다른 변수
   console.log(x); // 2
 }
console.log(x); // 1
}

이제 차이가 보일 것이다.

var 의 경우 전역변수이기에 값이 변경될 때 위의 코드에서 참조하여 값을 재할당하지만,

let 의 경우 지역변수이기에 위의 코드에서 참조할 수 없어 새로운 변수를 만들어야 한다.

​

3. const

const는 상수로서 한번 선언하면 변경되지 않는 수이다. 게다가 const 의 경우 호이스팅의 대상이지만

undefined 로 정의되지 않고 초기화 에러가 발생한다. 다른 변수와 달리

'상수'는 변하지 않기에 차후 할당되지 않으므로 에러를 발생시키는 것이다.

const 의 경우 일반적인 표기방식은 대문자로만 표기하는 것을 관습으로 한다.

const MY_NAME = '겨울';
// 재할당
MY_NAME = '가을';
// 출력
console.log("my Name is: " + MY_NAME); // 에러발생

위와 같은 코드는 const 는 상수이기에 가을이란 이름을 넣었을 경우 할당이 되지 않는 것이다.

const MY_NAME = '겨울';
if (MY_NAME === '겨울') { // 블록 범위로 지정된 MY_NAME 이라는 변수를 만드므로 괜찮습니다
   let MY_NAME = '가을'; // MY_NAME은 이제 가을입니다
   console.log('my name is ' + MY_NAME);
}

이 방식은 기존의 상수인 const MY_NAME에 대해 간섭하는 것이 아닌,

새로운 지역변수 let MY_NAME 을 만드는 것이므로, 가능한 방식이다.

​자 그럼, 어떤 경우에 var 와 let , const 를 사용하여야 할까?

사실 var를 제외한 let,const는 ES6 에서 새롭게 추가된 것들 이므로,

기존 var의 역할을 대체하기 위해 만들어진 것들이다.​

기존 var 의 단점은 전역변수이면서 어디서나 많이 쓰이는 변수지만, 반대로 어디서나 쓰이기 때문에

디버깅할 때 어떤 변수에서 문제가 발생하는지 찾기 힘들다.

왜냐하면, var 의 경우 중복으로 변수 설정이 가능하여 프로그램 규모가 커질 경우 중복된 변수의 값을

찾기가 쉽지 않기 때문이다.​

또한, 중복으로 설정할 경우 해당 변수에 메모리를 할당하는 과정에 있어서 불 필요한 용량을

차지할 수 있기 때문이다.

그러나 let의 경우 지역변수이지만 중복으로 변수 선언이 불가능하고,

필요시 값의 변경이 가능하기 때문에 코드 가독성 측면과 메모리 관리 관점에서 유용하고,

​const 의 경우 상수지만 전역으로 사용할 수 있기 때문에 자주 사용하는 값을 const로 선언하여

사용하고, 필요시 let 으로 새로운 지역변수를 만들어 사용하는 것이 올바른 메모리 관리에 있어

더 좋은 방법인 것 같다.​

결론 !

그러므로 꼭 필요한 경우가 아니면 var 의 사용은 왠만하면 피합시다!

참고자료

​

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/let

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/const

​

​

​

​

​

​