Arguments in JavaScript function

Question

I'm studying how JavaScript functions work and I'm wondering what's the rationale behind passing or not passing arguments when declaring a function.

E.g. in Block 1 below, I declare the function, without passing any argument and it works correctly. I replicate the same exercise in Block 2 but in this case I also pass the arguments, and the alert shows me "NaN".

What is the reason for this?

BLOCK 1:

var integer1 = 10;
var integer2 = 20;

function sum () {
  sum = (integer1 * integer2);
  return sum; 
}

alert(sum());

BLOCK 2:

var integer1 = 10;
var integer2 = 20;

function sum (integer1, integer2) {
  sum = (integer1 * integer2);
  return sum; 
}

alert(sum());

Answer 1

While you write your functions, somewhere you need to pass a few values to execute the function or in another case, your function body can execute on its own. And they are differ programmer to programmer though the logic behind the task is the same. Let's consider the above example, you have given,

what we need to achieve, a simple addition functionality.

block 1

var integer1 = 10;
var integer2 = 20;

function sum () {
  sum = (integer1 + integer2);
  return sum; 
}

alert(sum());

to get the result you need to have integer1 & interger2 in body, as you already have. so your function's logic somewhere dependent on other elements. This is not a good practice as we build functions to handle a particular logic independent of the rest of the code. So that within the entire execution process we can call that function and it always does the same kind of behavior.

block 2

var integer1 = 10;
var integer2 = 20;

function sum (integer1, integer2) {
  sum = (integer1 + integer2);
  return sum; 
}

alert(sum(integer1, integer2));

Now, in this case, we are calling the same function but with parameters. In this scenario, an adder needs at least 2 values to add. So any point of time when we call this function gives us the result of the sum of the passing arguments. So this function is not dependent on var integer1 & var integer2, if we pass some other variables to this function, we can get the same behavior.

Now we need to keep in mind when we call a function(as you do within "alert(sum());"), we need to check is that function requires any parameters, if so then we have to pass it as arguments, like,

// define our adding function
function sum (a, b) {  // argument variables may have different variable names
  sum = (a + b);       // which only live within the function **scope**
  return sum;
}

//calling sum
sum(integer1, integer2); // we already declared these two variables integer1 & integer2

// calling sum with direct values
sum(5, 5);  // it returns 10

// now we have two new variables
var num1 = 50;
var num2 = 20;
sum(num1, num2);  // as we expect it returns 70

why you got NaN

it is a language feature, as you using Javascript, any variable which is not defined holds a value undefined, you can say it is property of Javascript

NaN means not a number, when we execute addition operation the argument variables within the function expect themselves as number type variable, but, hence we didn't pass any parameters while calling the sum() function, integer1 & integer2 holds property of undefined, so you got NaN as a result.

as you can see, I pass two integer value 5, 5 to call sum, in another case num1, num2 integer type variables to call sum.

*If you take a close look on the last line, you see, you called alert(). It is a predefined function which we get out of the box of javascript programming language. But to do alert what it does, we need to pass a value, then only it can show the value in the alert box.

so while you call alert(sum(integer1, integer2)); (corrected code of yours) it first executes sum and returns the value from it, then call alert using the return value and take it as an argument to call itself. After that, we get the alert box with the addition result.

Thanks, hope you'll get a bare minimum of clear idea about functions. It is an in-general concept, not just only for javascript.

Answer 2

With regards to your NaN error, you tried to invoke the reusable function (the function in BLOCK #2) without passing any arguments to it so it return back nothing which is obviously Not a Number (NaN).

---

Block #1 Function:

The first function is not a reusable function which means that every time you need to calculate some new values, you will have to update the variables integer1 and integer2 accordingly like this:

function sum() {
  return (integer1 * integer2); 
}

var integer1 = 5;
var integer2 = 10;
console.log(sum());

var integer1 = 11;
var integer2 = 31;
console.log(sum());

---

Block #2 Function:

The second function however, is a reusable function which can be invoked over and over again with different arguments passed to the function as parameters like this:

function sum(integer1, integer2) {
  return (integer1 * integer2); 
}

console.log(sum(5, 25));
console.log(sum(8, 32));
console.log(sum(1, 3));
console.log(sum(5, 9));

Answer 3

It looks like this question is mostly about understanding how exactly parameters work. A function call with parameters will essentially assign values to local variables right before the rest of the function code is executed.
To use your slightly edited example code:

function product(integer1, integer2) {
  returnValue = integer1 * integer2;
  return returnValue; 
}

alert(product(10, 20));

The key to understanding how this works is that product(10, 20) will assign the passed values to each parameter, in order, like this:

var integer1 = 10;
var integer2 = 20;

Just imagine the function contained the above two lines at the very top.

Answer 4

The function in block2 is using the variables expecting to be passed in. In this instance you have not passed anything and therefore integer1 and integer2 are null references / undefined.

For block1 you have declared global variables with integer values, these are then being used within the function.

Answer 5

Arguments are convenient, because you can use the same function with any values you need. In your BLOCK 2, you forgot to pass the arguments when you called your sum function.

alert(sum(integer1, integer2))

Because you did not pass the arguments when you called the function, they were undefined, and trying to multiply two undefined variables resulted in a NaN.