TIL_76_Scope

SCOPE??????????

스코프를 우리 말로 번역하면 "범위" 라는 뜻을 가지고 있다.
즉 스코프란 "변수에 접근할 수 있는 범위" 라고 말할 수 있겠다.
자바스크립트에선 스코프는 2가지의 타입이 있다.
바로. Global (전역) 과 Local (지역) 이다.

전역 스코프 Global Scope는 말 그대로 전역에 선언되어있어, 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미가 된다.

지역 스코프 Local Scope는 해당 지역에서만 접근할 수 있기 때문에, 지역을 벗어난 곳에서는 접근할 수 없다는 의미가 된다.

자바스크립트에서 함수를 선언하게 되면, 함수를 선언할 때마다 새로운 스코프를 생성하게 된다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있다. 이것을 함수 스코프 Function-Scoped 라고 한다. 함수 스코프가 지역 스코프의 예라고 할 수 있다.

아래 코드를 통해 전역 스코프와 지역(함수) 스코프의 예를 보도록 하자.

var a = 1; // 전역 스코프

function print() { // 지역(함수) 스코프
  var a = 11;
  console.log(a);
}

print();

console.log(a);

위의 코드에서 print 함수를 호출하면, console.log에 1이 출력될까?
아니면 11이 출력될까?

결과는 11이 출력된다.

이유는?
print 함수에서 console.log(a);는 a를 출력하기 위해 자신의 함수 스코프 안에서 변수 a가 있는지 찾을 것이다. 함수 안에 var a =11;를 찾아내면, 11을 console에 출력하게 되고 이 함수는 자신의 사명을 다하게 된다.

만약 print 함수 안에 변수 a의 선언을 지운다면?

var a = 1; // 전역 스코프

function print() { // 함수 스코프
  console.log(a);
}

print(); // 1

결과는 1을 출력한다.
함수 스코프 안에 a가 존재하지 않는데 전역 스코프에 선언되어있는 a의 값을 출력한 것을 알 수 있다.
이는 Scope Chain에 의해 일어나는 현상이다.
현재 자신의 Scope에서 사용하고자 하는 변수가 없다면, Scope Chain을 통해 해당 변수를 찾게된다.

함수 스코프 외에도 블록 스코프란 것이 존재한다.
Block이란 중괄호로 둘러싸인 부분을 블록 이라고 한다.
함수를 선언할 때, 중광호로 함수 본문을 둘러싸게 되는데 이 부분을 블록이라고 할 수 있다.

function print() { // 함수 블록
  console.log(a);
}

{ // 블록
  const a = '1';
}

기존 var의 경우 함수 스코프를 가졌기 때문에 함수 내에서만 지역 변수가 유지되는 문제가 있었는데 ES6 에서 let 과 const 가 등장하면서 함수가 아닌 일반 블록에서도 지역변수를 선언할 수 있게 되었다.

var, let, const에 대해서 추가로 벨로그를 남기도록 하겠다.