JavaScript의 화살표 함수(fat arrow function)는 ES6(ES2015)에서 도입된 간결한 함수 표현 방식입니다. 기존의 function 키워드 없이 => 기호만으로 함수를 정의할 수 있어 코드가 훨씬 짧고 읽기 쉬워집니다.
화살표 함수의 기본 문법
(param1, param2, ...) => { }화살표 함수는 function 키워드가 필요 없으며, 매개변수와 함수 본문 사이에 =>(fat arrow)만 존재합니다. 이러한 특징 덕분에 콜백 함수나 짧은 유틸리티 함수를 작성할 때 특히 유용합니다.
JavaScript 화살표 함수 예제
다음은 두 숫자를 더하는 add() 화살표 함수를 구현한 완전한 HTML 코드입니다.
예제 코드
<!DOCTYPE html>
<html lang="ko">
<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;
}
.result{
font-size: 20px;
font-weight: 500;
color: blueviolet;
}
</style>
</head>
<body>
<h1>Fat arrow functions</h1>
<div class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>위 버튼을 클릭하면 add() 화살표 함수가 호출됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let add = (a, b) => {
return a + b;
};
document.querySelector(".Btn").addEventListener("click", () => {
resEle.innerHTML = "32와 19의 합 = " + add(32, 19);
});
</script>
</body>
</html>실행 결과
페이지를 실행하면 아래와 같이 버튼과 안내 문구가 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 add() 함수가 호출되어 다음과 같이 계산 결과가 출력됩니다.
화살표 함수의 주요 특징
- 간결한 문법: function 키워드 없이 => 기호로 함수를 정의할 수 있습니다.
- 암묵적 반환: 함수 본문이 한 줄인 경우 중괄호와 return을 생략할 수 있습니다. 예:
let add = (a, b) => a + b; - this 바인딩: 화살표 함수는 자신만의 this를 생성하지 않고 외부 스코프의 this를 그대로 사용하므로, 콜백에서 this 관련 오류를 줄일 수 있습니다.
이처럼 화살표 함수는 JavaScript에서 함수를 더욱 간단하고 직관적으로 작성할 수 있게 해주는 강력한 문법입니다.