How to concatenate correctly?

The syntax for write is as follows: document.write(exp1, exp2, exp3, ...)

Accepts one or more expressions.

You're actually just concatenating on the first option. By using "+" you are concatenating expression 1 with expression two, that is, you are concatenating the variables words with number, generating a new expression.

In the second option you are passing two expressions, which is completely valid according to the write syntax, however, you are not strictly concatenating.

You can use the first option when they are small or easy to visualize values. For cases where your variables are entire blocks of html I would use option two.

First, some clarifications must be made in order to understand it better:

write() is a function and receives one or more parameters, the purpose of this function is to print the parameters it receives as a concatenated string

Taking this into account, you can overload this function with many parameters, each parameter separated by commas, example:

 document.write("a");
 document.write("a", "b", "c");
 document.write("a", "b", "c");

On the other hand, the variables that this function receives can be of different types: integers, strings, floats and even booleans:

 document.write("a", 2, true);

Now let's talk about string concatenation: A string is concatenated by sign +(and also allows you to concatenate different types of variables):

 var cadena = numero + palabra + "<br/>"

If you notice, in the last example all that concatenation counts as a single variable, when we put it in a function, we call it a parameter.

So, the write()purpose of the function is to receive parameters and all those parameters are printed concatenated

document.write(numero + palabra + "<br/>");
document.write(numero, palabra);

In the first it only receives one parameter but this parameter is already concatenated, in the second it receives 2 but here the function is responsible for concatenating them.

This is likely to be confusing with the function write being concatenated, but if we take another function as an example this would be even clearer.

The best way to concatenate in JS is the (+) because the (,) is used in many cases as parameter inclusion in functions or in other js implementations, this means that when specifying the comma (,) certain elements are valued separately "this is in certain cases" while if the (+) is included it is set as a single string or concatenation returning 2 elements as a single value,

if you are looking to concatenate I recommend using:

var cadena1 = "Hola ";
var cadena2 = "Mundo";
cadena1.concat(cadena2);

Using one ,inside an console.writeor console.logdoes not mean that you concatenate, but rather that you are printing two different variables in a single output.

let myNum  = 10,
    myBool = false,
    myStr  = 'Foo';
    
document.write( myNum, myBool, myStr );

This is not concatenation, it is just an output of 3 values ​​without writing 3 times document.writethis is demonstrated like this

let myNum  = 10,
    myBool = false,
    myStr  = 'Foo';
    
document.write( typeof myNum, typeof myBool, typeof myStr );

We are seeing that each variable has a data type, if it were concatenated, it would be a whole string.

There are two simple ways to concatenate, with the operator +or with variable interpolation

let myNum  = 10,
    myBool = false,
    myStr  = 'Foo';

//Concatenar por +
document.write( myNum + myBool + myStr + '<br>' );

//Esto si tiene un tipo de dato
document.write( typeof(myNum + myBool + myStr) + '<hr>' );

//Concatenar por interpolación utilizando backtick **`**
document.write( `${ myNum } ${ myBool } ${ myStr }` )

I want you to see how all prints behave either to the DOM or to the console

The concatenation by operator, if you notice it is adding the number with the boolean, this is interpreted by Javascript as 10 + 0 (Javascript intervenes in the conversion of the Bool to integer and false means 0 / true is 1) and then it is concatenating the string , the moment you concatenate the string, everything becomes a Stringand so the sum of the 3 variables in the second document.write return data type is a string.

The third example we are using interpolaciónvariables with literal template that supposes an improvement when rendering the information, since with a simple syntax you can convert everything to string and concatenate to your liking and form.

It is a matter of ways of working, and you can use any depending on what you want to achieve

Using ","to concatenate, a space is generated between the text and the variable, which with **"+"**not. It is the only differential.