[모던자바스크립트] 13. 스코프

✅ 스코프

• 식별자가 유효한 범위
• 모든 식별자(변수 이름, 함수 이름, 클래스 이름)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정되는데 이를 스코프라고 함
• 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 => 식별자 결정의 기준
• 스코프를 통해서 식별자인 변수이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함 => 스코프는 "네임스페이스"

✅ 스코프의 종류

구분	설명	스코프	변수
전역	코드의 가장 바깥 영역	전역 스코프	변수 스코프
지역	함수 몸체 내부	지역 스코프	지역 변수

• 전역 변수는 어디서든지 참조할 수 있음
• 지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효

✅ 스코프 체인

• 스코프가 계층적으로 연결된 것
• 스코프는 함수의 중첩에 의해 계층적 구조를 갖음
  • 함수의 중첩 : 함수 몸체 내부에서 함수가 정의된 것
  • 중첩 함수 : 함수 몸체 내부에서 정의한 함수
  • 외부 함수 : 중첩 함수를 포함하는 함수
• 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색
  • 즉, 상위 스코프에서 유효한 변수는 하위 스코프에서 자유롭게 참조 가능
  • 하지만 하위 스코프에서 유효한 함수를 상위 스코프에서 참조할 수 없음

✅ 함수 레벨 스코프 vs 블록 레벨 스코프

✔️ 함수 레벨 스코프

• 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성

• var키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정

  var x = 1;
  if (true) {
  	var x = 10;
  }
  
  console.log(x); // 10

  • 함수 밖에서 var키워드로 선언된 변수는 코드 블록 내에서 선언되었다 할지라도 모두 전역 변수
  • 따라서 x는 전역변수. 이미 선언된 전역 변수 x가 있기 때문에 if문 안에서는 중복 선언

✔️ 블록 레벨 스코프

• 대부분의 프로그래밍 언어는 함수 몸체뿐만 아니라 다른 모든 코드 블록(if, for, while, try/catch 등이 지역 스코프로 인정됨
• let, const 키워드는 블록 레벨 스코프를 지원

✅ 렉시컬 스코프

• 동적 스코프 : 함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정
• 정적 스코프 / 렉시컬 스코프 : 함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정
• 자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따름

var x = 1;

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

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

foo(); // 1
bar(); // 1

• 결과는 1이 두 번 콘솔창에 찍히게 된다
  • var키워드는 함수의 코드 블록반 지역 변수로 인정한다.
  • 그렇기 때문에 처음 foo()함수를 호출하게 되면 x가 10일지라도 bar()함수가 호출되면서 전역변수 x를 참조하게 된다.