인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

화살표 함수는 => 옆에 값을 적어주면 해당 값을 바로 반환하는 특징을 가지고 있습니다. 예를 들면 다음과 같습니다.

const arrayFunction = (a, b) => a + b;
// a + b의 값을 바로 반환함

그런데 만약 이런 화살표함수에서 함수 내부에 여러줄의 코드를 사용하고 싶다면 다음과 같이 중괄호를 사용합니다. 이때 반환하려는 값이 있다면 일반 함수 선언과 같이 return을 이용해야 합니다.

const arrayFunction = (a, b) => {
  const resValue = a + b;
  return resValue;
}
// a + b의 값을 resValue에 저장해두었다가 반환함

그런데 만약 객체값을 바로 반환하려고 하는 경우 다음과 같이 중괄호만 사용하면 함수 본문으로 이해됩니다.

const arrayFunction = (a, b) => { a:a, b:b }
// ??? 문법 오류

이럴 때에는 소괄호로 중괄호를 묶어주면 이 중괄호 내부를 객체로 인지하여 객체 값을 바로 반환하는 화살표 함수를 만들 수 있습니다.

const arrayFunction = (a, b) => ({ a:a, b:b });
// {a:a, b:b}를 반환함