https://www.w3schools.com/js/js_scope.asp

https://medium.com/@su_bak/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023

https://velog.io/@solseye/JS-%EC%9E%98-%EB%B4%90-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%8A%A4%EC%BD%94%ED%94%84Scope-%EC%8B%B8%EC%9B%80%EC%9D%B4%EB%8B%A4

https://www.youtube.com/watch?v=HsJ4oy_jBx0&feature=youtu.be&ab_channel=%EC%96%84%ED%8C%8D%ED%95%9C%EC%BD%94%EB%94%A9%EC%82%AC%EC%A0%84

스코프(Scope)

식별자의 유효범위 ➡️ 모든 식별자는 자신이 선언된 위치에 의하여 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정됨

즉 스코프란 '변수에 접근할 수 있는 범위'

자바스크립트에선 스코프는 두가지 타입이 있다.
Global(전역) 과 local(지역).

전역 스코프

말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미

지역 스코프

해당 지역에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미

자바스크립트에서 함수를 선언하면 함수를 선언할 때마다 새로운 스코프를 생성하게 됩니다. 그러므로 함수 몸체에 선언한 변수는 해당 함수 몸체 안에서만 접근할 수 있는데요. 이걸 함수 스코프(function-scoped)라고 함

Ex)

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print();
console.log(a);

print 함수를 호출하면 console에는 어떤 숫자가 나올까?
➡️ 111 이 출력됨

var a = 1; // 전역 스코프
function print() { // 지역(함수) 스코프
 var a = 111;
 console.log(a);
}
print(); // 111
console.log(a); // 1

print 함수에서 console.log(a)는 a를 출력하기 위해 자신의 함수 스코프 안에 수 a가 있는지 찾아 본다.
그러면 a = 111 을 찾아내면 111을 console에 출력하고 함수는 끝이난다.

만약 print 함수 안에 변수 a의 선언을 지운다면?
함수 스코프 안에 a가 존재하지 않으니까 a가 선언되어있지 않다는 에러를 출력될까?

var a = 1; // 전역 스코프
function print() { // 함수 스코프
 console.log(a);
}
print(); // 1

a의 값인 1이 출력되는 것을 확인할 수 있다.
Scope Chain에 의해 일어나는 현상
현재 자신의 scope에서 사용하고자 하는 변수가 없다면 Scope Chain을 통해 해당 변수를 찾게된다.

함수 스코프외에 블록 스코프란 것도 있는데요. 블록(block)이란 중괄호로 둘러싸인 부분을 블록이라고 합니다. 함수를 선언할 때 중괄호로 함수 본문을 둘러싸게 되는데 이부분을 블록이라고 한다.

function print() { // 함수 블록
 console.log(a);
}
{ // 블록
 const a = '1';
}