화살표 함수 () => {}

화살표 함수는 ES2015에 추가된 새로운 함수 표기법이다. 화살표 함수를 사용한 방법과 사용하지 않은 기존 함수가 어떤 차이점이 있는지 살펴보고 화살표 함수를 사용했을 때 어떤 점이 편리해졌는지 살펴보자.

기존 함수

사용 예 ①

인수로 전달받은 값을 그대로 반환하는 함수를 실행해 콘솔에 결과를 출력했다.

function func(value) {
  return value;
}

console.log(func('func입니다.'));

function 뒤에 함수명(func)과 인수(value), 처리 내용(return value)을 입력해서 함수를 정의했다.

사용 예 ②

선언한 함수를 변수에 저장한 뒤 실행할 수도 있다.

const func = function (value) {
  return value;
};

console.log(func('func입니다.'));

두 경우 모두 function 선언을 이용해 함수를 정의해 실행했다는 공통점이 있다.

화살표 함수(arrow function)

화살표 함수에서는 function 사용없이 함수를 정의할 수 있다.

const func = (value) => {
  return value;
};

console.log(func('func입니다.'));

소괄호 안에 인수를 입력하고 => 기호로 함수를 작성하면 된다.


화살표 함수를 작성할 때 주의해야 할 점이 있다.
첫 번째, 인수가 한 개인 경우에는 소괄호 생략이 가능하다. 단, 인수가 두 개 이상인 경우에는 생략 불가!!

두 번째, 처리를 한 행으로 반환하는 경우 중괄호와 return 생략 가능
무슨 의미냐?? 아래 코드를 보면 쉽게 이해할 수 있다.

const func = (num1, num2) => num1 * num2;
console.log(func(2, 4)); // 8

여기서 주의해야 할 점이 있다. 위에서는 중괄호와 return 모두 생략하고 실해했을 때 값이 반환됐지만, 중괄호를 사용하고 return을 생략하면 실제로는 값이 반환되지 않는 규칙이 있다.

const func = (num1, num2) => {
  num1 * num2;
};
console.log(func(2, 4)); // undefined

중괄호로 감싼 뒤 return을 생략해서 실행하면 undefined라 출력된다. return을 생략했기 때문에 값이 반환되지 않아서 이러한 값이 출력되는 것이다.


반환값이 여러 행일 경우에는 코드를 어떻게 작성해야 하나?
간단하다.
소괄호로 감싼 뒤 단일 행과 같이 모아서 반환하면 된다.

const func = (val1, val2, val3) => ({
  name: val1,
  age: val2,
  height: val3,
});
console.log(func('홍길동', 23, 170)); // { name: '홍길동', age: 23, height: 170 }

위 방법은 React에서 많이 다루니 익숙해지도록 하자