오늘은 그동안 배웠던 개념들을 문제로 풀어보면서 학습했던 내용에 대해전반적으로 복기하는 시간을 가졌다.

확실히 문제를 풀어보니 내가 어떤 개념들 잘 이해하고 있고, 어떤 부분이 보충이 필요한지 몸소 느낄 수 있는 경험이었다. 👍

💡 새로 알게된 내용

---

1. expect 함수

• 작성한 함수가 주어진 입력값에 대해서 리턴하는 값이 기대하는 값과 같은지를 비교하는 함수

• 이 함수를 활용하여 풀이한 문제의 결과를 확인할 수 있었다.

  expect(테스트하는값).기대하는조건
  
  expect(isEven(3)).to.be.true => 'isEven(3)의 결과값은 참(true)이어야 한다'
  expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal) 한다'

  • 여기서 '기대하는조건'에 해당하는 함수를 matcher라고 한다.

    '참인 것이어야 한다' => to.be.true
    '3과 같아야 한다' => to.equal(3)

    • mocha, chai framework에는 다양한 matcher가 있다. 자세한 건 다음 링크를 참고하자.

2. this

2-1. this란 무엇인가?

• method는 '어떤 객체의 속성으로 정의된 함수'를 말한다.

• 전역 변수에 선언한 함수도 웹페이지에서 window 객체의 속성으로 정의된 함수라고 할 수 있다.(method는 항상 '어떤 객체'의 method이다.)

• 따라서 호출될 때마다 어떠한 객체의 method일 텐데, 그 '어떠한 객체'를 묻는 것이 this이다. 참고자료

• 예시로, obj이라는 객체 안에 foo라는 메서드를 선언하고, this를 반환한다고 했을 때

  let obj = {foo: function() {return this}};
  
  console.log(obj.foo() === obj); // true

  • obj.foo() === obj 이라는 코드에 true라고 반환한다.
  • this는 함수의 호출에 따라서 값이 달라지기도 한다.

• this가 사용된 예시 코드

  const megalomaniac = {
      mastermind: 'Brain',
      henchman: 'Pinky',
      getFusion: function () {
      return this.henchman + this.mastermind;
      },
      battleCry(numOfBrains) {
      return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
      },
  };
  
  console.log(megalomaniac.getFusion()); // PinkyBrain
  console.log(megalomaniac.battleCry(3)); // They are Pinky and the Brain Brain Brain

2-2. 예외 사항 (화살표 함수는 this가 없다)

• 그러나 화살표 함수는 자신의 this가 없다.
• 화살표 함수에서의 this는 자신을 감싼 정적 범위(lexical context)이다.
  (전역에서는 전역 객체를 가리킨다.)
• 일반 변수 조회 규칙(normal variable lookup rules)을 따르기 때문에, 현재 범위에서 존재하지 않는 this를 찾을 때, 화살표 함수 바로 바깥 범위에서 this를 찾는다.

🌟 중요한 내용

---

1. 클로저

1-1. 클로저 정의

• mdn에 따른 클로저의 정의

• 클로저는 함수와 함수가 선언된 어휘적 환경의 조합을 말한다.

• 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

• 클로저는 내부(inner) 함수가 외부(outer) 함수의 지역 변수에 접근할 수 있다.

• 예시 코드

  let color = 'red';
  let name = 'apple';
  let price = 1000;
  
  function outerFn() {
    let color = 'yellow';
    name = 'banana';
    let price = 2000;
  
    function innerFn() {
      color = 'purple';
      let name = 'grape';
      return price;
    }
  
    innerFn();
  
    console.log(color); // 'purple'
    console.log(name); // 'banana'
  
    return innerFn;
  }
  
  const innerFn = outerFn();
  
  console.log(color); // 'red'
  console.log(name); // 'banana'
  console.log(innerFn()); // 2000

1-2. 화살표 함수로 클로저 표현

• 예시 코드

  const adder = x => {
    return y => {
      return x + y
    }
  }
  
  console.log(adder(50)(10)); // 60
  
  const subtractor = x => y => {
    return x - y
  }
  
  console.log(subtractor(50)(10)); // 40
  
  const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
  console.log(htmlMaker('div')('code states')); // <div>code states</div>
  
  const liMaker = htmlMaker('li')
  console.log(liMaker('1st item')); // <li>1st item</li>
  console.log(liMaker('2nd item')); // <li>2nd item</li>

2. Array 메소드 slice

• arr.slice는 arr의 값을 복사하여 새로운 배열을 리턴한다.

• 배열 전체를 복사

  const arr = ['peanut', 'butter', 'and', 'jelly'];
  
  console.log(arr.slice(0)); // ['peanut', 'butter', 'and', 'jelly'] 0번째부터 끝까지

• 기존 배열의 일부를 복사

  const arr = ['peanut', 'butter', 'and', 'jelly'];
  
  console.log(arr.slice(1)); // ['butter', 'and', 'jelly'] 1번째부터 끝까지
  
  console.log(arr.slice(0, 1)); // ['peanut'] 0번째부터 1번째 전까지
  console.log(arr.slice(0, 2)); // ['peanut', 'butter'] 0번째부터 2번째 전까지
  console.log(arr.slice(2, 2)); // [] 2번째부터 2번째 전까지

🧠 기억해야 할 내용

---

1. 엄격한 동치 연산 (===)을 사용하자.

• 느슨한 동치 연산(==)는 프로그램의 작동을 예측하기 어렵게 만든다. (비효율적)
• 두 값의 일치 여부를 엄격하게 검사하는 엄격한 동치 연산(===)을 사용하자!
• ==와 === 비교
  

2. const로 선언한 변수

2-1. const로 선언된 변수에는 재할당(reassignment)이 금지된다.

• 재할당을 시도할 경우 TypeError가 발생한다.
  
  • let으로 선언한 변수는 에러가 발생하지 않고 재할당이 된다.
    

2-2. const로 선언된 배열의 경우 새로운 요소를 추가하거나 삭제할 수 있다.

• 새로운 요소가 추가된 모습
  
• 역시 재할당은 불가능하다.
  

2-3. const로 선언된 객체의 경우, 속성을 추가하거나 삭제할 수 있다.

• 새로운 요소가 추가된 모습
  
• 마찬가지로 재할당은 불가능하다.
  

2-4. 이렇게 재할당도 안되는 const 키워드를 굳이 사용하는 이유는 뭘까? 🤷‍♀️

• 바로 의도하지 않은 값의 변경을 막을 수 있기 때문이다.
  값을 재할당할 경우 TypeError를 내므로 보다 안전한 프로그램을 만들 수 있다.

3. 화살표 함수(ArrowFunction)

3-1. 화살표 함수의 특징

• function 키워드를 생략하고 화살표 => 를 붙일 수 있다.

  const add = (x, y) => {
      return x + y
  }
  console.log(add(10, 20)); // 30

• 리턴(return)을 생략할 수 있다.

  const subtract = (x, y) => x - y
  console.log(subtract(10, 20)); // -10

• 필요에 따라 소괄호(())를 붙일 수 있다.

  const multiply = (x, y) => (x * y)
  console.log(multiply(10, 20)); // 200

• 파라미터가 하나일 경우 소괄호(()) 생략이 가능하다.

  const divideBy10 = x => x / 10
  console.log(divideBy10(100)); // 10