Help fill my knowledge gap please re: "+" vs ","

[eyedropper]

Tell us what’s happening:
Describe your issue in detail here.
Why do the two for loops at the beginning here behave differently? Their only difference is that one uses a “+” in the console.log() call and the next uses a comma.

I’ve just spent an hour searching and reading about "+’ and “,” and strings and still don’t understand. If you can point to a source to help me understand, I’d appreciate it.

(I’m not asking for help solving the challenge. My working solution is commented out here. Just trying to understand behavior I encountered while trying to debug an earlier attempt.)

FYI, the code as written outputs the following:

Iteration#0: [object Object]
Iteration#1: [object Object]
Iteration#2: [object Object]
Iteration#3: [object Object]
Iteration#0: { user: ‘Tinky-Winky’, sex: ‘male’ }
Iteration#1: { user: ‘Dipsy’, sex: ‘male’ }
Iteration#2: { user: ‘Laa-Laa’, sex: ‘female’ }
Iteration#3: { user: ‘Po’, sex: ‘female’ }

   **Your code so far**

function truthCheck(collection, pre) {

for( let i = 0; i < collection.length; i++){
console.log("Iteration#" + i + ": "  + collection[i]);
}  //this one uses all plus signs to concat the output and doesn't behave the way I'd expected

for( let i = 0; i < collection.length; i++){
console.log("Iteration#" + i + ": "  , collection[i]);
} //this one uses a plus and a comma and behaves as I thought the first one would

//below is my working solution, which I've commented out. Please ignore for the context of this question -- unless you see room for improvement :) --  Thanks
/*
for (var i = 0; i < collection.length; i++) {
     if (collection[i].hasOwnProperty(pre)) {
       if (!collection[i][pre]){
         return false;
     }
 } else return false;
}
*/
 return true;   
}

truthCheck([{"user": "Tinky-Winky", "sex": "male"}, {"user": "Dipsy", "sex": "male"}, {"user": "Laa-Laa", "sex": "female"}, {"user": "Po", "sex": "female"}], "sex");

   **Your browser information:**

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14388.52.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.91 Safari/537.36

Challenge: Everything Be True

Link to the challenge:

freeCodeCamp.org

[kevinSmith]

@eyedropper

wo for loops at the beginning here behave differently? Their only difference is that one uses a “+” in the console.log() call and the next uses a comma.

The + will concatenate strings. So, if I put:

console.log('123' + '456');

the strings will be concatenated first and console.log will just receive “123456” as a single string.

In this case:

console.log('123', '456');

the comma is just to separate parameters, things being passed to the function. In the earlier example, it all just got put into one string so there was no need for a comma separator. But here, we’re actually sending two strings, separately. console.log will see that it has more than one and will output them, separating them with a space in the output, so on the string it will look like “123 456”.

console.log is set up to take a variable number of parameters. So, you could do

console.log(42, 'apple', [1, 2, 3], 1/0, null);

and it would output

42 'apple' [1, 2, 3] Infinity null

or something like it, depending on the JS env.

[eyedropper]

Thanks so much for the prompt reply!

If I’m understanding you correctly, the “+” joins the strings together before displaying a single string, while the comma tells console.log() to display multiple separate strings.

So the “[object Object]” output is just a reflection that such a Frankenstein-y joined-together string (of a “normal” string and an array of objects) isn’t gonna behave as I might want it to.

(I of course wanted it to display the contents of the “normal string” and then the bracketed object like “{ user: ‘Tinky-Winky’, sex: ‘male’ }” as it did in the second loop.)

That’s enough to let my brain stop mulling it over and move on. Thanks again.

(But if anybody has any further insights on this behavior, I’m all ears.)

[kevinSmith]

@eyedropper

If I’m understanding you correctly, the “+” joins the strings together before displaying a single string…

Right, the function sees that as a single parameter. That expression gets evaluated before it is sent to console.log as a single parameter.

while the comma tells console.log() to display multiple separate strings.

More accurately, JS sees the comma delimiter so it sees that there are multiple parameters and sends those multiple parameters to console.log.

So the “[object Object]” output is just a reflection that such a Frankenstein-y joined-together string (of a “normal” string and an array of objects) isn’t gonna behave as I might want it to.

The console decides how to display things. I assume that it calls the objects toString method. Different JS envs will make different choices how to display this in different situations. If you want to force it to display, you can convert it to a string with JSON.stringify(myObj) or, if you want to make it more “pretty”, you can do something like JSON.stringify(myObj, null, 2).

This one:

console.log("Iteration#" + i + ": "  + collection[i]);

what does it mean. What does it mean to add an object to a string? I think it converts the object to a string. I guess it uses the built in toString method. It seems to just be saying “this is an object of type object”.

But when in doubt, test it. A good dev is kind of an engineer. And good engineers like taking things apart and seeing how they work:

const obj = { foo: 'bar', number: 42 }
const favoriteFood = 'pizza'

console.log(favoriteFood + obj)
// pizza[object Object]

console.log(obj)
// {foo: 'bar', number: 42}

console.log(JSON.stringify(obj))
// {"foo":"bar","number":42}

console.log(JSON.stringify(obj, null, 2))
// {
//   "foo": "bar",
//   "number": 42
// }

console.log(obj.toString())
// [object Object]

console.log(favoriteFood, obj)
// pizza {foo: 'bar', number: 42}