What is the reason behind getting `[Object object] [ Object object]` when you perform `{} + {}` in JavaScript?

Question

What is the reason behind getting `[Object object] [ Object object]` when you perform `{} + {}` in JavaScript?

I am just starting to learn JS and I'm puzzled by a situation. Let's consider the following code snippet:

var ids = [10,20,30];
var types= ['PIZZA','HAMBURGER','AVOCADO'];
var payload=[];

for(let i = 0; i <= ids.length; i++){
    var id= ids[i];
    var type= types[i];
    var couple= {"id":id ,"type":type};
    console.log(couple);
    payload.push(couple);}
           
console.log('result is ' + payload);

The output shows: [object Object],[object Object],[object Object],[object Object]

My expectation was something like :

{ "id" : 10, "type" : "PIZZA" },
{ "id" : 20, "type" : "HAMBURGER" },
{ "id" : 30, "type" : "AVOCADO" }

Why does {} + {} result in "Object object][Object object"? Could you please provide some insight on how to prevent this in JS?

Thank you for your time and looking forward to some helpful feedback! Wishing you a wonderful day!

javascript arrays json foreach

Answer 1

Answer №1

Since JavaScript is weakly typed, a string + object operation will result in the object being converted to a string. To achieve the desired outcome, you should use `console.log('the result is', payload)

var ids = [10,20,30];
var types= ['PIZZA','HAMBURGER','AVOCADO'];
var payload=[];

for(let i = 0; i <= ids.length; i++){
    var id= ids[i];
    var type= types[i];
    var couple= {"id":id ,"type":type};
    payload.push(couple);}
           
console.log('result is ', payload);
console.log('object to string', payload.toString())

Answer 2

Since JavaScript is weakly typed, a string + object operation will result in the object being converted to a string. To achieve the desired outcome, you should use `console.log('the result is', payload)

var ids = [10,20,30];
var types= ['PIZZA','HAMBURGER','AVOCADO'];
var payload=[];

for(let i = 0; i <= ids.length; i++){
    var id= ids[i];
    var type= types[i];
    var couple= {"id":id ,"type":type};
    payload.push(couple);}
           
console.log('result is ', payload);
console.log('object to string', payload.toString())

What is the reason behind getting `[Object object] [ Object object]` when you perform `{} + {}` in JavaScript?

Answer №1

Similar questions

I encountered an issue while attempting to utilize a JavaScript script - I received an error message stating "Uncaught ReferenceError: jQuery is not defined."

Tips for activating the default 500 error page in Next.js

Strategies for preserving context throughout an Ajax request

What is the best way to verify if a value matches the container ID in Vue?

Exploring the iteration process of a JavaScript array with Node-API

Retrieve all Tableau workbooks stored on the server

I am experiencing difficulty with the display of the elements within my <li></li> tags on both the browser and in the inspect elements section. Strangely, only my <ol> tags are showing up properly

Improving the speed of the autocomplete feature involves optimizing the parsing of a substantial JSON file during every ajax call

Leverage ActiveModel::Serializers for incorporating two primary JSON arrays

Having trouble successfully sending a variable through a JavaScript form

Vue3 - changes to array data not triggering automatic re-rendering

Loading FBX files with Textures in Three.js

Adding icons to form fields based on the accuracy of the inputs provided

Incorporating a computed variable in a v-select within a VueJs endless loop

Exploring content in Embed message fields

Is it possible to trigger an AJAX validation only after the jQuery validation plugin has successfully validated the input?

Retrieving an Enum member based on its value in TypeScript

Sending a XML file from a Vue application to an ASP.NET Core backend using axios

I'm encountering a persistent issue of receiving null when attempting to read a JSON object file in

Save room for text that shows up on its own