콜백함수와 클로저

콜백함수

1. 콜백함수의 정의와 예시
   • 다른 코드의 인자로 넘겨주는 함수로써, 제어권을 함께 위임한 함수를 가지고 있습니다.
   ex) 알람..
2. 콜백함수에서의 제어권
   • 호출시점 : 콜백 함수의 제어권을 넘겨받은 함수가 언제 콜백을 실행할지 결정
   • 인자 : 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수를 호출할 때 인자에 어떤 값들을 어떤 순서로 넘길 것인지에 대한 제어권을 갖는다.
   • this : 기본적으로 this 가 전역객체를 참조하지만 제어권을 가진 함수가 this를 특정 객체로 지정할 수 있음
3. 콜백함수를 사용하는 이유
   • 비동기를 다루기 위해서 → 특정 조건이 달성되면 → 함수를 실행하여 → 실행한 결과 or 값 을 반환
4. 콜백함수에 this 를 바인딩하는 방법
   • bind, call, apply 메서드 사용, 화살표 함수 사용
5. 콜백지옥이란, 콜백지옥을 피하는 방법
   • 콜백지옥: 콜백함수가 중첩되며 들여쓰기가 많아지는 현상
   • Promise, Generator, Async/Await 사용해 콜백지옥을 피할 수 있음
6. ‘콜백 함수는 함수다.
   • 콜백함수로 객체의 메서드를 전달하더라도, 메서드가 아니라 함수로서 호출됨

클로저

1. 클로저의 정의

함수 내부에서 선언한 변수를 참조하는 내부함수에서 발생하는 현상 = 클로저 Closure

어떤 함수 A에서 선언한 변수a를 참조하는 내부함수 B를 외부로 전달할 경우 A의 실행 컨텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상

1. 클로저와 메모리 관리

실행 컨텍스트와 연결된 메모리를 끊어주기 위해 원시값(보통 null 또는 undefined)을 할당하면 된다.

1. 클로저 활용 사례

• 콜백함수 내부에서 외부 데이터를 사용하고 싶을 때(2)번이 (1)번의 fruits, idx를 사용하므로 클로저임.
• const fruitBox = Array.from({ length: 3 }, () => ["apple", "banana", "melon"]); fruitBox.forEach(function (fruits, idx) { // (1) fruits.forEach(function (_, innerIdx) { // (2) if (innerIdx === idx) { console.log(fruits[innerIdx]); } }); });
• 접근 권한 제어(정보 은닉)
  • 클로저를 활용하여 접근 권한을 부여하는 방법
    • 정보 공개 : return / 정보 비공개 : return X
    • 상위 컨텍스트에 있는 정보를 직접 수정할 수 없음
• 부분 적용 함수
  • 부분 적용 함수의 정의
    • 인자가 여러 개인 함수의 인자를 부분적으로 받아 맨 마지막에 원래 함수를 실행하는 함수
  • 실무에서 부분 적용 함수를 적용할 예시
    • 디바운스
• 커링 함수(currying function)
  • 부분 적용 함수와 차이점
    • 부분적용함수는 남은 인자를 한번에 전달하고 커링함수는 인자를 하나씩 순차적으로 받음
  • 커링 함수 적용의 적합한 상황
    • 구조는 비슷한데 인자는 조금씩 달라지는 함수를 지연 실행하고 싶을 때 사용
    • 프로젝트 내에서 자주 쓰이는 함수의 매개변수가 항상 비슷하고 일부만 바뀌는 경우
• 클로저 사용 시 주의할 점
  • 메모리를 차지하지 않도록 관리해줄 필요가 있다
  • 실행 컨텍스트를 잘 이해하고 써야 할 듯
    • 그냥 상위 컨텍스트에 있다고 다 불러와지는게 아니고 바로 위의 상위 컨텍스트여야 하는 점