JS_화살표함수 중괄호 소괄호 차이

화살표 함수에서 중괄호({})와 소괄호(())의 차이는 "암시적 반환(implicit return)" 때문.

1️⃣ 중괄호 {}를 사용할 때 (명시적 반환)

중괄호를 사용하면 반드시 return 키워드로 값을 반환해야 함. 예를 들어:

const hello = (name) => {
  alert(name + "님 안녕하세요"); // return이 없기 때문에 아무것도 반환되지 않음
};

const add = (a, b) => {
  return a + b; // 명시적으로 값을 반환
};

• alert처럼 단순히 동작만 하는 경우에는 반환이 필요 없으니까 return을 안 써도 됨.

• 하지만 값을 반환해야 한다면 return을 꼭 써야 함.

---

2️⃣ 소괄호 ()를 사용할 때 (암시적 반환)

소괄호를 사용하면 return 키워드를 쓰지 않아도 자동으로 반환됨. 주로 JSX나 간단한 식을 반환할 때 사용해:

const add = (a, b) => (
  a + b // 암시적으로 반환됨
);

const element = (text) => (
  <div>{text}</div> // JSX를 바로 반환
);

특히 React에서 map 함수를 쓸 때 이렇게 작성하는 이유는, map이 각 요소를 변환한 후 새로운 배열을 반환해야 하기 때문.
그래서 return 없이도 바로 JSX를 반환하는 방식으로 많이 작성.

{project.myrole.frontend.map((el) => (
  <div>{el}</div> // 암시적 반환
))}

만약 중괄호를 쓰고 싶다면 return을 추가해야 함:

{project.myrole.frontend.map((el) => {
  return <div>{el}</div>; // 명시적 반환
})}

---

🔑 정리하면:

• 중괄호 {} + return → 명시적 반환 필요
• 소괄호 () → return 없이 암시적 반환 가능 (특히 JSX에서 많이 사용)

JSX에서는 간결하게 작성하려고 주로 소괄호를 쓰는 것.