코딩일상

스코프,함수스코프,블록스코프,스코프체인 본문

개발 공부/JavaScript

스코프,함수스코프,블록스코프,스코프체인

solutionMan 2022. 7. 21. 00:09
반응형

스코프란??

자바스크립트를 공부할 때 스코프(Scope)란 단어를 많이 접할 수 있는데요. 이 스코프란 무엇인지에 대해 알아보겠습니다.

Scope를 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프(Scope)란 ‘변수에 접근할 수 있는 범위’라고 할 수 있는데요.

 

자바스크립트에선 스코프는 2가지 타입이 있습니다. 

  • global(전역)
  • local(지역)

전역 스코프(Global Scope)는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미

지역 스코프(Local Scope)는 해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미

 

자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다.

그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데요.

이걸 함수 스코프(function-scoped)라고 합니다.

함수 스코프가 바로 지역 스코프의 예라고 할 수 있습니다.


함수스코프의 예

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

print 함수에서 console.log(a);는 a를 출력하기 위해 자신의 함수 스코프 안에 변수 a가 있는지 찾아볼 것입니다.

그러면 var a = 111; 을 찾아내면 111을 console에 출력하고 함수는 자신의 사명을 다하게 됩니다.

 

만약 print 함수 안에 변수 a의 선언을 지운다면 console엔 어떤 값이 출력될까요? 함수 스코프 안에 a가 존재하지 않으니까 a가 선언되어있지 않다는 에러를 출력할까요? 한 번 print 함수를 다시 선언하고 실행해보겠습니다

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

결과는 예상과는 다르게 전역 스코프에 선언되어있는 a의 값인 1이 출력되는 것을 확인할 수 있습니다.

이는 Scope Chain에 의해 일어나는 현상인데요.

현재 자신의 scope에서 사용하고자 하는 변수가 없다면 Scope Chain을 통해 해당 변수를 찾게됩니다.

여기서 작동된 Scope Chain과정 
 함수스코프 안에 a에 대한 값이 없으므로 벗어나서 전역스코프에서 a의 값을 가져온것

블록스코프의 예

함수 스코프외에 블록 스코프란 것도 있는데요. 블록(block)이란 중괄호로 둘러싸인 부분을 블록이라고 합니다. 함수를 선언할 때 중괄호로 함수 본문을 둘러싸게 되는데 이부분을 블록이라고 할 수 있습니다.

function print() { // 함수 블록
 console.log(a);
}{ // 블록
 const a = '1';
}

스코프 체인(변수값을 끝까지 찾겠다!!)

자바스크립트에서 전역 변수는 전역 객체의 프로퍼티이다. (ECMAScript 명세에 정의되어 있음)

지역 변수는 그런 규정이 없지만, 변수를 각 함수 호출과 연관된 객체(call object)의 프로퍼티로 생각할 수 있다.

지역 변수를 어떤 객체의 프로퍼티로 생각한다면, 자바스크립트의 모든 코드는 스코프 체인을 갖고 있다. 

스코프 체인은 해당 코드의 유효 범위(in scope) 안에 있는 변수를 정의하는 객체의 체인, 리스트다.

 

자바스크립트가 변수 값을 얻으려고 할 때(variable resolution, 변수 해석) 스코프 체인에서 변수를 찾는다. 

스코프 체인은 위에서 말했다시피 객체의 리스트이므로, 첫 번째 객체에서 해당 변수를 찾고, 없으면 그 다음 객체에서 해당 변수를 찾고,

여기도 없으면 그 다음 객체에서 찾는 식이다.

리스트의 끝까지 탐색했는데도 그 변수가 없다면 reference error가 발생하는 것이다.

 

최상위 자바스크립트 코드(어떠한 함수에도 속하지 않는 코드)의 스코프 체인에는 하나의 객체만 있고, 그것이 전역 객체이다.

중첩되지 않은 함수의 스코프 체인은 2개의 객체로 이루어진다. 하나는 함수의 매개변수와 지역 변수를 정의하는 객체고,

다른 하나는 전역 객체다.

 

함수가 정의될 때, 함수는 스코프 체인을 저장한다.

함수가 호출될 때, 함수는 지역 변수를 보관하는 새로운 객체를 만들고 그 객체를 기존에 만들어둔 스코프 체인에 추가한다.

반응형
Comments