무섭도록 못 찾는 오류 : 원인은 ( ) - feat.자바스크립트

간단한 스크립트 예제를 테스트 하는 도중 자주 실수하는 부분이 있어 

정리해놓는다. 

 

거두절미하고, 자바스크립트로 시계를 만드는 예제를 만들었다.

const clock = document.querySelector("h2#clock");

const getTime = () => {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};

getTime();

setInterval(getTime(), 1000);

소스를 보면 전혀 문제 없어보이는데 동작하지 않는다.

---

또 하나의 예제가 있다.

버튼을 클릭시, 멘트 안내하는 간단한 자바스크립트다.

const loginBtn = document.querySelector("#loginBtn");

function onhandlerForm() {
 alert("눌렀네요!"); 
}

loginBtn.addEventListener("click", onhandlerForm());

역시 동작하지 않는다.

 

답을 찾았는가?

 

.

.

.

.

.

.

 

만약, 바로 답을 찾지 못했다면 당신은 저와 같이 몇분을 헤멜수도 있습니다..ㅎ

 

- 바로 setInterval 과 addEventListener안에 호출하는 함수옆( ) 의 존재때문에 동작하지 않는다.

 

함수를 호출할때 보통 함수명(파라미터) 로 호출하기에, 당연히 이렇게 사용한다고 생각할지 모른다.

 

하지만!

 

해당 메소드들은 개발자가 호출해주는 것이 아닌

메소드들이 어떠한 이벤트 혹은 조건에 부합하면 해당 함수를 호출해주기 때문에

어떤 함수를 호출해야하는지 명시만 해줘야 한다. 

 

즉, 아래와 같이 변경해야한다.

const clock = document.querySelector("h2#clock");

const getTime = () => {
  const date = new Date();
  clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
};

getTime();

setInterval(getTime, 1000); //1초마다 getTime 함수를 호출할것.

---

const loginBtn = document.querySelector("#loginBtn");

function onhandlerForm() {
 alert("눌렀네요!"); 
}

loginBtn.addEventListener("click", onhandlerForm);// 버튼클릭할때 onhandlerForm 함수 호출

 

 

+ 사담

강의를 들으면서, 예제를 혼자 테스트해보는데 아무리해도 안되길래 다시 강의를 찬찬히 보니.. ( ) 때문에 매번 강의를 돌려보고 있던거다. ㅠㅠㅠㅠ

무서운 차이지만, 되고 안되고는 실무에서도 차이가 크다. (개념확립!!)