Browser behavior while trying directly add arrays and objects

Question

I am trying to simply add 2 different kinds of string, number, array, object and try analyze result, and understanding JS V8 engine working with them:

<script>
var a = "Peter"; 
var b = "Martin"; 
var c = 5; 
var d = 10; 
var e = ["red", "green", "blue"];
var f = ["lily", "Lotus"];
var g = {name: "Peter", age: 29};
var h = {country: "USA", state: "New York", gender: "Male"}; 

console.log(a+b);
console.log(c+d);
console.log(e+f);
console.log(g+h);

var i = g+h; 
console.log(i); 
console.log(i[0]);
console.log(i[1]);
console.log(i[2]); 
</script>

In the code above I can understand:

Case 1: adding 2 strings will result "String".

Case 2: adding 2 numbers will add to be a number.

My Question is:

Case 3: How the hell trying add 2 arrays returns a string, that 2 merging last of 1st and 1st of last array?

Case 4: How in world can I access of whatever thing that is produced by direct merging of 2 objects?

Bonus Question:

Also, someone said that while adding 2 objects I will get an array of 2 objects. While, alas I have added code with "i" to show you that its not the case friend. While doing so the JS V8 engine has returned a string writting in text "[object object][object object]"

Now, please tell for "Case 4", how to access the 2 objects of this array (as you said)?

JS is very loosely typed and some operators like `+` imply type coercion to it's operands if they are not numbers. Check [this](http://2ality.com/2013/04/quirk-implicit-conversion.html) up. — Redu, Sep 02 '17 at 12:50

score 2 · Answer 1 · answered Sep 02 '17 at 12:50

Well, you can't just add arrays in JavaScript, when you try to use the addition operator, JavaScript represents their values as strings and adds them together then splits with , and joins them back, however, you can concatenate them with a.concat(b).

And for objects you can use Object.assign({}, a, b)

<script>
var a = "Peter"; 
var b = "Martin"; 
var c = 5; 
var d = 10; 
var e = ["red", "green", "blue"];
var f = ["lily", "Lotus"];
var g = {name: "Peter", age: 29};
var h = {country: "USA", state: "New York", gender: "Male"}; 

console.log(a+b);
console.log(c+d);
console.log(e.concat(f));
console.log(Object.assign({}, g, h));
</script>

score 1 · Answer 2 · answered Sep 02 '17 at 12:51

If you paste your code into the browser console, that last 2 will be like this:

red,green,bluelily,Lotus
[object Object][object Object]

It looks like what it has done in 3) is render the arrays as strings (probably using the join() function, which by default separates them witn a comma.

In 4) it has simply returned an array of 2 objects.

There are libraries like lodash and underscore that have utilities for manipulating arrays and objects which many people use, as well as some built in functions which suffice.

#4 returns a string that concatenates the two string representations of objects. — Scott Marcus, Sep 02 '17 at 13:15

Karlen Kishmiryan · Accepted Answer · 2017-09-28T13:52:48.423

The behavior of addition operator (+) is pretty well stated in spec.

As you can see, before returning the sum, both operands are get converted to primitive:

Let lprim be ToPrimitive(lval).

Let rprim be ToPrimitive(rval).

Now let's see what ToPrimitive actually returns here. Well, it returns the same input for all types, except for Objects:

Return a default value for the Object. The default value of an object is retrieved by calling the [[DefaultValue]] internal method of the object, passing the optional hint PreferredType. The behaviour of the [[DefaultValue]] internal method is defined by this specification for all native ECMAScript objects in 8.12.8.

So, for example for Arrays, we get a string of its elements joined with commas:

var arr = [1, 2, 3];   // "1,2,3"

Because for default value it returns the result of toString function, if it's a primitive value.

For Objects, it's by default the following string: [object Object].

Now getting back to ToPrimitive. Point 7 states that if one of the operands is a string, the other is also converted to string and the concatenation of both is returned. That's why in your case:

var e = ["red", "green", "blue"];
var f = ["lily", "Lotus"];
console.log(e + f);

e becomes "red,green,blue"
f becomes "lily,Lotus"
the concatenation is returned, i.e "red,green,bluelily,Lotus"

The same for objects. Regardless of contents, the object.toString() becomes [object Object] and the sum of your objects will result in "[object Object][object Object]".

As you can see, in the other cases (point 8), it will try to convert operands to numbers and then return the sum of them.

Browser behavior while trying directly add arrays and objects

3 Answers3