[vue3] 함수 실행 시 유효성 검사

const signup = async => {
    const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;
      if (!emailRegex.test(email.value)) {
        AntNotification.error({ message: '유효한 이메일 형식으로 입력해주세요.' });
        return;
      }
	
      try {
    	const clientInfo = {
          name: shopName.value,
          phone: phoneNumber.value,
          email: email.value,
          provider: '홈페이지',
          managerId
        };
        
        const resultClientSignup = await postClientSignup(clientInfo);
}

두 코드 조각의 차이는 return 문장의 존재 유무입니다.

첫 번째 코드 조각에서 return 문장이 사용되었으므로, 유효한 이메일 형식이 아닌 경우 함수가 즉시 종료됩니다. 즉, 유효한 이메일 형식이 아니면 에러 메시지를 표시하고 함수의 실행이 여기서 중단됩니다.

두 번째 코드 조각에서는 return 문장이 사용되지 않았으므로, 유효한 이메일 형식이 아닌 경우에도 에러 메시지를 표시하지만, 함수의 실행은 계속됩니다. 이 경우, return 문장이 없기 때문에 함수의 나머지 부분이 실행되며, 이후의 로직이 계속 진행될 수 있습니다.

따라서, 첫 번째 코드 조각을 사용하면 유효한 이메일 형식이 아닌 경우 함수 실행이 중단되므로, 불필요한 로직 실행을 방지할 수 있습니다. 반면에, 두 번째 코드 조각을 사용하면 유효성 검사 결과와 상관없이 함수가 계속 실행되므로, 이후의 로직에 따라서 추가적인 처리가 필요할 수 있습니다. 어떤 방식을 선택하느냐는 상황에 따라 달라질 수 있습니다.