[Error] throw new ERR_INVALID_ARG_TYPE(name, 'Function', value); | 함수를 이벤트 리스너로(JS)

socket.io 과제 중 아래의 에러를 만났다..

node:internal/validators:421
    throw new ERR_INVALID_ARG_TYPE(name, 'Function', value); // 두 번째 인자에 함수(Function) 타입 넣어줘야 함
    ^

TypeError [ERR_INVALID_ARG_TYPE]: The "listener" argument must be of type function. Received undefined

구글링을 해봐도 무슨 문제인지 감이 안잡혀서 뤼튼의 힘을 빌렸다 ㅋ;

오류가 발생한 코드

    function handleEvent(msg) {
      let text = "";
      switch (msg) {
        case "hello":
          text = "안녕하세요.";
          break;
        case "study":
          text = "공부합시다!";
          break;
        case "bye":
          text = "잘가~";
      }
      console.log("client :", msg);
      socket.emit("msg_render", `${msg}: ${text}`);
    }

    socket.on("hello", handleEvent("hello")); // 함수를 실행하고 있는 상태 => 함수 참조를 전달해줘야 오류 해결!

수정한 코드

    function handleEvent(msg) {
      let text = "";
      switch (msg) {
        case "hello":
          text = "안녕하세요.";
          break;
        case "study":
          text = "공부합시다!";
          break;
        case "bye":
          text = "잘가~";
      }
      console.log("client :", msg);
      socket.emit("msg_render", `${msg}: ${text}`);
    }

    socket.on("hello", () => handleEvent("hello"));

JavaScript에서 함수를 이벤트 리스너로 등록하는 방법에 대한 이해

이벤트 리스너를 등록하는 과정에서 함수를 바로 호출하는 것이 아니라, 함수 참조를 전달해야 한다

함수 참조와 지연 실행

JavaScript에서 함수는 일급 객체로, 다른 변수와 마찬가지로 다른 함수의 인자로 전달될 수 있습니다.
함수 이름 뒤에 괄호 ()를 붙여 호출하면, 해당 함수는 바로 실행되고 그 반환값이 해당 위치에 삽입됩니다. 반면, 괄호 없이 함수 이름만을 사용하면 함수 참조가 전달되며, 이는 나중에 해당 함수를 실행할 수 있도록 합니다.

인자 전달의 유연성

이벤트 리스너로 사용되는 함수에 추가적인 인자를 전달하는 두 가지 방법이 주로 사용된다.

1. 익명 함수 사용 : 직관적이며, 코드를 간결하게 유지

element.addEventListener('click', () => myFunction(arg1, arg2));

2. 고차 함수 사용 : 고차 함수는 다른 함수를 반환하는 함수로, 고차 함수가 이벤트 리스너로 사용될 함수를 인자와 함께 생성하여 반환

function createMyFunction(arg1, arg2) {
  return function() {
    // 이곳에서 arg1과 arg2를 사용할 수 있다.
  };
}

element.addEventListener('click', createMyFunction(arg1, arg2));

이를 통해 특정 이벤트가 발생했을 때만 원하는 함수가 실행되도록 하며, 필요한 인자를 함께 전달할 수 있습니다.