-
질문 & 답변
카테고리
-
세부 분야
프론트엔드
-
해결 여부
해결됨
setBookmarkItem 함수 내 deleteBookmarkItem 함수 선언 방식에 대하여
23.06.05 00:54 작성 23.06.05 13:15 수정 조회수 160
1
효빈님, 안녕하세요. 강의를 들으면서 궁금한 점이 있어서 질문 드립니다.
북마크 아이템 추가하기 강의에서 setBookmarkItem 함수 내에서 deleteBookmarkItem 함수를 선언할 때 애로우펑션을 사용하는 이유가 있을까요? 그냥 함수를 호출하면 안되는건지 궁금해서요..
애로우펑션을 사용했을 때의 이점이 어떤건지 간략하게나마 알 수 있을까요?
// 예제 코드
bookmarkDelBtn.addEventListener("click",()=>{
deleteBookmarkItem(item.createAt);
});
// 궁금한 코드
bookmarkDelBtn.addEventListener("click", deleteBookmarkItem(item.createAt));
답변을 작성해보세요.
2
효빈 Hyobin
지식공유자2023.06.05
안녕하세요 김예찬님 :) 질문주셔서 감사합니다.
두 코드의 차이점은 다음과 같습니다.
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를 실행해야합니다.
강의에서 화살표형 함수를 사용한 이유는 [함수 표현식] 강의에서 다룬 내용처럼,
화살표형 함수는 함수 표현식이기 때문에 호이스팅이 많이 발생하는 상황을 방지하기 위함입니다.
김예찬
질문자2023.06.05
효빈님이 주신 답변 읽으면서 함수 표현식에 대한 개념이 잡혀가고 있습니다. 예시코드와 함께 답변 주셔서 감사합니다!
deleteBookmarkItem(item.createAt) 이렇게 callback 함수 자리로 들어가면 저 return 값이 인자로 들어가기 때문에 함수표현식으로 실행시킨 거라 이해하면 되는거죠?
답변 1