화살표 모양 함수는 뭐가 다를까?

자바스크립트에는 일반적으로 function 키워드를 사용해서 함수를 선언하는 방법 외에도
화살표 모양의 기호를 사용하는 화살표 함수가 있습니다.

차이점 1

화살표 함수는 function 키워드로 작성한 일반 함수와 어떤 차이점이 있는지 아래에 작성된 코드를 살펴보면서 살펴봅시다.

function Counter() {
    this.count = 0;
    setInterval(function () {
        this.count++;
        console.log(this.count);
    }, 2000);
}

const counter = new Counter();

코드를 실행하면, setInterval 함수에 전달된 콜백 함수의 this는 생성자 함수를 통해 새로 생성된 Counter 객체를 가리키지 않고, 전역 객체인 window 객체를 가리키기 때문에 NaN이라는 값이 2초마다 출력됩니다.

setInterval 함수에 전달된 익명 함수는, 일반 함수로써 호출되기 때문에 window 객체를 가리키는데요,

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 2000);
}

const counter = new Counter();

해당 코드에서 setInterval 함수에 전달되는 익명 함수를, 위의 코드와 같이 화살표 함수로 변경해 작성하면, 출력 결과 count 변수의 값이 2초마다 1씩 증가되어 출력됩니다.

자바스크립트에서 this라는 키워드는, 함수가 호출된 방법에 따라 가리키는 값이 달라지지만, 신기하게도 화살표 함수의 this는 함수의 호출 방식이 아닌, 함수가 정의된 시점에서 상위 스코프의 this를 참조한다는 특징이 있습니다.

차이점 2

이번에는 또 다른 예제 코드를 통해 차이점을 살펴보겠습니다.

특정 객체의 메서드가 화살표 함수로 사용되면 어떤 결괏값이 출력될지 확인 해봅시다.

const cafe = {
    brand: '이디야',
    menu: '아메리카노',
    print: () => {
        console.log(this);
    },
};

cafe.print();

코드를 실행하면, 메서드를 일반 함수로서 호출했을 때와는 다르게 this의 값에 winodw 객체가 바인딩 되어 출력됩니다.

화살표 함수의 this는 자신을 포함하고 있는 함수가 선언된 위치의, 상위 스코프를 참조하기 때문에 print 메서드가 선언된 위치인 cafe 객체의 상위 스코프인, 전역 객체가 출력됩니다.

이러한 이유로 자바스크립트에서 객체의 메서드를 작성할 때에는 화살표 함수를 사용하지 않고, function 키워드를 사용한 일반 함수를 사용합니다.

좋은점

이렇게 일반 함수와 화살표 함수의 차이점에 대해 알아보았는데요, 그럼 이번에는 화살표 함수를 사용하면 어떤 장점이 있는지 알아보겠습니다. 앞서 살펴봤던, 화살표 함수의 this는 상위 스코프가 바인딩 된다는 장점 외에 또다른 좋은 점들에 대해 살펴봅시다.

// 일반 함수
const multiply = function(a, b) {
    return a * b;
};

// 화살표 함수
const multiply = (a, b) => a * b;

위의 코드처럼, 화살표 함수는 더 짧고 간결한 문법을 제공합니다. 특히 함수 내부의 코드가 어떠한 값을 반환하는 한 줄의 코드일 때, 중괄호와 return 키워드를 생략할 수 있습니다.

따라서 가독성을 높이고 간단한 표현식을 쉽게 표현할 수 있도록 해준다는 장점이 있습니다.

이렇게 간단하게 일반 함수와 화살표 함수에 대해 알아보았는데요, 이 내용은 인프런 '한 번에 끝내는 자바스크립트' 강의 내용 중 일부로, 자바스크립트 심화 개념에 대해 더 자세하게 배워보고 싶으신 분들은 아래의 쿠폰을 통해 저렴하게 수강하실 수 있습니다.

쿠폰 번호 : 17463-caaa5d30e881
강의 링크 : https://inf.run/WfRmY