Scope

스코프(Scope)는 그 말대로 범위다. for문을 쓰든, if문을 쓰든 우리는 항상 중괄호({})를 열도 닫는다. 이 중괄호가 바로 범위를 뜻한다. 스코프가 하나라면 전혀 문제 없지만, 여러 개 중복된다면 매우 헷갈린다.

 

스코프는 크게 전역 스코프와  지역 스코프로 나뉜다. 이에 따라 해당 변수가 참조할 범위가 바뀐다. 코드를 보면서 살펴보자.

let a = 10;

for(let i = 1; i <= 10; I++ ){
a+= i;
}

if(a===65){
const b = 70
}

console.log(a, i, b)
// 65, undefined, undefined

 

코드 길이 많큼이나 아주 간단한 개념이다. 빈 화면이자 아무것도 둘러싸여있지 않은 곳에 선언한 a는 전역 스코프라 부른다. 해당 페이지 어느 곳에서 접근할 수 있기 때문이다. 그렇다면 for문 안에 있는 i는 10까지 돌면서 a에 자기 값을 더한다. if문을 보자 a가 65이상이라면 b라는 상수에 70을 넣는다. For문에 쓰인 i와 if문에 쓰인 b는 각각 중괄호 안에 있기 때문에 해당 중괄호 안에서만 쓰이는 지역 변수다. 이를 확인하기 위해 전역상태에서 a, I, b 값을 출력해보자. 65, undefined, undefined처럼 해당 값을 불러오지 못한 결과값을 볼 수 있다. 스코프 이해는 필수다. 같은 스코프내 동일한 변수를 사용할 수 없다. 변수, 즉 식별자의 유효 범위가 결정됐기 때문이다.

 

전역 스코프

코드 가장 밖의 영역에 선언된 변수.

 

지역 스코프

특정 코드 내 영역으로 보통 중괄호 안에 선언된 변수. 자신의 스코프와 하위 스코프 내에서 사용 가능.

 

함수 레벨 스코프 & 블록 레벨 스코프

지역 스코프는 함수에서 선언할 때와 단순 중괄호(혹은 코드 블록으로 인해)를 사용했을 때에 따라 달라진다. var로 선언한 변수는 함수 스코프만 지역 스코프로 인정하고(함수 레벨 스코프), let, const는 모든 코드 블록을 지역 스코프로 인정한다(블록 레벨 스코프).

 

렉시컬 스코프 & 정적 스코프

function foo() {
  var x = 10;
  bar();
}

function bar() {
  console.log(x);
}

foo(); // ?
bar(); // ?

 

상위 스코프 결정 방식에 따른 차이다. 함수를 어디에서 호출하는지에 따라 결정된다면 렉시컬 스코프, 어디에 선언했는지에 따라 바뀐다면 정적 스코프다. 즉, 위 코드를 렉시컬 스코프로 본다면 bar()의 상위 스코프는 foo()와 전역이다. 정적스코프로 본다면 상위 스코프는 전역 하나다.

 

마무리

사실 스코프는 예전에 const, let, var의 차이점을 서술하며 언급한 점이 있어서 어렵진 않았다. 글로 한 번 더 정리한 이유는 바로 클로저(Closure)때문이다. 스코프는 클로저를 이해하기 위한 사전 정리일 뿐…!

 

[poiemaweb] 스코프

※ 잘못된 내용이 있을 경우 댓글로 알려주세요. 배우고 익히고 수정하겠습니다:)