Javascript) 변수 유효 범위 (block scope, function scope)

안녕하세요, 코린이의 코딩 학습기 채니 입니다.

 

개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.

---

변수 유효 범위

block scope - const, let

function scope - var

 

block scope (const, let)

<script>
// 전역공간
const a = '안녕';

function test1() {
    console.log(a);

    const b = '잘가';   // 지역변수
    console.log(b);
}
// console.log(b); // Uncaught ReferenceError: b is not defined

for(let i = 0; i < 10; i++) {
    let k = i;
}
// console.log(i); // Uncaught ReferenceError: i is not defined
// console.log(k); //Uncaught ReferenceError: k is not defined
</script>

전역 공간에서 선언한 a 상수를 test1() 함수 내에서도 호출 할 수 있고, 함수 내에 선언된 지역변수 b는 해당 함수 내에서만 호출할 수 있습니다.

그렇다면 test1() 함수 내에서 선언된 지역 변수 b를 함수 외부에서 호출한다면, 찾을 수 없는 상수라는 에러가 발생하겠죠.

for문 또한 마찬가지 초기변수와 for문 내에서 선언한 상수 k를 for문 밖에서 호출한다면 당연히 에러가 발생합니다.

다른 언어를 배웠다면 당연한 원리임을 알 수 있습니다.

 

그에 반대된 function scope에 대해서 알아보겠습니다.

---

function scope (함수 스코프) - var

- 함수 블럭 외에는 무시

- 전역에 선언된 var 키워드는 window 전역 객체의 속성으로 등록

<script>
// 전역변수
for(var i = 0; i < 10; i++) {

}
console.log(i);

function test2() {
    console.log(i);

    var m = 99;
    console.log(m);

    // if 블럭은 함수블럭이 아니므로 안과 밖을 구분하지 않음
    // var 키워드는 변수 중복 선언을 허용
    if(true) {
        var m = 80;
    }
    console.log(m);
}
// console.log(m); //Uncaught ReferenceError: m is not defined
</script>

신기한 결과가 나온 것을 확인할 수 있습니다.

for문 초기 변수로 선언했던 i를 for문 밖에서도, 심지어 test2()함수 내에서도 출력할 수 있었습니다.

또한, var 키워드는 변수 중복 선언을 허용하기 때문에 test2()에서 지역변수로 선언한 m에 대해 if문에서 선언한 m이 대체 되어 if문이 끝난 후 m의 값은 99가 아닌 80이 출력된 것을 확인할 수 있습니다.

 

이러한 특징을 가진 var 키워드 대신 block scope인 let, const를 최근에는 주로 사용하게 됩니다. (쓰는 곳도 있음!)