1. Scope

scope란, '변수가 어디까지 쓰일 수 있는지'의 범위를 의미합니다.

2. Block

• function 과 if 문, for 문을 하면서 이미 block을 많이 경험했는데, 중괄호({} , curly brace)로 감싸진 것을 block이라고 합니다.
• {} (block)내부에서 변수가 정의되면 변수는 오로지 {} (block)내부에서만 사용할 수 있습니다.
• {} (block)내부에서 정의된 변수는 local(지역) 변수라고 부릅니다.

function getResult() {
  let result = 10;
  
  return result;
}

// 자바스크립트 에러! 
// getResult 내부의 scope에 접근할 수 없다
console.log(result);

• console.log(result) 에서 getResult 내부에 접근이 불가능하기 때문에 result 라는 변수의 존재를 알지 못합니다.
• result 라는 변수는 getResult 함수의 {} (block)에서만 사용할 수 있습니다.

3. Global(전역) Scope

block 외부인 global scope에서 만든 변수를 global variable(전역변수)라고 합니다. 코드 어디서든 접근 가능하여 변수값을 확인할 수 있습니다.

const color = 'red';
console.log(color);

function returnColor() {
  console.log(color);
  return color;
}

console.log(returnColor()); // 'red'

returnColor 함수 내에서, returnColor 함수 바깥에 있는 color라는 변수를 return 해주었습니다.
color 라는 변수는 global 변수이기 때문에 returnColor 함수의 block에서도 접근이 가능해서 'red' 를 반환한것입니다.

4. Scope의 오염

global 변수를 쓰면 여기 저기서 접근하기 쉬워서 좋다고 생각할 수 있지만, 너무 남용하면 프로그램에 문제를 일으킬 수 있습니다. global 변수를 선언하면, 해당프로그램의 어디에서나 사용할 수 있는 global namespace를 갖습니다. global 변수가 계속 살아있어서 변수값이 계속 변한다면 해당 변수를 트래킹하기도 어렵고 이 변수가 어디에서 왜 필요한지 알기 위해서는 let, const의 선언부까지 찾아서 확인해야 합니다.

const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius';
  
  return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());
console.log(stars);

• stars 라는 global 변수가 있습니다.
• callMyNightSky 함수에서 새로운 변수를 선언하고 싶었는데 깜빡하고 let 키워드를 작성하지 않았습니다.
• callMyNightSky 을 호출하면 stars 변수에 "Sirius" 이 할당됩니다.
• global 변수였던 stars 에 영향이 갔습니다.
• 다른 함수에서 global 변수인 stars 을 사용하고 싶은데 값이 수정된 "Sirius" 으로 사용하게 됩니다.