Simple js FOR loop returning 'undefined'

Question

Not sure what I'm doing wrong here; the variable newStr should just return "Hello World", but I'm getting this instead:

"undefinedHello World"
undefined

JS

function translate2(x){
  var newStr;
  x = "Hello World";
  for(i=0; i<x.length; i++) {
    newStr+=x.charAt(i);
  }
  console.log(newStr);
}

Answer 1

1. In JavaScript, if a variable is not initialized explicitly, it will by default have undefined. That is not a string but a primitive type of the Language. You can check that by printing it

   var newStr;
   console.log(newStr);
   // undefined
   console.log(newStr + "thefourtheye");
   // undefinedthefourtheye
   

   So, just initialize the variable with an empty string, like this

   var newStr = '';
   

2. Also, note that, in this line

   for(i=0; i < x.length; i++) {
   

   i has never been declared before. So, a new global variable i will be created. You may not want that. So, just use var keyword to declare the variable scoped to the current function, like this

   for (var i = 0; i < x.length; i++) {
   

3. Apart from that, translate2 is a function and when it is invoked, one would expect it to return something. But you are not returning anything explicitly. So, again, JavaScript, by default, returns undefined. That is why you are getting the second undefined in the question. To fix that, use return statement like this

   function translate2(x) {
       var newStr = "";
       for (var i = 0; i < x.length; i++) {
           newStr += x.charAt(i);
       }
       return newStr;
   }
   

Answer 2

You should first initialize the variable newStr.

var newStr = '';

Otherwise, newStr will be undefined and undefined + "asa" = "undefinedasa" in javascript. If you don't know what is undefined, check this out.