일반 함수와 화살표 함수란?
화살표 함수(Arrow Function)는 코드를 더 간결하게 작성할 수 있도록 ES6(ES2015)에서 도입된 문법입니다. 일반 함수와 화살표 함수는 기본적으로 비슷한 방식으로 동작하지만, 몇 가지 중요한 차이점이 존재합니다. 지금부터 그 차이점을 하나씩 살펴보겠습니다.
화살표 함수 문법
let x = (params) => {
// 코드
};일반 함수 문법
let x = function functionName(params){
// 코드
};"this" 키워드의 동작 차이
두 함수의 가장 큰 차이는 this의 바인딩 방식입니다. 화살표 함수는 자신만의 this를 갖지 않고, 선언된 위치의 상위 스코프(렉시컬 스코프)에 있는 this를 그대로 물려받습니다. 따라서 객체 메서드로 사용했을 때 객체 자신을 가리키지 못해 원하는 결과를 얻을 수 없습니다. 반면 일반 함수는 호출 방식에 따라 this가 결정되므로, 객체의 메서드로 호출되면 해당 객체를 자유롭게 참조할 수 있습니다.
예제
다음 예제에서는 객체 "num" 내부에 일반 함수(rectangle)와 화살표 함수(square)를 함께 사용했습니다. 이 객체는 len(길이)과 bre(너비) 속성을 가지며, 목표는 화살표 함수로 정사각형의 넓이(len*len)를 구하고, 일반 함수로 직사각형의 넓이(len*bre)를 구하는 것입니다. 하지만 화살표 함수 내부의 this는 객체 "num"을 가리키지 않기 때문에 정사각형의 넓이는 "NaN"으로 출력되고, 일반 함수로는 정확한 직사각형의 넓이인 156이 출력됩니다.
<html>
<body>
<script>
var num = {
len: 12,
bre: 13,
square: () => {
document.write(this.len * this.len);
},
rectangle(){
document.write(this.len * this.bre);
}
};
num.square();
document.write("</br>");
num.rectangle();
</script>
</body>
</html>
출력 결과
NaN
156
'new' 키워드의 사용 차이
화살표 함수는 호출(callable)은 가능하지만 생성(constructible)은 불가능합니다. 즉, 생성자로 사용할 수 없기 때문에 new 키워드와 함께 사용하면 오류가 발생합니다. 반면 일반 함수는 호출과 생성이 모두 가능하므로 new 키워드를 통해 새로운 객체 인스턴스를 만들 수 있습니다.
예제
아래 예제에서는 new 키워드를 사용해 일반 함수와 화살표 함수에 각각 인수를 전달했습니다. 일반 함수는 정상적으로 arguments 객체가 출력되지만, 화살표 함수는 생성자로 사용할 수 없기 때문에 "newword is not a constructor"라는 에러가 발생합니다.
<html>
<body>
<script>
var word = function(){
document.write(JSON.stringify(arguments));
/// '{"0":"Tutorix","1":"Tutorialspoint"}' 출력
};
new word("Tutorix","Tutorialspoint");
var newword = ()=> {
document.write(JSON.stringify(arguments));
// 'newword is not a constructor' 에러 발생
};
new newword("Tutorix","Tutorialspoint");
</script>
</body>
</html>
핵심 차이점 요약
- this 바인딩: 일반 함수는 호출 방식에 따라 this가 결정되지만, 화살표 함수는 상위 스코프의 this를 그대로 사용합니다.
- 생성자 사용 여부: 일반 함수는 new 키워드로 인스턴스를 생성할 수 있지만, 화살표 함수는 불가능합니다.
- arguments 객체: 일반 함수는 자체 arguments 객체를 가지지만, 화살표 함수는 가지지 않습니다.
- 코드 간결성: 화살표 함수는 매개변수가 하나이고 본문이 한 줄일 경우 괄호와 return까지 생략할 수 있어 더욱 간결합니다.