FE BE 개발 메모장/Javascript
자바스크립트 함수의 범위(Scope)
PixelStudio
2020. 10. 27. 20:42
스코프(Scope)
Scope는 범위라는 뜻을 가지고있는데, 자바스크립트에서는 함수를 선언 할 때 생기는 개념이고, 두 가지 타입이 존재한다 전역 스코프와 지역 스코프 두가지다. 변수에 접근할 수 있는 범위를 의미한다.
전역 스코프(Global Scope)
- 전역 스코프는 변수가 전역에 선언되어 있어 어느곳에서든지 변수에 접근이 가능하다. 전역 스코프에 선언된 변수는 전역 변수라 하며, Window 객체의 변수가 된다.
지역 스코프(Local Scope)
- 지역 스코프는 해당 지역에서만 접근이 가능하며, 지역을 벗어난 곳에선 접근이 불가능하다. 함수를 생성하고, 함수 내부에서 선언된 변수를 지역변수, 함수의 지역변수라고 한다.
let x = 1; //전역 스코프에 선언된 변수 = 전역 변수
//window객체에 속성을 생성하지는 않음 (window.x //undefined)
function scope() { //지역(함수) 스코프 = 지역 변수
let x = 2;
console.log(x);
}
scope(); // 2
console.log(x); //1
ex) let과 var의 차이점
유효 범위 규칙에 따라 let과 var의 차이점은 다음과 같다.
function varTest() {
var x = 1;
if (true) {
var x = 2; // 상위 블록과 같은 변수!
console.log(x); // 2
}
console.log(x); // 2
}
function letTest() {
let x = 1;
if (true) {
let x = 2; // 상위 블록과 다른 변수
console.log(x); // 2
}
console.log(x); // 1
}이점은 전역 스코프에서도 마찬가지이다.
var x = 'global';
let y = 'global';
console.log(window.x); // "global" ,전역 객체의 속성 x를 생성
console.log(window.y); // undefined ,전역 객체의 속성 y를 생성하지 않음
스코프 체인(Scope Chain)
let a = 'a'
function outer() {
console.log(a);
function inner() {
let b = 'b';
console.log(a);
}
inner();
}
outer();
conso.e.log(name);
내부 함수는 외부 함수의 변수에 접근이 가능하지만 그 반대는 접근이 불가능하다. 위의 예제에서 보게되면 inner()함수는 b라는 변수를 찾기위해 자기 범위에서(스코프) 찾고, 없으면 한 단계 올라가 outer 스코프에서 찾는다. 만약 없으면 결국 전역(Global) 스코프에서 찾게된다.
a라는 변수는 거슬러 올라가면서 결국 전역 스코프에 선언된 변수 a를 찾아낸다 이런식으로 범위를 넓혀가며 찾는 관계를 스코프 체인이라고 한다.
출처