자바스크립트 함수 정의란?
자바스크립트에서 함수를 정의한다는 것은 특정 작업을 수행하는 코드 블록에 이름을 붙여, 필요할 때마다 반복해서 호출하고 재사용할 수 있도록 만드는 과정입니다. 함수 정의는 기본적으로 다음 네 가지 요소로 구성됩니다.
- function 키워드 – 함수임을 선언하는 예약어
- 함수 이름 – 호출 시 사용되는 식별자
- 매개변수(파라미터) – 함수에 전달되는 값들을 받는 부분
- 중괄호 { } – 실행될 자바스크립트 문장을 감싸는 코드 블록
함수를 정의하는 두 가지 방식
자바스크립트에서는 주로 두 가지 방법으로 함수를 정의할 수 있습니다.
- 함수 선언식(Function Declaration):
function helloWorld() {...}처럼 function 키워드 뒤에 함수 이름을 붙여 정의합니다. - 함수 표현식(Function Expression): 이름 없는(익명) 함수를 만들어 변수에 할당하는 방식으로,
let testFunction = function () {...}형태로 정의합니다.
다음은 자바스크립트에서 함수 정의를 구현한 예제 코드입니다.
예제
<!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 Definitions</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above buttons to see the function definitions</h3>
<script>
let sampleEle = document.querySelector(".sample");
function helloWorld() {
alert("HELLO WORLD");
}
let testFunction = function () {
alert("TEST FUNCTION");
};
document.querySelector(".Btn").addEventListener("click", () => {
sampleEle.innerHTML = helloWorld + "<br>" + testFunction;
});
</script>
</body>
</html>실행 결과
위 코드에서는 두 가지 방식으로 함수를 정의했습니다. helloWorld()는 함수 선언식으로, testFunction은 함수 표현식으로 정의된 익명 함수입니다.
"CLICK HERE" 버튼을 클릭하면 각 함수 객체가 문자열로 변환되어 화면에 출력되며, 이를 통해 함수의 내부 소스 코드를 확인할 수 있습니다.
정리
자바스크립트 함수 정의는 function 키워드, 함수 이름, 매개변수, 그리고 중괄호로 묶인 코드 블록으로 이루어집니다. 함수 선언식과 함수 표현식 모두 동일하게 호출하여 사용할 수 있으며, 상황에 따라 적절한 방식을 선택해 사용하면 됩니다.