JS new FormData prepending undefined to value

Question

I am using JS & FormData to gather values from an html form and then create string which is saved in localStorage. But I am getting "undefined" prepended to the first value.

My form:

<form id="prd2">
<input type="hidden" name="product" value="et345">
<input type="hidden" name="name" value="Tshirt">
<select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br>
<input type="hidden" name="img" value="img345">
<input type="hidden" name="optType" value="clothing">
<button id="btn2" class="addcart">Add to Cart</button>
</form>

My JS for grabbing the values:

var additem;
var frm = document.getElementById('prd2');
var data = new FormData(frm);
for (var value of data.values()) {
  additem += value + '|';
}

I also tried setting var additem = '';

I am expecting the value of additem to be:

et345|Tshirt|2|img345|clothing|

But I am ending up with:

undefinedet345|Tshirt|2|img345|clothing|

While I can manually remove the "undefined" from the string before storing, I would prefer to find out why it is being appended to begin with.

Answer 1

Assigning the zero-length string will solve this.

Do this:

var additem = "";

Instead of this:

var additem;

Because Javascript naturally assigns the value undefined to every variables, so when you add it with another string, it will just append the undefined.

For example:

var shouldBeUndefined; 
var shouldBeNullString = "";

console.log(shouldBeUndefined);
console.log(shouldBeNullString);

shouldBeUndefined += "concat";
shouldBeNullString += "concat";

console.log(shouldBeUndefined);
console.log(shouldBeNullString);

Full working code:

var additem = "";
var frm = document.getElementById('prd2');
var data = new FormData(frm);
for (var value of data.values()) {
  additem += value + '|';
}

console.log(additem);

<form id="prd2">
<input type="hidden" name="product" value="et345">
<input type="hidden" name="name" value="Tshirt">
<select name="quantity"><option value="1">1</option><option value="2">2</option><option>etc</option></select><br>
<input type="hidden" name="img" value="img345">
<input type="hidden" name="optType" value="clothing">
<button id="btn2" type="submit" class="addcart">Add to Cart</button>
</form>