[JavaScript] var, let, const 의 차이점

[JavaScript] var, let, const 의 차이점

자바스크립트에서 변수를 선언할 때 많이 쓰이는 var, let, const 의 차이점에 대해서 한번 이야기 해보려고합니다.

ES6 가 생기고 난 후에 let 과 const 를 사용하게 되었습니다.

var 는 일단 말하자면 너무 자유로워 오히려 그 자유로움이 문제가 된 케이스 입니다.

그걸 방지하고자 약간의(?!) 제한적인 let 과 const 가 생겨나지 않았나 생각이 듭니다.

var

var 는 앞에서 말했던 것 처럼 매우 자유롭습니다.

01. 객체 선언 전에 사용 가능하다.

console.log(a); var a;

객체에 값이 없다면 자동으로 메모리에 undefined 를 할당하는 특징이 있습니다.

02. 객체의 형식도 변경 가능하다

var a = 2; a = {'name':'hong'} console.log(a)

원래 INT 형으로 받더라도 배열로 넣게 되면 객체의 타입마저 변하게 되는 특징이 있습니다.

03. 같은 변수의 이름을 중복해서 사용가능 하다

var a = 2 ; a = {'name':'hong'} var a = 3; console.log(a)

위 결과값은 어떤 값이 나오게 될까요?

정답은 3이 나오게 됩니다. var 는 변수이름을 같은 것을 사용하더라도 메모리에 덮어 씌워지며 에러는 나오지 않습니다.

이 3가지를 보더라도 var 는 매우 유연하기 때문에 어떤 값이 들어와도 에러 없이 잘 소화해내지 않을까 생각합니다.

하지만 유연한 만큼 값에 다른 타입이 들어가거나 덮어씌워지는 문제 등으로 프로그램에 큰 버그도 생길 수 도 있을 것 같습니다.

그렇기 때문에 var 보다는 어느정도 제약이 있는 let 이나 const를 더 사용하라고 하는 것 같습니다.

let 과 const 의 공통점

01. 먼저 선언한 객체가 아니면 사용할 수 없다.

console.log(a) let a = 3; console.log(a) const a = 3;

var 와 다른점으로 변수를 먼저 선언하지 않으면 이런식으로 a 에 접근할 수 없다고 에러가 뜨게 됩니다.

let과 const를 사용하면 선언하지 않은 값을 사용하게되는 문제는 방지할 수 있어보입니다.

02. 할당하지 않으면 메모리에 자동으로 undefined 로 초기화되지 않는다.

let a; console.log(a) const a; console.log(a)

여기서 let 과 const 과 조금 다른 부분은 const 는 값이 할당되지않으면 문법 오류를 반환합니다.

이런 특징을 이용하면 var 와 다르게 값이 할당되지 않아서 생기는 오류를 피할 수 있어보입니다.

let 과 const 의 차이점

01. 객체 수정 유무

먼저 let 을 사용한 함수를 한번 보겠습니다.

let a = 1; a = {'name':'hong'} console.log(a)

이렇게 INT 형을 넣고 다음 배열 형식으로 데이터를 넣더라도 에러는 나지않습니다.

이런 부분은 var 와 유사하다고 볼 수 있습니다.

다음은 const 를 보겠습니다.

const a = 1; a = {'name':'hong'} console.log(a)

타입 에러가 떨어집니다.

즉 const 는 객체에 대한 타입을 변환시키지 못합니다.

하지만 객체가 아닌 객체의 프로퍼티 값은 수정할 수 있습니다.

const a = {'name':'hong'}; a.name = 'choi' console.log(a)

그렇기 때문에 값의 타입이 변하지 않는 고정적인 변수 상수의 값은 const 로 사용하는 것이 도중에 타입이 변하는 에러에 대해서 방지 할 수 있어보입니다.

이렇게 전체적으로 var, let, const 의 특징에 대해서 알아보았습니다.

정리해보면 아래와 같습니다.

var : 완전 자유로워 선언, 할당, 객체 수정에 대해서 제한이 없습니다.

let : 객체 수정에 대한 제한은 없지만 선언, 할당이 꼭 필요합니다.

const : 선언, 할당이 꼭 필요하고 객체 수정 또한 할 수 없습니다. (객체 프로퍼티 수정은 가능합니다.)

긴글 읽어주셔서 감사합니다.

from http://dogi-gwa.tistory.com/13 by ccl(A) rewrite - 2021-11-28 14:01:56