[JavaScript] let, const, var의 차이 - 손쉽게 코딩하기

[JavaScript]let, const, var의 차이

기본예제 - 1

let a = 1;
 
const b = 2;
 
a = 4;
 
console.log(b, a);

위에서 let으로 생성해준 변수 a는 기존에 1로 초기화 했던것을 4로 다시 초기화 시켜줄 수 있는 반면,

const 변수 b는 상수라는 개념으로 "안정된" 이라는 뜻으로 생각하면 된다.w

즉, 다른 곳에서 값을 다시 초기화 해줄 수 없다. 

기본예제 - 2

const a = 221;
 
let b = a-5;
 
a = 4;
 
console.log(b, a);

2번 예제를 실행시키면 이는 아래와 같은 오류가 난다.

TypeError: Assignment to constant variable.
    at https://replbox.repl.it/data/web_hosting_1/jonghwanpark/ImprobableStainedMonitor/index.js:3:3

에러를 해석해보자. TypeError: 상수변수에 대입이라는 에러 메세지다.

즉, a라는 상수 변수에 4라는 숫자를 초기화 시키려하니까 나타나는 에러다.

let과 const의 가장 큰 차이는 변수에 새로운 값을 대입할 수 있느냐 없느냐의 차이다.

그럼 이제 var이 무엇인지 알아보자.

var은 variable의 줄임말.

var은 let처럼 변수의 값을 바꿀 수 있다.

여기까지는 var과 let의 차이가 없이 똑같은 것으로 보인다. 

하지만, 대부분의 사람들은 var을 사용하는 것은 되게 악의적인 코드방식이라고 설명을 한다.

왜 그런지보면 var이라는 키워드 변수는 function-scoped라 하며, let 키워드 변수는 block-scoped라 부른다.

기본예제 - 3

var age = 1;
 
if(age = 1){
 var age = 3;
}
 
console.log(age);            3 이 출력
 
////////////////////////////////////////////
 
let age1 = 1;
 
if(age1 = 1){
  let age1 = 3;
}
 
console.log(age1);            1 이 출력

위에는 var으로 아래는 let으로 변수 생성을 했다.

age 초기값 1을 if문 안에서 3으로 다시 초기화 해준 age를 출력하니 3이 출력이 되었고

let으로 생성한 age1에 1값을 3으로 다시 초기화 해준 age1을 출력하니 1이 출력되었다.

즉, let으로 block안에서 재 초기화 시킨것을 외부 스코프에서 출력을 해도 영향을 받지않는다.

여기서 우리는 예상할 수 있는데, var로 생성한 변수를 if문같은 곳에서 다시 값을 넣어주면 어느 순간 우리도 모르는 사이에 " 얘 왜 이렇게 출력이 되지????? " 하며 당황하는 나의 모습을 볼 수 있다...

ECMAScript6 이상에서 안전하게 코드를 짜는 방법은 let을 추천한다.

하지만, 나는 광범위하게 코드를 다룰거야하면 var을 써도 상관없다. 

내가 처음 회사와서 받은 코드에는 var을 쓰고 있었기에 아직 var을 사용하고 있다....

혹시나 도움이 되셧다면 공감과 추천 눌러주시면 감사합니다!!