Javascript Deep Dive 복습 시간..!

1. 함수를 선언하는 방법

함수 선언문: '표현식이 아닌 문'이며, 호이스팅된다.

• 함수 표현식: 함수를 변수에 할당하는 방식이며, 함수 이름을 명시할 필요가 없다
• 화살표 함수
  • constructor 사용 불가: 즉, 생성자 함수 역할 불가(super도 사용 불가)
  • arguments 존재 X
  • this 바인딩 방식의 차이: 렉시컬 바인딩 혹은 렉시컬 this
  • call, apply, bind를 활용하여 this 값을 직접 지정(변경)할 수 없음

---

2. 일반 함수와 화살표 함수의 this 바인딩 방식

• 메서드를 정의할 때는 화살표 함수를 지양. 일반 함수를 사용하자(화살표 함수로 정의하면 this가 전역 객체를 가리킬 수 있음)

---

3. 그 외 유용한 함수

3-1. 즉시 실행 함수

• 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있다
• '다시 호출되지 않는다'라는 점이 각인된다는 점에서 코드 리팩터링에 도움

즉, 재사용되지 않고 단 한 번만 실행되고 끝난다면 즉시 실행 함수의 사용을 검토!

3-2. 고차 함수

Javascript의 함수는 '일급 객체'이므로 가능한 개념.

고차함수: 함수를 인수로 받거나 새로운 함수를 반환시키는 역할을 하는 함수

React에서의 활용 - 고차 컴포넌트(Higher Order Component): 컴포넌트 내부에서 공통으로 관리되는 로직을 분리할 수 있다

---

4. 함수를 만들 때 주의사항

• 최대한 함수의 부수 효과(side-effect)를 최대한 억제

  • React: 최대한 useEffect의 작동을 최소화하는 것.
  • 이를 지향하되, 그렇다고 모든 함수를 '순수 함수'로 작성해야 하는 것은 아님.
    • 예: 외부 API를 호출하는 것, 콘솔을 출력하는 것 등등은 모두 부수 효과가 있다고 할 수 있다.

• 함수를 최대한 작게

• 누구나 이해할 수 있는 함수 이름

  • 사용 프레임워크에 Terser가 설치되어 있다면 한글로 네이밍하는 것도 좋은 방법
  • useEffect, useCallback에 함수 이름을 붙여주는 것도 좋은 방법