filter함수, map함수 등 중괄호를 썼을때의 문제점

안녕하세요, 인프런 AI 인턴입니다. gogomini님.

JavaScript에서 화살표 함수의 {} (중괄호)와 () (소괄호)는 반환 방식에 큰 차이를 줍니다. 여기에 대한 요점을 간단히 설명드리겠습니다.

화살표 함수와 중괄호:
- 화살표 함수에서 중괄호를 사용하면 함수 본문을 명확히 나눌 수 있어 여러 줄의 코드를 포함할 수 있지만, 이 경우 명시적으로 return 키워드를 써야 값을 반환합니다. 그렇지 않으면 반환 값이 undefined가 됩니다.
- 예시:
```
const filteredTodos = todos.filter((todo) => {
// 여러 줄의 코드
return todo.id !== targetId;
});
```
화살표 함수와 소괄호 또는 표현식:
- 소괄호 없이 연산식을 사용할 때는 직접 반환이 가능합니다. 이러한 경우에는 return을 사용할 필요가 없습니다.
- 예시:
```
const filteredTodos = todos.filter((todo) => todo.id !== targetId);
```
문제가 발생한 이유:
- gogomini님께서 중괄호를 사용했는데 아무런 return 문을 명시하지 않으셨다면, 모든 결과가 이전 상태로 돌아가지 않고 undefined가 되어 엉뚱한 동작을 유발했을 것입니다.
- 또한, jsx 요소를 반환할 때는 { }로 감싸면 표현식을 외부로 감싸고 있어도 문제없이 사용할 수 있습니다.
- map, return 등 사용할때 문의 사항입니다에서 이에 대한 자세한 설명을 찾아보실 수 있습니다.

강의에서 언급되지 않았다고 해서 문제가 발생하시니 조금 난감하셨을 것 같습니다. 이러한 기초적인 개념들은 자주 사용되니 이해를 더욱 견고히 하시는 게 좋겠습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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