콜백 함수에서 중괄호 사용 여부

Question

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.)   const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => { todo.content.includes(search) }); }   const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => todo.content.includes(search) ); }

이정환 Winterlood · Answer

안녕하세요 이정환입니다 화살표 함수는 기본적으로 화살표 우측에 있는 값을 바로 리턴합니다. 다음과 같은 화살표 함수는 a+b를 바로 리턴합니다. const func = (a, b) => a+b 그러나 화살표 우측에 중괄호를 사용하게 되면, 해당 함수 호출 시 여러줄의 명령을 사용하겠다는 뜻으로 간주하여 함수 선언식(function 키워드를 사용해 함수를 생성)으로 작성한 함수와 동일하게 return 키워드를 명시해야 반환값을 설정할 수 있습니다. 이런 문법적인 사항으로 인해 질문주신 첫번째 코드는 아무런 값도 리턴하지 않으므로 정상적으로 동작하지 않습니다. PS. 본 내용은 우리 강의의 1.12) 함수 표현식과 화살표 함수 챕터 의 4분 50초 경에 다루고 있으니 확인해보시는 걸 추천드립니다.

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. 똘똘이님께서 콜백 함수에서 중괄호 사용 여부에 대한 질문을 해주셨군요. React 및 JavaScript에서 콜백 함수의 사용 방법은 매우 중요합니다. 질문 주신 두 코드에서 기본적인 차이는 중괄호의 사용 여부입니다. 이를 간단히 설명드리겠습니다. 첫 번째 코드에서는 중괄호를 사용하여 콜백 함수의 내용을 명시하고 있습니다. 하지만 return 문을 명시하지 않았기 때문에 todos.filter() 메서드의 콜백 함수는 아무 값도 반환하지 않습니다. 이 경우, filter 메서드는 반환값이 true 또는 false 여야 하는데, 명시된 값이 없으므로 항상 undefined 를 반환하게 됩니다. 이는 필터 함수가 false 를 반환한 것으로 간주되어 필터링이 작동하지 않게 됩니다. return todos.filter((todo) => { // 중괄호가 있으므로, 명시적으로 return을 해야 함 return todo.content.includes(search); }); 두 번째 코드에서는 중괄호를 사용하지 않았고, 이로 인해 단일 식(expression)이 있을 때 자동으로 그 값을 반환합니다. 이것이 화살표 함수의 중요한 특징 중 하나입니다. 따라서 해당 Boolean 값을 직접 반환하여 filter 메서드가 예상대로 작동하게 됩니다. return todos.filter((todo) => todo.content.includes(search) ); 화살표 함수에서 중괄호를 생략하면 암시적으로 표현식을 반환하므로 return 문을 적을 필요가 없습니다. 이 구문을 이해하고 적절히 사용하는 것이 중요합니다. 관련된 이해를 돕기 위한 게시물들도 있습니다: callback 함수에서 중괄호 유무의 차이 위 링크를 통해 유사한 질문과 답변을 확인하시면, 더욱 깊이 있는 이해에 도움이 될 것입니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.