TIL : 스코프

1. 스코프(Scope)란?

스코프의 정의는 "변수에 접근할 수 있는 유효범위"이다.

중괄호(블록)이나 함수에 의해 달라진다.

---

2. 스코프의 2가지 타입

1. 전역 스코프 (Global Scope)

전역에 선언되어 있어 어느 곳에서든 해당 변수에 접근 가능하다.

어디서나 접근 가능해서 이게 최고다!!라고 생각할 수도 있지만 오히려 Scope Pollution이라는 문제가 생길 수 있다. 전역변수를 선언하고 그 뒤 어떤 블록에서 그 변수를 다시 선언하면 그 변수의 값은 변하게 되는 것이다. 

 

2. 지역 스코프 (Local Scope)

크게 함수 스코프와 블록 스코프로 나뉜다.

함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데 이를 함수 스코프라고 한다.

블록은 중괄호({})를 의미하는데, 이 중괄호로 둘러싸인 안에서 변수를 선언하면 블록 스코프라고 한다. 블록 스코프는 var로 변수를 선언하는 함수 스코프와 달리 const나 let으로 변수를 선언한다.

var a = 'global'; // 전역 스코프

function ex() {
  var a = 'local'; // 지역 스코프
  console.log(a);
}

ex(); // local
console.log(a); // global

---

3. 스코프 체인(Scope Chain)

다음 예시를 보면, 지역 스코프를 보면 변수를 선언하지 않고 있다. 그런데 ex 함수를 실행시켜보면 전역 스코프에서 선언했던 값이 출력되는 것을 확인할 수 있다. 이렇게 하위 스코프(지역 스코프)에서 상위 스코프(전역 스코프)를 참조할 수 있는 것은 스코프 체인이란 개념 때문이다. 스코프 체인은 계속 범위를 넓혀가며 변수를 찾는 관계이다.

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

function ex() { // 지역 스코프
  console.log(a);
}

ex(); // 1

→ 하위 스코프는 상위 스코프를 참조할 수 있다. 그러나, 상위 스코프는 하위 스코프를 참조할 수 없다.