자바스크립트 화살표 함수 - Arrow function expressions

ES6(ES2015)에서 도입된 자바스크립트 화살표 함수(Arrow function expressions)란 무엇이며, 화살표 함수의 사용법, 화살표 함수와 일반 함수의 차이점, 화살표 함수를 쓰는 이유 등에 대해 설명합니다.

자바스크립트 화살표 함수의 도입 배경

화살표 함수(Arrow function)라는 용어는 화살표 함수 표현식(Arrow function expressions)이라고도 합니다. 둘 다 공식적으로 사용되는 용어이니 이 글에서는 화살표 함수라 말하겠습니다.

자바스크립트(JavaScript)의 화살표 함수는 ECMAScript 6(ES6)에서 도입되었습니다. ES6는 2015년에 발행된 ECMAScript 표준의 여섯 번째 버전으로, 다양한 기능과 개선 사항을 포함하고 있습니다.

화살표 함수는 자바스크립트에서 사용하던 기존의 함수 선언식이나 함수 표현식보다 좀 더 간결하며, 쉽게 사용하기 위해 고안되었습니다. C++, Python, Java 등 다양한 언어에서 사용하는 람다 함수(lambda function)의 아이디어를 자바스크립트 문법으로 표현했습니다. 이렇게 화살표 함수를 도입함으로써 함수형 프로그래밍 스타일을 더욱 강화하고, 코드를 더 간결하고 가독성 좋게 작성할 수 있게 되었습니다.

하지만, 화살표 함수는 몇 가지 제한점이 있고 모든 상황에서 사용할 수는 없습니다. (아래의 내용은 MDN - 화살표 함수에서 발췌한 것입니다.)

화살표 함수의 제한점

  • this, arguments나 super에 대한 자체 바인딩이 없고, 메서드로 사용해서는 안 됩니다.
  • new.target키워드가 없습니다.
  • 일반적으로 스코프를 지정할 때 사용하는 call(), apply(), bind() 메서드를 이용할 수 없습니다.
  • 생성자 함수로 사용할 수 없습니다.
  • yield를 화살표 함수 내부에서 사용할 수 없습니다.

이러한 제한점은 단점으로 보일 수 있지만, 한편으로는 화살표 함수를 사용하는 장점으로도 볼 수 있습니다.

화살표 함수의 사용법

자바스크립에서 화살표 함수는 어떻게 정의하고 어떤 구문과 서식으로 작성하는지 알아보겠습니다.

화살표 함수 정의

자바스크립트에서 화살표 함수는 함수를 변수에 할당하여 사용하는 함수 표현식의 한 유형입니다. 함수 선언식으로는 정의할 수 없습니다.

JavaScript - 일반 함수 선언식 
function add(a, b) {
    return a + b;
};

add(1, 2); // 3
JavaScript - 일반 함수 표현식 
const add = function(a, b) {
    return a + b;
};

add(1, 2); // 3
JavaScript - 화살표 함수 화살표 함수를 사용하면 더 짧은 함수 구문을 작성할 수 있습니다. 
const add = (a, b) => {
    return a + b;
};

add(1, 2); // 3

화살표 함수는 function 키워드 대신 =>기호(화살표)를 사용하여 함수를 사용하여 기존의 함수보다 간단하고 간결하게 작성할 수 있습니다.

화살표 함수만의 특별한 구문

일반 함수와 비교할 때 화살표 함수는 특별한 구문을 가지고 있습니다.

  1. 하나의 매개변수인 경우 소괄호 () 를 생략할 수 있습니다.
  2. 함수 내부가 단일 표현식(single expression)인 경우 return 키워드를 생략할 수 있습니다. return 키워드를 생략할 경우 중괄호 {} 는 반드시 생략해야 합니다.
  3. 중복된 매개변수 이름을 선언할 수 없습니다.

하나의 매개변수인 경우 소괄호를 생략할 수 있습니다.

JavaScript 
// 매개변수가 하나뿐인 경우 소괄호 () 는 선택사항임.
const func = param => {...} // 괄호 생략한 서식

// 위 표현은 다음과 같이 해석됨.
const func = (param) => {...} // 소괄호 () 를 생략하지 않은 서식

주의하세요! 매개변수가 없을 경우에는 소괄호 () 를 생략할 수 없습니다.

