함수(function)는 프로그램 내 어디에서든 호출하여 사용할 수 있는 재사용 가능한 코드의 집합입니다. 함수를 활용하면 동일한 코드를 반복해서 작성할 필요가 없어지며, 개발자가 모듈화된 코드를 작성하는 데 큰 도움이 됩니다.
JavaScript에서 함수 정의하기
JavaScript에서 함수를 정의하는 가장 일반적인 방법은 function 키워드를 사용하는 것입니다. function 키워드 뒤에 고유한 함수 이름을 붙이고, 괄호 안에 매개변수 목록(비워둘 수도 있음)을 작성한 다음, 중괄호({})로 감싼 실행문 블록을 이어서 작성하면 됩니다.
다음은 기본적인 함수 정의 예시입니다.
<script>
<!--
function sayHello() {
alert("Hello there");
}
//-->
</script>
함수 호출 방법
정의된 함수를 스크립트의 다른 위치에서 호출하려면, 아래 코드와 같이 함수 이름 뒤에 괄호()를 붙여 작성하기만 하면 됩니다.
예제
다음은 JavaScript에서 함수를 호출하는 방법을 보여주는 예제입니다. 버튼을 클릭하면 sayHello() 함수가 실행됩니다.
<html>
<head>
<script>
function sayHello() {
d ocument.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>
위 예제에서는 HTML 버튼에 onclick 이벤트 핸들러를 연결했습니다. 사용자가 "Say Hello" 버튼을 클릭하면 sayHello() 함수가 호출되어 화면에 "Hello there!"라는 문구가 출력됩니다. write 메서드에 다른 텍스트를 넣어 직접 테스트해 볼 수도 있습니다.
추가로 알아두면 좋은 점
함수는 위 예제처럼 버튼 클릭과 같은 이벤트 핸들러를 통해 호출할 수 있을 뿐만 아니라, 스크립트 내에서 직접 호출하거나 다른 함수 내부에서 호출할 수도 있습니다. 또한 최신 JavaScript에서는 함수 표현식이나 화살표 함수(arrow function)를 사용해 더 간결하게 함수를 정의할 수도 있습니다.