[ONEBITE-REACT] JS 기본 - 스코프 (Scope)

의미

• 우리말로 '범위'를 뜻함.
• 변수나 함수에 접근하거나 호출할 수 있는 범위를 말함.

종류

지역 스코프 (Local Scope)

지역 스코프란, 함수 내부에서 선언된 변수는 해당 함수 내에서만 유효하다는 것을 의미한다.
함수 외부에서는 함수 내부에서 선언된 변수에 접근할 수 없다.
이렇게 함수 내부에서 선언된 변수를 지역 변수(Local Variable)이라 한다.

function myFunction() {
    let a = 1;
}

console.log(a);

위와 같은 코드가 있을 때 콘솔에 a를 출력하면 1이 출력될 것 같지만, 아래와 같은 에러가 발생한다.

에러의 내용은 a라는 변수가 정의되지 않았다는 의미이다.

즉 let a라는 변수를 분명히 선언했고, 값으로 1을 담아 초기화 했음에도 a라는 변수를 인식하지 못하는 것이다.
이유는 변수 a에 접근할 수 있는 영역, 즉 scope은 이 변수가 사용된 함수 내에서만 가능한 지역 변수이기 때문이다.
즉 myFunction {} 이 중괄호 내부에서만 a라는 변수에 접근할 수 있고 호출할 수 있는 것이다.
이 함수의 바깥에서는 console.log(a)와 같이 호출해도 인식할 수 없다.

함수 내부가 아니라 조건문 내부에서 선언된 변수 또한 지역 스코프에 갇히게 되어 지역 변수가 된다.

if (true) {
    let c = 1;
}

위와 같은 조건문 내부에서 선언된 변수 c도 지역 변수가 되고, 지역 스코프에 갇히게 되어 이 조건문 외부에서 지역 변수 C에 접근하거나 호출할 수 없다.
즉 {} 이런 코드블럭 안에 갇히게 되면 지역 스코프를 형성하게 된다는 의미이다.

변수 뿐만 아니라 함수 안에서 선언된 함수 또한 지역 스코프를 갖게 되어 외부에서 호출할 수 없다.

function myFunction() {
    let myNumber = 1;
    console.log("Local Scope");
    function yourFunction () {
    }
}

위 예시가 올바른 코드는 아니지만 함수 내에서 선언된 함수 또한 지역 스코프가 형성이 되어 외부에서 yourFunction()을 실행시킬 순 없다.
단 함수 안에서 선언된 함수가 지역 스코프를 갖는다는 것이고, if와 같은 조건문이나 for과 같은 반복문 내부에서 선언된 함수는 지역 스코프를 갖지 않고 전역 스코프를 가진다. 따라서 프로그램 전체에서 이 함수에 접근할 수 있다.

그런데 보통 if 조건문이나 for 반복문 내에서 함수를 선언하는 일은 거의 없기 때문에 쉽게 함수 내에서 함수를 선언할 때는 지역 스코프를 갖는다라고 이해하면 된다.

전역 스코프 (Global Scope)

전역 스코프란, 코드를 입력하는 어떤 라인에서도, 즉 프로그램 전체에서 유효한 범위를 말한다.
전역 스코프에서 선언된 변수는 전역 변수(Global Variable)이라 한다.

전역 변수의 예시는 우리가 흔히 변수를 선언하는 let a = 1;등이 그 예시이며 조건문이나 반복문, 함수 등에 갇히는 형태가 아니기 때문에 어디서든 접근하고 호출할 수 있는 것이다.

let a = 1;

console.log(a); /// 이렇게 전역 스코프에서 선언된 전역 변수는 어디에서든 접근하고 호출할 수 있다.