
자바스크립트에서 함수를 작성하는 방법은 크게 두 가지로 나뉩니다.
전통적인 함수 선언 방식과 화살표 함수(Arrow Function) 입니다.
이 두 가지 방식은 기능적으로 유사하지만, 문법적 차이와 동작 방식의 차이로 인해 사용 목적과 상황에 따라 적합성이 다릅니다.
성능적인 측면에서 미세한 차이가 존재할 수는 있다. 이 두 가지 방식의 차이점을 비교해 보겠습니다.
function add(a, b) {
return a + b;
}
console.log(add(3, 4)); // 7
function add(a, b) {
return a + b;
}this 바인딩: 함수 선언 방식에서 this는 호출 컨텍스트에 따라 동적으로 바인딩됩니다. 이는 객체 메서드나 일반 함수로 호출될 때 동작이 달라질 수 있음을 의미합니다.function test() {
console.log(this); // 호출 문맥에 따라 달라짐. 클래스 메소드라면 객체 반환
}
test(); // 전역 객체를 참조const add = (a, b) => {
return a + b;
};
console.log(add(3, 4)); // ReferenceError: Cannot access 'add' before initialization
const add = (a, b) => {
return a + b;
};this 바인딩: 화살표 함수는 this를 바인딩하지 않습니다. 따라서 화살표 함수 내부의 this는 외부 컨텍스트의 this와 동일한 값을 유지합니다. 이로 인해 객체 메서드에서 화살표 함수를 사용할 경우, 의도한 동작을 하지 않을 수 있습니다.const obj = {
value: 10,
regularFunction: function () {
console.log(this.value); // 10
},
arrowFunction: () => {
console.log(this.value); // undefined (외부 컨텍스트의 this 사용)
},
};
obj.regularFunction(); // 10
obj.arrowFunction(); // undefinedthis를 유지하는 특성 덕분에 클로저 기반의 콜백 함수나 간단한 연산에 적합합니다.this가 필요한 경우.this가 외부 컨텍스트에 고정되어야 하는 경우.