setBookmarkItem 함수 내 deleteBookmarkI... - 인프런

웹 프론트엔드를 위한 자바스크립트 첫걸음

setBookmarkItem 함수 내 deleteBookmarkItem 함수 선언 방식에 대하여

해결된 질문

작성

214

수정됨

효빈님, 안녕하세요. 강의를 들으면서 궁금한 점이 있어서 질문 드립니다.

북마크 아이템 추가하기 강의에서 setBookmarkItem 함수 내에서 deleteBookmarkItem 함수를 선언할 때 애로우펑션을 사용하는 이유가 있을까요? 그냥 함수를 호출하면 안되는건지 궁금해서요..

애로우펑션을 사용했을 때의 이점이 어떤건지 간략하게나마 알 수 있을까요?

 // 예제 코드
bookmarkDelBtn.addEventListener("click",()=>{
    deleteBookmarkItem(item.createAt);
});

// 궁금한 코드
bookmarkDelBtn.addEventListener("click", deleteBookmarkItem(item.createAt));

javascript dom

답변 1

효빈 Hyobin

지식공유자

안녕하세요 김예찬님 :) 질문주셔서 감사합니다.

두 코드의 차이점은 다음과 같습니다.

const test = () => {
  alert("hello");
};

document.getElementById("date").addEventListener("click", test); //함수 이름
document.getElementById("date").addEventListener("click", () => { //함수
  alert("hello");
});

test는 alert("hello")를 호출하는 함수이기 때문에 addEventListner의 콜백함수로 함수의 이름만 전달해도 작동하지만, 가장 아래에 작성된 코드처럼 alert("hello")를 호출하는 함수 자체를 콜백함수에 넘기려면 화살표형 함수를 사용해 alert를 실행하거나 function 키워드를 사용해 alert를 실행해야합니다.

강의에서 화살표형 함수를 사용한 이유는 [함수 표현식] 강의에서 다룬 내용처럼,
화살표형 함수는 함수 표현식이기 때문에 호이스팅이 많이 발생하는 상황을 방지하기 위함입니다.

김예찬

질문자

효빈님이 주신 답변 읽으면서 함수 표현식에 대한 개념이 잡혀가고 있습니다. 예시코드와 함께 답변 주셔서 감사합니다!

deleteBookmarkItem(item.createAt) 이렇게 callback 함수 자리로 들어가면 저 return 값이 인자로 들어가기 때문에 함수표현식으로 실행시킨 거라 이해하면 되는거죠?

김예찬

질문자

함수 자체를 인자로 넣기에는 해당 함수의 인자값 전달이 어려워서요.

효빈 Hyobin

지식공유자

네 그렇게 이해하시면 될 것 같습니다 :)

인프런 커뮤니티 질문&답변

setBookmarkItem 함수 내 deleteBookmarkItem 함수 선언 방식에 대하여