[JavaScript]var, let, const 차이 및 함수 유효범위

이번 포스팅에서는 ES6부터 추가된 let, const 키워드를 사용하여 변수를 선언하는 방식 그리고 기존의 var 키워드를 사용하여 변수를 선언하는 방식의 차이점과 함수 유효범위에 대해 소개합니다.

 

목차

1. var
2. 함수 유효범위
3. let 또는 const
4. 결론

---

var

var 키워드로 선언된 변수는 값을 재할당 또는 수정할 수 있습니다.

var varValue = 100;

varValue = 200;

var 키워드로 선언된 변수는 함수 내부에서만 사용할 수 있으며, 함수 외부에 생성된 변수는 전역 변수입니다.

 

다음 코드에서 var로 선언된 변수는 함수 내부에서 선언되었기에 함수 외부에서는 사용할 수 없습니다.

function PrintVarValue() {
    var varValue = 100;
    console.log(varValue);
}

console.log(varValue); // 여기서 에러 발생

실행 결과

---

함수 유효범위

var varValue = 100;

if(varValue > 10) {
    var printValue = varValue * 2;
    console.log(printValue); // 200
}

console.log(printValue); // 200

중괄호( { } ) 내부에 선언된 printValue 변수를 외부에서 사용할 수 있습니다.

 

함수 내부에 선언되어있지 않으므로 'window' 또는 전역으로 사용할 수 있습니다.

 

즉, var 키워드는 중괄호( { } )에 국한되지 않습니다.

---

let 또는 const

let 또는 const 키워드로 변수를 선언하면, 중괄호( { } )에도 국한됩니다.

var varValue = 100;

if(varValue > 10) {
    const printValue = varValue * 2;
    console.log(printValue);
}

console.log(printValue); // 여기서 에러 let도 마찬가지

중괄호 내부에 const 또는 let으로 선언된 변수를 외부에서 사용하면 에러가 발생하며, JavaScript에서 중괄호의 범위를 블록(Block)라고 말합니다.

---

결론

• var는 함수 범위입니다.
• let과 const는 블록 범위입니다.
• 함수 범위는 함수 내부에 작성된 코드입니다.
• 블록 범위는 중괄호( { } ) 내부에 작성된 코드입니다.