자바스크립트는 ES6부터 애로우 함수(arrow function)라는 기능이 추가되었습니다. 이 기능은 함수를 더 간편하게 정의할 수 있게 해줍니다. 애로우 함수는 일반 함수와 다르게 this의 동작방식이 다르기 때문에 상속과 관련하여 주의할 점이 있습니다.

애로우 함수란?

애로우 함수는 () => {} 형식으로 정의되며, 일반 함수와 비교했을 때 몇 가지 차이점이 있습니다.

const add = (a, b) => {
  return a + b;
};

애로우 함수의 this 동작

가장 큰 차이점 중 하나는 this의 동작입니다. 일반 함수에서 this의 값은 실행 시점에 따라 동적으로 결정되지만, 애로우 함수에서 this는 정적으로 부모 컨텍스트로부터 상속됩니다.

이로 인해 애로우 함수를 사용하는 경우에 상속 관련 문제가 발생할 수 있습니다. 예를 들어, 프로토타입을 이용한 객체 지향 프로그래밍에서 애로우 함수를 사용하면 상속 관련 동작이 제대로 동작하지 않을 수 있습니다.

function Person(name) {
  this.name = name;
}

Person.prototype.getName = () => {
  return this.name;
};

const person1 = new Person('Alice');
console.log(person1.getName()); // "undefined" 출력

이와 같이 애로우 함수로 정의된 getName은 this를 부모 컨텍스트로부터 상속받지 않기 때문에 원하는 결과를 얻을 수 없습니다.

애로우 함수의 사용

애로우 함수는 간단한 작업을 처리할 때 유용하지만, 상속과 관련된 작업을 할 때는 주의해야 합니다. 객체의 메서드나 프로토타입 기반의 상속을 구현할 때는 애로우 함수 대신 일반 함수를 사용하는 것이 좋습니다.

결과

애로우 함수는 간편하고 간결한 문법을 제공하지만, 상속과 관련하여 클래스나 프로토타입을 사용할 때는 주의해야 합니다. 올바른 상속 동작을 위해서는 애로우 함수를 적절히 사용하고, 상황에 맞게 일반 함수를 선택해야 합니다.

많은 자바스크립트 개발자들이 이러한 특성을 고려하여 코딩을 하고, 실무에서 활용할 때 유용하게 사용하고 있습니다.

참고 문헌