I am trying to convert an array to string using array.join() or array.toString() but it's not working as it's supposed to work. When I console.log it stays as an array.
I've the intuition that this issue comes from something related to function scopes, but I could not figure it out yet.
The project I'm trying to build is a password generator.
const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";
const button = document.querySelector(".gen-pass");
button.addEventListener("click", (e) => {
let password = [];
for (let i = 0; i < 4; i++) {
let randomLetters = letters[Math.floor(Math.random() * letters.length)];
let randomNumbers = numbers[Math.floor(Math.random() * numbers.length)];
let randomSymbols = symbols[Math.floor(Math.random() * symbols.length)];
password.push(randomLetters, randomNumbers, randomSymbols);
password.join();
}
console.log(password);
});<button class="gen-pass">Generate!</button>You can do something like this
const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";
const button = document.querySelector(".gen-pass");
button.addEventListener("click", (e) => {
e.preventDefault();
const password = Array(4).fill(0).flatMap(_ =>
[
letters[Math.floor(Math.random() * letters.length)],
numbers[Math.floor(Math.random() * numbers.length)],
symbols[Math.floor(Math.random() * symbols.length)]
]
).join('');
console.log(password);
});<button class="gen-pass">GENERATE</button>basically this code generate and array of [letter, number, symbol, ...] and then it join them together
Array.prototype.join() returns a string. It does not change the object it is called on.
You may want to create a new variable or mutate password after the for loop has completed like so:
const letters = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
const numbers = "0123456789";
const symbols = "!@#$%^&*_-+=";
let password = [];
for (let i = 0; i < 4; i++) {
let randomLetters = letters[Math.floor(Math.random() * letters.length)];
let randomNumbers = numbers[Math.floor(Math.random() * numbers.length)];
let randomSymbols = symbols[Math.floor(Math.random() * symbols.length)];
password.push(randomLetters, randomNumbers, randomSymbols);
}
password = password.join('');
console.log(password);const button = document.querySelector(".gen-pass");
button.addEventListener("click", (e) => {
e.preventDefault();
let password = [];
let formattedPassword = '';
for (let i = 0; i < 4; i++) {
let randomLetters = letters[Math.floor(Math.random() * letters.length)];
let randomNumbers = numbers[Math.floor(Math.random() * numbers.length)];
let randomSymbols = symbols[Math.floor(Math.random() * symbols.length)];
password.push(randomLetters, randomNumbers, randomSymbols);
}
formattedPassword = password.join('');
console.log(password, formattedPassword);
});