JavaScript Undefined Result While Printing An Array

Question

I'm new to the raw JavaScript side of web development so I decided to learn. I know the basics of programming and I've ran into something I can't seem to fix. While playing with arrays in JavaScript I wanted to make a function to print everything out So I created something like this.

<!DOCTYPE html>
<html>
<head>
    <title> Learning JavaScript </title>
<script>
    var names = new Array("Connor <br />", "Shane <br />", "Ty <br />", "Brandon <br />");

    function printArray (){
        for(x=0; x < names.length; x++)
            document.write(names[x]);
    }

</script>
</head>

<body>
    <script>
        document.write(printArray());
    </script>
</body>
</html>

It prints out the names but after the names it also has another piece of text called 'undefined'. It looks like this.

Connor 
Shane 
Ty 
Brandon 
undefined

I've tired moving the condition around a bunch in the for loop and getting no where. I think for me it would be great to understand why the 'undefined' is there and how I could possibly avoid these situations in the future while I'm actually doing a project. Any help would be great. Thanks :)

The `undefined` bit is the value returned when you call `printArray`. Replace the line `document.write(printArray());` with `printArray();` — tewathia, Apr 04 '14 at 03:07
You have in your code 2x `document.write`, the first (in your function) does the write, while the other does: `1:` Executes `(printArray())` and `write` .... well... undefined cause nothing to write. — Roko C. Buljan, Apr 04 '14 at 03:16

score 0 · Answer 1 · edited May 23 '17 at 11:57

0

DEMO

var names = [ "Connor <br>", "Shane <br>", "Ty <br>", "Brandon <br>"];

var html = "";
function printArray (){
   for(var x=0; x < names.length; x++){
      html += names[x];   // Populate string with array values
   }
   document.body.innerHTML = html; // Append string only once
}

printArray();

document.write is a form of evil, should be replaced in favor of other methods like innerHTML.

Use an string representation to hold all your extracted HTML and append to the desired element only once.

Why is document.write considered a "bad practice"?

edited May 23 '17 at 11:57

Community

1
1

answered Apr 04 '14 at 03:06

Roko C. Buljan

164,703
32
260
278

[*document.write*](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#document.write()) is not deprecated. It is in current versions of both the [W3C HTML5](http://www.w3.org/html/wg/drafts/html/CR/webappapis.html#document.write()) and [WHATWG HTML "Living Standard"](http://www.whatwg.org/specs/web-apps/current-work/multipage/webappapis.html#document.write()). – RobG Apr 04 '14 at 03:15
@RobG ups true, I used a wrong term, as your link sais: `!! Warning This method has very idiosyncratic behavior.` Should we deprecate it? That's another question. – Roko C. Buljan Apr 04 '14 at 03:18
Okay I think I understand what's going on there, thanks for the help :) – Connor Gaunt Apr 04 '14 at 03:22
@ConnorGaunt No problem. Think about the use of the code I suggested. – Roko C. Buljan Apr 04 '14 at 03:23
I will look into innerHTML, I must have been watching an old set of tutorials. – Connor Gaunt Apr 04 '14 at 03:26

score 0 · Accepted Answer · answered Apr 04 '14 at 03:08

This line:

document.write(printArray());

is using document.write() to print the return value of the function printArray(). Your function prints the array of names as you'd expect but doesn't actually return a value, so your outer call gets undefined and prints that. You can see this happening if you add something like return "someString"; as the last line of printArray();

Actually, all you need is

<body>
    <script>
        printArray();
    </script>
</body>

I understand that this is a learning exercise, but for future reference document.write() is not really good practice. Setting the document body directly with something like

document.body.innerHTML = "someHTML<br>";

is a better method.

Ohhhh thank you! I've been using JQuery for some time and thought I needed to learn the actual JavaScript not the framework. A tutorial on YouTube said if I wanted something to appear on screen then I had to use document.write(); Thank you for getting back to me so quickly! — Connor Gaunt, Apr 04 '14 at 03:14

score 0 · Answer 3 · answered Apr 04 '14 at 03:29

0

What Roko wrote and move the <br> from your data to the code.

var names = [ "Connor", "Shane", "Ty", "Brandon"];

var html = "";
function printArray (){
   for(var x=0; x < names.length; x++){
      html += names[x] + '<br>';   // Populate string with array values
   }
   document.body.innerHTML = html; // Append string only once
}

printArray();

This makes it easier to change your html in, for example:

      html += '<p>' + names[x] + '</p>';   // Populate string with array values

answered Apr 04 '14 at 03:29

p.kamps

86
4

Ahhh thank you, I see how removing the break out of the data would be better in general. That way I could use that data somewhere else without the break. Thanks. – Connor Gaunt Apr 04 '14 at 03:33
`o_O` Instead of posting a duplicate answer you've could comment on the already existing one by just noting: `html += names[x] + '
';` – Roko C. Buljan Apr 04 '14 at 05:31
@RokoC.Buljan: I didn't think of that, but you're right, sorry. – p.kamps Apr 04 '14 at 12:56

JavaScript Undefined Result While Printing An Array

3 Answers3