간결형 화살표 함수(concise arrow function)는 한 줄짜리 함수를 더 깔끔하게 표현하기 위해 팻 애로우(fat arrow) 함수를 축약한 형태입니다. 함수 본문이 단 한 줄이라면 중괄호 {}를 생략할 수 있으며, 이때는 결과값이 자동으로 반환되는 암시적 반환(implicit return)이 적용됩니다.
또한 매개변수가 하나뿐이라면 소괄호 ()도 생략할 수 있지만, 매개변수가 아예 없는 경우에는 빈 소괄호를 반드시 작성해야 합니다.
기본 문법 비교
1. 팻 애로우 함수
let add = (a, b) => { return a + b; };2. 간결형 화살표 함수
let add = (a, b) => a + b;3. 매개변수가 하나인 경우 — 소괄호 생략 가능
let add = a => a + 22;참고로 객체 리터럴을 즉시 반환하려면 소괄호로 감싸야 합니다. 예를 들어 () => ({ name: 'test' })처럼 작성해야 하며, 그렇지 않으면 중괄호가 함수 본문의 시작으로 해석되어 의도대로 동작하지 않습니다.
예제 코드
다음은 간결형 화살표 함수로 덧셈을, 팻 애로우 함수로 곱셈을 구현한 완전한 HTML 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>화살표 함수 예제</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>팻 애로우 vs 간결형 화살표 함수</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 add()와 multiply() 화살표 함수가 호출됩니다.</h3>
<script>
let resEle = document.querySelector(".result");
let add = (a, b) => a + b;
let multiply = (a, b) => {
return a * b;
};
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = "32와 19의 합 = " + add(32, 19) + "<br>";
resEle.innerHTML =
"32와 19의 곱 = " + multiply(32, 19) + "<br>";
});
</script>
</body>
</html>실행 결과
페이지를 열면 다음과 같은 초기 화면이 나타납니다.
'클릭하세요' 버튼을 누른 후 — 덧셈과 곱셈 결과가 화면에 출력됩니다.
핵심 정리
- 중괄호 {} 사용 여부: 본문이 한 줄이면 생략할 수 있으며, 생략 시 값이 자동으로 반환됩니다.
- return 키워드: 중괄호를 사용하면 return을 명시해야 하고, 중괄호를 생략하면 return을 쓰면 안 됩니다.
- 소괄호 (): 매개변수가 하나면 생략할 수 있지만, 없거나 두 개 이상이면 반드시 작성해야 합니다.
- 가독성: 간단한 연산에는 간결형이 유리하고, 로직이 길어지면 팻 애로우 형태가 더 명확합니다.