자바스크립트의 개념을 무작정 외우기만하는것을 지양하고
개념에 이해하며 제것으로 만들수 있도록 하기위해 글을 쓰게 되었습니다
이번 글에는 Scope에 대해서 글을 쓰게 되었습니다
스코프의의 개념!!
Scope 란 유효범위 이다.
또한 Scope는 클로져 개념에서 중요한 요소로 작용한다
자신이 선언된 위치에 따라 식별자 자신을 참조할수 있는 유효 범위가 결정된다.
스코프는 식별자가 유효한 범위를 말한다.
스코프와 클로져 개념에서 많이 등장하는 말이있는데 "렉시컬 환경" 이라는것입니다
그렇다면 ? 렉시컬 환경이란 무엇인가?
코드가 어디서 실행되며 주변에 어떤 코드가 있는지를 렉시컬 환경 이라고 부릅니다
코드의 문맥은 렉시컬 환경으로 이뤄진다.
스코프의 종류!!
1) 전역 스코프
2) 지역 스코프
1) 전역 변수 - 어디서든 참조할수있다
2) 지역 변수 - 지역변수는 자신의 지역 스코프와 하위 지역스코프에서 유효하다
구분하는방법: 변수는 자신이 선언된 위치에 의해 자신의 유효한 범위인 스코프가 결정!
스코프 공부를 하다보면 책에 스코프체인 이라는 용어가 많이나온다
스코프 체인이란?
스코프가 계층적으로 연결된것을 스코프체인이라고한다
ex) 전역스코프 - outer 함수 스코프 -inner 함수 스코프
자바스크립트는 스코프체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프방향으로 이동하면서 선언된 변수를 검색합니다
ex) inner 함수스코프 -> outer 함수 스코프 -> 전역 스코프
참고) 스코프체인은 물리적 실체로 존재 O 코드를 실행하기 전에 렉시컬환경을 실제로 생성한다
함수레벨 스코프 블록레벨 스코프!!
함수레벨 스코프 -->
var은 함수레벨 스코프만 지역 스코프로 인정한다
블록레벨 스코프 -->
let은 블록레벨 스코프이다 es6부터 사용이 가능해졌다
var 함수레벨 스코프
var x =1;
if(true){
var x =10;
}
console.log(x) // 10
10 이 나오는 이유? "var 키워드는 함수레벨 스코프이기때문에 --> 블록레벨 스코프 적용 x ---> 전역 변수로 처리"let 블록레벨 스코프
var x = 0;
{
var x = 1;
console.log(x); // 1
}
console.log(x); // 1
// 함수레벨 스코프
let y = 0;
{
let y = 1;
console.log(y); // 1
}
console.log(y); // 0
// 블록레벨 스코프함수의 선언위치에 따라서 결정된다 !
var x = 1;
function foo(){
var x =10;
boo();
}
function boo(){
console.log(x)
}
foo(); //1
boo(); //1- 함수의 호출위치 -> 동적 스코프
- 함수의 정의위치 -> 정적 스코프 , 렉시컬 스코프 --> 자바스크립트
자바스크립트는 렉시컬 스코프, 정의위치 o 호출위치 x
맛보기 클로저
var x = 'global';
function foo() {
var x = 'local';
console.log(x);
function bar() { // 내부함수
console.log(x); // local
}
bar();
}
foo(); //local local
console.log(x); // global내부함수는 자신을 포함하고 있는 외부함수의 변수에 접근할 수 있다. 클로저에서와 같이 내부함수가 더 오래 생존할때
함수 bar에서 참조하는 변수 x는 함수 foo에서 선언된 지역변수이다. 이는 실행 컨텍스트의 스코프 체인에 의해 참조 순위에서 전역변수 x가 뒤로 밀렸기 때문이다.
