JavaScript

Lexical: 어휘의 Scope : 범위

scope란 변수의 유효범위를 나타내는 것이다.

Lexical Scope은 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 것이다.

 => 함수의 호출이 아니라 함수의 선언에 따라 결정된다는 것!

즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻이며, 가장 중요한 점은 함수의 호출이 아니라 

     함수의 선언에 따라 결정된다는 점이다.

다른 말로, 정적 스코프(Static scope)라 부르기도 하다.

let num = 1;

function a() {
  let num = 10;
  b();
}

function b() {
  let num = 10;
  function d() {
    console.log(num);
  }
  c();
  d(); // 10
}

function c() {
  console.log(num);
}

a(); // 1
b(); // 1
c(); // 1

 

JavaScript는 이미 실행 단계에서 코드들의 스코프를 결정한다.

b()의 상위 스코프가 무엇인지에 따라 결정된다.

JavaScript는 렉시컬 스코프( lexical scope)를 따르므로 함수를 선언한 시점에서 상위 스코프가 결정된다.

즉, 이 말은 함수를 어디에서 호출하였는지는 스코프에 아무런 의미를 주지 않는다는 뜻이다.

함수의 정의 

함수는 함수 정의 = 선언(function definition)를 통해서 생성됩니다.

함수는 일련의 과정을 문(statements)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 입니다.

 

변수 혹은 함수 선언과 정의 차이점은 뭘까?

선언(Declaration)은 코드 일부로서 변수나 함수가 있음을 알려주는 것이고 정의(Difinition)은 코드 일부로서 변수나 함수가 무엇인지 알려주는 것이다.

즉 있음을 알려주는 것이 선언, 무엇인지 알려주는 것이 정의이다.

int x; 라고 하면 x라는 변수가 사용될 것이라고 선언한 것이고 x=4;라고 하면 x변수는 4라고 정의한것이다. 만약 int x=4;라고 하였다면 선언과 정의가 동시에 한 것이다.

 

함수 호출(function definition)이란 미리 정의된 일련의 과정(함수의 정의), 정의된 함수를 실행하기 위해 필요한 입력인 인수를 매개변수를 통해 함수에 전달하여 함수실행 시키는 명령어이다.

그렇기 때문에 b()함수가 a()함수 안에서 호출된 것과 상관 없이 second()함수 자체가 global 범위에 선언되어 있으므로 global 범위에 있는 변수 x의 값이 2번 출력된 것이다!!

 

---

만약 함수의 호출로 상위 스코프가 결정된다면? 
함수의 호출에 따라 상위 스코프가 정해지는 것을 Dynamic Scope라고도 합니다. 
Perl, Bash Shell 등에서 Dynamic Scope를 따른다.

함수 b()의 상위 스코프는 자신을 호출한 함수 a()와 전역(global)을 가리키게 되어 
함수 a()를 호출하여 console.log()를 출력했을 때 x의 결과는 10이 출력될 것이다.

하지만 결과는 전역 변수 x의 값 1이 두 번 출력되었다.

이는 함수의 호출이 아니라 함수의 선언에 따라 상위 스코프가 결정된다는 것을 꼭 기억해야 한다.

---

 

자바스크립트 - 렉시컬 스코프(Lexical Scope)