1.스코프가 필요한 이유

• 의도치 않은 변수 값의 변조를 방지
  특히 외부 API 라이브러리와 연동하여 사용할 때 같은 변수명끼리 충돌이 생기는 것을 방지할 수 있다.
• 효율적인 메모리 관리
  코드 블럭 안의 참조값들은 코드가 실행 될 때만 메모리에 할당되는 것이 효율적이다.

2.스코프 체인 (Scope Chain)

자신이 속해있는 지역의 변수들을 참조할 수 있게 되며, 해당 코드 레벨에 참조값이 없다면 상위 레벨의 스코프로 참조 값을 찾아 나가는 현상
전역 스코프에도 참조값이 없다면 null을 반환

let x =30;
function scope(){
let y =x;
return function(){
	let z =y;
    console.log(z);
    }
}

블록 스코프에서 지역 변수 y는 전역 변수 x값을 참조할 수 있고, 반환되는 함수의 지역 변수z는 y의 값을 참조할 수 있다.

3.정적 / 렉시컬 스코프 (Static / Lexical Scope)

자바스크립트는 렉시컬 스코프 원칙을 따른다. 렉시컬 스코프는 또 다른 말로 정적 스코프(Static Scope)라고 한다.
렉시컬 스코프: 함수를 호출한 곳이 아닌 선언한 곳을 기준으로 스코프를 결정하는 원칙

let greet = 'Hello';
function sayHi() {
	let greet = 'Hi';
  	print();
}
function print() {
	console.log(greet);
}
sayHi(); // 예상: "Hi" | 출력값: "Hello"
print(); // 예상: "Hello" | 출력값: "Hello"

print는 sayHi 코드 블럭 내부에서 호출되기 때문에 가장 가까운 지역 변수 greet의 값 'Hi'를 참조할 것 같지만, 전역 변수 greet의 값 'Hello'를 참조하고 있다.
만약 동적 스코프(Dynamic Scope)를 따랐다면, print 속의 greet은 자신을 호출한 함수 sayHi 내부의 greet 값을 참조했을 것이다.

4. 자바스크립트 변수 참조 과정

자바스크립트는 함수가 실행될 떄마다 메모리상에 실행 컨텍스트를 생성
이 실행 컨텍스트 안에는 렉시컬 환경이 존재
여기에 현재 스코프에서 선언한 모든 변수와 함수들이 저장되어 있는 환경 레코드가 존재
또한, 현재 환경에서 찾지 못한 변수를 상위 스코프에서 찾기 위해, 상위 스코프를 가리킨는 외부 렉시컬 환경 참조도 갖고 있다.
이를 통해, 코드 상에서 변수나 함수를 참조하면, 먼저 현재의 환경 레코드에서 찾아보고, 없을 경우 외부 렉시컬 환경 참조를 통해 상위 스코프를 참조하게 된다.
이런 식으로 모든 상위 스코프를 탐색했는데도 찾지 못할 경우, 전역 스코프까지 올라가며, 여기서도 찾지 못하면 Reference Error를 발생시킴

*전역 실행 컨텍스트는 앱이 실행되면 가장 먼저 생성 됨

참조1
참조2