I'm trying to simplify the code to a nested loop

Question

I'm learning js and I just made a password generating code, the problem is I'm trying to simplify the code using loops inside loops, Can anyone help me understand how to do it.

function genPassword() {
  let chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
  var passwordLength = 12;
  var password1 = "";
  var password2 = "";
  var password3 = "";
  var password4 = "";
  for (var i = 0; i <= passwordLength; i++) {
    var randomNumber1 = Math.floor(Math.random() * chars.length);
    var randomNumber2 = Math.floor(Math.random() * chars.length);
    var randomNumber3 = Math.floor(Math.random() * chars.length);
    var randomNumber4 = Math.floor(Math.random() * chars.length);
    password1 += chars.substring(randomNumber1, randomNumber1 + 1);
    password2 += chars.substring(randomNumber2, randomNumber2 + 1);
    password3 += chars.substring(randomNumber3, randomNumber3 + 1);
    password4 += chars.substring(randomNumber4, randomNumber4 + 1);
  }
  document.getElementById("password-1").textContent = password1;
  document.getElementById("password-2").textContent = password2;
  document.getElementById("password-3").textContent = password3;
  document.getElementById("password-4").textContent = password4;
}

genPassword()

user_3692099 · Answer

Just wrap the code for creating and displaying the password in another for loop. Make sure to change the number of iterations to match your project.

function genPassword() {
    let chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    let passwordLength = 12;
    
    for (let j = 1; j <= 4; j++) {
        
        let password = "";
        for (let i = 0; i <= passwordLength; i++) {
            let randomNumber = Math.floor(Math.random() * chars.length);
            password += chars.substring(randomNumber, randomNumber + 1);
        }
        document.getElementById("password-" + j).textContent = password;
    }
}

user_14357 · Answer

Let's consider how you might do this without explicit loops.

You can generate an array of arbitratry length (len) as follows:

[...new Array(len)]

You can then map the items in this array with Array.prototype.map. We don't actually care about the default values in the array, so we can just discard that value and map it to a random character. It isn't necessary to use substring... a string can be indexed like an array (i.e. chars[n])... so...

[...new Array(len)].map(() => chars[Math.floor(Math.random() * chars.length)])

will give you back an array where each index contains a randomly selected character.

So now, all we have to do is join them back up again to form a string. Array.prototype.join does this for us:

[...new Array(len)]
    .map(() => chars[Math.floor(Math.random() * chars.length)])
    .join("")

Let's pop all of this into a function:

function generatePassword(length){
  return [...new Array(len)]
      .map(() => chars[Math.floor(Math.random() * chars.length)])
      .join("")
}

Calling generatePassword(12) will hand back a 12 char password.

Now, let's generate 4 of them using the same trick as above

const passwords = [...new Array(4)].map(() => generatePassword(passwordLength))

then let's output them:

passwords.forEach((password, index) => {
    document.getElementById("password-" + (index + 1)).textContent = password;
})

Putting it all together:

const chars = "0123456789abcdefghijklmnopqrstuvwxyz" + 
              "!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const passwordLength = 12;

function generatePassword(length) {
  return [...new Array(length)]
    .map(() => chars[Math.floor(Math.random() * chars.length)])
    .join("");
}

const passwords = [...new Array(4)].map(() => generatePassword(passwordLength));

passwords.forEach((password, index) => {
  document.getElementById("password-" + (index + 1)).textContent = password;
})

user_17024577 · Answer

function genPassword() {
  let chars = "0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";

let passwordArray = [
     { elemIdName: 'password-1', elemIdValue: ''},
     { elemIdName: 'password-2', elemIdValue: ''},
     { elemIdName: 'password-3', elemIdValue: ''},
     { elemIdName: 'password-4', elemIdValue: ''},
  ]
  let passwordLength = 12;

  for (var i = 0; i <= passwordLength; i++) {
    passwordArray.forEach((password) => {
      let randomNumber1 = Math.floor(Math.random() * chars.length);
      password.elemIdValue += chars.substring(randomNumber1, randomNumber1 + 1);
    })
  }
  passwordArray.forEach((password) => {
     document.getElementById(password.elemIdName).textContent = password.elemIdValue;
  })
}

genPassword()

I'm trying to simplify the code to a nested loop

3 Answers