[JS] JS koans 복습

scope, closer

 it("lexical scope와 closure에 대해 다시 확인합니다.", function () {
    let age = 27;
    let name = "jin"; // jimin
    let height = 179;

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

      function innerFn() {
        age = 26;
        let name = "suga";
        return height; //178
      }
      innerFn();

      expect(age).to.equal(26);
      expect(name).to.equal("jimin");

      return innerFn;
    }

    const innerFn = outerFn();

    expect(age).to.equal(27);
    expect(name).to.equal("jimin");
    // name이 왜 jimin인가?
    // 내 생각 : jin
    // 정답 : jimin
    // 정답의 이유 : const innerFn = outerFn(); 에서
    // outerFn함수가 실행된 결과값이 innerFn 변수에 담김
    // 따라서 그 뒤로 전역변수인 name이 outerFn에 의해서 변경됨
   
    expect(innerFn()).to.equal(178);
  });

화살표함수로 클로져 표현

  it("화살표 함수를 이용해 클로저를 표현합니다", function () {
    const adder = (x) => {
      return (y) => {
        return x + y;
      };
    };

    expect(adder(50)(10)).to.eql(60);

    const subtractor = (x) => (y) => {
      return x - y;
    };

    expect(subtractor(50)(10)).to.eql(40);

    const htmlMaker = (tag) => (textContent) =>
      `<${tag}>${textContent}</${tag}>`;
    expect(htmlMaker("div")("code states")).to.eql("<div>code states</div>");

    const liMaker = htmlMaker("li");
    expect(liMaker("1st item")).to.eql("<li>1st item</li>");
    expect(liMaker("2nd item")).to.eql("<li>2nd item</li>");
    // 그럼 실제 사용할때 결과가 문자열로 나오는건가?
    // 실제 html에서는 어떻게 쓰지? innerHTML을 쓰나?
  });

데이터타입

 it("원시 자료형을 변수에 할당할 경우, 값 자체의 복사가 일어납니다.", function () {
    let overTwenty = true;
    let allowedToDrink = overTwenty;

    overTwenty = false;
    expect(overTwenty).to.equal(false);
    expect(allowedToDrink).to.equal(true);
    // 값 자체의 복사라.. 바로 치환된다는 얘긴가?ㅇㅇ
    // 내 생각 : allowedToDrink=overTwenty
    // 정답 : overTwenty=true
   	// 정답의 이유 : 변수에 변수를 할당해도, 변수 안의 값 자체로 바로 복사된다.

    let variable = "variable";
    let variableCopy = "variableCopy";
    variableCopy = variable; //"variable" 문자열로 재할당됨
    variable = variableCopy;//"variable" 문자열로 재할당됨
    expect(variable).to.equal("variable");
    // 내 생각 : variableCopy
    // 정답 : variable
    // 왓??????????????
    // 정답의 이유 : 변수 veriable에 "variable" 문자열로 할당 됨
  });

 it("원시 자료형 또는 원시 자료형의 데이터를 함수의 전달인자로 전달할 경우, 값 자체의 복사가 일어납니다.", function () {
    let currentYear = 2020;
    function afterTenYears(year) {
      year = year + 10;
   // year : 2030
    }
    afterTenYears(currentYear);
   // 변수 이름만 같을뿐, currentYeat은 지역변수로 활용된다.
   // 따라서  전역변수에 영향을 미치지 않는다.
    expect(currentYear).to.equal(2020);
	// afterTenYears:2020
   
    function afterTenYears2(currentYear) {
      currentYear = currentYear + 10;
      return currentYear;
      // currentYear : 2030
    }
    let after10 = afterTenYears2(currentYear);
   	
    expect(currentYear).to.equal(2020);
    expect(after10).to.equal(2030);
   // 
    // 사실 함수의 전달인자도 변수에 자료(data)를 할당하는 것입니다.
    // 함수를 호출하면서 넘긴 전달인자가 호출된 함수의 지역변수로 (매 호출 시마다) 새롭게 선언됩니다.
  });