• 스코프란, 식별자를 찾아내기 위한 규칙으로 사용되며, 변수에 접근할 수 있는 범위를 의미합니다.
• 스코프는 두 가지로 구분할 수 있습니다.
  • 코드 어디서나 참조할 수 있는 전역 스코프
  • 함수 선언 시 만들어지는 블록 내의 스코프로, 함수 자신과 함수 몸체 내에 선언된 하위 함수에서만 참조할 수 있는 지역 스코프

var a = 'global varible'; // 전역 스코프에 있는 변수는 코드 어디서나 참조할 수 있다!

function print() {
  // 함수 블록 내에 있는 변수는, 함수 자신과 함수 몸체 내의 하위 함수에서만 참조할 수 있다!
  var b = 'local varible'; 
  console.log(a); // global varible
  console.log(b); // local varible
}

print();

• 자바스크립트에서는 두 가지 레벨의 스코프를 사용할 수 있습니다

  • var 키워드로 선언된 변수는 함수 레벨의 스코프를 따릅니다
    • 함수 레벨 스코프 : 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않은 스코프

  
  // 함수 레벨 스코프
  var a = 1;
  
  {
    var a = 10; // var 키워드로 선언된 식별자가 재선언됨 (함수 레벨 스코프)
    console.log(a); // 10 : 가장 가까운 이름 a의 식별자 참조 
  }
  
  // 함수 레벨 스코프를 따르므로, 블록에는 구애받지 않음
  // 즉, console에 출력되는 a는 var a = 1인 변수를 재활용한 것임
  console.log(a);   // 10
  
  

  // 함수 레벨 스코프
  var a = 1;
  
  function print(){
    var a = 10; // 독립적인 식별자 생성 (재선언이 아님)
    console.log(a); // 10 : 가장 가까운 이름 a의 식별자 참조 
  }
  
  print(a); 
  
  // 함수 레벨 스코프를 따르므로, 함수 코드 블록에 영향을 받음
  // print() 내의 식별자 a는, print() 바깥의 식별자 a와 독립적임
  console.log(a); // 1
  

  • let, const 키워드로 선언된 변수는 블록 레벨의 스코프를 따릅니다.
    • 블록 레벨 스코프 : 코드 블록 내에서 유효한 스코프

  // 블록레벨 스코프
  let a = 1;
  
  {
    let a = 10; // 블록 레벨 스코프를 따르므로, 독립적인 식별자 선언
    console.log(a); // 10 : 가장 가까운 이름 a의 식별자 참조 
  }
  
  // 블록 레벨 스코프를 따르므로, 블록에 영향을 받음
  // 블록 내의 식별자 a는, 블록 바깥의 식별자 a와 독립적임
  console.log(a);   // 1
  

• 스코프 체인

  • 자바스크립트 엔진은 식별자를 찾을 때 우선, 일단 자신이 속한 스코프에서 찾습니다.
  • 이 때, 해당 스코프에 식별자가 없으면, 해당 스코프를 포함하는 상위 스코프에서 식별자를 찾아나갑니다. 이 연결고리가 스코프 체인입니다.

  // 예시 : 함수 레벨 스코프 - var
  
  var a = 10;
  
  function print(){
  // 함수 내에는 a라는 식별자가 없음
  // 이 때, 값을 출력하기 위해 상위 스코프로 이동하여 식별자를 탐색함
  	console.log(a); // 10
  }
  
  print(); 
  

  const number = 10;
  
  {
      const number2 = 30;
  
      {
  				// 현재 스코프에는 number라는 식별자가 존재하지 않음
  				// 현재 스코프를 포함하는 상위 스코프로 이동해, 식별자를 찾아나감 
          console.log(number); // 10
      }
  }