스코프 (Scope, 유효범위)

현재 실행되는 컨텍스트를 말합니다. 여기서 컨텍스트는 값과 표현식이 표현되거나 참조될 수 있음을 의미합니다. 만약 변수 또는 다른 표현식이 해당 스코프 내에 없다면 사용할 수 없습니다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가능합니다.

 

함수는 자바스크립트에서 클로저 역할을 하기 때문에 스코프를 생성하므로 함수 내에 정의된 변수는 외부 함수나 다른 함수 내에서는 접근할 수 없습니다. 예를 들어 다음과 같은 상황은 유효하지 않습니다.

 

그러나 다음과 같은 코드는 변수가 함수 외부에 전역에서 선언되었기 떄문에 유효합니다.

 

insight

전역으로 선언한 변수와 동일한 이름의 지역 변수를 사용할 떄 의도하지 않은 결과가 나올 수 있습니다. 따라서 스코프의 특성을 이해하고 정확히 사용해야 합니다.

 

아래 코드의 결과는 무엇일까요?

let x = 'global';

function foo () {
  let x = 'function scope';
  console.log(x);
}

foo(); // ?
console.log(x); // ?

정답을 포함한 스코프에 대한 더 자세한 설명은 아래 사이트에서 확인해보세요.

https://poiemaweb.com/js-scope

Scope | PoiemaWeb

여러가지 스코프에 대한 정리가 잘 되어있어 공유합니다.

 

참고사이트

https://developer.mozilla.org/ko/docs/Glossary/Scope