스코프는 변수에 접근하거나 참조할 수 있는 위치를 정의하는 것을 말한다.
일부 변수는 프로그램의 어디에서나 접근할 수 있지만, 어떤 변수는 특정 상황에서만 사용할 수 있다.
좋은 Scoping 습관은 변수들은 block scope으로 최대한 나눠놔야 한다.
(global 변수가 여기저기서 수정되면 안되기 때문에)

1. Global Scope (전역 스코프)

: 변수가 전역 범위에서 선언된 경우 Global Scope라고 한다.
Global Scope는 블록 내부에 바인딩되어 있지 않아 어떤 블록에서도 접근이 가능하다.
이렇게 선언된 변수를 전역 변수라고 한다.

var color = 'blue'
var returnSkyColor = () => {
  return color;
};

console.log(returnSkyColor()); // blue

• 위와 같이 변수 color는 외부에 선언되었으나 내부로도 접근할 수 있다.
• 함수 내부에서 불러와도 가능하다.

---

2. Local Scope (지역 스코프)

: 블록 내부에 선언된 경우 Local scope 라고 한다.
내부에서만 사용이 가능한 변수를 지역 변수라고 한다.

var color = 'blue'
var returnSkyColor = () => {
  var color = 'red'
  return color;
};

console.log(returnSkyColor()); // red

• 전역 변수 color이 있지만 기본적으로 가장 가깝게 정의되어있는 변수를 따르기 때문에 함수 내부에 있는 color 선언을 따른다.
• 함수 내부에서 먼저 color을 찾고, 없다면 그 후에 전역에서 color을 찾게 된다.
• 특별한 이유가 있는 경우 이외에는 전역변수보다 지역변수를 사용하는 것이 좋다.

1) function Scope (함수 스코프)

: 함수 내부의 지역 변수에서 var이 아닌 let과 const로 변수를 선언할 경우, 이 변수는 함수 내부에서만 사용할 수 있다.

const functionColor = () => {
  const color = 'red'
}
console.log(color()); // output: ReferenceError

2) Block Scope (블록 스코프)

: 브라켓 {} 내부에서 선언된 변수는 내부에서만 사용이 가능하다.

{
	const hello = 'Hello!'
    console.log(hello) // 'Hello!'
}

console.log(hello) // output: ReferenceError

• 위와 같이 내부에서 로그를 찍어보면 제대로 접근이 된다.
• 그러나 외부에서 로그를 찍어보면 접근할 수 없어 ReferenceError가 난다.

---

4. Scope Pollution

: 변수에 항상 접근할 수 있게 하는 것은 좋아보일 수 있지만, 너무 많은 글로벌 스코프는 에러가 날 확률이 높아진다.

let num = 50;

const logNum = () => {
  num = 100; // Take note of this line of code
  console.log(num);
};

logNum(); // Prints 100
console.log(num); // Prints 100

• num이라는 변수는 글로벌 스코프를 가졌다.
• logNum 함수 내에도 let을 생략할 경우 글로벌 스코프의num이 접근할 수 있기 때문에 num이 새로운 값으로 할당된다.

---

5. Static Scoping ( Lexical Scoping)

: 함수는 호출된 시점이 아닌 선언된 시점에서 유효범위를 가진다.

var i = 5;
function a(){
    var i = 10;
    b();
}
function b(){
    document.write(i);
}
 
a();

• 즉, b라는 함수는 함수 a 내부에서 호출 되었을때의 i에 접근하는 것이 아닌 선언된 시점에서의 범위에 해당하는 5가 정답이다.