Scope

변수를 사용할 수 있는 범위!!
사용할 수 있는 범위에 맞게 변수를 설정하고 관리하는 것 중요
안그러면 오류 값을 낼 수 있기 때문에

참고자료
w3schools - Scope
MDN - Scope
MDN - Variable

---

아래의 뜻 잘 알아두기 (위의 링크 참조)

내가 정리한거..
scope
변수의 사용이 가능한 범위 (변수가 쓰일 수 있는)

Block
{}로 둘러쌓인 코드의 묶음
if, for 문에 둘러 쌓인거.. 로직의 묶음

global scope
블록 안, 밖, 프로그램 어디에서나 변수에 대한 접근, 사용이 가능한 범위

global variable
블록 밖에 선언된 변수, global scope에 선언된 변수로
프로그램 어디에서나 사용이 가능한 변수

block scope
해당 블록 안에서만 변수에 대한 접근, 사용이 가능한 범위
즉 블록 자체가 변수에 접근할 수 있는 범위 이다

local variable
블록 안에 선언된 변수
해당 블록 안에서만 사용이 가능한 변수
(해당 블록이 끝나면 사라진다고 볼 수 있다...사용 불가) --> 다시 확인해보기

global namespace
변수를 선언하면 주어진 공간인데
프로그램 어디에서나 변수의 이름을 사용할 수 있는 공간을 가진다
반대로 로컬 네임스페이스는 블록 안에서만 변수의 이름을 사용 할수 있는 공간...

scope pollution
전역변수 남발할때 생기는 문제
변수를 불러올때 값 오류가 생기니 주의

---

코드로 확인

블록

function의 내부 하나의 블록
for문도 하나의 블록
if문도 하나의 블록

function hi() {
  return 'i am block';
}

for (let i = 0; i < 10; i++) {
  count++;
}

if (i === 1) {
  let j = 'one';
  console.log(j);
}

전역, 지역 변수

console.log('=====Global(전역) Scope 예제=====');
// {} 없이, {} 외부에 선언된 변수
const color = 'red';
console.log(color);

function returnColor() {
  // 블록밖에 선언된 전역변수 color을 가져온다
  console.log(color); 
  return color;
}

console.log(returnColor());

결과

=====Global(전역) Scope 예제=====
red
red
red

scope 오류

console.log('===== Scope의 오염 예제1=====');
const satellite = 'The Moon';
const galaxy = 'The Milky Way';
let stars = 'North Star';

const callMyNightSky = () => {
  stars = 'Sirius';
  
    // Sirius는 블록안에서만 쓰여야 하는데...
    // 키워드가 없으면 블록밖의 전역변수 stars의 값을 재할당해준거나 다름없다
	return 'Night Sky: ' + satellite + ', ' + stars + ', ' + galaxy;
};

console.log(callMyNightSky());

// 글로벌 변수 stars가 함수 callMyNightSky에서 재할당 된거나 마찬가지므로
// Sirius로 출력된다
console.log(stars);

결과

===== Scope의 오염 예제1=====
Night Sky: The Moon, Sirius, The Milky Way
Sirius

scope 오류2

function logSkyColor() {
  const dusk = true;
  let myColor = 'blue'; 
  if (dusk) {
    let myColor = 'pink';
    // if 블록안의 변수이므로 핑크
    console.log(myColor); // pink
  }
  function logSkyColor안의 지역변수를 사용하므로
  console.log(myColor); // blue 
}

// 선언된 전역변수가 없으므로 에러
console.log(myColor); // 에러!!

결과

ReferenceError: myColor is not defined
    at eval:48:13
    at eval
    at new Promise