Can I refactor this JavaScript code any further?

Question

I am doing some JavaScript practice and tried writing a simple script that asks for the following details from a user:

1. Username
2. Password
3. First Name
4. Last Name
5. Email
6. Job Title

I then store all the details in an object. I am using alert() to display the messages and prompt() to ask the questions. There is no database integration, I am just learning how to write the JavaScript. My question then, is the code any good? Is there anything I could have done better or optimized in the context of the learning?

 //Get user username let username = prompt("Enter your username") while (validateUsername(username) == false) { username = prompt("Enter your username") } //Validate username function validateUsername(username) { if (username === null || username.length < 5 || username.length > 10 || username === "") { alert("Username must be from 5 to 10 characters. Try again!") return false } else { return true } } //Get user password let userPassword = prompt("Enter your password") let userPassConfirm = prompt("Confirm your passsword") while (validatePassword(userPassword) == false) { userPassword = prompt("Password is invalid. Please try again!") userPassConfirm = prompt("Confirm your passsword") } while (userPassConfirm !== userPassword && userPassConfirm !== null) { userPassConfirm = prompt("Confirm password does not match, Try again.") } //Validate password function validatePassword(userPassword) { if (userPassword == null || userPassword.length < 6 || userPassword.length > 20) { alert("Password must be from 6 to 20 characters. Try again!") return false } else { return true } } //Get user profile let firstName = prompt("What's your First name?") while (firstName === "") { alert("Your First name cannot be empty! Try again!") firstName = prompt("What's your First name?") } let lastName = prompt(`Hello ${firstName}, what's your Last name?`) while (lastName == "") { alert("Your Last name cannot be empty! Try again!") lastName = prompt(`Hello ${firstName}, what's your Last name?`) } let userEmail = prompt(`Enter your email address, ${firstName}.`) while (userEmail == "") { alert("Your email address cannot be empty! Try again!") userEmail = prompt(`Enter your email address, ${firstName}.`) } let userJobTitle = prompt("What is your job title?") while (userJobTitle == "") { alert("Your job title cannot be empty! Try again!") userJobTitle = prompt("What is your job title?") } alert(`Great to finally meet you ${firstName} ${lastName}!`) //Store user details in object const userDetails = {username, userPassword, firstName, lastName, userEmail, userJobTitle} //Display user details alert(`Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`) console.log(`User Details: \n Username: ${userDetails.username} \n First Name: ${userDetails.firstName} \n Last Name: ${userDetails.lastName} \n Email: ${userDetails.userEmail} \n Job Title: ${userDetails.userJobTitle}`)

Answer 1

From @Juan IWK3 code:

This statement: if (username === null || username.length < 5 || username.length > 10) will malfunction because when one of the conditions return true it will execute and ignore the rest.

Fix: if (username === null && username.length < 5 && username.length > 10)

Return statement: return getUsername(username); It will loop forever and doesn't return what left over

Fix: Just wrap the whole block in while and return it when done

const getUsername = () => {
  while (true) { // see here
    username = prompt("Enter your username");
    if (username === null || username.length < 5 || username.length > 10) {
      alert("Username must be from 5 to 10 characters. Try again!");
    } else {
      return username; // and here
    }
  }
};

Running functions: getUsername(); and so on and the return data goes into the trash

Fix: username = getUsername();

Answer 2

More readable with functions

//Get user username
let username;
let password;
let confirmPassword;
let firstName;
let lastName;
let jobTitle;
let email;

const getUsername = () => {
  username = prompt("Enter your username");
  if (username === null || username.length < 5 || username.length > 10) {
    alert("Username must be from 5 to 10 characters. Try again!");
    return getUsername(username);
  } else {
    return;
  }
};

getUsername();

const getPassword = () => {
  password = prompt("Enter your password");
  if (password == null || password.length < 6 || password.length > 20) {
    alert("Password must be from 6 to 20 characters. Try again!");
    return getPassword(password);
  } else {
    return getConfirmPassword();
  }
};

getConfirmPassword = () => {
  confirmPassword = prompt("Confirm your password");
  if (confirmPassword !== password) {
    alert("Password does not match. Try again!");
    return getPassword();
  } else {
    return true;
  }
};

getPassword();

//Get user profile
const getFirstName = () => {
  firstName = prompt("Enter your first name");
  if (firstName === null) {
    alert("Your First name cannot be empty! Try again!");
    return getFirstName(firstName);
  } else {
    return false;
  }
};

getFirstName();

const getLastName = () => {
  lastName = prompt(`What is your last name, ${firstName}?`);
  if (lastName === null) {
    alert("Your Last name cannot be empty! Try again!");
    return getLastName(lastName);
  } else {
    return false;
  }
};

getLastName();

const getUserEmail = () => {
  email = prompt(`What is your email, ${firstName}?`);
  if (email === null) {
    alert("Your Email cannot be empty! Try again!");
    return getUserEmail(email);
  } else {
    return false;
  }
};

getUserEmail();

const getUserJobTitle = () => {
  jobTitle = prompt(`What is your job title, ${firstName}?`);
  if (jobTitle === null) {
    alert("Your Job title cannot be empty! Try again!");
    return jobTitle(jobTitle);
  } else {
    return false;
  }
};

getUserJobTitle();

alert(`Great to finally meet you ${firstName} ${lastName}!`);

//Store user details in object
const userDetails = {
  username,
  password,
  firstName,
  lastName,
  email,
  jobTitle,
};

//Display user details
alert(
  `Username: ${userDetails.username}
First Name: ${userDetails.firstName}
Last Name: ${userDetails.lastName}
Email: ${userDetails.email}
Job Title: ${userDetails.jobTitle}`
);

console.log(
  `User Details:
  Username: ${userDetails.username}
  First Name: ${userDetails.firstName}
  Last Name: ${userDetails.lastName}
  Email: ${userDetails.email}
  Job Title: ${userDetails.jobTitle}`
);