자바스크립트에서 함수 호출(function invocation)은 함수 정의 시 중괄호 {} 안에 작성된 코드를 실제로 실행하는 과정입니다. 함수가 한 번 정의되면, 함수 이름 뒤에 소괄호 ()를 붙여 해당 함수를 호출할 수 있으며, 이때 함수 본문에 작성된 코드가 실행됩니다.
즉, 함수를 정의하는 것만으로는 아무 일도 일어나지 않으며, 반드시 호출해야 그 안의 로직이 동작한다는 점이 핵심입니다.
예제 코드
다음은 자바스크립트 함수 호출을 구현한 예제입니다. 버튼을 클릭하면 helloWorld() 함수가 호출되어 알림 창이 표시됩니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript Function Invocation</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 함수가 호출됩니다
</h3>
<script>
let sampleEle = document.querySelector(".sample");
function helloWorld() {
alert("HELLO WORLD");
}
document.querySelector(".Btn").addEventListener("click", () => {
helloWorld();
});
</script>
</body>
</html>실행 결과
코드를 실행하면 다음과 같은 화면이 나타납니다.
버튼 클릭 시
“CLICK HERE” 버튼을 클릭하면 helloWorld() 함수가 호출되고, 아래와 같이 “HELLO WORLD” 알림 창이 표시됩니다.
핵심 정리
- 함수 정의는
function 함수명() { ... }형태로 작성합니다. - 함수 이름 뒤에
()를 붙이면 해당 함수가 호출되어 내부 코드가 실행됩니다. - 이벤트 리스너 콜백 안에서도 위 예제처럼 함수를 호출할 수 있습니다.