화살표 함수 관련 질문입니다.

Question

안녕하세요. 너무나 훌륭한 강의 잘 봤습니다. 어쩜 그렇게 잘 가르쳐주시는지, 수업 듣는 내내 '참 대단하시다!' 싶었고.. 그만큼 배울 게 많아서 참 좋았습니다. 감사합니다. ^^ 마지막 수업까지 보고 나서 저도 Todo 예제를 만들어봤는데요. 역시나 수업을 볼 땐 워낙 설명을 잘해주셔서 따박따박 수긍이 가는 바람에 충분히 이해가 됐다고 생각했는데, 막상 혼자 코딩을 하다보니 여기저기서 막히더군요 ^^;; (수긍이 되는 것과 제대로 이해하는 것이 다르다는 걸 새삼 깨닫게 됐습니다 ^^;;) 수업에서 작성해주신 코드를 무작정 copy하기보다, 알려주신 내용을 최대한 기억해내면서 나름대로 이해한 내용대로 코드를 작성해보니, 정확히 어떤 걸 잘 모르고 있는지 제대로 파악이 돼서 좋았구요. 그렇게 시행착오 겪고 나서 수업을 다시 반복해서 보니 좀더 확실히 이해되는 것 같습니다. 근데 화살표 함수 관련해서 시행착오가 좀 있었는데요;; deleteTodo() 함수 내용 $todos = $todos.filter(t => t.id !== todo.id)를 $todos = $todos.filter(t => {t.id !== todo.id}) 이렇게 해놓으면 항목 하나 삭제 시도할 때 리스트 전체가 사라지는 현상이 있더라구요;;  제가 화살표 함수 구문에 대한 이해가 부족해서 그런 것같은데;; t => t.id !== todo.id 에서 t.id !== todo.id에 중괄호만 하면 boolean 값 return을 명시적으로 안해서 $todos.filter() 결과가 null이 되고, 중괄호를 안해야 boolean값들이 제대로 return 되기 때문에 그런 게 맞나요? input 태그에선 on:keydown={e => {e.key === 'Enter' && updateTodo()}} 이렇게 하나 on:keydown={(e) => e.key === 'Enter' && updateTodo()} 이렇게 하나 동일하게 동작하길래, 중괄호를 하든 안하든 상관없다고 착각했는데, input 태그에선 updateTodo() 함수를 호출하는 게 목적이라 return 여부와 상관없이 정상적으로 동작한 것같은데, 제가 이해한 게 맞는지 답변 부탁드립니다. ^^;;

HEROPY · Answer

마인드큐 님 안녕하세요. 제 강의를 좋게 봐주셔서 정말 감사합니다. t.id   !==   todo.id 의 비교 연산자를 통해 true/false를 filter 메소드의 콜백에서 반환해야 그 값으로 필터링 된 새로운 배열을 만들 수 있습니다. 화살표 함수가 조금 헷갈리시면 일반 함수로 변경해서 작성하시거나 이해하시면 좋습니다. 현재 질문하신 함수를 일반 함수로 다음과 같이 표현할 수 있습니다. (1) $todos = $todos.filter(t => t.id !== todo.id) // 위 코드를 다음으로 수정할 수 있습니다. $todos = $todos.filter(function ( ) {     return t.id !== todo.id }) (2) $todos = $todos.filter(t => {t.id !== todo.id}) // 위 코드를 다음으로 수정할 수 있습니다. // return 키워드를 사용하지 않는 부분을 확인하세요! $todos = $todos.filter(function ( ) {     t.id !== todo.id }) 위 (2) 코드의 경우는 반환 값이 무조건 undefined(Falsy)이기 때문에 filter 메소드로 걸러낼 수 있는 부분이 없게 됩니다. 그리고 추가로 질문하신 input 태그에서의 함수는 반환 값에 영향을 받는 로직이 아니기 때문에 아래 (1)과 (2) 코드 모두 동일하게 동작합니다. 일반 함수로는 다음과 같이 표현할 수 있습니다. (1) on:keydown={(e) => e.key === 'Enter' && updateTodo()} // 위 코드를 다음으로 수정할 수 있습니다. on:keydown={function (e) {     return e.key === 'Enter' && updateTodo( ) }} (2) on:keydown={e => {e.key === 'Enter' && updateTodo( )}} // 위 코드를 다음으로 수정할 수 있습니다. // return 키워드를 사용하지 않는 부분을 확인하세요! on:keydown={function (e) {     e.key === 'Enter' && updateTodo( ) }}