자바스크립트 스코프(Scope) 이해하기( 렉시컬 스코프 )

객체와 마찬가지로 스코프 또한 중요한 개념중에 하나이다.

 

 

스코프(Scopr, 유효범위)

- 변수, 함수와 같은 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)를 사용할때 유효범위

- var, let, const 키워드로 선언한 변수의 스코프도 다르게 동작

- 다른 프로그래밍 언어의 스코프와 구별되는 특징이 있기 때문에 주의 필요

- 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고, 함수 몸체 외부에서는 참조할 수 없다. 스코프(유효범위)가 다르기 때문이다.

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

- 변수 자신이 선언된 위치에 의해 스코프가 결정

 

- 전역 변수는 어디서나 참조할 수 있다.

 

- 지역변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다. * 지역 변수를 전역에서 참조하면 에러가 발생한다.

- 스코프 체인 : 스코프가 함수의 중첨에 의해 계층적으로 연결

- 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 찾는다.

 

* 렉시컬환경

- 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 단방향으로 연결한 것

- 전역 렉시컬 환경은 코드가 로드되면 곧바로 생성되고 함수의 렉시컬 환경은 함수가 호출되면 곧바로 생성

---

함수 레벨 스코프

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

* let, const 변수는 블록 레벨 스코프를 지원

* var 키워드로 선언된 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정(if, for, while 등 에서는 전역 변수로 적용) 

---

렉시컬 스코프

- 자바스크립트는 렉시컬 스코프를 따르기 때문에 함수를 어디서 정의했는지에 따라 상위 스코프를 결정

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

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

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

- 함수가 호출 된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다.

- 즉 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

---

▶ 매개변수는 함수 내부에서만 참조할 수 있다.

- 매개변수의 스코프는 함수 몸체 내부 이다.

function add(x, y) {
  console.log(x, y); // 2, 5
  return x + y;
}

add(2, 5);

console.log(x, y) // ReferenceError: x is not defined

▶ 변수의 위치에 따라 전역변수, 지역변수로 나누어 진다.