인프런 커뮤니티 질문&답변
작성한 질문수
이미지 슬라이드 적용예제에서 자바스크립트 함수 bind()에 대해 궁금합니다.
작성
·
396
0
// 반응없음
//document.getElementById('imagePrev').addEventListener('click',plusImageSlides(-1));
//document.getElementById('imageNext').addEventListener('click',plusImageSlides(1));
document.getElementById('imagePrev').addEventListener('click',plusImageSlides.bind(null, -1));
document.getElementById('imageNext').addEventListener('click',plusImageSlides.bind(null, 1));
자바스크립트 기초개념이 부족하여 bind에 대해 검색해보았지만 잘 이해가 되지 않아서 글 남깁니다.
짧은 소견으로는 위에 주석처리한 부분으로 동작해도 될 것 같은데 안되더라구요...bind는 나중에 인자값을 추가할 수 있도록 하는 역할을 한다고 하는 데 어차피 plusImageSlide는 인자가 하나밖에 없고 -1을 넣어주고 있는 데 null은 무엇을 의미하는 것인지 잘 모르겠습니다.
구체적인 답변 부탁드립니다. 감사합니다
답변 1
0
addEventListener()의 두번째 인자에는 "함수"가 들어가야 합니다.
주석으로 된 대로 하면 plusImageSlides()의 결과값인 undefined가 들어가게 됩니다.
따라서 함수를 반환하는 bind()를 사용해서 함수를 인자로 넘겨주는 것입니다.
addEventListener('click', function() {
plusImageSlides(-1);
});bind를 사용하지 않는 경우엔 위와 같이 하셔도 됩니다.