Assigning function results to variables in JavaScript

user_13214669 0
Viewed 77

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()?

function variables javascript
4 Answers

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.

user_108753230

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.

user_131626010

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)
user_130288140

What you did with the second solution is pretty efficient.

Generally, the first approach is useful only if you would want the computed value of multiNum(3,4) to be used later in your script. And that's why you would store it in a separate variable so that you don't have to compute the value again.

If you are sure that you won't need it again then what you did later as document.write(multiNum(3,4)) is the best way to go.

user_70258240
Related