Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

자바스크립트(JavaScript)에서 함수를 호출하는 방법 총정리

자바스크립트 함수 호출의 기본

JavaScript는 개발자가 직접 자신만의 함수(function)를 작성할 수 있도록 지원합니다. 스크립트 내 어느 위치에서든 이미 정의해 둔 함수를 실행하려면, 해당 함수의 이름 뒤에 소괄호 ()를 붙여 작성하기만 하면 됩니다.

대표적인 함수 호출 방식

  • 직접 호출: 스크립트 내에서 함수이름(); 형태로 작성하여 즉시 실행
  • 이벤트 핸들러를 통한 호출: 버튼 클릭 등 특정 이벤트 발생 시 onclick 속성으로 함수 연결
  • addEventListener 활용: HTML과 JavaScript를 분리한 상태에서 이벤트 리스너로 함수 등록

예제 코드

아래 예제를 직접 실행해 보며 JavaScript에서 함수를 호출하는 방법을 익혀 보세요. "Say Hello" 버튼을 클릭하면 sayHello() 함수가 호출되어 화면에 메시지가 출력됩니다.

<html>
   <head>
      <script>
         function sayHello() {
            document.write ("Hello there!");
         }
      </script>
   </head>

   <body>
      <p>Click the following button to call the function</p>
      <form>
         <input type = "button" onclick = "sayHello()" value = "Say Hello">
      </form>
      <p>Use different text in write method and then try...</p>
   </body>
</html>

코드 동작 원리 살펴보기

위 예제가 어떻게 동작하는지 단계별로 확인해 보겠습니다.

  1. <head> 태그 안의 <script> 영역에서 sayHello() 함수를 정의합니다. 이 함수는 document.write() 메서드를 통해 화면에 문자열을 출력합니다.
  2. <body> 영역에는 폼 안에 버튼이 배치되어 있으며, 버튼의 onclick 속성에 sayHello()가 연결되어 있습니다.
  3. 사용자가 "Say Hello" 버튼을 클릭하면 클릭 이벤트가 발생하고, 이 순간 sayHello() 함수가 실행되어 화면에 "Hello there!"라는 문구가 나타납니다.

추가 팁: addEventListener로 함수 호출하기

HTML 태그 안에 이벤트를 직접 작성하는 인라인 방식 외에도, JavaScript에서 addEventListener를 사용해 함수를 호출할 수 있습니다.

document.getElementById("myBtn").addEventListener("click", sayHello);

이 방식은 HTML 구조와 JavaScript 로직을 깔끔하게 분리할 수 있어 코드의 가독성과 유지보수성 면에서 훨씬 유리합니다. 실무 프로젝트에서는 주로 이 방법이 권장됩니다.