[JS] 화살표 함수의 명시적 반환, 암묵적 반환

map 메서드와 화살표 함수

 

• map 메서드는 배열의 각 요소를 순회하며 주어진 함수를 호출해 새로운 배열을 생성합니다.
• 화살표 함수는 간결한 문법으로 함수를 정의할 수 있다.
  • 반환 방식에 따라 명시적 반환과 암묵적 반환으로 나눌 수 있습니다.

 

`map` 메서드를 사용할 때 `return`을 제거하면 화살표 함수의 암묵적인 반환이 제대로 이루어지지 않기 때문에 동작하지 않을 수 있습니다.

 

 

명시적 반환과 암묵적 반환

 

• 명시적 반환: 중괄호 `{}`를 사용한 경우에는 `return` 키워드를 사용해 값을 명시적으로 반환해야 합니다.
• 암묵적 반환: 중괄호 `{}` 없이 표현식만 사용하는 경우, 해당 표현식의 결과가 암묵적으로 반환됩니다.

 

코드 예제

명시적 반환을 사용한 경우:

{categories.map((cat) => {
  return (
    <Button
      key={cat.id}
      onClick={() => handleCategoryChange(cat.id)}
      m={2}
      colorScheme="teal"
      variant={category == cat.id ? "solid" : "outline"}
    >
      {cat.name}
    </Button>
  );
})}

 

암묵적 반환을 사용한 경우:

{categories.map((cat) => (
  <Button
    key={cat.id}
    onClick={() => handleCategoryChange(cat.id)}
    m={2}
    colorScheme="teal"
    variant={category == cat.id ? "solid" : "outline"}
  >
    {cat.name}
  </Button>
))}

 

 

결론

 

• map 메서드를 사용할 때, 함수 내부에서 중괄호 {}를 사용하고 return을 생략하면 함수가 값을 반환하지 않게 됩니다.
• 이는 함수가 undefined를 반환하게 되어, 렌더링할 요소가 없게 됩니다.
• 따라서, 중괄호 {}를 사용한 경우에는 return을 명시적으로 작성해야 하며,
• 중괄호를 생략하고 소괄호 ()를 사용하면 암묵적으로 반환할 수 있습니다.