Blocks and Scope

{} 로 둘러싸인 코드를 Block 이라고 한다
1. 1줄 이상의 코드를 묶어준다
2. 구조를 만들어준다

Global Scope

scope 은 '변수가 선언된 위치(문맥)'을 의미한다
변수는 블럭 안이나 밖에 위치할 수 있다
블럭 밖에서 선언된 변수를 global variables 라고 한다
global variables 은 블럭 밖이나 안에서 모두 접근 가능하다

const color = 'blue'

const returnSkyColor = () => {
  return color; // blue 
};

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

Block Scope

block scope 에서 선언된 변수를 local variables 라고 하고
local variables 은 블럭 안에서만 접근 가능

const logSkyColor = () => {
  let color = 'blue'; 
  console.log(color); // blue 
};

logSkyColor(); // blue 
console.log(color); // ReferenceError

• 정리!!!
  : 안에서는 밖이 보이고, 밖에서는 안이 보이지 않는다

Scope Pollution

결론: global variables 사용을 최소화하자

global variables 를 선언하게 되면
변수가 global namespace 에 저장된다
1. 전역변수는 프로그램이 끝날 때까지 남아있기 때문에 글로벌 네임스페이스의 공간이 빨리 찬다
2. 전역변수는 어플리케이션의 어디에서나 접근 가능하기 때문에 변수간의 충돌이 일어날 수 있다

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 함수 안의 num 변수를 let 을 사용하지 않고 선언
-> lognum 함수를 호출할 때 num 의 값이 100으로 재할당 됨
-> 100으로 재할당 된 값이 전역변수 num 에도 영향을 준다
-> 나중에 전역변수 num 을 호출했을 때 원하던 값인 50이 아닌 100이 출력된다

(
*namespace란? 소속!
철수네 강아지도 멍멍이, 영희네 강아지도 멍멍이
둘 다 멍멍이이므로 구분을 위해서 '철수네 멍멍이', '영희네 멍멍이'
이런 식으로 소속을 붙이는 것
식별자(함수, 변수, 형식...)가 고유하도록 보장하는 코드 영역

)

Practive Good Scoping

타이트하게 scoping 하는 것이 좋은 습관
1. 블럭으로 섹션이 나뉘기 때문에 코드 가독성이 높아진다
2. 변수가 속해있는 위치를 알기 쉽다
3. 코드가 모듈화 되므로 유지보수하기 좋다
4. 메모리 확보에 좋다 - 블럭 안의 변수는 실행 후에 사라질 것이므로

const logSkyColor = () => {
  const dusk = true;
  let color = 'blue'; 
  if (dusk) {
    let color = 'pink';
    console.log(color); // pink
  }
  console.log(color); // blue 
};

console.log(color); // ReferenceError