← back to posts

해체할당-및-객체매핑

typescript

해체할당..메시지를 객체매핑으로.. 수정. 반복도 수정.

if (registerForm && errorContainer) {
  const userIdInput = registerForm.querySelector<HTMLInputElement>("#userId");
  const passwordInput =
    registerForm.querySelector<HTMLInputElement>("#password");
  const nicknameInput =
    registerForm.querySelector<HTMLInputElement>("#nickname");

  const userId = userIdInput?.value;
  const password = passwordInput?.value;
  const nickname = nicknameInput?.value;

  if (!userId) {
    errorContainer.textContent = "아이디를 입력해주세요.";
    return;
  }
  if (!password) {
    errorContainer.textContent = "비밀번호를 입력해주세요.";
    return;
  }
  if (!nickname) {
    errorContainer.textContent = "닉네임을 입력해주세요.";
    return;
  }

  if (password.length < 8) {
    errorContainer.textContent = "비밀번호는 8자리 이상이어야 합니다.";
    return;
  }

  errorContainer.textContent = "";
  registerForm.submit();
}
if (registerForm && errorContainer) {
  const { value: userId } = registerForm.querySelector("#userId") || {};
  const { value: password } = registerForm.querySelector("#password") || {};
  const { value: nickname } = registerForm.querySelector("#nickname") || {};

  const errorMessages = {
    userId: "아이디를 입력해주세요.",
    password: "비밀번호를 입력해주세요.",
    nickname: "닉네임을 입력해주세요.",
    passwordShort: "비밀번호는 8자리 이상이어야 합니다.",
  };

  const validations = [
    [!userId, "userId"],
    [!password, "password"],
    [!nickname, "nickname"],
    [password && password.length < 8, "passwordShort"],
  ];

  for (const [condition, key] of validations) {
    if (condition) {
      errorContainer.textContent = errorMessages[key];
      return;
    }
  }

  errorContainer.textContent = "";
  registerForm.submit();
}