D-15

아직도 모르는게 많은데 섹션9가 끝이라니..!
좌절하지말고 복습에 복습을 계속해야겠다.
금요일 오후부터 JavaScript Koans 과제를 풀었는데
그 중 가장 어렵게 느껴졌던 스코프 문제들을 곱씹어보자.

🔍 스코프

it(function () {
    let funcExpressed = "to be a function";

    expect(typeof funcDeclared).to.equal("function");
    expect(typeof funcExpressed).to.equal("string");

    function funcDeclared() {  //함수 선언문 = 호이스팅이 발생한다.
      return "this is a function declaration";
    }

    funcExpressed = function () {  // 함수 표현식 = 호이스팅이 발생하지 않는다.
      return "this is a function expression";
    };

    const funcContainer = { func: funcExpressed };
    expect(funcContainer.func()).to.equal("this is a function expression");

    funcContainer.func = funcDeclared;
    expect(funcContainer.func()).to.equal("this is a function declaration");
  });

스코프는 변수의 값을 찾을 때 확인하는 곳이다.
함수 선언식은 호이스팅이 발생하지만 함수 표현식은 발생하지 않는다.
호이스팅은 함수 안에 있는 선언들을 끌어올려 유효범위 최상단에 선언하는 것이며
var와 함수 선언문에만 호이스팅이 발생한다.

🔍 렉시컬 스코프

it(function () {
    let message = "Outer";

    function getMessage() {  //함수 내부에 message가 x -> 그러므로 외부에서 참조
      return message; 
    }

    function shadowGlobal() {  //함수 내부에 message가 o -> 내부에서 참조
      let message = "Inner";
      return message;
    }

    function shadowGlobal2(message) {  //매개변수가 있기 때문에 매개변수 참조
      return message;
    }

    function shadowParameter(message) {  //외부 변수 재할당
      message = "Do not use parameters like this!"; // 재할당
      return message;
    }

//답
    expect(getMessage()).to.equal("Outer");
    expect(shadowGlobal()).to.equal("Inner");
    expect(shadowGlobal2("Parameter")).to.equal("Parameter"); //
    expect(shadowParameter("Parameter")).to.equal("Do not use parameters like this!");
    expect(message).to.equal(message);
  });

렉시컬 스코프는 함수를 어디서 선언했는지에 따라 상위 스코프를 정하는 것이라 배웠다.
함수의 호출이 아닌 함수의 선언에 따라 결정되는 렉시컬 스코프는 정적 스코프라고도 부른다.

🔍 기본값 매개변수 (default parameter)

it(function () {
    function defaultParameter(num = 5) {
      return num;
    }

    expect(defaultParameter()).to.equal(5);
    expect(defaultParameter(10)).to.equal(10);

    function pushNum(num, arr = []) {
      arr.push(num);
      return arr;
    }

    expect(pushNum(10)).to.deep.equal([10]);
    expect(pushNum(20)).to.deep.equal([20]);
    expect(pushNum(4, [1, 2, 3])).to.deep.equal([1, 2, 3, 4]); //
  });

기본값 매개변수는 함수의 매개변수에 값이 전달되지 않았을 때 기본값으로 설정하는 문법이다.

🔍 클로저

it("클로저(closure)에 대해 확인합니다.", function () {
    function increaseBy(increaseByAmount) {
      return function (numberToIncrease) {
        return numberToIncrease + increaseByAmount;
      };
    } // 함수가 함수를 리턴함
    //리턴되고있는 함수 (내부함수)가 외부 함수의 변수를 사용함
    //-> 클로저

    const increaseBy3 = increaseBy(3);
    const increaseBy5 = increaseBy(5);

    expect(increaseBy3(10)).to.equal(13);
    expect(increaseBy5(10)).to.equal(15);
    expect(increaseBy(8)(6) + increaseBy(5)(9)).to.equal(28);
    
  });

클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.
이는 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역변수로 구성된다.