[JavaScript] var, let, const 차이

 

회사에서 개발중인 프로젝트 코드를 읽다가 변수를 선언하는데 var와 const가 섞여있는것을 보고

이 두개의 차이가 궁금해서 찾아보고 정리하는 시간을 가져보았다

 

JavaScript 에서는 변수를 선언할 때 var, let, const를 사용한다

모두 변수를 선언하기 위해 사용하지만 각각의 기능에는 조금씩 차이가 있다

 

변수 선언

var

var title = 'book';

title = 'movie';

title = 'music';

중복 선언 O 재할당 O

 

var는 원조 변수 선언 방식으로 동일한 이름으로 중복 선언이 가능하다

즉, 마지막으로 할당된 값이 변수에 최종으로 저장된다

 

변수를 유연하게 사용할 수 있지만, 기존에 선언해둔 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있다

 

간단한 테스트에는 편리할 수 있으나, 길고 복잡한 코드에서 사용될 경우

어떤 부분에서 값이 바뀌고 문제가 발생하는지 파악하기 어렵다는 치명적인 단점이 있다

 

이를 보완하기위해 ES6 부터 추가된 변수 선언 방식이 let과 const이다.

 

 

let

let title = 'book';

let title = 'movie';
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';

중복 선언 X 재할당 O

 

중복 선언 시 해당 변수는 이미 선언되었다는 에러메시지가 나온다

즉, 중복선언은 불가하다

하지만 변수에 값을 재할당하는 것은 가능하다

 

const

const title = 'book';

const title = 'movie';
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'music';
//Uncaught TypeError: Assignment to constant variable

 

중복 선언 X 재할당 X

 

let과 const의 차이는 재할당 가능여부(immutable)이다

재할당 가능한 let과 달리

const는 재할당이 불가능하다

 

 

스코프(Scope)

var와 let, const는 유요한 참조 범위가 다르다

 

스코프(Scope)란 '변수에 접근할 수 있는 범위'를 말하는데

JavaScript의 스코프는 globar(전역)과 local(지역) 2가지 타입이 있다

 

전역 스코프는 어느곳에서든지 해당 변수에 접근할 수 있다는 의미이고

지역 스코프는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에서는 접근할 수 없다

 

JavaScript에서는 함수를 선언하면 함수를 선언할 때 마다 새로운 Scope를 생성한다

그러므로 함수 안에 선언한 변수는 해당 함수 안에서만 접근할 수 있는데

이를 함수 스코프 라고 하며, 함수 스코프는 지역 스코프에 해당한다

 

JavaScript는 기본적으로 함수 스코프를 따르는 언어!

 

 

블록 스코프

블록 스코프란 말 그대로 블록 { }이 생성될 때 마다 새로운 스코프가 형성되는 것을 의미한다

JavaScript는 원래 함수 스코프를 따르지만 let과 const의 등장으로 블록 스코프를 형성하는 것이 가능해졌다

👉 const

유효범위: 블록 스코프 / 함수 스코프

값 재할당 : 불가능

재선언 : 불가능

 

👉 let

유효범위: 블록 스코프 / 함수 스코프

값 재할당 : 불가능

재선언 : 불가능

 

👉 var

유효범위 : 함수 스코프

값 재할당 : 불가능

재선언 : 불가능

 

호이스팅(Hoisting) 방식

JavaScript 함수는 실행되기 전 함수내 필요한 변수값들을 모두 모두 모아

유효범위의 최상단에 선언한 것 처럼 동작한다 이런 방식을 호이스팅이라 한다

 

호이스팅 동작 방식

 

무엇을 쓰는게 가장 좋을까?

const는 의도치 않은 재할당을 방지해주기 때문에 안전하다

따라서 재할당이 필요없는 상수와 객체에는 기본적으로 const를 사용하는 것이 적합하다

재할당이 필요한 경우에만 한정적으로 let을 사용하는 것이 좋다

단, 이 때 변수의 Scope는 최대한 좁게 만드는 것이 좋다

 

 

참고

참고자료 1 / 참고자료 2 / 참고자료 3 / 참고자료 4