In Javascript, how would you print out the contents of an object?

Printing out the contents of a Javascript object can be very useful when debugging your Javascript code. There are a few different ways to print out an object, and we will show you all of them.

The Javascript For/in loop

One way to print out the contents of a Javascript object is by using the for/in loop. The for/in loop is completely different from a regular for loop, because the for/in loop is specifically used to iterate through the contents of an object. The general structure of a for/in loop looks like this:

for( variable in object)
     statement

When using the for/in loop, the string that comes after the “in” must be an actual object – so whatever the name of your object is you can place it there. And the string that comes before the “in” operator can have any arbitrary name – in the code above it’s called “variable”, but we can technically call it whatever we want – whether it’s “foo”, “bar”, or whatever it does not matter since it is just a placeholder for each property in the Javascript object (this will make more sense when you see an example below).

So, to specifically print out each and every property’s value in the object, we can do this:

Example of using the Javascript For/in loop


// this is our sample object with 3 properties
var sampleObject = { x:1, y:2, z:3  };

var alertText = ' ';
/*Put the name of your own object after "in",
  and you can change the text "property"
  to be whatever you please.
*/

for (property in sampleObject) {

 /*this will create one string with all the Javascript 
  properties and values to avoid multiple alert boxes: */

  alertText += property + ':' + sampleObject[property]+'; ';

}

alert(alertText);

Console.log to print out Javascript objects

What if you don’t want to use a Javascript alert – maybe because you find that alert boxes are annoying? Another option is to use Console.log – it is a simple and clean way to print out the contents of a Javascript object, and it does not require that you iterate through each and every property like the for/in loop. But there is a catch: you must be working with a console. What is a console anyways? Well, think of it as your Javascript debugger. Every major browser comes with a console either built in or as an add-on. Firebug (for the popular Firefox browser) is the most popular debugging tool, and Chrome/Safari/IE all have their own developer tools that will display a Javascript console as well.

This is what a call to console.log would look like – remember that you can only see the output in your browser’s console screen:

var sampleObject = { x:1, y:2, z:3  };
console.log(sampleObject);

Console.log may break Internet Explorer Browsers

You should always remember to remove the calls to console.log from your code once you are done debugging – because those calls may prevent older versions of IE from correctly executing your scripts.

JSON.stringify function to print out Javascript objects

Another way to print out the contents of a Javascript object is to use the JSON.stringify function. This is a very nice way to print things out because you don’t have to use the console, and you don’t have to write out a for/in loop just to get properties to print out. It is our preferred way of printing out Javascript objects. Here’s an example of the JSON.stringify function in use:

var sampleObject = { x:1, y:2, z:3  };

var myObject = JSON.stringify(sampleObject);

alert(myObject); //this will output {"x":1, "y":2, "z":3}

JSON (JavaScript Object Notation) is a standard that is specifically meant for data interchange, and because JSON is a subset of Javascript, you should be able to use the function above without needing any supporting library files. The stringify method simply converts the Javascript object into JSON text, which is something that’s very easy to read and print out to the page.

toSource to print out objects in Firefox

And finally, we present one last option that isn’t very highly recommended simply because out of all the major browsers it will only work in Firefox (since Firefox is a Gecko based browser).

But, here is an example of using toSource to print out the contents of an object anyways:

var sampleObject = { x:1, y:2, z:3  };

alert("sampleObject is " + sampleObject.toSource());

Above, we presented a lot of different options for printing out Javascript objects. We personally think that the JSON Stringify function is the best because of its simplicity, but which one you choose to use is really up to you.


Hiring? Job Hunting? Post a JOB or your RESUME on our JOB BOARD >>

Subscribe to our newsletter for more free interview questions.



FOLLOW Varoon Sahgal, Author of ProgrammerInterviewon