과거에 전역변수가 아닌 변수를 할당하는 방법은 한 가지,var를 사용하는 것 밖에 없었습니다. 하지만, 이제는 var, let, const처럼 여러가지가 있으며 적절한 사용방법도 다릅니다.
const (constant) 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다.
let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있습니다.
var (variable) 문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다.
일반적으로 var는 사용하지 않아도 됩니다. 그리고 사용하지 않는게 더 좋습니다.
- var 사용은 지양한다
- 재할당이 필요없는 경우 const를 사용한다.
- 재할당이 필요한 경우 let을 사용한다.
정리하면, 우선적으로 const를 사용하되 재할당이 필요한지 여부에 따라 let을 선택적으로 사용하면 됩니다.
그렇다면 var의 문제점 은 무엇일까요??
모든 변수를 var로 선언한다면 더 편하지 않을까? 라는 생각도 듭니다. (물론 아닙니다.)
먼저 scope(유효범위)에 문제가 있습니다.
var의 문제점 을 알아보기에 앞서 먼저 var의 Scope에 대해 알아보겠습니다.
ES2015 이전에는 JavaScript에는 Global Scope 및 Function Scope 의 두 가지 유형 만 있습니다.
1. var carName은 Global Scope (전역범위,글로벌스코프) 입니다.
var carName = "Volvo";
// code here can use carName
function myFunction() {
// code here can also use carName
}전역 변수는 JS 프로그램 어디에서나 접근할 수 있습니다.
2. var carName은 Function Scope (기능범위,함수스코프)입니다.
// code here can NOT use carName
function myFunction() {
var carName = "Volvo";
// code here CAN use carName
}
// code here can NOT use carName지역 변수는 함수 내에서만 접근할 수 있습니다.
3. var carName은 Block Scope (블록범위,블록스코프)를 가질 수 없습니다.
블록스코프가 없기 때문에 변수 carName을 블록 바깥에서도 사용할 수 있습니다.
{
var carName = "Volvo";
}
// carName CAN be used here다음 코드는 블록유효범위가 없기 때문에 발생하는 문제 입니다.
전역변수 x , 그리고 블록 내 변수 x 가 각각 다른 값을 가질까요?
var x = 10;
// Here x is 10
{
var x = 2;
// Here x is 2
}
// Here x is 2문제가 발생했습니다.
전역변수 var x가 덮어 씌워졌습니다.
var는 함수스코프는 갖지만 블록스코프는 갖지 못합니다.
var가 갖는 scope에 대해 이해하지 못하고 코딩했다면 버그가 발생했을 것 같습니다.
var는 블록스코프를 갖지 않습니다. 따라서, 블록 내의 var x 는 Scope가 전역범위 이므로 첫 줄에 선언한 var x 에 2가 덮어 씌워졌습니다.
블록내의 코드를 let으로 선언해보겠습니다.
var x = 10;
// Here x is 10
{
let x = 2;
// Here x is 2
}
// Here x is 10let이 블록유효범위를 갖기 때문에, 호출하는 위치에 따라 원하는 값을 얻을 수 있게 되었습니다.
사실, 여기까지 봤을 땐 문제점이 크게 와닿지 않습니다.
좀 더 흔히 발생하는 문제를 보겠습니다.
전역변수, 루프 내의 변수가 같은 변수명을 사용합니다.
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
// i는 10입니다.결과적으로 전역 변수 i에 10이 담기게 되었습니다.
최초에 전역변수 i는 5였습니다. 하지만, 루프안의 i가 실행 횟수만큼 반복해서 전역변수를 덮어씌웁니다.
이번에도 역시 해결책은 let을 사용하는 것입니다.
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
// i는 5입니다.let은 블록스코프를 갖습니다.
var가 블록스코프를 갖지 못하기 때문에 발생하는 문제 를
let이 해결해줍니다.
"우선적으로 const를 사용하되 재할당이 필요한지 여부에 따라 let을 선택적으로 사용하면 된다."라는 것에 충분히 공감하셨길 바랍니다! 읽어주셔서 감사합니다.
