스코프가 무엇인가
- 스코프는 참조 대상 식별자(변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)를 찾아내기 위한 규칙이다
- 식별자는 자신이 어디에서 선언됐는지에 의해 자신이 유효한(다른 코드가 자신을 참조할 수 있는) 범위를 가진다.
자바스크립트에는 다음과 같은 종류의 스코프가 있다.
- 전역 스코프
- 모듈 스코프
- 함수 스코프
- 블록 스코프
- 렉시컬 스코프
처음 스코프를 배울 '아 이건 당연한거쥥~' 이러면서 대충 훑고 넘겼는데 부끄럽지만 막상 코드를 짜다보니 헷갈릴 때가 많았다 그래서 한번 정리!
전역 스코프 (global scope)
- 전역에 변수를 선언하면 이 변수는 어디서든지 참조할 수 있는 전역 스코프를 갖는 전역변수가 된다.
- var 키워드로 선언한 전역변수는 전역객체 window 의 프로퍼티이다.
- 전역 변수 사용은 변수 이름 중복, 의도치 않은 재할당 등으로 코드 예측을 어렵게 만드릭 때문에 사용을 자제하는 것이 좋다
모듈 스코프 (module scope)
- 해당 모듈에서만 접근 가능한 변수
함수 스코프 (function scope)
- 함수코드 블록만 범위로 한다
- 함수내에 선언된 변수는 함수 내에서만 유효하고, 외부에서 접근 불가
var로 선언한 변수들은 함수 스코프만을 따른다
var a = 1; // 전역 변수
function print() { // 지역(함수) 스코프
var a = "Hi!"; // 지역 변수
console.log(a); // output: Hi!
}
print();
console.log(a); // output: 1블록 스코프 (block scope)
- 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) , 중괄호로 감싸진 문 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다
let,const는 블록 스코프를 따를 수 있다
var x = 0;
{
var x = 1;
console.log(x); // 1
}
console.log(x); // 1
let y = 0;
{
let y = 1;
console.log(y); // 1
}
console.log(y); // 0렉시컬 스코프 (lexical scope)
- 정적 스코프라고도 함
- 함수를 어디서 호출하는지가 아니라 어디에 선언했는지에 따라 결정된다
- 선언할 때의 위치에 따라 전역, 함수, 블록 스코프가 된다
var x = 'static';
function foo(){
var x = 'local'; // 블록 스코프
bar();
}
function bar(){
console.log(x);
}
foo(); // "static"