[JavaScript] 익명 CallBack 함수 직접 정의를 사용하는 이유 알아보기

🤔 CallBack 함수가 뭘까?

자바 스크립트에서는 선언함수 또는 익명함수를 인자로 받아

호출한 함수 내부에서 인자로 전달받은 함수를 호출(Callback) 할 수 있다.

 

간단하게 예시를 들어보자.

 

  <script>
   //사람의 동작(movement)을 제어
    function person(movement, clock) {
      document.write(`나는 지금 `);
      movement(clock);
    }
     //밥 먹는 동작
    function eat(clock) {
      document.write(`${clock}시에 밥 먹는중이다`);
    }
        //3시에 밥 먹고 싶다
    person(eat, 3);

 

👉 사람의 동작을 실행하는 함수에 동작 함수를 인자로 전달받아 call 하는 것이다.

---

❓그렇다면 익명 CallBack 함수를 직접 정의한다는건?

이미 만들어져 있는 일반 함수를 인자로 주는 것이 아닌 

익명함수로 직접 작성한 코드를 인자로 넣어주는것이다.

 

그렇다면 한번 예제를 봐보겠다.

    //사람의 동작(movement)을 제어
    function person(movement, clock) {
      document.write(`나는 지금 `);
      movement(clock);
    }

👆 위 함수는 사람의 동작을 제어하는 함수이며 동작을 인자로 받는다.

 

그런데 갑자기 신나서 내 기분을 표시하고 싶어졌다!

 

그러나 원래 기분이 좋다 는 동작이라고 하기 애매하며, 재사용할 일도 없기때문에 

따로 함수로 만들기도 애매하다.

 

이럴 때 그냥 즉석으로 만들어서 사용할 수 있도록 익명함수로 직접 코드를 쓸 수 있다.

 

    person(function (mood) {
      document.write(mood);
    }, "신난다");

👉 인자로 들어갈 함수에 익명으로 하여 내 기분을 표시하는 함수를 입력한다.

 

이렇게 되면 굳이 관련이 없는 새로운 행위를 익명 함수 직접 정의를 통해

즉석으로 간단하게 출력할 수 있다.

 

---

🤔 실제로 어디에 많이 사용이 될까?

여러 용도로 많이 사용되지만 특히 이벤트 핸들러에 많이 사용된다.

 

버튼을 눌렀을 때 기존에 만들어져있던 이벤트가 아닌 새로운 이벤트들이 실행 되길바랄때,

그 새로운 이벤트를 다른 곳에서 재활용하는 것이 아닌 한번 쓰고 버려서 굳이 함수로 정의하기 애매할 때,

 

그러한 부분은 인자로 직접 익명으로 정의된 코드를 넣어 쓰고 버리면된다.