모던 자바스크립트 Deep Dive 13장

모든 변수는 스코프를 가지게 됩니다.
따라서 변수의 관점에서 스코프를 구분하면 다음과 같이 2가지로 나눌 수 있습니다.

• 전역 스코프
• 지역 스코프

변수 선언 위치에 따라서 스코프를 가지게 되는데, 전역에서 선언된 변수의 경우에는

전역 스코프를 가진 전역 변수가 되는 것이며, 지역에서 선언이 되면 지역 스코프를 갖는 지역 변수가 되는 것입니다.

 

자바스크립트 스코프의 특징
자바스크립트의 스코프는 타 언어와는 다른 특징을 갖게 됩니다.
대부분의 C 기반 언어들은 블록 레벨 스코프(block-level scope) 를 따릅니다.
하지만 자바스크립트는 함수 레벨 스코프(Function-level scope) 를 따릅니다.
주의할 점은 화살표 함수는 함수 스코프가 아니라 블록 스코프를 따릅니다.

※ 여기서 블록이란?
블록은 하나 이상의 구문을 그룹화할 때 사용이 되며, 중괄호 {} 세트 안에 있는 코드를 말합니다.
함수 레벨 스코프(Function-level scope)
함수 레벨 스코프는 함수의 코드 블록만을 스코프로 범위 합니다.
따라서 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 접근할 수 없습니다.
또한 함수 내부에서 선언한 변수는 지역 변수가 되며 함수 외부에서 선언한 변수는 모두 전역 변수입니다.
그리하여 전역 변수를 남발할 가능성을 높이므로 주의해야 합니다.
var 키워드로 선언한 변수들은 오로지 함수 스코프 만을 따릅니다.

블록 레벨 스코프(block-level scope)
블록 레벨 스코프는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없습니다.
코드 블록 내부에서 선언한 변수는 지역 변수입니다.
기존의 자바스크립트에서는 함수 스코프만을 따랐지만,
ES6부터 let과 const 키워드가 추가되면서 블록 스코프를 따를 수 있게 되었습니다.

13.2.1 전역과 전역 스코프

13.3 스코프 체인

 

 전역 스코프

x	"global x"
y	"global y"
outer	<function object>

↑

↑

outer 지역 스코프

z	"outer's local z"
inner	<function object>

↑

↑

inner 지역 스코프

x	"inner's local x"

 

13.3.2 스코프 체인에 의한 함수검색

 

function foo() { 
    console.log('global function foo');
}

function bar() { 
    function foo() { 
        console.log('local function foo');
    }
    foo();
    console.log('global function bar');
}

bar();

 

 

 

13.5 렉시컬 스코프

-함수를 어디서 호출했는지에 따라 함수의 상위 스코프를 결정한다

-함수를 어디서 정의했는지에 따라 함수의 상위 스코프를 결정한다

foo함수와 bar함수는 모두 전역에서 정의된 함수이기에 모두 상위 스코프가 전역 스코프이다.

var x = 1;

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

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

foo();
bar();