함수 내부가 단일 표현식(single expression)인 경우 return 키워드를 생략할 수 있습니다.

JavaScript 
const add = (a, b) => a + b; // return 키워드를 생략할 경우 중괄호 {} 는 반드시 생략해야 함.


// 위 표현은 다음과 같이 해석됨.
const add = (a, b) => { return a + b; };

주의하세요! 함수 내부가 단일 표현식(single expression)이 아닌 경우 return 키워드를 생략할 수 없습니다.

JavaScript 
const add = (a, b) => {
    const sum = a + b;
    console.log("Sum:", sum);
    
    // return 키워드를 생략할 수 없습니다.
    return sum;
};

const result = add(3, 5);
console.log("Result:", result); // 결과: Sum: 8, Result: 8

중복된 매개변수 이름을 선언할 수 없습니다.

JavaScript - 에러 
// 잘못된 사용: 중복된 매개변수 이름
const multiply = (x, y, x) => {
    return x * y;
};

일반 함수에서 strict mode를 적용하지 않은 경우에는 중복된 매개변수 이름을 사용해도 자바스크립트 엔진이 에러를 발생시키지 않습니다. 하지만 화살표 함수는 항상 중복된 매개변수 이름을 선언할 수 없습니다.

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

위에서 설명한 문법적 차이 이외에 화살표 함수와 일반 함수의 차이에 대해 알아보겠습니다.
여기에서는 중요한(꼭 알아야 할) 몇 가지만 알아봅니다.

일반 함수와의 차이점

  1. 화살표 함수는 인스턴트를 생성할 수 없습니다. 즉, 생성자 함수로 사용할 수 없습니다.
  2. 화살표 함수는 자신만의 this를 가지지 않습니다.
  3. 화살표 함수는 arguments 객체를 가지지 않습니다.

화살표 함수는 인스턴트를 생성할 수 없습니다.

JavaScript - 에러 
const Person = (name) => {
    this.name = name;
};

const john = new Person("John"); // 에러 발생: Person is not a constructor

화살표 함수는 일반 함수와 달리 인스턴트를 생성할 수 없습니다. non-constructor이기 때문입니다. 그렇기 때문에 prototype 속성이 없고, 프로토타입도 생성하지 않습니다.

자바스크립트 프로토타입 상속
JavaScript 
const Person = (name) => {
    this.name = name;
};

console.log(Person.hasOwnProperty("prototype")); // false

화살표 함수는 자신만의 this를 가지지 않습니다.

HTML 
<!DOCTYPE html>
<html>
    <head>
        <title>Event Listener Example</title>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <script src="event.js"></script>
    </body>
</html>
event.js 
const myButton = document.getElementById('myButton');

// 일반 함수를 사용한 이벤트 핸들러
myButton.addEventListener("click", function() {
    console.log("Clicked using normal function. This: " + this.textContent);
});

// 화살표 함수를 사용한 이벤트 핸들러
myButton.addEventListener("click", () => {
    console.log("Clicked using arrow function. This text: " + this.textContent);
});

addEventListener를 사용하여 이벤트를 처리할 때, 콜백 함수 내에서의 this는 해당 이벤트가 발생한 DOM 요소를 가리킵니다. 일반 함수와 화살표 함수를 사용하여 이벤트 핸들러를 정의하면 this가 가리키는 대상이 달라집니다.

위의 예제에서 myButton 요소에 두 개의 이벤트 핸들러를 추가했습니다. 첫 번째 핸들러는 일반 함수를 사용하여 정의하였고, 두 번째 핸들러는 화살표 함수를 사용하여 정의하였습니다.

버튼을 클릭하면 두 개의 핸들러가 모두 실행됩니다. 첫 번째 핸들러의 this는 myButton 요소를 가리키며, this.textContent는 버튼의 텍스트인 "Click Me"를 출력합니다.

그러나 두 번째 이벤트 핸들러는 화살표 함수를 사용하였으며, 버튼을 클릭하면 "Clicked using arrow function. This text: undefined"가 출력됩니다. 이는 화살표 함수의 this가 전역 컨텍스트를 가리키기 때문입니다. 따라서 이벤트 핸들러에서 this를 사용해야 할 경우에는 일반 함수를 사용해야 합니다.

