인프런 커뮤니티 질문&답변
작성한 질문수
화살표 함수 관련 질문입니다.
해결된 질문
작성
·
261
2
안녕하세요. 너무나 훌륭한 강의 잘 봤습니다. 어쩜 그렇게 잘 가르쳐주시는지, 수업 듣는 내내 '참 대단하시다!' 싶었고.. 그만큼 배울 게 많아서 참 좋았습니다. 감사합니다. ^^
마지막 수업까지 보고 나서 저도 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 여부와 상관없이 정상적으로 동작한 것같은데, 제가 이해한 게 맞는지 답변 부탁드립니다. ^^;;
답변 1
0
마인드큐 님 안녕하세요.
제 강의를 좋게 봐주셔서 정말 감사합니다.
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( )
}}
화살표 함수를 일반 함수로 변경해서 표현해주시니 이제 확실히 알겠네요. 댓글에서도 엄청 자세하고 친절하게 설명해주셔서 이해가 쏙쏙 됩니다. 정말 감사합니다. ^^