callBack 함수에서 중괄호 유무의 차이

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

이것은 화살표함수 문법과 관련된 내용입니다.

화살표함수는 화살표 우측에 중괄호가 나올 경우 일반 함수처럼 중괄호 내부의 코드를 순차적으로 실행합니다.

그러나 중괄호가 아닌 소괄호 및 표현식이 나올 경우 해당 표현식을 계산하여 결과를 바로 리턴합니다.

위 내용에 따라 질문주신 다음 두가지 코드를 비교해 보자면

1. return todos.filter((todo) => todo.content.includes(search)); -> 검색기능 구현

2. return todos.filter((todo) => {todo.content.includes(search)}); -> 검색기능 구현 x

1번의 경우 곧바로 inlcudes 메서드의 결과값이 리턴되지만,

2번의 경우 그냥 includes 메서드를 호출해 실행하기만 하고 아무것도 리턴하지 않게 됩니다.

그러므로 1번과 2번 버전의 차이가 발생하게 되는 것 입니다.

감사합니다

이정환 드림

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

changseog8701님의 질문에 대한 답변이 충분히 제공되어 있지 않기에, 직접적인 답변 대신 관련된 기본적인 정보를 제공해보겠습니다.

JS(JavaScript)의 화살표 함수에서 중괄호({})의 유무는 반환 값에 큰 차이를 만듭니다. 화살표 함수는 간결한 함수 표현을 가능하게 해주며, 중괄호를 생략할 경우 바로 반환값을 지정할 수 있습니다. 예를 들어, () => expression은 () => { return expression; }의 축약형입니다. 중괄호 내에 코드를 작성할 경우, return 문을 명시적으로 작성해야 반환값이 있습니다.

changseog8701님이 질문하신 경우는 화살표 함수에서의 중괄호 사용에 관한 내용으로, 중괄호 없이 작성한 함수는 표현식의 결과를 직접 반환하지만, 중괄호를 사용한 경우는 블록의 실행 결과를 반환해야 하기 때문에 return 키워드가 필요합니다. 따라서 중괄호를 사용했을 때 동일한 작업을 수행하고자 한다면, return 키워드를 명시적으로 사용해야 합니다.

// 중괄호 없이 반환
return todos.filter((todo) => todo.content.includes(search));

// 중괄호를 사용하려면 return 문 필요
return todos.filter((todo) => { return todo.content.includes(search); });

이와 관련하여 이미 map, return 등 사용할때 문의 사항입니다 질문에서 이정환 강사님께서 화살표 함수의 중괄호 사용에 대해 설명해주신 바 있습니다. 이 내용은 직접적으로 filter 함수에 대한 것은 아니지만, 화살표 함수의 사용법에 대한 해석에서 도움을 줄 수 있을 것입니다.

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