폼 유효성 검사는 웹 개발에서 매우 중요한 부분입니다. 사용자로부터 입력받은 데이터가 유효한지 확인하고, 필수 입력 필드가 비어있는지 확인하는 등의 작업을 수행합니다. 이번 글에서는 자바스크립트에서 Nullish Coalescing 연산자(??
)를 활용하여 폼 유효성 검사를 간단하게 처리하는 방법을 알아보겠습니다.
Nullish Coalescing 연산자란?
Nullish Coalescing 연산자인 ??
는 왼쪽 피연산자가 null
또는 undefined
인 경우, 오른쪽 피연산자를 반환합니다. 이를 활용하여 폼 유효성 검사를 간편하게 처리할 수 있습니다.
폼 유효성 검사 방법
const username = document.querySelector('#username').value;
const password = document.querySelector('#password').value;
const isValid = username ?? false && password ?? false;
if (isValid) {
console.log('폼이 유효합니다.');
// 유효한 폼 처리 로직
} else {
console.log('폼이 유효하지 않습니다.');
// 유효하지 않은 폼 처리 로직
}
위의 코드에서는 document.querySelector
를 사용하여 username
과 password
필드의 값을 가져옵니다. 그리고 Nullish Coalescing 연산자(??
)를 사용하여 각 필드의 값이 null
또는 undefined
인 경우에는 false
를 반환하도록 합니다.
이후 isValid
변수에는 username과 password 필드의 값이 모두 유효한지 체크한 결과가 담기게 됩니다. 그리고 isValid
변수를 통해 폼이 유효한지를 확인하고, 이에 따른 처리를 수행합니다.
위의 코드는 폼 유효성 검사를 단순히 예시로 보여주기 위한 일부 코드입니다. 실제로는 입력 필드의 개수와 조건에 따라 코드를 조금 더 복잡하게 작성해야 할 수도 있습니다. 그러나 Nullish Coalescing 연산자(??
)를 사용하면 필드 값의 유효성 검사를 간편하게 처리할 수 있으므로, 실제 프로젝트에서도 유용하게 사용할 수 있습니다.
#webdevelopment #javascript