Javascript: Calling a function in an object literal

Question

I'm learning to program in Javascript and I'd like some help/clarification.

I declared an array that contains animal names. I defined a function that I use to split a string in two. Then I create an empty object literal and add an animal and corresponding breed. I'm trying to invoke the separateWords function in the object literal, but I need some clarification. Here's my code:

var myPets = ["Bengal Bobcat", "Beagle"];

var separateWords = function (string) {
    return string.split(" ");
};

var nameCollection = {};
nameCollection.cat = separateWords(myPets[0]);  
nameCollection.dog = myPets[1];
nameCollection.fish = null;

When I enter console.log(nameCollection) I get the following:

Object {cat: Array[2], dog: “Beagle”, fish: null}
cat: Array[2]
0: "Bengal"
1: "Bobcat"
length: 2

However, when I enter console.log( separateWords(myPets[0])), I see:

[“Bengal”, “Bobcat”]

I don't understand why the value of cat shows up as Array[2].

Answer 1

The console displays it as Array[2] as it would be (potentially) unreadable if it expanded it fully. One way to see everything is to stringify it using JSON.stringify which goes through each item in the object recursively and calls toString() on it:

 var myPets = ["Bengal Bobcat", "Beagle"]; var separateWords = function (string) { return string.split(" "); }; var nameCollection = {}; nameCollection.cat = separateWords(myPets[0]); nameCollection.dog = myPets[1]; nameCollection.fish = null; document.body.textContent = JSON.stringify(nameCollection); 

Answer 2

You are assigning to cat the result of the separateWords() function call, passing myPets[0] as a parameter.

separateWords() returns an array and with the myPets[0] input it returns a new array with the "Bengal" and "Bobcat" values splitted by the whitespace.

The split() function is the one creating an array with the splitted values and this result is returned by your separateWords() function, which also is the value assigned to the cat object member.

Answer 3

Each browser implements its console like it wants.

So your browser decided to implement the behavior you describe.

If you don't like it, propose a better idea to the developers of this browser. Or use another browser.

Answer 4

I am going to assume you are using Chrome Developer Tools or Firebug.

Developer tools condenses arrays and objects into easily readable lines you then inspect further with. What I mean is, you push the little arrow next each line in the console log to further inspect each object. I will use pictures to explain this.

Here I am assigning an array and then assigning an element in an object to that array as so:

As you can see when I log the object it show's an Array[2] rather than expand the array. In this next picture I then expand the array to inspect it.

Why is this exactly? My first thought is ease of readability. If you have an app that is complex and you have numerous debugging console logs, you can see all the logs on single lines making it easier to hunt down specific logs. As well, if you have a very large and complex object, it is arguably easier to read all the root elements on each line without expanding all the objects and arrays found within that object recursively.

Answer 5

String.prototype.split() returns an array containing the two values in the string which have been split. Read through this.

nameCollection.cat = separateWords(myPets[0])[0]; // nameCollection.cat == Bengal
nameCollection.cat = separateWords(myPets[0])[1]; // nameCollection.cat == Bobcat

Answer 6

This is simply how javascript (and many other languages) work. When you try to print "nameCollection" javascript doesn't automatically do a nice job of printing the cat array. Instead, it simply prints some type related information, which in this case is saying "cat" is an array of length 2.