ES6부터 지원하게 된 함수(function)의 새로운 모습이다.
본격적으로 화살표 함수에 대해서 이야기하기에 앞서서 기존의 함수 표현식과 화살표 함수의 선언 방법을 먼저 비교하고 넘어가자.
// 기존의 함수표현식
const basicFunction = function() {
// code..
}
// 함수 호출
functionName();
// 화살표 함수
const arrowFunction = () => {
// code..
}
// 함수 호출
arrowFunction();
/*
주의
화살표를 아래와 같이 개행 문자를 포함하여 할 수 없다는 것은 꼭 기억하자.
*/
const arrowFunction = ()
=> {
// code..
}
그다음으로 매개변수가 있는 상황을 살펴보자.
// 기존의 함수표현식
const basicFunction = function(args) {
// code..
}
// 기존의 함수 호출
functionName(DATA);
// 화살표 함수
const arrowFunction = (args) => {
// code..
}
// 화살표 함수 호출
arrowFunction(DATA);
기본적으로 함수 표현식과 화살표 함수를 어떻게 다르게 쓰는지 알았는지 파악했으니 본격적으로 화살표 함수를 사용해보자. 쉬운 거부터 만들면서 익히자.
// 2개의 숫자를 더하는 함수를 이런식으로 만들 수 있지 않을까?
const sum = (num1, num2) => {
return num1 + num2;
}
// 화살표 함수에서 위의 식처럼 한줄이면 더욱 더 짧게 가능하다.
const sum = (num1, num2) => num1 + num2
조금 더 머리를 써서 응용을 해보자. 아래는 좋은 예제는 아니지만 이렇게도 가능은 하다.
// 화살표 함수의 블럭안에서는 일반적인 함수처럼 사용이 가능하다.
const myObj = {
name : '바보',
age : 10,
}
const arrFun = (myObj) => {
if (myObj['name'] === '바보') {
myObj['age'] -= 1;
}
return myObj;
};
let obj = arrFun(myObj);
console.log(obj);
여기까지가 기본적인 화살표 함수를 사용하는 방법이다. 여기까지 내용만 보면 자바스크립트에서 기본적으로 제공해주는 함수 표현식은 물론 아래와 같은 함수 선언도 안 써도 되는 거 아닌가라는 생각이 들 수 있다. 화살표 함수가 멋지니까?
// 함수 선언
function normalFunction() {
// code..
}
마음 같아서는 모든 걸 화살표 함수로 만들어 버리고 싶지만... 알다시피 완벽한 기술은 없듯 화살표 함수도 가지지 못한 기능이 존재한다.
화살표 함수는 프로토타입이 존재하지 않는 객체(?)이다. 정확히 말하면 객체도 아닌 익명 함수이다. 그렇기에 prototype의 속성 값을 가지지 못하며 동시에 객체도 아니기에 생성자 함수도 없다. 특히 더 중요한 것은 this의 값이 다르다.
자세한 건 밑의 코드를 입력하여 두 눈으로 직접 확인해보자.
// 일반적인 함수 선언
function fun() {
console.log(this);
}
let nonfun = new fun();
// 위와 똑같은 조건을 화살표 함수로 실행해보자
const fun = () => {
console.log(this);
}
let arrFun = new fun();
생성자가 없어서 화살표 함수를 저렇게 못쓴다는 것은 이해를 했는데 만약 위의 코드에서 new 키워드를 제거하고 실행을 한다면 위와 근접한 결과를 가져오지 않을까? 해서 사용을 해도 결과는 예상과 다를 것이다.
즉 자바스크립트에서 this는 자기를 호출한 시점에서 자신을 나타내는 값인데 화살표 함수는 언제나 상위 스코프를 가리키는 값이다. 그렇기에 화살표 함수를 사용할 때는 기존의 함수에서 this를 사용할 때와 전혀 다른 개념으로 접근을 해야 한다. 꼭 주의하자
해당 글에 기술된 내용 외에도 arguments 라던지 ES6의 축약 메서드 표현 등 이 있으니 꼭 찾아보자
참고한 내용들
[Javascript] 일반 함수 vs 익명 함수 — 개발하는 사막여우 (tistory.com)
화살표 함수 - JavaScript | MDN (mozilla.org)
[javascript] 화살표 함수 (()=>, Arrow Function) (tistory.com)
JavaScript에서는 함수(Function)도 객체(Object)다. (tistory.com)