JS | 조건에 따른 버튼 활성화 (feat !과 단축평가)

조건에 부합하면 버튼 활성화하기

<!-- login.html -->
<main class="login-wrap">
  <h1 class="logo">westagram</h1>
  <form class="login-form">
    <div class="login-form__input-box js-input-box">
      <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="js-input-id">
      <input type="password" placeholder="비밀번호" class="js-input-pw">
    </div>
    <button disabled class="js-login-btn">로그인</button>
  </form>
  <a href="#" class="find-pw">비밀번호를 잊으셨나요?</a>
</main>

// login.js
const inputBox = document.querySelector('.js-input-box');

function activateBtn() {
    const btn = document.querySelector('.js-login-btn'),
        userId = document.querySelector('.js-input-id').value,
        userPw = document.querySelector('.js-input-pw').value,
        checkId = /^\w[\w\-\.]*@\w+\.\w{2,}/;

    btn.disabled = !(checkId.test(userId) && (userPw.length > 5));
}

inputBox.addEventListener('keyup', activateBtn);

• boolean 타입과 단축평가의 활용
  처음에는 삼항 연산자를 사용했지만 데이터 타입이 boolean 타입인 것과 단축평가를 사용하면 훨씬 짧고 직관적으로 코드를 작성할 수 있었다.

// 삼항연산자 사용
btn.disabled = checkId.test(userId) ? (userPw.length > 5 ? false : true ) : true;

// 리팩토링
btn.disabled = !(checkId.test(userId) && (userPw.length > 5));