icon안동민 개발노트

화살표 함수와 this

 화살표 함수는 ES6에서 도입된 새로운 함수 표현 방식으로, 기존 함수 표현식을 더 간결하게 작성할 수 있게 해주며 this 바인딩 방식에 있어 중요한 변화를 가져왔습니다.

화살표 함수 문법

 기본 문법

// 기존 함수 표현식
const func = function(param) {
    return param * 2;
};
 
// 화살표 함수
const func = (param) => {
    return param * 2;
};
 
// 더 간결한 형태 (암시적 반환)
const func = param => param * 2;

 주요 차이점

  1. function 키워드 생략
  2. 매개변수가 하나일 경우 괄호 생략 가능
  3. 함수 본문이 단일 표현식일 경우 중괄호와 return 키워드 생략 가능

this 바인딩

 화살표 함수의 가장 큰 특징은 자신만의 this를 갖지 않는다는 점입니다.

 대신 화살표 함수 내부에서 this를 참조하면, 해당 함수가 정의된 스코프의 this를 그대로 사용합니다.

 예시

const obj = {
    name: "Object",
    regularFunc: function() {
        console.log(this.name);
    },
    arrowFunc: () => {
        console.log(this.name);
    }
};
 
obj.regularFunc(); // "Object"
obj.arrowFunc();   // undefined (전역 객체의 name 또는 strict mode에서는 undefined)

 이러한 특성으로 인해 콜백 함수에서의 this 문제같은 경우를 해결할 수 있습니다.

const obj = {
    name: "Object",
    delayedLog: function() {
        setTimeout(() => {
            console.log(this.name);
        }, 1000);
    }
};
 
obj.delayedLog(); // 1초 후 "Object" 출력

 기존에는 var self = this;와 같은 방식이나 bind 메서드를 사용해야 했던 문제가 해결됩니다.

화살표 함수 사용 시 주의점

 1. 메서드 정의

  • 객체의 메서드로 화살표 함수를 사용하면 의도치 않은 결과를 얻을 수 있습니다.
const obj = {
    name: "Object",
    greet: () => {
        console.log(`Hello, ${this.name}`);
    }
};
 
obj.greet(); // "Hello, undefined"

 2. 생성자 함수

  • 화살표 함수는 생성자 함수로 사용할 수 없습니다.
const Person = (name) => {
    this.name = name;
};
 
const person = new Person("John"); // TypeError: Person is not a constructor

 3. prototype 메서드

  • prototype에 메서드를 추가할 때 화살표 함수를 사용하면 안 됩니다.
function Person(name) {
    this.name = name;
}
 
Person.prototype.greet = () => {
    console.log(`Hello, ${this.name}`);
};
 
const person = new Person("John");
person.greet(); // "Hello, undefined"

클래스 내부에서의 화살표 함수

 클래스 내부에서 화살표 함수를 사용하면 메서드를 항상 인스턴스에 바인딩할 수 있습니다.

class Person {
    constructor(name) {
        this.name = name;
    }
 
    greet = () => {
        console.log(`Hello, ${this.name}`);
    }
}
 
const person = new Person("John");
const greet = person.greet;
greet(); // "Hello, John"

 이 방식은 React 컴포넌트에서 메서드를 정의할 때 자주 사용됩니다.

성능 고려사항

 일반적으로 화살표 함수와 일반 함수 사이의 성능 차이는 무시할 만한 수준입니다.

 그러나 화살표 함수는 prototype 속성을 갖지 않으므로, 메모리 사용량이 약간 더 적을 수 있습니다.

효과적인 활용

  1. 콜백 함수
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
  1. 고차 함수
const multiply = factor => number => number * factor;
const double = multiply(2);
console.log(double(5)); // 10
  1. 즉시 실행 함수
((name) => {
    console.log(`Hello, ${name}`);
})("World");

Best Practices

  1. 간결성을 위해 가능한 화살표 함수 사용
  2. this 바인딩이 필요한 경우 주의하여 사용
  3. 메서드와 생성자 함수에는 일반 함수 사용
  4. 클래스 필드에서 메서드를 정의할 때 화살표 함수 고려
  5. 단일 표현식 반환 시 암시적 반환 활용

자바스크립트 코딩 스타일에 미친 영향

 화살표 함수의 도입은 자바스크립트 코딩 스타일에 큰 변화를 가져왔습니다.

  1. 더 간결한 코드 작성 가능
  2. 함수형 프로그래밍 스타일 촉진
  3. this 관련 문제 해결로 인한 코드 구조 변화
  4. 콜백 함수 작성 방식의 변화
  5. 클래스와 객체 메서드 정의 방식의 다양화

 화살표 함수는 자바스크립트의 함수 작성 방식을 크게 변화시켰습니다. 이 새로운 문법은 코드를 더 간결하고 명확하게 만들어주며, 특히 this 바인딩과 관련된 많은 문제를 해결해줍니다.

 화살표 함수의 가장 큰 특징은 렉시컬 this 바인딩입니다. 이는 함수가 정의된 스코프의 this를 캡처하여 사용하는 것을 의미합니다. 이로 인해 콜백 함수나 중첩 함수에서 발생하던 this 관련 문제들이 많이 해결되었습니다.

 그러나 이러한 특성으로 인해 화살표 함수를 사용하면 안 되는 경우도 있습니다. 객체의 메서드, 생성자 함수, 프로토타입 메서드 등에서는 일반 함수를 사용해야 합니다. 이는 이러한 상황에서 this가 특별한 의미를 가지기 때문입니다.

 클래스 내부에서 화살표 함수를 사용하는 것은 특히 유용할 수 있습니다. 이 방식을 통해 메서드를 항상 인스턴스에 바인딩할 수 있으며, 특히 React와 같은 라이브러리에서 이벤트 핸들러를 정의할 때 자주 사용됩니다.

 성능 면에서 화살표 함수와 일반 함수의 차이는 대부분의 경우 무시할 만한 수준입니다. 그러나 화살표 함수는 prototype 속성을 갖지 않아 메모리 사용량이 약간 더 적을 수 있습니다.

 화살표 함수는 콜백 함수, 고차 함수, 즉시 실행 함수 등 다양한 상황에서 효과적으로 활용될 수 있습니다. 특히 함수형 프로그래밍 패러다임을 따르는 코드에서 더욱 빛을 발합니다.

 화살표 함수의 도입은 자바스크립트 코딩 스타일과 패턴에 상당한 영향을 미쳤습니다. 코드가 더 간결해지고, 함수형 프로그래밍 스타일이 촉진되었으며, this 관련 문제의 해결로 코드 구조가 변화했습니다. 또한 콜백 함수와 메서드 정의 방식에도 변화를 가져왔습니다.

 결론적으로, 화살표 함수는 자바스크립트 개발자들에게 강력하고 유용한 도구를 제공했습니다. 그러나 이를 효과적으로 사용하기 위해서는 그 특성과 제한사항을 정확히 이해하고, 적절한 상황에서 사용하는 것이 중요합니다. 화살표 함수의 올바른 사용은 더 읽기 쉽고, 유지보수가 용이하며, 버그가 적은 코드를 작성하는 데 큰 도움이 될 수 있습니다.

이전으로다음으로