var, let, const 서로 다른 차이점?

var, let, const 서로 다른 차이점?

 

---

var

ES6 이전에는 변수를 선언할때 var 키워드로 사용했었다.

var의 특징에 대해 간략히 설명하자면

1. 변수의 중복 선언이 가능하다.
2. var 키워드는 생략이 가능하다.
3. block-scope이 아닌 function-scope이다.
4. 호이스팅(hoisting) 당한다.

정도로 정리할 수 있습니다. 

//1function-scope과 block-scope의 차이

// function-scope
for (var i = 0; i < 10; i++) {
  console.log(i);
}

console.log('outside i: ', i); // 출력: outside i:  10
// i를 var로 선언 했기 때문에 function-scope를 사용해서 for문에 선언한 i가 정상적으로 값을 가지고 있다.

// block-scope
for (let i = 0; i < 10; i++) {
  console.log(i);
}
console.log('outside i: ', i); // 출력: Uncaught ReferenceError: i is not defined
// i를 let으로 선언하면 block-scope을 사용해서 for문 밖에서는 사용할 수 없다.

-------------

// hoisting (호이스팅) 예시
 

// 작성 코드
for (var i = 0; i < 10; i++) {
  console.log(i);
}

// 호이스팅 된 코드
var i
for (i = 0; i < 10; i++) {
  console.log(i);
}

위와 같은 특징을 가진 var은 변수의 사용에 대해서 다른 프로그래밍 언어와 다른 동작을 하는 이슈가 있다.

 

var에 대해 잘 알고 사용하면 유용하게 사용할 수 있지만, 모르고 사용하면 스크립트 수행 간에 오류가 생길 수 있다.

예를들면

1. 한번 선언한 변수를 모르고 다시 선언해서 다른 목적으로 사용할 때, 오류가 나지 않는다.

2. 호이스팅으로 인해서, 변수 선언 이전에 변수를 사용하더라도 에러가 발생하지 않는다.

이로 인해서 ES6에서는 변수 선원 키워드로 새롭게 let과 const를 만들었음.

 

---

let 

let은 var하고는 다른 특징이 있다.

1. 중복 선언 불가.
2. block-scope(*const도 동일)
3. 값의 할당 이전에 선언이 반드시 되어 있어야 한다.
4. 값을 재할당이 가능하다.

let a = 100;
consolel.log(a) // 결과값 100

let a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가 

a = 300;
consolel.log(a) // 결과값 300
// 값을 재할당 하는 것은 가능

var하고는 다르게 let은 해당 변수가 이미 선언되었다는 에러 메시지가 출력됨. 이러첨 중복 선언이 불가능함

 

---

const

var의 단점을 피하기 위해 let 하나만 있어도 될 것 같지만

const의 특징이 있음

 

1. immutable 변수를 만든다.
2. 재선언, 재할당 모두 불가능
3. 선언과 할당이 반드시 동시에 이루어져야한다.

const a = 100;
consolel.log(a) // 결과값 100

const a = 200;
console.log(a) // 에러 발생
// SyntaxError: Identifier 'a' has already been declared
// 중복 선언 불가

a = 300; // 에러 발생
// Assignment to constant variable.
// 값을 재할당 하는 것도 불가

let과 const의 차이점은 immutable의 여부

let은 변수에 다른 값을 재할당할 수 있지만, const는 재할당 시 에러 메시지가 출력

 

---

마지막으로 정리하자면

var = 중복선언, 재할당 모두 가능

let = 재할당만 가능

const = 모두 불가능

 

간단하게 이정도로 생각하면 될 것 같다.