JavaScript 오류 해결하기-3

문제

함수 작성 시 오류발생하여 오류 원인과 수정 후 해결에 대해 작성하겠습니다.

> 로그인 기능 구현 시 마다 아이디/비번/이메일/토큰 중 매번 두개를 체크해야된다고 가정한다.
> 각 체크를 담당하는 함수들을 미리 정의한다.

    const fnIdCheck = () => {
      console.log("아이디체크");
    }
    const fnPwdCheck = () => {
      console.log("비밀번호체크");
    }
    const fnEmailCheck = () => {
      console.log("이메일체크");
    }
    const fnTokenCheck = () => {
      console.log("토큰체크");
    }

> 로그인 처리하는 함수를 정의한다.
> 이때 체크해야 될 두개의 함수를 콜백함수로 전달받는다.
> 전달된 각 함수를 실행한다.

    const fnLogin = (fnCheck1, fnCheck2) => {
      fnCheck1();
      fnCheck2();
    }

 

  <!-- case1. 아이디 및 비번 체크해야 될 경우-->
  <button onclick="fnLogin(fnIdCheck, fnPwdCheck);">로그인1</button>
  <!-- case2. 아이디 및 비번 체크해야 될 경우-->
  <button onclick="fnLogin(fnEmailCheck, fnPwdCheck);">로그인2</button>
  <!-- case3. 아이디 및 토큰 체크해야 될 경우-->
  <button onclick="fnLogin(fnIdCheck, fnTokenCheck);">로그인3</button>

 

🚨 오류

▶Uncaught 

ReferenceError: fnCheck2 is not defined
    at fnLogin (07_function.html:318:7)
    at HTMLButtonElement.onclick (07_function.html:324:53)

 

👀 구글번역

▶잡히지 않음 
ReferenceError: fnCheck2가 정의되지 않았습니다.
    fnLogin에서(07_function.html:318:7)
    HTMLButtonElement.onclick(07_function.html:324:53)에서

 

❓ 원인

화살표 함수 내에 변수명을 잘못 입력했습니다.

 

    const fnLogin = (fnCheck1, fcCheck2) => {
      fnCheck1();
      fnCheck2();
    }

 

✅ 해결

화살표 함수 내에 변수명을 잘못 입력했습니다.

 

    const fnLogin = (fnCheck1, fnCheck2 ) => {
      fnCheck1();
      fnCheck2();
    }

 

---

오류발생 시 콘솔창 확인 후 오류를 찾아 수정하는 습관을 형성하고 있습니다. 보통 오류 발생 시 오타인 경우가 많기 때문에 이렇게 지속적으로 오류 발생을 기록하다보면 스스로 오타를 범하는 실수를 줄이기 위해 신경쓰게 되는 것 같습니다.