(13) Modern JavaScript - 화살표 함수 (Arrow Function)

Arrow Function은 ES2015에서 새롭게 등장한 문법이며 기존의 함수 선언 방식을

보다 간결하게 만들어주는 문법이다.

 

화살표 함수 (Arrow Function)

화살표 함수는 이름이 없는 익명 함수이기 때문에 

일반적으로 어떤 이름을 가진 변수에 할당하거나 

혹은 다른 함수의 아규먼트를 선언할 때 주로 활용된다.

 

화살표 함수를 활용한 예시는 다음과 같다.

기본적인 Arrow Function의 모양

function 키워드를 지워주고 소괄호 오른편에서  등호와 부등호를 사용한다. (=>)

화살표 함수를 적용한 코드를 실행하면 아래와 같이 정상적으로 출력된다.

---

또한 화살표 함수는 기존의 function 키워드를 사용하던 방식을

좀 더 간결하게 표현하고자 등장했기 때문에 상황에 따라서 이보다 더 짧게 표현될 수 있다.

 

위 코드에서 화살표 함수를 활용해

getTwice 함수를 줄여보자면 다음과 같다.

const getTwice = (number) => number * 2;
console.log(getTwice(10));

 

그래서 아래와 같은 함수 표현식과 함수 선언과도 같이 비교해 놓고 봐도

화살표 함수 방식이 훨씬 더 간결하게 코드를 작성할 수 있다.

//함수 표현식, 함수 선언, 화살표 함수의 차이
const getTwice = function (number) {
  return number * 2;
};

function getTwice(number) {
  return number * 2;
}

const getTwice = (number) => number * 2;
console.log(getTwice(10));

---

하지만 모든 화살표 함수들이 간결하게 작성될 수는 없다.

특정한 상황에서 좀 더 간결하게 표현한 규칙들이 존재하는데

const getTwice = (number) => {
  return number * 2;
};
console.log(getTwice(5));

console.log(`-------------------------------------------`)

const getTwice = number => { // 소괄호 생략 가능
  return number * 2;
};
console.log(getTwice(5));

위 코드처럼 파라미터가 하나인 화살표 함수는 파라미터를 감싸는 소괄호 부분을 생략할 수 있다.

※ 사실 파라미터 생략은 권장하지 않으며 

웬만하면 그 자리가 파라미터라는 것을 알기 위해 파라미터가 한 개라도 그냥 소괄호를 작성하도록 하자.

---

또한 파라미터가 두 개 이상 있거나 또는 없을 경우 소괄호를 반드시 작성해 줘야 한다.

그냥 한 개든 두 개든 생략하지 말고 소괄호 쓰자..

const sum = (a, b) => {
  return a + b;
};

console.log(sum(1, 5));

---

그리고 화살표 함수에서는 내부의 동작 부분이 return문 하나로만 이루어져 있다면 

중괄호와 함께 return  키워드도 생략 가능하다.

const getTwice = (number) => number * 2;
console.log(getTwice(10));

---

하지만 함수 내부에서 조건문이나 반복문, 또는 변수의 값을 할당하는 것과 같이 

return문 외에 다른 표현들이 더 필요하다면

중괄호와 return 키워드는 생략할 수 없으니 주의해야한다.

// 리턴문 외에 다른 표현들이 필요한 상황에선 생략 불가능
const sum1 = (a, b) => {
  const result = a + b;
  return result;
};
console.log(sum1(1, 5));

 

그리고 함수 내부에 동작이 return 문 하나일 때 return 값이 객체인 경우

중괄호와 return 키워드를 생략하게 되면 코드가 작동하지 않고 에러가 발생한다.

const getTest = () => { name: "Test" };
console.log(getTest());

그 이유는 객체라고 작성했던 중괄호를 함수의 동작 부분을 구분하는 중괄호로 해석해버리기 때문이다.

그러니까 객체의 {} 가아닌 function () {} 에서 {}로 해석한 것.

 

이런 경우 아래와 같이 중괄호 바깥에 소괄호를 한번 감싸주게 되면 된다.

const getTest = () => ({ name: "Test" }); // 소괄호 추가
console.log(getTest());

---

기존에 function 키워드를 사용하던 대부분의 함수는 

위와 같이 화살표 함수를 통해 좀 더 간결한 코드로 대체가 가능하다.

 

한가지 주의해야할 점은 화살표 함수는 arguments 객체가 없다.

// 화살표 함수는 argumnets 객체 X
function normalFunc() {
  console.log(arguments);
}

const arrowFunc = () => {
  console.log(arguments);
};
normalFunc(1, 2, 3);
arrowFunc(1, 2, 3);

arrowFunc 에서  arguments 객체를 출력해보면

다음과 같이 에러가 발생한다.

그렇기 때문에 arguments 객체를 사용하는 함수라면

화살표 함수로 대체하기 어렵다고 볼 수 있다.