[JavaScript] 변수의 유효성 범위 (변수의 스코프)

변수의 유효성 범위 (변수의 스코프)

JavaScript에서 객체나 함수는 모두 변수라 칭하며, 해당 변수가 접근할 수 있는 변수, 객체, 함수의 집합을 변수의 유효성 범위 (변수의 스코프)라고 부른다. 변수의 유효성 범위에 따라 지역 변수와 전역 변수로 나뉘게 된다.
전역 변수는 전역 스코프에서 선언한 변수인데, 전역 스코프란 가장 바깥쪽의 스코프를 뜻한다. 반대로 지역 변수는 지역 스코프에서 선언한 변수이며, 전역이 아닌 다른 스코프는 모드 지역 스코프라고 부른다.
지역 변수는 전역 변수보다 더 높은 우선 순위를 가지게 된다.

스코프의 주요 규칙

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근이 가능하지만 반대는 불가능하다.
   1. 바깥쪽 스코프에서 선언한 식별자는 안쪽 스코프에서 사용이 가능하다.
   2. 안쪽 스코프에서 선언한 식별자는 바깥쪽 스코프에서 사용이 불가능하다.
2. 스코프는 중첩이 가능하다.

var 키워드로 선언된 변수의 경우

블록{} 안에서 선언된 변수는 블록의 실행 여부에 따라 블록 밖에서의 식별 여부가 결정되며, 블록을 갖는 부분이 실행되지 않을 경우에는 블록 안에서 선언된 변수를 블록 밖에서 사용할 때 할당되지 않은 undefined가 된다.

1. 조건문이 실행되지 않는 경우

if문의 실행 여부에 따라 num1이 선언되며, num1의 식별 가능 여부가 결정된다. num1을 식별하지 못 할 경우, 정의되지 않은 값(undefined)가 된다.

if (false) {
    var num1 = 100;
    console.log("블록안: " + num1);
}

console.log("블록밖: " + num1);

/** 결과 **/
블록밖: undefined

2. 조건문이 실행되는 경우

if (true) {
    var num2 = 100;
    console.log("블록안: " + num2);
}

console.log("블록밖: " + num2);

/** 결과 **/
블록안: 100
블록밖: 100

let 키워드로 선언된 변수와 const 키워드로 선언된 상수의 경우

블록 밖에서 선언된 변수는 블록 안으로 침투가 가능하며, 블록 안에서 선언된 변수는 블록을 빠져나올 수 없다.
변수의 범위가 블록 안으로 한정되므로 서로 다른 블록끼리는 중복 선언이 가능하다.

let num3 = 100;
if (true) {
    //블록 밖에서 생성된 변수를 블록 안에서 사용 가능
    let num4 = num3 + 100;
    console.log("블록안: " + num4);
}

// let으로 선언된 변수는 if문의 실행 여부와 상관 없이 블록을 빠져나올 수 없음 --> 프로그램 에러
console.log("블록밖: " + num4);


/** 결과 **/
블록안: 200

console.log("블록밖: " + num4);
                      ^

ReferenceError: num4 is not defined

for문의 초기식에 대한 유효성 범위

var 키워드를 사용한 경우에는 초기식에서 선언된 변수가 for문 밖에서 식별 가능하지만, let 키워드를 사용한 경우에는 초기식에서 선언된 변수는 식별이 불가능하다.

1. for문의 초기식으로 var를 선언한 경우

for (var i=0; i<10; i++) {
    console.log("반복문 안 ::: " + i);
}
console.log("반복문 밖 >>> " + i);


/** 결과 **/
반복문 안 ::: 0
반복문 안 ::: 1
반복문 안 ::: 2
반복문 안 ::: 3
반복문 안 ::: 4
반복문 안 ::: 5
반복문 안 ::: 6
반복문 안 ::: 7
반복문 안 ::: 8
반복문 안 ::: 9
반복문 밖 >>> 10

2. for문의 초기식을 let으로 선언한 경우

for (let j=0; j<10; j++) {
    console.log("반복문 안 ::: " + j);
}

// for문의 초기식도 {}에 속한 것으로 보기 때문에 j값은 for 블록을 빠져나올 수 없음
console.log("반복문 밖 >>> " + j);


/** 결과 **/
반복문 안 ::: 0
반복문 안 ::: 1
반복문 안 ::: 2
반복문 안 ::: 3
반복문 안 ::: 4
반복문 안 ::: 5
반복문 안 ::: 6
반복문 안 ::: 7
반복문 안 ::: 8
반복문 안 ::: 9
console.log("반복문 밖 >>> " + j);
                           ^

ReferenceError: j is not defined

선언되지 않은 변수의 경우

let 키워드는 반드시 '선언 -> 할당'의 순서로만 사용이 가능하지만, var 키워드는 할당 후에 선언이 가능하다.

/** let 키워드 **/
x = 100; //할당
let x; //선언
console.log(x);

/** var 키워드 **/
y = 200;
var y;
console.log(y);


/** 결과 **/
x = 100; //할당
  ^

ReferenceError: Cannot access 'x' before initialization

200

 

 

참고

https://okayoon.tistory.com/entry/%EC%8A%A4%EC%BD%94%ED%94%84Scope%EB%9E%80

https://hanamon.kr/javascript-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%EB%B3%80%EC%88%98%EC%84%A0%EC%96%B8%ED%82%A4%EC%9B%8C%EB%93%9C-%EC%B0%A8%EC%9D%B4%EC%A0%90/