[자바스크립트] 스코프

스코프란?

• 식별자 접근 규칙에 따른 유효 범위를 말한다.
• 식별자(변수, 함수, 클래스)에 접근할 수 있는 범위가 존재한다.
• 범위는 중괄호 또는 함수에 의해 나눠지고, 그 범위를 스코프라고 부른다.

스코프의 종류

스코프는 블록 스코프와 함수 스코프가 있다. (화살표 함수는 함수 스코프가 아니다.)

블록 스코프

블록 레벨 스코프란 코드 블록({…})내에서 유효한 스코프를 의미한다. 여기서 “유효하다”라는 것은 “참조(접근)할 수 있다”라는 뜻이다.

ES6에서는 let과 const가 도입되면서 이 둘은 블록 스코프를 가진다.

함수 스코프

함수 레벨 스코프란 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 함수 외부에서는 유효하지 않다(참조할 수 없다)는 것이다.

var 키워드가 함수 스코프를 가진다.

---

동적 스코프 VS 렉시컬 스코프

• 동적 스코프 : 함수가 호출 되는 순간에 상위 스코프를 결정
• 렉시컬 스코프 : 함수가 선언 되는 순간에 상위 스코프를 결정

렉시컬 스코프

자바스크립트를 비롯한 대부분의 프로그래밍 언어는 렉시컬 스코프를 따른다.

렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정된다. 자바스크립트는 렉시컬 스코프를 따르므로 함수를 선언한 시점에 상위 스코프가 결정된다. 함수를 어디에서 호출하였는지는 스코프 결정에 아무런 의미를 주지 않는다. 위 예제의 함수 bar는 전역에 선언되었다. 따라서 함수 bar의 상위 스코프는 전역 스코프이고 위 예제는 전역 변수 x의 값 1을 두번 출력한다.

Q. JS에서 dynamic scope(동적 스코프), lexical scope(렉시컬 스코프)에 대해 설명하세요

Keyword

상위 scope, 함수가 정의된 위치, 함수가 실행되는 위치

먼저 자바스크립트의 함수에서 상위 scope를 결정하는 방식은 lexical scope입니다. lexical scope는 함수가 정의된 위치에 따라서 함수의 상위 scope를 결정합니다. 그래서 이 방식을 static scope(정적 스코프)라고도 부릅니다. 반면, dynamic scope는 함수가 실행되는 위치에 따라서 함수의 상위 스코프를 결정합니다.

• 렉시컬 환경은 정적으로 실행과 관련된 scope와 식별자를 실행 콘텍스트에서 참조하며, Function 오브젝트를 만들 때 정적으로 스코프가 결정되므로 식별자를 해결할 때 검색 속도가 빠릅니다.

var x = 1;

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

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

foo(); // ?
bar(); // ?