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);
}

Solution 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;
   }
   

Solution 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.

Solution 3

newStr is undefined. Add

var newStr = '';

So that you have

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

Comments

[Uncle Slug]

Great, that worked. However, an additional undefined still remains in the console after the string is returned. Why would that be occurring?

[thefourtheye]

@UncleSlug Did you try the third suggestion in my answer?

[Uncle Slug]

Yes, I used the 3rd suggestion.

[thefourtheye]

@UncleSlug In the console, don't use console.log(translate2(..)), try simply translate2(..). The console.log function call doesn't return anything, so undefined will be returned by default. That is why you are getting an extra undefined in the console.

[Uncle Slug]

in the console, I have been using just the function translate2()

[thefourtheye]

@UncleSlug Okay, can you please show the current translate2 function?

[Uncle Slug]

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

[thefourtheye]

Let us continue this discussion in chat.