[JavaScript] TypeError: Cannot read properties of undefined (reading ...)

문제 상황

Node JS 다루다 보면 자주 마주치는 오류라고 한다. property가 없어서 발생한다고 하지만 분명 값이 있었기에 당최 그 이유를 알 수 없었다. 내가 이 오류를 마주한 구문은 try catch이었다. try와 catch 각각의 return 구문이 있었고, 신기하게도 try에서도 return되고 catch에서도 return 되는 기이한 현상이었다. 또 이와 더불어 console.log에 값이 두 개씩 찍힌다는 것도 문제였다. 하나는 올바른 값이 들어 있지만 하나는 값 없이 undefined만 출력됐다. 어디가 문제인지, 무엇이 문제인지, 무엇을 모르는지 올바르게 떠올리지 못해 거의 하루를 낭비했다.

 

나의 경우는 HTML 쪽이 문제였다. 정확히는 form에서 submit이 실행될 때 이벤트를 듣고 있는 addEventListener 함수가 문제였다. 생각지도 못했다. 아래와 같이 addEventListener 함수를 한 번 호출했지만 계속해서 두 번씩 호출되고 있었고 이 때문에 console.log 값이 두 번씩 찍혔다.

"use strict";

const name = document.querySelector("#name"),
    email = document.querySelector("#email"),
    submitBtn = document.querySelector("#submit");

submitBtn.addEventListener("click", findUsername);

 

해결 방법

addEventListener 함수가 두 번씩 호출되고 console.log가 두 번씩 출력되는 이유는 아래와 같이 HTML의 form에서 onsubmit="return false;"이 빠져있다면 addEventListener가 두 번씩 호출되기 때문이다. 정확히는 onsubmit이 form에서 submit이 실행되면 발생하는 이벤트 핸들러로 기본값이 true로 되어 있기 때문에 addEventLitener와 중복되어 두 번씩 실행되는 것이다. 

<form class="login-form" action="/find-username" method="post">
    <h4>이름과 이메일을 입력해주세요.</h4>
    <input id="name" type="name" placeholder="이름"/>
    <input id="email" type="email" placeholder="이메일"/><br><br>
    <input type="submit" id="submit" value="확인">

따라서 위와 달리 onsubmit="return false;"를 추가해주면 더 이상 console.log에서 두 번 출력되지 않고 값도 undefined로 출력되지 않는다. 

<form class="login-form" action="/find-username" method="post" onsubmit="return false;">
    <h4>이름과 이메일을 입력해주세요.</h4>
    <input id="name" type="name" placeholder="이름"/>
    <input id="email" type="email" placeholder="이메일"/><br><br>
    <input type="submit" id="submit" value="확인">