JavaScript

[자바스크립트] 스코프 (Scope)

쥬니어개발자 2022. 5. 9. 08:21

스코프란?

자바스크립트에서 어떤 변수에 접근할 수 있는지 즉, 변수에 접근할 수 있는 범위를 스코프라고 한다.
(여기서의 범위는 중괄호 { } 또는 함수를 말한다.

 

스코프의 동작원리 

코드 간의 불필요한 접근을 제어할 수 있다.


스코프의 종류

전역 스코프 (Global Scope)
: 함수 바깥, {} 바깥에 선언되었다면 전역 스코프
전역 변수로 선언하면 모든 곳에서 사용할 수 있고, 함수 내에서 사용 가능하다.
var scope = "전역스코프테스트";

function globalscope() {
	return scope; // 함수내에서도 사용가능 !
}
console.log(globalscope());

 

지역 스코프 (Local Scope)
: 코드의 특정 부분에서만 사용 가능하다.
지역 스코프는 함수 스코프블록 스코프로 나뉜다.

 

  • 함수 스코프
  1. 함수 내부에서 변수를 선언한다면, 선언한 함수 내에서만 변수 사용한다.
  2. 함수를 선언할 때마다 새로운 스코프가 생성된다.
// 함수스코프
function localScope() {
    var locScope = "로컬스코프"
    return locScope;
}
console.log(localScope());

//함수내에 있는 locScope 를 로그로 찍어보면 에러가 발생하는걸 알수있다.
console.log(locScope);  //ReferenceError: locScope is not defined

 

  • 블록 스코프
  1. 블록 { } 내에서 선언된 변수이고, 블록 내부에서만 접근이 가능하다.
  2. 잠깐! let const 내부에서 선언한 변수는 내부에서만 가능하지만 , var은 내부에서 선언해도 바깥에서 접근이 가능!
if(true) {
	let letBlock = "letBlock";
    var varBlock =  "varBlock";

}
console.log(varBlock); //varBlock
console.log(letBlock); //ReferenceError: letBlock is not defined

 

스코프 체인

변수를 찾을 때 자신이 속한 스코프를 찾게 되는데,
이때 자신이 속한 스코프에 변수가 없으면 상위 스코프를 찾는 현상을 스코프 체인이라고 한다.
var a = 'ScopeChain';

function scopeChain() {
    console.log(a);
}

scopeChain(); //ScopeChain

 

  • 렉시컬 스코프
  • : 렉시컬 스코프는 함수를 어디서 호출하는지가 아니라 어디에 선언했는지에 따름! (렉시컬 스코프는 추후 보강할 예정)