[JS] 스코프에 대하여

개요

---

Scope 는 범위라는 뜻을 가진다. Javascript에서 scope는 변수에 접근할 수 있는 범위를 뜻한다.

주로 동적 스코프, 정적 스코프(렉시컬 스코프), 블록레벨 스코프의 3가지 스코프가 있다.

---

동적 스코프

---

동적 스코프는 함수를 호출한 위치에 따라 상위 스코프를 결정한다.

 

결론적으로 말하자면 자바스크립트는 동적 스코프를 사용하지 않는다.

 

자바스크립트에서 함수와 스코프를 참조할 때에는 어디에서 호출되었는가만 보기 때문이다.

 

예시 코드

const func1 = () => {
	console.log(a);
}

const func2 = () => {
	let a = 2;
    	func1();
}
let a = 1;
func2();

위의 코드에서 func2 함수를 호출하면 콘솔에는 1가 출력된다. 간단하게 개발자 도구에서 확인해 볼 수 있다.

1이 출력되는 이유는 자바스크립트가 정적 스코프(렉시컬 스코프)를 사용하기 때문이다.

 

만약 자바스크립트가 동적 스코프를 사용했다면 결과는 2가 출력되었을 것이다.

---

정적 스코프(lexical scope)

---

정적 스코프는 함수를 선언한 위치에 따라 상위 스코프를 결정한다.

 

예시 코드

var a = 10;

const func = () => {
	var a = 20;
    console.log(a);
}

func();
console.log(a);

위 코드를 출력하면 20과 10이 출력될 것이다.

 

네번째 줄의 var a = 20;은 func 함수 내에서만 접근할 수 있다.

 

때문에 10과 20이 출력된다.

---

블록 레벨 스코프

---

Javascript에서 let과 const로 변수 선언을 할 경우에는 블록 레벨 스코프를 가진다. 

 

예시 코드

let bool = true;

if(bool){
	let a = 10;
    console.log(a);
}

console.log(a);

위 코드의 경우 if문 내에 블록이 존재한다.

 

블록 내에서 let a = 10; 이라는 변수를 선언하였고 출력한다.

 

하지만 블록 외부에서 a를 출력하려고 하면 a 변수에 접근할 수 없기 때문에 is not defined 에러가 발생한다.