제로초 자바스크립트 입문 <스코프와 클로저>

블록 스코프와 함수 스코프

• 모든 변수는 스코프 scope, 범위 가 있다
• var 은 함수 스코프, let 은 블록 스코프이다
• 함수 안에 선언된 변수는 함수 바깥에서는 접근할 수 없다 
• 이처럼 함수를 경계로 접근 가능 여부가 달라지는 것을 함수 스코프(함수만 신경씀) 라고 한다
• 함수 스코프를 다르게 말하면 함수를 끝날 때 함수 내부의 변수도 같이 사라진다고 할 수 있다
• var 는 함수 스코프라서 if 문 안에 들어 있어도 if 문 바깥에서 접근할 수 있다
• let 은 블록 스코프(블록을 신경씀) 이다
• 블록은 if 문, for 문, while 문, 함수에서 볼 수 있는 중괄호 ({ })를 의미 
• 블록 바깥에서는 블록 안에 있는 let 에 접근 할 수 없다
• let 뿐만 아니라 const 도 블록 스코프를 가진다
• 블록 스코프를 다르게 말하면 블록이 끝날 때 내부의 변수도 같이 사라진다고 할 수 있다

클로저와 정적 스코프 

• 클로저 closure 는 간단히 말해 외부 값에 접근하는 함수 이다
• 모든 자바스크립트 함수는 클로저가 될 수 있다
• 함수가 선언된 위치에 따라 접근할 수 있는 값이 달라지는 현상을 '함수는 정적 스코프 lexical scope 를 따른다' 라고 표현한다
• 선언된 위치가 아니라 호출된 위치에 따라 접근할 수 있는 값이 달라진다면 동적 스코프 dynamic scope 를 따른다
• 자바스크립트는 정적 스코프를 따른다 

let 과 var 를 사용한 결과가 다른 이유 

• var 를 사용하면서 문제를 해결하고 싶다면 i 변수의 값을 고정할 방법을 찾아야 한다 
• let 의 i 변수가 블록마다 값이 고정되는 것처럼 var 의 i 변수 값도 고정된다
  • 클로저가 i 변수 대신 고정된 값을 가리키게 하면 된다 
  • for 문 대신 forEach( ) 메서드를 사용한다 
  • forEach ( ) 의 콜백 함수마다 고정된 i 값을 갖고 있어서 가능하다 
  • 사실 let 을 쓰는 것이 가장 편하다
  • 요즘은 대부분 var 대신 let 을 사용한다 
• switch 문을 사용하는 상황 

const type = 'a';
switch (type) {
  case 'a':
    let name = '제로초';
    break;
  case 'b':
    let name = '레오';
    break;
  case 'c':
    let name = '체리';
    break;
}
Uncaught SyntaxError: Identifier 'name' has already been declared

• 블록 스코프는 현재 switch 문 하나밖에 없다
• 이럴 때는 각자 블록 스코프를 생성하면 해결된다

const type = 'a';
switch (type) {
      case 'a': {
        let name = '제로초';
    break;
      }
  case 'b': {
        let name = '레오';
    break;
      }
  case 'c': {
        let name = '체리';
    break;
      }
    }