[ JavaScript ] 스코프와 스코프 체인

스코프(Scope)

• 스코프는 변수나 매개변수에 접근할 수 있는 범위를 결정합니다.
• JS의 스코프는 함수 스코프와 블록 스코프로 나눌 수 잇습니다.
• 함수나 블록의 선언 위치에 다라 중첩된 스코프가 정의될 수 있습니다.

함수 스코프와 블록 스코프

• 함수 스코프
  • 함수 스코프는 이름 그대로 함수안에서 선언된 변수나 함수입니다

  • var키워드로 선언한 변수 혹은 함수는 함수 스코프를 따르기 때문에 블록을 무시하고 함수의 몸체 안에서 접근할 수 있습니다.

    function foo() {
    if(true){
      var a = 4  // <-- 조건문(if) 블록 안에서 변수 a선언
    }
    console.log(a) // 4 <-- if문의 블록을 무시하고 변수 a에 접근
    } 
    

• 블록 스코프

이처럼 블록 안에서만 유효하며 블록을 벗어나면 접근할 수 없습니다, 그리고 함수 스코프에 비해 훨씬 직관적이고 명료합니다. 변수가 블록 스코프를 갖도록 선언하는게 직관적이고 버그를 줄이는 방법중 하나입니다.

• 블록 스코프도 이름 그대로 블록{ }안에서 선언한 변수 혹은 함수입니다.

• let과 const키워드로 선언한 변수 혹은 함수는 블록 스코프를 따르기 때문에 함수 스코프의 문제점을 해결할 수 있습니다.

    	function foo() {
          if(true){
            const a = 4; // <-- 조건문(if) 블록 안에서 변수 a선언
          }
          console.log(a); // 4 <-- Uncaught ReferenceError : a is not defined
        }
      
  

렉시컬 스코프

• 프로그래밍의 언어의 스코프는 대부분 동적 스코프와 렉시컬 스코프 두가지 방식으로 동작합니다
• 동적 스코프는 런타임중 함수의 호출에 의해 결정됩니다.
• 렉시컬 스코프는 변수나 함수를 어디에 작성 하였는가에 기초하여 결정 됩니다.
• 대부분의 현대 프로그래밍 언어는 렉시컬 스코프 규칙을 따르고 있습니다.

스코프 체인

	function foo(){
      var a = 1;
      function bar(b){
        console.log(a,b)
      }
      bar(2)
    }

이 코드의 실행 단계는

1. 함수 foo 실행2. 변수 a 선언3. 함수 bar 선언4. bar 함수 실행

2. 변수 a 선언

3. 함수 bar 선언

4. bar 함수 실행

5. bar 함수 내부 console.log 메서드에서 참초된 변수 a를 찻기 위해 bar함수의 스코프로 부터 검색 시작

6. bar함수 내부에서 a를 찾을 수 없으므로 가장 가까운 상위 스코프foo함수로부터 변수a를 검색

7. foo함수로부터 변수 a를 찾아 검색 종료후 bar함수 내부의console.log메서드에 변수a를 출려후 foo함수 종료**

• 이 규칙은 매개변수 b를 찾을 때도 동일하게 적용되며 이 규칙을 렉시컬 스코프 라고 합니다.
• 렉시컬 스코프의 규칙은 함수 내부에서 변수나 함수를 찾을 수 없으면 상위 스코프로 올라가서 찾이만 반대로 상위 스코프에서 하위 스코프에 접근할 수 없습니다.
• 이러한 스코프들의 연결 관게를 스코프 체인이라고 하며, 스코프 체인을 따라 검색 하는 과정을 스코프 체이닝이라고 합니다.
• 여기서 중요한건 함수 스코프와 블록 스코프는 스코프의 단위(범위) 이며 렉시컬 스코프는 이 스코프(함수, 블록 스코프)들의 단위를 결정하는 규칙입니다.