[Javascript] var, const, let에 대하여 알아보기 ES6

React로 열심히 프로젝트를 하다가 프로젝트를 잠깐 쉬게 되었다.

그래서 부족하다고 느꼈던 Javascript를 기초부터 다시 정리하기로 했다.

 

오늘 글은 Javascript에서 변수를 선언할때 사용하는 var, const, let에 대하여 알아보도록하자

 

---

1. 선언방식

선언하는 방식은 아래와 같다. var, let, const 등을 적고 변수명을 적어서 선언하면된다.

var x = 3;
console.log(x); // 3

let y = 2;
console.log(y); // 2

const z = 1;
console.log(z); // 1

---

2. 차이점

그럼 3개의 차이점이 무엇인가?

먼저 var은 함수 스코프를 가지고

let, const는 블록 스코프를 가진다.

 

함수 스코프는 블록( '{}'와 같은 중괄호)와 관계없이 접근할 수 있다.

블록 스코프는 블록 밖에서는 변수에 접근할 수 없다.

 

예시를 보자

if (true) {
  var x = 3;
}
console.log(x); //3

if (true) {
  const y = 3;
}
console.log(y); // Uncaught ReferenceError: y is not defined

 

var은 if 문의 블록('{}')과 관계없이 출력이 되고

const는 if 문의 블록 밖에서 출력이 되지 않는다.

주석과 같은 에러가 출력된다.

 

또한 var은 선언을 뒤에 해도 동작하게된다.

예시로 보도록하자

a = 3;
console.log(a); //3
var a;

b = 3;
console.log(b);  // 에러발생
const b;

var a는 변수 선언을 console.log 보다 나중에 해도 출력이 되고

const b는 에러가 나오게 된다.

이것을 호이스팅(Hoisting)이라 한다.

호이스팅은 var 변수/함수의 선언을 위로 끌어 올리는 것을 말한다.

끌어 올리기 때문에 아래에 선언해도 에러가 생기지 않는다.

 

이러한 예전에는 특성이 유연하게 코드를 작성하게 도와주어 빠른게 코딩할 수 있었다.

하지만 많은 에러를 발생시켜 요즘에는 사용하지 않는다.

var 대신 let과 const를 사용을 권장한다.

 

---

3. let과 const의 차이점

 

그럼 var를 사용하지 말고 let과 const를 사용하라고 했는데

let과 const의 차이점은 무엇인가?

 

const는 한 번 값을 할당하면 변경할 수 없다.

let은 값을 할당해도 변경할 수 있다. 

이것이 가장 큰 차이점이다.

 

예시를 보겠다.

const a = 3;
a = 1; // Uncaught TypeError: Assignment to constant variable.

let b = 0;
b = 2; // 1

const c;// Uncaught SyntaxError: Missing initializer in const declaration

차이점이 보이지 않나?

const로 선언된 a는 값을 변경할 수 없고 b는 가능하다

또한 c는 const로 선언되어 값을 할당하지 않으면 위와같이 에러가 나오게된다.

 

그럼 const와 let중 무엇을 사용해야할까

변수의 값을 할당하고 변하지 않으면 const 사용을 기본으로 해야한다.

다른 값을 할당해야 하는 상황이 생겼을 때 let을 사용하면 된다.

---

이번 글에서는 자바스크립트에서 var, let, const를 알아보았다.

주변에 자바스크립트를 배우는 친구중에 var를 사용하는 친구가 있다면 

뒷 통수를 한대 때려주고 let, const를 사용하라고 해주자!