8.5)Array.prototype.filter() 의 콜백함수에 대한 의문점이 있어요

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

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

JavaScript의 화살표 함수에서 중괄호({})의 유무는 함수가 값을 반환하는 방법에 큰 차이를 만듭니다. 화살표 함수를 사용할 때 중괄호 없이 바로 표현식을 쓰면, 그 표현식의 결과가 함수의 반환 값이 됩니다. 즉, 중괄호를 생략하면 return 문을 사용하지 않고도 바로 값을 반환할 수 있습니다((para) => expression는 (para) => { return expression; }의 축약형입니다).

반대로, 중괄호를 사용해 함수의 ‘본문’을 정의하는 경우((para) => { ... }), 명시적으로 return 키워드를 사용해 반환 값을 지정해야 합니다. 만약 중괄호 내에서 return을 사용하지 않는다면, 함수는 undefined를 반환할 것입니다.

2ntro님이 질문하신 경우, 첫 번째 예시는 callback = (para) => expression 형태로, 함수가 todo.content.includes(search)의 평가 결과를 직접 반환합니다. 두 번째 예시에서는 callback = (para) => { body } 형태로, 함수 본문 내에서 todo.content.includes(search)가 실행되지만, 명시적인 return 문이 없기 때문에 아무것도 반환하지 않게 됩니다. 두 번째 형태에서도 동일한 결과를 얻고 싶다면, todo.content.includes(search) 앞에 return 키워드를 추가해야 합니다.

이러한 내용을 다루는 callBack 함수에서 중괄호 유무의 차이에서 자세히 설명되어 있습니다. 이 질문에서는 JavaScript의 화살표 함수를 사용할 때 중괄호와 return 키워드의 사용법에 대한 이정환 강사님의 설명을 제공하고 있습니다. 특히 화살표 함수에서 간결한 표현을 위해 중괄호 없이 바로 값을 반환하는 방법과, 중괄호를 사용할 경우 return 키워드가 필요한 이유를 설명하고 있어 2ntro님의 궁금증을 해결하는 데 도움이 될 것입니다.

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

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

우선 이 내용은 "1-12. 함수 표현식과 화살표 함수" 에서 확인하실 수 있는 자바스크립트 문법입니다.

화살표 함수에서의 중괄호의 유뮤는 함수가 화살표 우측의 값을 곧바로 리턴하느냐, 아니느냐로 구분됩니다.

따라서 아래의 코드처럼 중괄호 없이 사용하면 화살표 우측의 값을 그대로 반환합니다.

let funcA = () => 1; 
funcA(); // 1 출력

그러나 다음과 같이 중괄호를 사용하게 되면 일반 함수와 동일하게 동작하여

명시적으로 return을 사용하지 않으면 값을 반환하지 않게 됩니다.

let funcB = () => { 1; }
funcB(); // 아무것도 출력되지 않음 (반환값 없음)

filter 메서드의 경우 콜백함수가 return하는 값이 true인 요소들만 포함하여 새로운 배열로 반환합니다.

그러므로 질문주신 코드에서 () => {body} 형태로 사용하시면 아무런 값도 반환하지 않기 때문에 filter 메서드가 정상적으로 동작하지 않습니다.