Scope - MDN Web Docs Glossary: Definitions of Web-related terms | MDN
프로그래밍에서, scope란 특정 변수(식별자)나 값, 표현식expressions이 유효valid하거나 보이는visible 범위를 의미한다.
예를들어, “어떤 변수가 현재 스코프에 위치하지 않는다”는 말은, (그 변수가 현재 스코프에서는 유효하지 않거나 보이지 않기 때문에) 우리가 그 값을 사용할 수 없다는 것을 의미한다.
function exampleFunction() {
const x = "declared inside function"; // x can only be used in exampleFunction
console.log("Inside function");
console.log(x);
}
console.log(x); // Causes error
x는 exampleFunction의 body 안에 정의되었다. 즉 exmapleFunction의 function scope에 속하는 변수이다. 해당 함수의 바깥 스코프에서는 이 함수 스코프 내부의 변수에 접근할 수 없으므로, 사용하려 할 경우 에러가 발생하는 모습이다.스코프는 또한 상하관계를 가질 수 있어서, 자식에서 부모의 스코프에 접근할 수 있다. (그 반대는 불가능하다)
JavaScript는 네종류의 스코프를 가진다고 볼 수 있다.
let / const로 선언된 변수들만 요 block scope에 속할 수 있다(var는 안된다). 예를들면..
{
var x = 1;
}
console.log(x); // 1 - 에러가 발생하지 않는다.
{
const x = 1;
}
console.log(x); // ReferenceError: x is not defined
프로그래밍 언어는 함수의 상위 스코프를 결정하는 두가지 방법을 가질 수 있다.
JavaScript는 렉시컬 스코프를 사용한다. 즉 JS에서 상위 스코프는 함수를 어디서 호출하는지가 아니라, 어디에 선언하였는지에 따라 결정된다.
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // ?
bar(); // ?
foo에 의해 bar가 실행될때, bar의 상위 스코프는 foo 함수 스코프(와 전역 스코프)일 것이고, 따라서 10을 출력할 것이다.bar가 어디에서 호출되는지 여부와 관계 없이, bar가 선언되는 시점에 전역 스코프 내에 있기 때문에, bar의 상위 스코프는 항상 전역 스코프라고 볼 수 있고, 따라서 foo 내부에서 bar를 호출하더라도 1을 출력하는 모습이다.