input 태그 잘 활용하기 valueAsNumber

 

input 태그의 type='number' 의 특성을 잘 활용하는 방법

=> valueAsNumber 를 사용한다. 

 

기존 코드

const inputAmount = Number.parseInt(elements.moneyInput.value);

  if (!inputAmount || inputAmount <= 0) {
    addLog('올바른 금액을 입력해주세요.');
    return;
  }

 

valueAsNumber 사용 코드

const inputAmount = elements.moneyInput.valueAsNumber;

  if (Number.isNaN(inputAmount) || inputAmount <= 0) {
    addLog('올바른 금액을 입력해주세요.');
    return;
  }

 

 

장점

- input 값을 숫자로 직접 가져와서 불필요한 형변환 과정이 없어진다. 

 

주의

- valueAsNumber은 숫자가 아닌 경우 NaN을 반환하기 때문에 유효성 검사시 아래처럼 사용해야한다. 

Number.isNaN()