자바스크립트의 스코프

자바스크립트에서 스코프(Scope)는 변수나 함수가 "어디서 접근 가능한지" 를 결정하는 유효범위를 의미한다. 쉽게말해,변수가 살아있는 공간이라고 보면 된다.

1. 스코프의 종류

자바스크립트의 스코프는 크게 두 가지 관점으로 나뉜다.

A. 전역 스코프(global scope)

• 어디서든 접근 가능한 범위
• 함수 바깥이나 중괄호 "{}" 바깥에 선언된 변수는 전역변수가 됨
• 주의: 너무 많은 변수를 전역에 두면 다른 코드와 이름이 겹칠 위험(전역 오염)이 있어 피하는 것이 좋음

B. 지역 스코프(local scope)

• 특정 구역 내에서만 접근 가능한 범위
• 지역 스코프는 크게 두가지로 나뉘는데

  ⓵ 함수 레벨 스코프

  • 함수내에서 선언된 변수는 그 함수 내에서만 유효
  • 과거 var키워드가 이를 따랐음

  ⓶ 블록 레벨 스코프 ✨✨

  • 중괄호 "{}"로 감싸진 블록(if문,for문 등) 안에서만 유효
  • ES6(모던 자바스크립트)의 let,const가 이를 따름

//블록 레벨 스코프
function testLet() {
  if (true) {
    let y = 20; // 블록 스코프 (if문 안에서만 생존)
    console.log(y); // 20
  }
  // console.log(y); // Error! (블록 밖이라 접근 불가)
}

2. 스코프 체인

변수를 찾을 때 자바스크립트 엔진이 탐색하는 순서이다. "내부에서 외부로" 단계별로 찾아 올라간다.
1. 현재 자신의 스코프에서 변수를 찾음
2. 없다면, 바로 위(부모) 스코프로 올라가서 찾음
3. 계속 올라가다가 전역 스코프에서도 못찾으면 에러(ReferenceError)가 발생

let globalColor = 'red';

function outer() {
  let outerColor = 'blue';

  function inner() {
    let innerColor = 'green';
    
    console.log(innerColor); // green (자신에게 있음)
    console.log(outerColor); // blue (부모에게 있음 - 스코프 체인)
    console.log(globalColor); // red (전역에 있음 - 스코프 체인)
  }
  inner();
}
outer();

3. 렉시컬 스코프 (Lexical Scope)

"함수를 어디서 호출했는가" 가 아니라 "함수를 어디에 선언했는가"에 따라 상위 스코프가 결정 된다는 규칙. (정적 스코프 라고도 함)
즉, 함수가 선언된 위치를 기준으로 범위를 결정한다는 뜻.

let number = 1;

function a() {
  let number = 10;
  b();
}

function b() {
  // b는 전역에 선언되어 있음.
  // 따라서 b의 상위 스코프는 전역 스코프임. a 함수 내부가 아님!
  console.log(number); 
}

a(); // 결과는? 1 (10이 아님)

설명: 함수 b가 a안에 호출되었지만, b가 선언(정의)된 곳은 전역이기 때문에 전역 변수 number=1 을 참조함

---