화살표 함수와 일반 함수의 차이점

안녕하세요! 오늘은 자바스크립트에서 자주 사용되는 화살표 함수(Arrow Function)와 일반 함수(Regular Function)의 차이점에 대해 알아보겠습니다. 이 두 가지 함수는 자바스크립트 코드 작성 시 중요한 역할을 하지만, 각각의 특징과 사용 사례가 다릅니다. 그럼 바로 들어가겠습니다.

화살표 함수와 일반 함수의 차이점

화살표 함수(Arrow Function)

화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 함수 표현식입니다. 간결한 문법과 this 바인딩 방식의 차이로 주로 사용됩니다.

문법

화살표 함수는 다음과 같은 문법으로 작성됩니다.

const add = (a, b) => a + b;

파라미터가 하나일 경우 괄호를 생략할 수 있습니다.

const square = x => x * x;

주요 특징

1. 간결한 문법: 화살표 함수는 코드가 짧고 간결합니다.
2. 암시적 반환: 중괄호({}) 없이 한 줄로 작성된 화살표 함수는 값을 암시적으로 반환합니다.
3. this 바인딩: 화살표 함수는 자신만의 this를 가지지 않고, 외부 스코프의 this를 상속받습니다. 이를 렉시컬 this라고 합니다.

예제

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++;
        console.log(this.age); // 외부의 `this`를 상속받아, Person 객체의 `age`에 접근
    }, 1000);
}

const person = new Person();

위 예제에서 화살표 함수는 Person 객체의 this를 상속받아 사용합니다.

일반 함수(Regular Function)

일반 함수는 자바스크립트에서 전통적으로 사용되어 온 함수 선언 방식입니다.

문법

일반 함수는 다음과 같은 문법으로 작성됩니다.

function add(a, b) {
    return a + b;
}

또는 함수 표현식을 사용할 수 있습니다.

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

주요 특징

1. 유연한 문법: 일반 함수는 선언 방식이 다양하고, 어디서나 호출할 수 있습니다.
2. 명시적 반환: 일반 함수는 명시적으로 return 키워드를 사용하여 값을 반환합니다.
3. this 바인딩: 일반 함수는 호출 방식에 따라 this가 동적으로 결정됩니다. 호출 시점에 this가 무엇인지가 결정됩니다.

예제

function Person() {
    this.age = 0;

    setInterval(function() {
        this.age++;
        console.log(this.age); // 일반 함수의 `this`는 setInterval의 컨텍스트를 가리킴
    }, 1000);
}

const person = new Person();

위 예제에서 일반 함수는 setInterval 함수의 this를 가리키기 때문에 Person 객체의 age에 접근하지 못합니다.

차이점 요약

1. 문법:
   • 화살표 함수: (param) => expression
   • 일반 함수: function(param) { return expression; }
2. this 바인딩:
   • 화살표 함수: 외부 스코프의 this를 상속받음.
   • 일반 함수: 호출 방식에 따라 this가 동적으로 결정됨.
3. arguments 객체:
   • 화살표 함수: arguments 객체를 가지지 않음.
   • 일반 함수: arguments 객체를 통해 함수 인수에 접근 가능.
4. 생성자 함수 사용:
   • 화살표 함수: 생성자 함수로 사용할 수 없음 (new 키워드 사용 불가).
   • 일반 함수: 생성자 함수로 사용할 수 있음 (new 키워드 사용 가능).

arguments 객체 예제

function regularFunction() {
    console.log(arguments); // [Arguments] { '0': 1, '1': 2, '2': 3 }
}

const arrowFunction = () => {
    console.log(arguments); // ReferenceError: arguments is not defined
};

regularFunction(1, 2, 3);
arrowFunction(1, 2, 3);

생성자 함수 예제

const PersonArrow = (name) => {
    this.name = name;
};

// TypeError: PersonArrow is not a constructor
const personArrow = new PersonArrow('Alice');

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

const personRegular = new PersonRegular('Bob'); // 정상적으로 객체 생성

결론

화살표 함수와 일반 함수는 자바스크립트에서 중요한 역할을 하며, 각각의 특징을 잘 이해하고 적절하게 사용하는 것이 중요합니다. 화살표 함수는 간결한 문법과 렉시컬 this 바인딩 덕분에 콜백 함수나 이벤트 핸들러에서 유용합니다. 반면, 일반 함수는 this가 동적으로 결정되기 때문에 다양한 호출 컨텍스트에서 유연하게 사용할 수 있습니다.

오늘도 제 글을 읽어주셔서 감사합니다. 다음 시간에 더 흥미로운 주제로 찾아뵙겠습니다.