자바스크립트 undefined 값

따라서 이벤트 핸들러 내에서 this가 필요한 경우에는 일반 함수를 사용하는 것이 적합하며, 화살표 함수를 사용할 경우 주의해야 합니다. 화살표 함수는 주로 this를 사용하지 않거나, 외부 스코프에서의 this를 그대로 사용할 때 유용합니다.

화살표 함수는 arguments 객체를 가지지 않습니다.

JavaScript 
function sumWithArguments() {
    let sum = 0;
    
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    
    return sum;
}

const sumWithArrow = () => {
    let sum = 0;
    
    for (let i = 0; i < arguments.length; i++) {
        sum += arguments[i]; // 여기서 arguments를 사용하면 에러가 발생합니다.
    }
    
    return sum;
}

console.log(sumWithArguments(1, 2, 3, 4, 5)); // 출력: 15
console.log(sumWithArrow(1, 2, 3, 4, 5)); // 에러 발생: arguments is not defined

arguments 객체는 함수 내에서 인수에 접근하는 데 사용되는데, 일반 함수에서는 이 객체를 사용할 수 있지만 화살표 함수에서는 사용할 수 없습니다.

sumWithArguments 함수는 일반 함수로 선언되어 arguments 객체를 사용하여 인수들의 합을 계산합니다. 하지만 sumWithArrow 함수는 화살표 함수로 선언되어서 arguments를 사용하려고 할 때 에러가 발생합니다. 화살표 함수는 자신만의 arguments 객체를 가지지 않기 때문입니다. 따라서, 인수에 접근해야 하는 경우에는 화살표 함수보다는 일반 함수를 사용하는 것이 좋습니다.

화살표 함수를 쓰는 이유

기존의 함수와 비교할 때 화살표 함수는 짧은 구문으로 함수를 더 간결하게 표현할 수 있습니다.
대부분의 개발자들은 짧고 간결한 코딩을 원합니다.

그 다음으로는 메소드 내부에서 화살표 함수를 사용하면, 화살표 함수는 자신만의 this를 가지지 않고, 상위 스코프의 this를 상속받기 때문에 this 관련 문제를 피하고 코드를 간결하게 작성할 수 있습니다. 예제를 통해 설명드리겠습니다.

JavaScript 
const myObj = {
    name: "홍길동",
    func: function() {
        console.log(this.name); // 출력: "홍길동"
        
        /* 일반 함수를 사용 */
        setTimeout(function() {
            console.log(this); // 출력: window 객체
            console.log(this.name); // error 출력되지 않음
        }, 1000);
        
        /* 일반 함수를 사용 */
        setTimeout(function() {
            console.log(this); // 출력: myObj 객체
            console.log(this.name); // 출력: "홍길동"
        }.bind(this), 1000); // bind() 함수로 this를 myObj 객체로 설정해야 하는 번거로움이 있음
    },
    arrow_func: function() {
        console.log(this.name); // 출력: "홍길동"
        
         /* 화살표 함수를 사용 */
        setTimeout(() => {
            console.log(this); // 출력: myObj 객체
            console.log(this.name); // 출력: "홍길동"
        }, 1000);
    } 
}

myObj.func();
myObj.arrow_func();

위 예제 코드를 보면 결과적으로, 화살표 함수를 사용하면 메소드 내부에서 this를 명시적으로 바인딩할 필요가 없으므로 코드를 더 간결하고 편리하게 작성할 수 있습니다. 이 예제에서 화살표 함수가 일반 함수에 비해 this 관련 문제를 해결하는 데 유용함을 보여줍니다.

하지만, this는 상황에 따라 일반 함수가 편리한 경우도 있기 때문에 개발자가 상황에 맞게 일반 함수로 사용할지, 아니면 화살표 함수로 사용할지 선택해야 합니다. 모든 코드가 다 그러하듯이..

명세서

화살표 함수에 대한 명세서
명세서 사양
화살표 함수 정의 ECMAScript Language Specification
#sec-arrow-function-definitions

브라우저 호환성

화살표 함수에 대한 브라우저 호환성
구문
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
화살표 함수 45 12 22 10

caniuse.com에서 더 자세한 정보를 확인해 보세요.

참고문헌

같이 보기