자바스크립트에서 스코프는 변수에 접근할 수 있는 범위를 뜻합니다.
함수 스코프
// 전역(Global) 스코프
var name = 'jh'; // 전역변수
function some() {
// 지역(Local) 스코프
console.log( name ); // 전역변수 사용가능 🟢
var age = 20; // 지역변수
}
// 전역(Global) 스코프
console.log( age ); // 지역변수 사용불가 ❌함수 단위로 나뉘는 스코프입니다. some 함수를 기준으로 바깥은 전역 스코프, 안쪽은 지역 스코프로 나뉘어 집니다. 지역스코프에서 전역변수에 접근이 가능하지만 전역 스코프에서 로컬변수에는 접근할 수 없습니다.
블록 스코프
{
// 블록(Block) 스코프
var age = 20; // 지역변수...가 아닌 전역변수로 설정됨
}
// 전역(Global) 스코프
console.log( age ); // 전역변수 사용가능 🟢블록 스코프에서 설정된 var 변수는 함수 스코프를 따르기 때문에 지역변수가 아닌 전역변수로 설정됩니다.
{
// 블록 스코프
let name = 'jh'; // let 지역변수
const age = 20; // const 지역변수
}
console.log( name ); // 지역변수 사용불가 ❌
console.log( age ); // 지역변수 사용불가 ❌ES2015(ES6)에서 let, const 키워드 추가 로 생긴 기능입니다. 함수가 아닌 블록 { ... } 안에서 지역변수를 선언할 수 있게 되었습니다. 위에 코드에 있는 순수 블록과 if 문, for 문, switch 문 등의 블록에 모두 적용 됩니다.
다른 프로그래밍 언어에서는 대부분 블록 스코프 단위가 사용되고 있습니다. 그냥 당연하게 블록 { ... } 안에 설정된 변수는 외부에서 사용할 수 없는 것이 일반적이기 때문입니다. 그렇기 때문에 조금 헷갈릴 수 있습니다.
자바스크립트에서 var 이라는 변수는 함수 스코프를 따르며 그렇기 때문에 함수가 아닌 블록에서 전역변수로 설정된다는 것이 포인트인것 같습니다.
렉시컬 스코프(Lexical Scope)
var name = 'jh';
function some() {
var name = 'xx';
// 현재 스코프에서 name 변수를 찾는다
console.log( name ); // 'xx' 출력
call();
}
function call() {
// 현재 스코프에 name 변수가 없기 때문에
// 상위 스코프에서 name 변수를 찾는다
console.log( name ); // 'jh' 출력
}
some();렉시컬 스코프(Lexical Scope)는 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말합니다.
위에 코드에서 call 함수를 some 함수에서 호출하였기 때문에 'xx' 를 출력할것 같지만 'jh' 를 출력하게 됩니다. 그 이유는 call 함수가 some 함수가 아닌 전역 스코프에 선언되었기 때문입니다. 만약에 call 함수가 some 함수 내부에 선언되었다면 'xx' 를 출력하게 됩니다.
댓글