[JavaScript] 스코프
● 스코프(Scope) : 변수 접근 규칙에 따른 유효범위
① 변수에 접근할 수 있는 범위가 존재한다. 바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용이 가능하지만, 안쪽에서 선언한 변수는 바깥쪽 스코프에서 사용할 수 없다. 예를 들어 함수 안쪽에 정의된 변수를 함수 바깥쪽에서 접근하면 ReferenceError를 낸다.
② 스코프는 중첩이 가능하다. 특별히 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부르며, 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)라고 한다. 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.
● 스코프의 종류
1) 블록 스코프(block scope) : 중괄호로 둘러싼 범위
블록 스코프 안에서 정의된 변수는 블록 범위를 벗어나는 즉시 접근할 수 없다.
2) 함수 스코프(function scope) : 함수로 둘러싼 범위
※ 화살표 함수는 블록 스코프로 취급된다는 점을 유의
→ console 창을 열어 Sources 탭을 누른 후, js 파일의 특정 줄을 클릭하여 breakpoint로 지정한다. 그리고 새로고침하면 Scope 창을 통해 스코프를 확인할 수 있다.
var : 블록 스코프를 무시하고 함수 스코프만 따른다. 화살표 함수 무시 X (이전 방식)
let [ var 키워드보다 let 키워드가 더 권장되는 이유 ]
- 블록 단위로 스코프를 구분했을 때, 훨씬 더 예측 가능한 코드를 작성할 수 있다.
- var 키워드는 재선언을 해도 아무런 에러도 내지 않지만, let 키워드는 재선언을 방지한다.
(재선언의 경우 대부분 버그임.)
const : 변하지 않는 값, 즉 상수(constant)를 정의할 때 이용.
값의 재할당이 불가능하므로 값을 새롭게 할당할 일이 없다면, const 키워드의 사용이 권장된다.
(재할당시 TypeError 발생)
| var | let | const | |
| 유효 범위 | 함수 스코프 | 블록 스코프 및 함수 스코프 | 블록 스코프 및 함수 스코프 |
| 값 재할당 | 가능 | 가능 | 불가능 |
| 재선언 | 가능 | 불가능 | 불가능 |
● 변수 선언시 주의점
1. window 객체 : 브라우저에는 브라우저에만 존재하는 window라는 객체가 있다. 브라우저 창을 대표하는 객체이며,
이와 별개로 전역 영역을 담고 있기도 하다. var로 선언된 변수 및 전역 함수가 window 객체에 속한다.
2. 전역 변수 최소화하기
→ 다른 함수 혹은 로직에 의해 의도하지 않은 side effect가 발생할 수 있기 때문
3. let, const 사용하기
→ var는 블록 스코프를 무시하므로 재선언시 에러가 나지 않는다. 또한 전역 변수를 var로 선언하는 경우
해당 변수가 window 기능을 덮어씌워 내장 기능을 사용하지 못하게 만들 수도 있다.
4. 선언 없는 변수 할당 금지
→ 선언 없이 변수를 할당하면, 해당 변수는 var로 선언한 전역 변수처럼 취급된다.
실수를 방지하기 위해 Strict Mode를 사용할 수 있다.
'use strict'; //선언 없는 변수 할당은 에러 처리됨.