화살표 함수(arrow function)는 ES2015(ES6)에서 도입된 JavaScript의 약식 함수 표기법입니다. 기존의 function 키워드를 사용하는 일반 함수보다 훨씬 짧은 문법으로 함수를 정의할 수 있어, 코드를 더 간결하고 읽기 쉽게 만들어 줍니다.
화살표 함수의 주요 특징
- 간결한 문법: function 키워드 없이 => 기호만으로 함수를 선언할 수 있습니다.
- 자체 this 바인딩이 없음: 화살표 함수는 자신만의 this를 갖지 않고, 정의된 위치를 둘러싼 렉시컬 스코프(주변 컨텍스트)의 this를 그대로 상속받습니다.
- 생성자로 사용 불가: new 키워드와 함께 호출할 수 없습니다.
- arguments 객체 미지원: 자체 arguments 객체가 없으므로, 가변 인자가 필요하면 나머지 매개변수(rest parameter)를 활용해야 합니다.
예제 코드
다음 예제는 일반 함수와 화살표 함수에서 this가 어떻게 다르게 동작하는지 비교해 보여줍니다.
<!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: 18px;
font-weight: 500;
color: rebeccapurple;
}
</style>
</head>
<body>
<h1>JavaScript 약식(화살표) 함수</h1>
<div class="result"></div>
<button class="Btn">클릭하세요</button>
<h3>위 버튼을 클릭하면 화살표 함수와 일반 함수가 실행됩니다</h3>
<script>
let resEle = document.querySelector(".result");
let objYear, obj1Year;
let obj = {
name: "rohan",
age: 20,
birthday() {
function birthYear() {
objYear = new Date().getFullYear() - this.age;
}
birthYear();
},
};
let obj1 = {
name: "Shawn",
age: 22,
birthday() {
let birthYear = () => {
obj1Year = new Date().getFullYear() - this.age;
};
birthYear();
},
};
document.querySelector(".Btn").addEventListener("click", () => {
obj.birthday();
obj1.birthday();
resEle.innerHTML += "화살표 함수 미사용 : 출생 연도 = " + objYear + " ";
resEle.innerHTML += "화살표 함수 사용 : 출생 연도 = " + obj1Year + " ";
});
</script>
</body>
</html>
코드 설명
obj 객체의 birthday 메서드 안에서는 일반 함수인 birthYear()를 호출합니다. 일반 함수는 호출되는 시점에 자신만의 this를 결정하며, 이 경우 전역 객체(window)를 가리키게 됩니다. 따라서 this.age는 undefined가 되어 계산 결과가 NaN으로 출력됩니다.
반면 obj1 객체에서는 화살표 함수로 birthYear를 정의했습니다. 화살표 함수는 자체 this 바인딩이 없기 때문에, 정의된 시점의 주변 스코프인 birthday 메서드의 this, 즉 obj1 객체를 그대로 참조합니다. 따라서 this.age가 정상적으로 22로 평가되어 올바른 출생 연도가 계산됩니다.
실행 결과
위 코드를 실행하면 다음과 같은 화면이 나타납니다.
'클릭하세요' 버튼을 클릭하면 아래와 같이 일반 함수와 화살표 함수의 계산 결과 차이를 확인할 수 있습니다.
정리
화살표 함수는 콜백 함수, map·filter 같은 배열 메서드, 이벤트 핸들러 내부에서 외부의 this를 그대로 유지해야 하는 상황에서 특히 유용합니다. 다만 객체의 메서드 정의나 생성자 용도로는 일반 함수가 더 적합하므로, 상황에 맞게 두 방식을 선택해 사용하는 것이 좋습니다.