[JS] Scope

Scope

javascript는 다른 일반적인 프로그래밍 언어와 동일하게 변수를 선언, 데이터 할당, 참조하는 기능을 가지고 있다.

Scope는 이러한 참조 대상 식별자(변수 등)의 유효범위에 대한 규칙이고, 변수의 접근성, 생존범위를 의미한다.

메모리 구조

 

 

 

 

메모리의 가장 낮은부분인 코드영역은 실행할 코드가 저장되는 영역이다.

 

 

데이터 영역은 프로그램의 전역변수 그리고 정적변수가 저장되는 영역이다.

프로그램이 시작되면 할당되며 프로그램이 종료되면 소멸된다.

 

힙(heap)영역은사용자가 직접 관리를 하는 영역이다.

사용자가 메모리를 동적으로 관리할 수 있고 메모리의 낮은 주소에서 높은 주소의 방향으로 할당된다. (화살표)

 

 

 

 

스택 영역은 지역변수와 매개변수가 저장되는 영역이다.

함수가 호출될 경우 할당되며 함수의 호출이 완료되면 소멸되며, LIFO 형태이다.

 

 

 

 

 

 

 

 

예를 들어 다음과 같은 프로그램 코드가 있다.

let str = "문자열";
function parent() {
   function child() {
       const output = "";
       return string;
   }
   return "";
}

여기서 함수 parent가 스택 영역의 가장 아래에 할당되고 그 위에 함수 child가 할당된다. 그리고 그 위에 output 변수가 할당되며 함수가 child종료되며 output변수가 소멸된다. 그 다음 chlid 함수가 소멸되고 그다음 parent함수가 종료되면 parent 함수가 소멸되는 방식이다. 

 

위의 코드에서 변수 str은 전역변수가 되며 코드 어디에서든 참조가 가능하다. 그리고 변수 output의 scope는 child 함수내의 output 변수가 선언된 시점으로부터 child함수가 종료될때 까지이며 child함수 내부에서만 참조가 가능하다. (3번째 라인 ~ 5번째 라인 사이가 output 변수의 scope이다.)

어떤 함수의 외부에서 선언된 변수는 해당 함수에서 참조가 가능하다.

 

let str1 = "문자열1";
let str2 = "문자열2";

function Fn(){
    let var1 = "val";
    if(var1 === "val"){
      let str1 = "Fn문자열1";
      let str2 = "Fn문자열2";

      console.log(str1);
      console.log(str2);
    }
    
    console.log(str1);
    console.log(str2);
}

다음과 같은 프로그램이 있다고 가정할 때,

if문 안의 str1, str2는 "Fn문자열1", "Fn문자열2"이라고 출력되고,

if문 밖의 str1, str2는 "문자열1", "문자열2"라고 출력된다.

각각 console.log는 현재 scope내에서 먼저 변수를 탐색하고 그 다음 scope내에서 변수를 탐색하고 마지막엔 전역 scope를 탐색한다.

Scope Chain

Scope간 상하 관계를 의미한다.

const _val = "전역변수";
function outer() {
  function inner() {
    console.log(_val);
  }
  inner();
  console.log(_val);
}
outer();

outer함수에서 _val변수를 출력한다.

먼저 _val함수를 outer스코프 내에서 확인한다.

outer 스코프 내에서 _val 변수가 없으므로 전역범위에서 _val을 찾는다.

_val변수를 찾았다면 _val을 출력한다

_val변수가 없다면 오류가 난다.

inner함수의 _val를 출력하는 방법도 같다

먼저 inner함수 스코프에서 _val를 찾고, 없다면, 상위 스코프인 outer함수내에서 _val를 찾고 찾지 못했다면 전역범위에서 _val를 찾는다.

이러한 형태를 Scope Chain이라고 한다.