[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1

[Javascript] 참조 범위를 결정짓는 스코프(scope) - 1

 

 

[ 모던 자바스크립트 딥다이브 책 혼자 스터디하기♩ ]

이번에는 let's get IT 자바스크립트 책 공부하면서 궁금했던스코프와 클로저 개념을 딥다이브 책을 통해 차근차근 공부하고자 한다.코드의 순서에 따라 실행되기도 하고, 실행되지 않기도 하는 것이 너무 궁금했다..책을 본다고 완전히 이해될지 모르겠다. 아무튼 공부해보자.

 

e-book 으로 구매한 딥다이브 책

 

---

 

 

1. 스코프

스코프는 변수를 검색할 때 사용하는 규칙. 즉, 식별자를 검색하는 규칙이다.

스코프는 전역 스코프와 지역 스코프로 나뉜다.

 

 

① 매개변수

함수 안에서 선언된 매개변수는 함수 안에서만 참조 가능하다.

함수의 바깥에서 매개변수에 접근한다면 정의되지 않는다고 뜰 것.

function R(x, y){
	return x * y ;
}	
console.log(x, y);  // x, y는 정의되지 않음

 

 

② 변수

변수가 선언되면 선언된 위치에 따라서 자신의 유효 범위가 결정된다.

 

 

③ 식별자

변수 뿐만아니라 다른 식별자가 모두 스코프를 가진다.

이때, 식별자는 함수이름, 변수이름, 클래스 이름 등이 될 수 있다.

 

식별자는 유일한 값을 가지는데, 이 식별자는 스코프를 통해 같은 변수 이름의 충돌을 막을 수 있다.

 

함수도 식별자에 할당되기 때문에 스코프를 가진다.

 

 

④ var (함수 스코프)

var 로 선언된 변수는 중복 선언이 허용된다.

이때 중복 선언된 변수는 재할당되어 그 값이 변경된다.

즉, 같은 변수라도 나중에 선언된 값으로 호출된다.

 

 

⑤ let, const (블록 스코프)

ES6에서 등장.

let, const 로 선언된 변수는 중복 선언이 불가능하다.

따라서 중복 선언됐을 때 이미 이 변수가 선언되었다는 오류 뜬다.

 

 

2. 전역 스코프

전역 스코프는 가장 바깥 영역에서 선언된 변수로의 스코프로, 어디서든지 참조할 수 있다.

 

 

3. 지역 스코프

지역 스코프는 함수 안에서 선언된 변수의 스코프이다.

함수 안에 중첩된 함수가 있을 경우, 지역 스코프는 자신의 지역 스코프와 중첩된 함수의 하위 지역 스코프에서 참조 가능하다.

 

 

4. 스코프 체인

함수의 몸체 안에서 선언된 함수를 중첩 함수라고 하고, 그 중첩 함수를 포함하고 있는 함수를 외부함수라고 한다.

 

이렇게 중첩이 될 수 있다는 것은 스코프가 함수의 중첩에 의해 계층적인 구조를 갖는다는 것을 의미한다.

그리고 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

 

상위 스코프 방향으로 이동하면서 선언된 변수를 탐색한다. 

따라서 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있게 되는 것

하위 방향으로 스코프를 참조하는 것은 절대 일어날 수 없음.

function a(){
  var z = 10;
  function b(){
      var y = 7;
      function c(){
          var x = 2;
          console.log(x);   // 2
          console.log(y);   // 7
          console.log(z);   // 10
      }
   }
}

 

 

5. 함수 레벨 스코프

함수에 의해서만 지역 스코프가 생성된다.

하지만 함수뿐만 아니라 모든 코드 블록이 지역 스코프를 만드는데 이를 블록 레벨 스코프라고 한다.

코드 블록에는 if, for, while, try, catch 등이 있다.

 

var 키워드로 선언된 변수는 함수의 코드 블록만 지역 스코프로 인정한다.

따라서 var 는 함수 레벨 스코프.

 

함수 레벨 스코프는 블록 레벨 스코프를 인정하지 않기 때문에 코드 블록 내에서 선언된 변수와 바깥에서 선언된 변수 모두 전역변수가 된다.

var a = 1; // 전역변수

if(true){
   var a = 2; // 전역변수, 변수 재할당
}

console.log(a); // 2

 

 

 

6. 렉시럴 스코프(정적 스코프)

렉시럴 스코프는 함수를 어디서 정의했는지에 따라 함수의 상위 스코프가 결정된다.

var x = 7; // 전역 변수

function ramin(){
   var x = 3;
   choi(); // 호출된 함수
}
 
function choi(){ // 정의된 함수
   console.log(x); 
}

ramin(); // 7
choi(); // 7

choi 라는 함수가 정의된 곳을 기준으로 전역변수는 x=7이다.

또한 ramin 이라는 함수는 choi 함수를 호출하기 때문에, 호출된 choi 라는 함수는 자신의 원래 상위 스코프인 x=7을 반환한다.

choi 와 ramin 은 서로 계층 구조가 아니기 때문에 choi 가 ramin 의 변수를 참조할 수 없고 전역변수만 참조할 수 있다?!