[JavaScript] 자바스크립트 스코프(scope) 가볍게 이해하기

스코프(Scope)란? 

Scope. 자바스크립트에서 스코프는 우리말로 유효 범위라고 해석하는데, 유효 범위로 번역하는 글도 많이 있지만 그냥 한글 그대로로 스코프라는 용어를 상대적으로 더 많이 사용하는 것 같다.

아무튼 말그대로 어떤 값이 영향을 미칠 수 있는 범위를 스코프라고 말한다.

 

깊은 내용들을 다루려면 scope도 생각보다 심오하고 디테일하게 다룰 수도 있다는 걸 최근에서야 깨닫게 되었는데, 아직 확실하게 이해하는 경지에는 도달하지 못했기 때문에, 이번 포스트에서는 이후에 정리할 개념들을 이해하는데 도움이 될만한 수준의 스코프에 대해서만 가볍게만 다루고자 한다.

 

아무튼,

스코프는 크게 전역 범위(Global Scope)와 지역범위(Local Scope) 두 가지로 나뉜다.

 

코드를 살펴보자.

let globalNumber = 7;

function showNumbers() {
    let localNumber = 5;
    console.log(globalNumber);
    console.log(localNumber);
}

showNumbers();
console.log(localNumber);

위 코드를 실행시키면 다음과 같이 출력이 된다.

 

전역 스코프(Global Scope)

위 코드에서 globalNumber 라는 변수를 보자. 가장 윗줄에서 선언할 때 숫자 7일이라는 값을 할당했고 showNumbers 함수 내부에서 접근하고 있다. 아홉 번째 줄에서 showNumbers함수를 호출했고 실행한 결과로 다섯번째 줄을 통해서, 콘솔에서 가장 위에 숫자 7이 출력된 것으로 이 변수가 함수 내부에서도 잘 접근되었다는 것을 확인할 수 있다.

 

이처럼 전역스코프는 말 그대로 어느 영역에서든 접근할 수 있는 범위를 말한다.

전역 스코프는 생각보다 간단하다. 어떤 중괄호에도 들어가지 않고, (일반적인 코딩 컨벤션을 지킬 경우) 아무런 들여 쓰기 없이 가장 바깥쪽에 선언된 값이면 어디서든 접근해도 접근이 가능한 개념이다.

 

지역 스코프(Local Scope)

이번엔 localNumber 라는 변수를 보자. 이 변수는 globalNumber와 다르게 함수 내부에서 선언되었고, 함수 내부에서도 이 변수에 접근하고 있고, 마지막 줄에서도 이 변수에 접근하고자 한다. 아홉 번째 줄에서 showNumbers함수를 호출하고 실행한 결과로 여섯 번째 줄에서는 숫자 5가 잘 출력되었지만, 마지막 줄에서는 ReferenceError가 발생하면서 localNumber가 선언되지 않았다고 말한다.

 

지역스코프도 이름에서 알 수 있듯 특정한 영역에서만 접근이 유효한 범위를 말한다.

위 예시에서도 볼 수 있듯 지역 스코프는 선언 시점이 중요한 부분이다.

 

이 지역 스코프는 또다시 그 특성에 따라서 여러 가지 이름으로 세분화되는데, 일반적으로는 크게 블록 스코프와, 함수 스코프로 나눌 수 있다. 스코프는 대부분 이름에서도 그 기능을 유추하기 쉬운데, 블록 스코프는 말 그대로 블록 문에 지역 스코프 개념이 적용되는 것이고, 함수 스코프는 함수에서만 지역 스코프의 개념이 적용되는 것이다.

 

함수 스코프(Function Scope)

함수 스코프는 방금 본 예시와 똑같은 원리이다. 함수 내부에서 선언된 변수나 함수는, 함수 내부에서만 유효하고 함수 밖에서 참조될 수 없다는 개념이다.

블록 스코프(Block Scope)

자바스크립트에서 중괄호는 대부분의 문법에 모두 등장하고, 특별히 어떠한 문법이 아니더라도 그냥 중괄호로 코드를 감싼 것 만으로도 유의미한 동작들을 만들어 낸다.

사실 초창기 자바스크립트는 블록 스코프가 존재하지 않았었다. let과 const 라는 키워드로 변수를 생성할 수 있게 된 시점부터 이 블록 스코프가 등장하게 되었는데, 다음 코드를 살펴보자.

{
    let x = 3;
    console.log(x);
}

console.log(x);

위 코드의 실행결과는 다음과 같다.

자바스크립트에서는 중괄호 안에서 선언된 변수들은 중괄호 안에서만 유효하고 그 밖에서 접근할 수가 없다.

이것이 블록스코프의 개념이다. 당연히 반복문, 조건문 내에서도 지역 스코프의 개념은 유효하게 된 것이다. 

 

다만, let과 const 키워드로 선언된 변수에 한해서만 유효하다. var로 선언한 변수나, 함수 선언문으로 선언된 함수는 함수 스코프를 갖기 때문에 블록 스코프의 개념이 적용되지 않는다.

{
  var x = 3;
  console.log(x);
}

console.log(x);

 

마무리

일반적으로 값을 담는 수단으로 변수가 가장 대표적이다보니 변수의 스코프를 스코프 전체의 개념으로 설명한다거나 그렇게 이해하면서 스코프에 대한 오해가 생겨버리는 경우를 종종 봤었다. 하지만, 자바스크립트에서 변수는 어떤 키워드로 선언하는지에 따라 변수의 스코프가 달라지고, 심지어 값으로 사용되는 함수는 선언문으로 선언될 경우, 함수 스코프를 가지고 있기 때문에 변수의 스코프 개념 자체가 스코프 개념 전체를 아우르지 않는다는 것을 한 번 더 강조하고 싶다. 변수는 변수, 스코프는 스코프라는 것을 명확하게 구분하는 것이 좋을 듯하다.