Why My Password Generator Kept Adding Commas (And What It Taught Me About JavaScript)

The other day, I decided to make a random password generator using vanilla JavaScript. All went well initially, but then I came across a ridiculous monstrosity. It was an abominable and bizarre kind of bug; the sort that seems to happen only to me.\

You see, I had included symbols in the character set that was to be used for generating the password. As you might recall, it is considered best practice these days to have “complex passwords.” You know the type: the ones that include lowercase letters, capital letters, numbers, and special characters.\

At first, I had put all of them in a single array, with each character separated by commas. It looked like this:

I had used all the symbols in the upper row of the keypad. Do note that I hadn’t included the actual comma symbol as a character to be used.\

It worked fine while everything was in this single array. At a later point, however, I decided to give users the option to choose whether to include numbers or symbols by ticking a checkbox for each. Other than both types of letters, nothing was compulsory, and the options were not mutually exclusive.\

At this point, I encountered the eldritch error I mentioned earlier. Every time I generated a new password, there would be not just one but multiple commas in it. I experienced a horrifying and repulsive dread at this realization. No matter what I did, the profane commas would not go away. I could not purify the output.

Let Me Help You Understand

This is how I was storing the characters:

As you can see, this is not very different from how I stored them earlier. I had only separated them into smaller, more specific arrays. I know you might be getting suspicious of my actions. All right, I know it looks a certain way, but I assure you there is no prejudice on my part. I am not discriminating against any characters; only placing them into more specific arrays.\

Anyway, after enduring much suffering and humiliation, and banging my head against the wall, I came to discover where the problem was. As I mentioned earlier, there was nothing wrong with separating the characters based on how they look. The actual problem, it turned out, was how I was combining them again. See; character mixing is dangerous, and here you thought your grandparents just held outdated views.

The Root of the Problem

I was combining the arrays using the + operator. It looked like this:

Well, it turns out that this does not work. Who knew that adding an array of lowercase characters to an array of uppercase characters could lead to defects in the resulting array?\

In JavaScript, the + operator does not merge arrays. It converts them to strings first. So ['A','B'] + ['1','2'] becomes 'A,B1,2', where the commas are literal characters.\

The output ends up looking like this:

Your German grandpa could probably have told you this would happen. But these days, we are told that diverse passwords make our accounts stronger. Never mind that for now.

The Correct Way

It turns out there is a proper way to accomplish the desired result. That correct way looks like this:

This approach gives us a password made up of diverse characters without the undesired mutation of multiple commas. It is stronger because of its diversity and inclusion, not in spite of it.\

At the time of writing, I saw these commas as unwelcome party crashers. Upon further research and contemplation, however, I came to realize that while commas in passwords are not a direct security flaw, unintended characters can violate password policies or cause compatibility issues in legacy systems. We should therefore always validate output against our allowed character set.

Stepping back, the real lesson here has less to do with password generators and more to do with JavaScript itself. The language is remarkably permissive, and that flexibility often comes from implicit type coercion and overloaded operators that behave differently depending on context. The + operator, in particular, is not an “array operator” at all—it is a string and numeric operator that will happily convert values behind your back. Bugs like this are not accidents so much as reminders: understanding what an operator actually does is just as important as knowing that it exists.

Anyway, this fix got my password generator working properly, but then I noticed that the UI was stuck in Cthulhu’s den. In the next post, I will write about how I implemented a light and dark mode switch using only vanilla CSS and JavaScript.