ES6(ES2015)에서 도입된 자바스크립트 화살표 함수(Arrow function expressions)란 무엇이며, 화살표 함수의 사용법, 화살표 함수와 일반 함수의 차이점, 화살표 함수를 쓰는 이유 등에 대해 설명합니다.
1. 자바스크립트 화살표 함수의 도입 배경
화살표 함수(Arrow function)라는 용어는 화살표 함수 표현식(Arrow function expressions)이라고도 합니다.
화살표 함수는 자바스크립트에서 사용하던 기존의 함수 선언식이나 함수 표현식보다 좀 더 간결하며, 쉽게 사용하기 위해 고안되었습니다. C++, Python, Java 등 다양한 언어에서 사용하는 람다 함수(lambda function)의 아이디어를 자바스크립트 문법으로 표현했습니다. 이렇게 화살표 함수를 도입함으로써 함수형 프로그래밍 스타일을 더욱 강화하고, 코드를 더 간결하고 가독성 좋게 작성할 수 있게 되었습니다.
2. 화살표 함수의 제한점
- this, arguments나 super에 대한 자체 바인딩이 없고, 메서드로 사용해서는 안 됩니다.
- new.target키워드가 없습니다.
- 일반적으로 스코프를 지정할 때 사용하는 call(), apply(), bind() 메서드를 이용할 수 없습니다.
- 생성자(Constructor)로 사용할 수 없습니다.
- yield를 화살표 함수 내부에서 사용할 수 없습니다.
이러한 제한점은 단점으로 보일 수 있지만, 한편으로는 화살표 함수를 사용하는 장점으로도 볼 수 있습니다.
3. 화살표 함수의 사용법
화살표 함수 정의
자바스크립트에서 화살표 함수는 함수를 변수에 할당하여 사용하는 함수 표현식의 한 유형입니다. 함수 선언식으로는 정의할 수 없습니다.
1)일반 함수 선언식
function add(a, b) { return a + b; }; add(1, 2); // 32)화살표 함수
const add = (a, b) => { return a + b; }; add(1, 2); // 3
화살표 함수는 function 키워드 대신 =>기호(화살표)를 사용하여 함수를 사용하여 기존의 함수보다 간단하고 간결하게 작성할 수 있습니다.
4. 화살표 함수만의 특별한 구문
- 하나의 매개변수인 경우 소괄호 () 를 생략할 수 있습니다.
- 함수 내부가 단일 표현식(single expression)인 경우 return 키워드를 생략할 수 있습니다. return 키워드를 생략할 경우 중괄호 {} 는 반드시 생략해야 합니다.
- 중복된 매개변수 이름을 선언할 수 없습니다.
5. 화살표 함수와 일반 함수의 차이
- 화살표 함수는 인스턴트를 생성할 수 없습니다. 즉, 생성자 함수로 사용할 수 없습니다.
- 화살표 함수는 자신만의 this를 가지지 않습니다.
- 화살표 함수는 arguments 객체를 가지지 않습니다.
아래 예시에서 화살표 함수는 인스턴트를 생성할 수 없습니다.
const Person = (name) => {
this.name = name;
};
const john = new Person("John"); // 에러 발생: Person is not a constructor화살표 함수는 일반 함수와 달리 인스턴트를 생성할 수 없습니다. non-constructor이기 때문입니다. 그렇기 때문에 prototype 속성이 없고, 프로토타입도 생성하지 않습니다.
6. 화살표 함수를 쓰는 이유
기존의 함수와 비교할 때 화살표 함수는 짧은 구문으로 함수를 더 간결하게 표현할 수 있습니다. 대부분의 개발자들은 짧고 간결한 코딩을 원하기 때문입니다.
참조
