[자바스크립트] - Scope

[자바스크립트] - Scope

 

---

 

 

자바스크립트에서 스코프란?

◆ 스코프란 변수의 값이 참조하여 바인딩 될 수 있는 범위를 말한다. 

스코프는 자바스크립트에서만 쓰이는 개념이 아닌 컴퓨터 언어에서 중요한 역할을 한다.

 

하지만 자바스크립트에서 스코프는 조금 관대하기 때문에 주의가 필요하고

각 변수 선언 방식 let, const ,var에 의해 스코프가 다르게 동작 하기도 한다. 

 

 

일단 렉시컬 스코프 , 렉시컬 환경에 대해서도 알고 있어야 스코프를 이해하기 편하다. 

 

일단 스코프는 '범위' 라고 이해를 한다고 하면 간단하게 이해가 가능하고, 렉시컬 스코프 역시 범위를 정의한다.

하나의 변수는 렉시컬 스코프를 가지게 되는데 이 스코프는 선언되는 위치에 따라서 정의가 변동이 되고, 어디까지 해당 변수에 영향을 미치는지 범위를 정의하는 것을 렉시컬 스코프 라고 한다.

 

렉시컬 환경은 렉시컬 스코프 즉 "유효범위"가 정의 되었으면 그 범위 내에서 값을 참조하거나 바인딩 되는 방식을 기록하는

하나의 저장소 및 환경이라고 이야기 할 수 있다.

 

 

 

 

전역스코프 , 함수 스코프 , 블록 스코프

Javasciprt에서 변수의 유효범위는 선언 방식에 따라 달라진다. 

ES6 에는 전역스코프 범위를 가지는 var , 블록스코프의 범위를 가진 Let과 const이 존재한다.

 

 

 

1.전역스코프 

전역스코프는 전체 유효범위를 말하며, var의 경우 전역 스코프로써 함수 어디에서도 사용이 가능하다.

var x = 1; // 전역스코프

function func(){
    return x;
}

console.log(func()) //1

 

예제를 보면 func() 함수는 x를 리턴하고 있는데 전역 스코프의 x 변수의 값을 형성된 클로저에 의해 참조하여 리턴한다. 

변수는 선언된 위치에 따라서 렉시컬 환경을 가지는데 호출 스택은 전역 > 블록 순으로 스택에 쌓이게 된다.

 

블록 내에 x값이 없다면 형성된 클로저를 통해 부모의 스코프에서 x값을 찾아 참조한다. 

이를 스코프 체이닝이라고 부른다.

 

 

{   
    var  x = 1; // 블록에 선언되었지만 전역변수
}
console.log(x); // 1

 

 

 

상위 스코프는 하위 스코프를 참조 할 수 없다. 블록 안에 x가 선언되었지만 위의 코드는 스코프의 개념을 위반하지 않는다.

이유는 var는 전역변수로 최상단으로 호이스팅하기에 전역변수로 취급한다.

 

같은 선상의 스코프에서 값을 참조하는 것이기에 위반하지 않는다.

 

모든 함수를 포함하는 범위를 이야기하며 전역변수에 선언된 함수는 어느 함수에서도 참조가 가능하다. 

 

 

 

2. 블록스코프

블록스코프는 전역스코프의 하위 스코프를 말하며 지역스코프라고 표현하기도 한다.

{   
    let  x = 1; // let은 블록스코프를 가진다.
}
console.log(x); // undefined

 

예제를 보면 let은 블록스코프의 정의를 따른다.

블록은 for , if , switch 등 연산이나 조건을 따르는 { }로 분류가 된다. 

 

예제의 중괄호 역시 지역스코프를 갖게되고 상위스코프에서 하위스코프의 변수를 참조 할 수 없는 규칙을 따른다.

x는 외부에서 참조 할 수 없기에 undeinfed를 출력하게 된다. 

 

 

 

 

3. 함수스코프

함수 스코프는 지역스코프 & 블록스코프와 비슷한 개념을 가졌지만 살짝 다르다.

 

함수를 선언함에 함수는 내부에 자신만의 함수스코프를 가지게 된다. 

외부에 영향을 받지 않는 상태야 정확한 연산이 가능하다

 

var의 경우는 블록스코프의 정의를 따르지 않지만 함수스코프의 정의는 따른다.

함수스코프는 다른 스코프들과 다르게 독립적인 스코프이다. 

 

function func(){
	var x = 1;
    return x;
}

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

 

함수 스코프는 아무리 var가 전역변수 하여도 함수스코프의 정의를 따르며 외부에서 접근이 불가하게 된다. 

let은 블록스코프의 정의를 따르지만 var는 블록스코프의 정의를 따르지 않고 함수스코프의 독립된 스코프의 정의는 따른다.

이를 캡슐화라고도 표현한다.

 

 

 

 

---

간단 정리

렉시컬스코프	변수가 선언된 위치에서 참조나 바인딩을 할 수 있는 유효범위
렉시컬 환경	변수의 유효범위에서의 참조 값, 바인딩하는 방안을 기록한 하나의 저장소, 환경
환경 레코드	렉시컬 환경을 실행한 값
전역스코프	블록스코프, 함수스코프를 감싸고 있는 최상단의 범위 // var
함수스코프	function으로 함수 선언 후 함수 내부 영역
블록스코프	let const가 블록스코프의 정의를 따르며 { } 중괄호 내의 스코프