화살표 함수 구문

화살표 함수에서 혼란스러운 중괄호
주로 react에서 map메소드를 사용할 때 자주 에러가 나는 부분이기 때문에
간단히 정리해보자

 

Statements와 Expressions

1. Expression (표현식)

◾️ 단일 값을 생성하는 코드

console.log(2 + 2 * 3 / 2); // 5

 

2. Statements (문장)

◾️ 작업을 수행하는 코드

◾️ 반복문, 조건문 등

for(let i = 0; i < 10; i++){
  console.log(i);
}

 

 

기본 구문

(param1, param2, ..., paramN) => { statements }
(param1, param2, …, paramN) => expression
// { return expression; } -> return과 중괄호 생략 가능

◾️ statements를 사용했을 때 예시

elements.map((element) => {
  return element.length;
});

◾️ expression를 사용했을 때 예시

elements.map((element) => element + 2);

 

◾️ 매개변수가 하나뿐인 경우 괄호는 선택사항

(singleParam) => { statements }
singleParam => { statements }

◾️ 매개변수가 없는 함수는 괄호가 필요

() => { statements }

 

고급 구문

◾️ 객체 리터럴 표현을 반환하기 위해서는 함수 본문을 괄호 속에 넣음

params => ({ foo: bar })

⚠️ 중괄호안 코드가 일련의 문으로 파싱되기 때문에 객체 리터럴을 괄호로 감싸 주어야 한다. 

// 괄호 X
var func = () => {  foo: 1  };
func(); //undefined

// 괄호 O
var func = () => ({  foo: 1  });
func(); // { foo: 1 }

 

 

◾️ 나머지 매개변수 및 기본 매개변수

(param1, param2, ...rest) => { statements }
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }

 

◾️ 매개변수 목록 내 구조분해할당

var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

 

함수 본문

◾️ concise body : 중괄호로 묶이지 않은 한줄 짜리 바디

◾️ block body : 중괄호로 묶인 바디( 보통 여러줄 쓸 때 사용 )

ℹ️ block body는 자동으로 값을 반환하지 않는다. return을 사용해서 값을 반환해야 한다. 

// concise 바디 : return 생략 가능
var func = x => x * x;           

// block 바디 : return 필요
var func = (x, y) => { return x + y; }; 

 

줄바꿈

◾️ 보기 좋은 코드를 유지하기 위한 개행 예시

var func = (a, b, c) =>
  1;

var func = (a, b, c) => (
  1
);

var func = (a, b, c) => {
  return 1
};

var func = (
  a,
  b,
  c
) => 1; 

 

---

[ ✅ 참고 : MDN 화살표 함수]

화살표 함수