📆 날짜

2023/12/16(토)

📚 챕터

변수의 유효 범위, 스코프에 관하여

---

👨🏻‍💻학습 내용

🎯스코프란 무엇인가

앞서 클로저를 이해하기 위해서는 변수의 유효 범위에 따라서 어휘적 환경이 결정된다고 언급했다. 이러한 변수의 유효 범위를
스코프(scope)라고 하는데,자바스크립트에는 다양한 스코프가 존재한다.

📌 전역 스코프(global scope)

전역 레벨에 선언하는 것을 전역 스코프(global scope)라고 한다.
전역(global) 이라는 이름에서 유추할 수 있듯이, 이 스코프에서 변수를 선언하면 어디서든 호출할 수 있게 된다.
브라우저 환경에서 전역 객체는 window,
Node.js 환경에서는 global이 있는데, 바로 이 객체에 전역 레벨에서 선언한 스코프가 두 환경을 묶어 일치 시킨다. 즉, 바인딩된다.

<script>
var global = 'global scope'

function hello() {
 console.log(global)
}

console.log(global) // global scope
hello()// global scope
console.log(global === window.global)//true
</script>

위 코드는 global이라는 변수를 var와 함께 선언했더니 전역 스코프와 hello 스코프 모두에서 global 변수에 접근할 수 있는것을 확인 할 수있다.

📌 함수 스코프(global scope)

다른 언어와 달리 자바스크립트는 기본적으로 함수 레벨 스코프를 따른다.
즉, {} 블록이 스코프 범위를 결정하지 않는다. 아래 예제코드를 살펴보자.

<script>
if (true){
	var global = 'global scope'
}

console.log(global) 'global scope'
console.log(global === window.global)// true
</script>

var global은 분명 {}내부에서 선언돼 있는데,{}밖에서도 접근이 가능한 것을 확인할 수 있다.이는 앞서 이야기한 것처럼 기본적으로 자바스크립트는 함수 레벨 스코프를 가지고 있기 때문이다.

<script>
function hello() {
 var local = 'local variable'
 console.log(local)// local variable
}

hello()
console.log(local) // Uncaught ReferenceError : local is not defined
</script>

단순한 if 블록과는 다르게 함수 블록 내부에서는 일반적으로 예측하는 것과 같이 스코프가 결정되는 것을 볼 수 있다.

만약 스코프가 중첩돼 있다면 어떻게 될까?

<script>
var x = 10;

function foo(){
	var x = 100;
    console.log(x)//100
    
    function bar(){
    var x = 1000;
    console.log(x)//1000
    
    }
    bar()
   }
   
   console.log(x)//10
   foo()
</script>

자바스크립트에서 스코프는,일단 가장 가까운 스코프에서 변수가 존재하는지를 먼저 확인해 보는데, 이러한 사실을 알고 있다면 위 예제에서 x가 어디에 선언돼 있는지에 따라 값이 달라질 수 있음을 쉽게 확인할 수 있을 것이다.

➡️ 다음 글에서는 클로저는 어떻게 활용 하는지 살펴보자.