스코프는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이므로 확실한 이해가 필요하다.
Scope?
스코프는 참조 대상 식별자(자바스크립트의 변수의 선언)를 찾아내기 위한 규칙이다.
자바스크립트는 이 규칙대로 식별자를 찾는다.
전역에 선언된 변수는 어디에든 참조할 수 있다.
하지만 함수내에서 선언된 변수는 함수 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없다.
이러한 규칙을 스코프라고 한다.
만약 이러한 규칙, 즉 스코프가 없다면 같은 식별자 이름(선언된 변수)이 충돌을 일으키므로 프로그램 전체에서 다 다른 식별자 이름을 사용하여야 한다.
스코프는 이러한 충돌을 방지해준다.
자바스크립트에 스코프는 두가지로 구분할 수 있다.
전역 스코프 - 전역 스코프는 코드 어디에서든지 참조가 가능하다.
지역 스코프 - 함수가 만든 스코프로 함수 자신과 하위 함수에서만 참조 가능하다.
모든 변수 또한 스코프를 갖고 변수 관점에서 두가지로 구분할 수 있다.
전역 변수 - 전역에서 선언된 변수이며 어디에서든 참조가 가능하다.
지역 변수 - 지역(함수)내에서 선언된 변수이며 그 지역과 그 지역의 하부
스코프와 var, let, const 키워드의 차이
변수를 선언하는 키워드 세 가지의 차이점과 스코프 유효 범위는 각각 다르다.
const
- 유효 범위 : 블록 스코프 / 함수 스코프
- 값 재할당 : 불가능
- 재선언 : 불가능
let
- 유효 범위 : 블록 스코프 / 함수 스코프
- 값 재할당 : 가능
- 재선언 : 불가능
var
- 유효 범위 : 함수 스코프
- 값 재할당 : 가능
- 재선언 : 가능
블록 스코프? / 함수 스코프?
블록 스코프란 블록 레벨 스코프(block-level scope)라고 하고 코드 블록({...}) 내에서 유효한 스코프를 의미 한다. 대부분의 C-family language는 이 블록 스코프를 따른다.
함수 스코프란 함수 레벨 스코프(function-level scope)라고 하고 함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효하고 외부에서는 유효하지 않다.
for(let i = 0; i < 10; i++){
console.log(i)
}
// 전역스코프에서 선언한 변수 i는 존재하지 않음으로 참조에러를 일으킨다.
console.log(i) // ReferenceError(참조 에러)- 블록 스코프 안에서 let과 const 키워드로 선언한 변수는 스코프 안에서만 유효하다.
for(var i=0; i<10; i++) {
console.log(i);
}
// var 키워드로 선언한 변수 i 는 지역 스코프에서 선언되었지만 모든 스코프에서 접근 가능하다.
console.log(i); // 10- 그런데 위와 같이 var 키워드로 선언한 변수는 블록 스코프를 무시하고 스코프 울타리 밖에서도 유효하다.
- var 키워드로 선언한 변수는 오직 함수 스코프만을 따른다.
그러나 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있으므로 let 키워드의 사용이 권장된다.
중첩 스코프는 가장 인접한 지역을 우선하여 참조한다.
- 우선순위 : 자기자신 > 상위함수 > 전역
렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 선언한 시점에 상위 스코프가 결정된다.
var x = 1;
function foo() {
var x = 10;
bar();
}
function bar() {
console.log(x);
}
foo(); // 1
bar(); // 1 실행한 위치가 아닌 선언한 시점을 확인 선언 없는 변수 할당
function foo () {
// 선언하지 않은 식별자
y = 20;
console.log(x + y);
}
foo(); // 30- 위와 같이 선언 없이 변수를 할당하면 해당 변수는 var로 선언한 전역 변수 처럼 취급된다.
- 위처럼 변수를 선언하게 되면 의도치않은 로직에 의해 문제가 발생할 수 있기에 사용할때 주의하여햐 한다.
전역변수 최소화
- 가장 바깥 스코프에 정의한 변수가 전역 변수이다.
- 전역 변수를 최소화 하면 의도하지 않은 로직에 의해 문제 발생을 줄일 수 있다.
- 심지어 위에서 말한 var 키워드에 특성상 var 키워드를 사용해 전역변수를 선언하면 문제가 될 수 있다. 가급적이면 사용을 줄이도록 하자.
Reference
poiemaweb - https://poiemaweb.com/js-scope
HANAMON - https://hanamon.kr/javascript-%EC%8A%A4%EC%BD%94%ED%94%84%EC%99%80-%EB%B3%80%EC%88%98%EC%84%A0%EC%96%B8%ED%82%A4%EC%9B%8C%EB%93%9C-%EC%B0%A8%EC%9D%B4%EC%A0%90/
