2024내일배움캠프/TIL

[TIL] 1/3_2 JS문법다지기_4 콜백함수

SMILELY 2025. 1. 3. 20:55

콜백함수

  • 다른 코드의 인자로 넘겨주는 함수
    forEach, setTimeout..etc
  • 콜백 함수를 넘겨받은 forEach, setTimeout 등은 이 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다
    -> 제어권이 그들에게 있는 것
  • callback : 다시 돌아와서 호출해줘 = 제어권을 넘겨줄테니 너가 알고 있는 그 로직으로 처리해줘
  • 즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수
    콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행
    이 적절한 시점 역시 제어권이 있는 위임받은 코드가 알아서 하는 것

 

무슨 제어권?

  1. 호출 시점에 대한 제어권
    setInterval : 반복해서 매개변수로 받은 콜백함수의 로직을 수행

    원래 함수()를 수행하면 즉시 실행됨 : 호출주체와 제어권은 모두 사용자가 된다
    setInterval로 넘겨주면 호출주체와 제어권은 setInterval이 된다
    -> 우리가 넘겨준 함수를 00초마다 실행해줘.이기 때문이다.
  2. 인자에 대한 제어권
    • map을 사용할 때
      var newArr = [10, 20, 30].map(function(value, index){
      console.log(value, index);
      return value;
      });
      이때 function에 들어가는 value와 index의 이름은 우리가 정하는거지만 앞은 값, 뒤는 인덱스로 위치가 정해져있다
      -> 서로 이름을 바꾸더라도 들어가는 값은 같다
      -> 사람이 제어할 수 없는 것 : 콜백함수가 제어권을 갖는다
  3. this
    제어권을 넘겨받을 코드에서 콜백함수에 별도로 this가 될 대상을 지정한 경우에는 그 대상을 참조한다
    • method로서의 호출
      forEach, map, filter 모두 두개의 매개변수 1.값과 2.인덱스가 들어간다
      콜백함수를 넣는다는건 함수 그 자체를 넣어야지 매개변수를 넣으면 안된다 구분 잘하기! 

      aaa.bbb(1,2); 이렇게 메서드로서의 호출로 사용해서 함수를 실행시킬 수 있지만 그렇다고해서
      [4,5,6].forEach(aaa.bbb);처럼 인자로 사용할 수 없다 이건 그냥 함수를 갖다넣은게 된다

4-5까지 강의를 들었다. 중간에 문제풀면서 this 때문에 머리가 아팠지만 정말 재밌었다! 

그래도 그렇게 고민하고 찾아보고 했기 때문에 this 개념이 머리에 좀 들어온 것 같다.

앞으로 남은 강의들도 잘 이해가 되면 좋겠다