스코프(Scope)란?
Scope를 우리말로 번역하면 '범위'라는 뜻을 갖고 있다. JavaScript에서는 참조 대상 식별자(identifier)를 찾아내기 위한 규칙을 뜻한다. 쉽게 풀어서 해석하자면, 변수에 접근할 수 있는 범위라고 말할 수 있다.
스코프는 중첩이 가능하다.
스코프의 종류
블록 스코프(Block scope)
: 또는 전역 스코프(Global scope)
- 전역 스코프에 선언한 변수는 어느 곳에서든 해당 변수에 접근할 수 있다.
var a = 10;
function print(){
console.log(a)
}
print(); // 10
if () {
var y = 0;
}
console.log(y); // 0
함수 스코프(Function-level scope)
: 또는 지역 스코프(Local scope)
var a = 10; // 전역변수
(function () {
var b = 20; // 지역변수
})();
console.log(a); // 10
console.log(b); // "b" is not defined
함수 내에서 선언된 매개변수와 변수는 함수 외부에서 참조할 수 없다.
==> 전역 스코프에 정의한 변수, 함수는 어디서든 접근이 가능하여 의도치 않은 사이드이펙트를 야기할 수 있으므로 전역 스코프에 변수, 함수 정의를 지양하자 (특히 var, 함수선언식)
스코프 체인(Scope chain)
변수를 참조하는 코드를 만나게 됐을 때 해당하는 블록 스코프에서 변수를 참조하고자 시도하고, 블록 스코프 내에 변수가 존재하지 않는 경우 존재하지 않는 경우 상위 스코프로 올라가 탐색을 진행한다. 이를 스코프 체인이라 한다.
스코프 체인으로 인해 아래의 코드는 오류를 반환하지 않는다.
function name (){
let result = '결과';
if (true){
console.log(result);
}
}
name(); // 결과
참고
본 글은 훈훈한 자바스크립트 강의의 내용과 참고글을 참고해 정리한 글입니다
'Frontend > JavaScript' 카테고리의 다른 글
[JS] 동기와 비동기, 비동기처리, 콜백함수, Promise (0) | 2023.04.12 |
---|---|
[JS] 변수와 함수의 호이스팅(Hoisting) (0) | 2023.04.09 |
[JS] Event (1) - 이벤트, 이벤트 종류, 이벤트 사용방법 (0) | 2023.04.07 |
[JS] DOM(문서 객체 모델)이란? (0) | 2023.04.06 |
[JS] 웹 스토리지(Web storage) (0) | 2023.04.06 |