스코프 (Scope)

스코프 (Scope)

코어 자바스크립트(정재남 저) 책을 기본으로 하여 자바스크립트를 공부하면서 내용을 정리하고자 한다.


02 실행 컨텍스트 (Execution Context)


🪆 스코프 (Scope)

스코프 (Scope) 는 앞서 EC의 LexicalEnvironment의 Outer(Reference to the Outer Environment)를 설명하면서 얘기한 스코프 체인의 그 스코프이다.

여기서 추가적으로 설명한다.

🪢 스코프 (Scope) 란?

스코프 (Scope) 란 식별자에 대한 유효한 범위를 말한다.

다시 말해 우리가 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 뜻한다.

어떤 A라는 범위가 있을때 A 범위 밖에서 선언한 변수는 A의 외부 뿐 아니라 내부에서도 접근이 가능하지만 A 범위 내부에서 선언한 변수는 그 내부에서만 접근이 가능하다.

🚦 스코프 (Scope) 의 종류

  1. Function (함수) Scope : 함수 안에서만 사용이 가능합니다.
  2. Block (블록) Scope : if, for, switch 등 특정 블록 내부에서만 사용이 가능합니다.

🏂🏼 Scope의 예시

scope


scopeA 함수가 실행되면 value 변수에는 A!가 할당되고 otherValue 변수에는 C!가 할당된다. value 변수의 값을 출력되면 A!가 나올 것이다.

scopeB 함수가 실행되면 새로운 value 변수를 선언하면 B!가 할당되고 value 변수의 값을 출력하면 B!가 나온다.

그 다음 otherValue 변수를 출력하면 현재의 스코프 (Scope) 에서 otherValue 변수가 있지 않기 때문에 상위 스코프 즉, scopeA 함수 내부에서 선언된 otherValue 변수의 값을 참조하게 되고 C!가 출력된다.

다음 코드인 value 변수를 출력하면 현재 스코프인 전역의 value 값이 출력되어 Global!이 출력된다.

그러나 otherValue 변수를 출력하고자 했을 때 otherValue 변수는 현재 스코프 내에 있지 않은 scopeA 함수 내부의 있는 변수이기 때문에 참조할 수 없다. 따라서 ReferenceError 가 나온다.


1


2


🪃 Block (블록) Scope

scope2


const 로 선언한 변수는 Block Scope 를 가진다. (let 도 동일)

if문 안에서 const로 선언된 value 변수의 값은 if문의 블록 ({}) 안에서만 유효하기 때문에 if문 밖의 value 변수는 funcScope Scope를 따른다. funcScope 함수 내부에서 선언된 value 값이 두번째 console.log(value)에서 출력되는 이유이다.


3


4


🪃 Function (함수) Scope

scope3


var 로 선언된 변수는 Function Scope 를 가진다.

if문 안에서 선언된 value 변수의 값은 var 로 선언되어 if문의 블록 ({}) 밖에서도 적용된다. if문 밖의 value 변수의 값은 두번째 console.log(value)에서 동일하게 출력된다.


5


6


코드 참고하려면


👉🏻 Next Page


참고자료