자바스크립트에서의 Nullish Coalescing과 폼 검증 로직의 연동 방법
| 자바스크립트에서 Nullish Coalescing 연산자는 변수가 null 또는 undefined인 경우, 기본값을 지정하는 용도로 사용됩니다. 이 연산자는 | 연산자와는 다르게 falsy한 값(0, 빈 문자열, false)을 걸러내고 실제로 null 또는 undefined일 때만 기본값을 반환합니다. |
const name = user.name ?? 'Unknown'; // user.name이 null 또는 undefined라면 'Unknown'을 반환
const age = user.age ?? 0; // user.age가 null 또는 undefined라면 0을 반환
위의 예제에서, user.name과 user.age가 null 또는 undefined이라면 각각 ‘Unknown’과 0이 기본값으로 사용됩니다.
Nullish Coalescing과 폼 검증 로직의 연동 방법
Nullish Coalescing은 폼 검증 로직에서 유용하게 사용될 수 있습니다. 보통 사용자가 입력한 값이 null 또는 undefined일 때, 기본값이 필요한 경우가 많이 발생합니다. 이럴 때 Nullish Coalescing을 사용하면 간단하게 기본값을 설정할 수 있습니다.
예를 들어, 사용자의 이름을 입력받는 폼에서 Nullish Coalescing 연산자를 활용하여 기본값을 설정하는 방법을 살펴보겠습니다.
<input type="text" id="name-input" />
<button onclick="submitForm()">Submit</button>
function submitForm() {
const name = document.getElementById('name-input').value ?? 'Unknown';
// 이름 저장과 관련된 로직 실행
}
위의 예제에서 name 변수는 사용자가 입력한 값을 담고 있습니다. 사용자가 아무 값도 입력하지 않은 경우, Nullish Coalescing으로 인해 ‘Unknown’이 기본값으로 설정됩니다. 이후에는 name 변수를 사용하여 이름을 저장하는 로직을 실행할 수 있습니다.
위와 같은 방식으로 Nullish Coalescing 연산자를 활용하여 폼 검증 로직에 기본값을 설정할 수 있습니다.