스코프

스코프란?

스코프란 자바스크립트의 코드의 범위를 나타낸다. 스코프는 전역 스코프와 지역 스코프로 나눌 수 있다. 함수나 변수를 선언할 때 생긴다

전역스코프 (global scope)

전역스코프란 모든 스코프에서 접근 가능한 스코프 이다

var vscope = 'global';
function fscope(){
    alert(vscope);
}
fscope();

함수 밖에서 변수를 선언하면 그 변수는 전역변수가 된다. 전역변수는 에플리케이션 전역에서 접근이 가능한 변수다. 다시 말해서 어떤 함수 안에서도 그 변수에 접근 할 수 있다

지역스코프 (local scope)

var vscope = 'global';
function fscope(){
    var vscope = 'local';
    alert(vscope);
}
fscope();

지역스코프란 함수 {} 안쪽에서만 접근할 수있는 스코프이다
지역스코프에서 선언된 변수는 전역변수에 아무런 영향을 줄 수 없기 때문에 지역스코프에서 선언된 함수 내에서만 사용이 가능하다.

렉시컬스코프 (lexical scope)

var i = 5;
function a(){
    var i = 10;
    b();    
}
function b(){
document.write(i);
}
a();

a를 호출할 경우 a함수는 다시 b함수를 호출한다.
b함수에서는 i의 값을 출력하게 되는데, 여기에서 i의 값이 누가 되냐면 b가 사용되는(호출되는)시점인 a함수, a함수에서 사용되고 있는 변수(i)인 10이 아니라,
함수가 정의된 시점에서 사용되는 변수(i)를 사용하므로 5가 결과값이 된다.
이러한 것을 정적인 유효범위, 또는 Lexical Scoping이라고 한다.

블록 스코프

• 함수 스코프가 함수가 생성 될때마다 만들어지는 스코프 라고 한다면 블록 스코프는 블록 {}이 생성 될때마다 스코프가 만들어진다. 블록 스코프는 let,const 가 등장한 이후로부터 가능하게 됬다.

함수 스코프인 아래 예제를 보면

var color = [ "red", "green", "blue"];
function colors(){
    for( var i = 0; i < 3; i++){
        console.log(color[i])
    };
    console.log('count', i);
};
colors();
//red
//green
//blue
//count 3

var로 초기화한 스코프에서는 함수 스코프를 따르기 때문에 변수 i가 for문 안쪽과 바깥쪽 모두 접근이 가능하다.

하지만 var대신에 let을 선언하게 되면 블록이 생성되어 변수 i는 for문 밖으로 접근이 불가능하다.

let color = [ "red", "green", "blue"];
function colors(){
    for( let i = 0; i < 3; i++){
        console.log(color[i])
    };
    console.log('count', i);
};
colors();
//red
//green
//blue
//count undefined

for문 안에 있는 변수 i가 블록으로 막혀있어 console.log('count', i);의 i값이 undefined로 출력되게 된다.