TIL 3주차 - 3. 스코프 클로저

스코프

" 변수 접근 규칙에 따른 유효 범위"

전역 스코프 vs 지역 스코프

1. 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만, 반대는 불가

2. 스코프는 중첩이 가능하다

3. 가장 바깥쪽의 스코프는 전역 스코프(Global Scope), 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)

4. 지역 변수는 전역 변수보다 더 높은 우선순위를 가진다.

   ( 동일한 변수 이름으로 인해 바깥쪽 변수가 안쪽 변수에 의해 가려지는(shadow) 이러한 현상을 쉐도잉(variable shadowing)이라고 한다. )

블록 스코프 vs 함수 스코프

블록 스코프

블록단위(if-esle, while, for 등)에서 유효범위를 갖는 스코프

• let
• const
• 화살표 함수는 블록 스코프로 취급. 함수 스코프가 아니다.

함수 스코프

• var
  var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따른다. 함수 내에서만 지역변수가 유지된다.
  But 화살표 함수의 블록 스코프는 무시하지 않음.

렉시컬 스코프(Lexical Scope)

함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정되는 것을 말한다.
즉, 함수를 어디서 선언하였는지에 따라 상위 스코프를 결정한다는 뜻.

---

클로저 Closure

렉시컬 환경

클로저

• 함수와 함수의 렉시컬 환경의 조합
• "외부함수의 변수에 접근할 수 있는 내부함수"
• 함수가 생성될 당시의 외부 변수를 기억
• 외부함수의 실행이 끝나 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있다.

function makeCounter(){
 let num = 0; // 은닉화 
 return function(){
   return num++;
 }
}

let counter = makecounter()
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

참고)
https://www.youtube.com/watch?v=tpl2oXQkGZs

클로저 모듈 패턴

객체에 담아 여러 개의 내부 함수를 리턴할 수 있다.

• 스코프 규칙에 의해 value라는 변수에 새로운 값을 할당할 수는 없다.
• 캡슐화 : '외부 스코프에서는 내부 스코프의 변수에 접근할 수 없다'

스코프 클로저 연습 예제

    let age = 27;
    let name = 'jin';
    let height = 179;

    function outerFn() {
      let age = 24;
      name = 'jimin';
      let height = 178;

      function innerFn() {
        age = 26;
        let name = 'suga';
        return height;
      }

      innerFn();

      expect(age).to.equal("????");
      expect(name).to.equal("???"); 

      return innerFn;
    }

    const innerFn = outerFn();

    expect(age).to.equal("???");
    expect(name).to.equal("????");
    expect(innerFn()).to.equal("????");

<asnwer>
26 
"jimin" 
27
178