Assigning function results to variables in JavaScript

Question

I’m learning JavaScript, and want to understand this behavior.

I was studying the following code:

function multiNum(x,y){
  return x*y
}
var num = multiNum(3,4);
document.write(num)

I tried to type this myself, and this is what I came up with:

function multiNum(x,y){
  return x*y
}
document.write(multiNum(3,4))

I thought I could put multiNum(3,4) into the document.write() instead of making another variable.

So, is it just a rule that I have to create another variable and put the new one into document.write()?

Answer 1

Both your examples are correct and will produce the same result. It's just a matter of style.

If you want your code to be easier to read, then seperating it out like in your first example is best.

If you want your code to be a smaller in size. Then the second example is best.

Seperating things out is best practice.

Answer 2

You do not have to create an extra variable, but a lot of the times it makes the code just easier to read and understand. They say your variable names should generally describe its contents, this way everyone, including someone else who does not know the code, can have a basic understanding of what is going on.

In your example, it is not very much needed to create an extra variable since it's a very simple code snippet. I like to create them anyway, just to stay in the rythm of doing so. But it is your choice.

Answer 3

This is an interesting question and the in order to fully understand it would be beneficial to look into javascript expressions. Basically an assignment in javascript looks looks like

variable_name = expression

when you create that variable the expression is evaluated

//so this
number = 3 * 5
//is the same as
number = 15

Functions can be called with an expression, literal (like a string or int), or a variable name

// '|' means 'or'
function(expression | literal | variable)

if you pass an expression to a function function(expression), that expressionis first evaluated and then passed into the function.

// so
function(3*5)
//is the same as
function(15)

And the same thing goes for function calls. If a function is called inside another function, it is first evaluated and it's result is the outer functions argument.

Lets look at this example

function increment(number){
 return number + 1
}
n = 1
document.write(increment(n))

First document.write is called with the parameter increment(n) and n = 1

//so 
increment(n) = increment(1) = 2
//following me? now we can see that
document.write(increment(n)) 
//is the same as
document.write(2)
//!!

I hope that helps!

edit:

to bring it back to your example

function multiNum(x,y){
  return x*y
}
var num = multiNum(3,4) // num = 12
//so
document.write(num)
//is the same as
document.write(12)