Return value to a function

Question

How does one pass a variable to one function and then return a value to another function? I have simple example here where I am trying to work it out. The first function accepts the argument 'currpage', returns it to the second function correctly as a number, but then when I call the second function, console.log shows NaN. Not sure what I might be doing wrong.

$(document).ready(function () {

    var currpage = 1;

    $('p').click(function () {
        var xyz = passfrom(currpage); //pass var to function and return value
        console.log(xyz); //returns correct value

        var abc = passto();
        console.log(abc); //NaN
    })
})

function passfrom(currpage) {
    var newpage = parseInt(currpage) * 1000;
    return newpage;
}

function passto() {
    var newcurr = passfrom();
    var newcurr = newcurr * 1000;
    console.log(typeof (newcurr)); //number
    return newcurr;
}   

Answer 1

How does one pass a variable to one function and then return a value to another function?

A variable is just a little container where you store a value. When you pass a variable to a function, you really pass the value of that variable to it. So in your case:

passfrom(curpage);

and

passfrom(1);

are the same.

Within a function, variable names are used to access these values. These names are totally independent of whatever name was attached to the value outside the function (if it even had a name). They are more like aliases. To distinguish them from variables, we call them parameters. So this one:

function passfrom(currpage) {
    var newpage = parseInt(currpage)*1000;
    return newpage;
}

and this one:

function passfrom(myownname) {
    var newpage = parseInt(myownname)*1000;
    return newpage;
}

are exactly the same. And if we were to write out what actually happens, we'd get this:

// var xyz = passfrom(currpage);
var xyz = value-of(passfrom(value-of(currpage))

So all you have to do to pass a value to some function, is to make sure that it has such a parameter name available by which it can use that value:

function passto(myalias) {
    console.log(myalias);
}

passto(xyz); // writes 1000 to the console.

The above is the actual answer to your question.

To make things a little bit more complicated, there are two more things to take into account:

1. Scope. The parameter names only work within your function. If they are the same as some variable name outside the function, that outside variable is hidden by the parameter. So:

   var currpage = 1;
   function plusOne(currpage) { curpage += 1; }
   plusOne(currpage);
   console.log(currpage); // 1, as the variable currpage was hidden
   
   function plusTwo(othername) ( currpage += 2; }
   plusTwo(currpage);
   console.log(currpage); // 3, as currpage was not hidden
   

2. This all works for strings, integers, and other simple types. When you're dealing with more complex types, the parameter name isn't an alias for the value passed to the function, but for the location of the original value. So in that case, whatever you do with the parameter within the function will automatically happen to the variable outside the function:

   var arr = [ 0, 1 ];
   function plusOne(somearr) { somearr[0] += 1; }
   plusOne(arr);
   console.log(arr[0]); // 1, as somearr references arr directly
   

   This is called "pass-by-value" and "pass-by-reference."

Answer 2

You're dealing with two different currpage variables, causing one to be undefined when you try to perform arithmetic on it, resulting in a NaN result. See my inline code comments below for further explanation:

$(document).ready(function() {    
    var currpage=1; // Local to this function, because of the var keyword.
    ...
})
}) // I'm assuming this extra closing brace and paren is a typo.
   // Otherwise, your code example has a syntax error or is incomplete.

function passfrom(currpage) { 
   // currpage is the name of the parameter to passfrom.
   // It happens to have the same name as a local var in
   // the document.ready callback above, but the two are
   // not the same.
   var newpage = parseInt(currpage)*1000;
   return newpage;    
}

function passto() {
   // passfrom is called with an implicit 'undefined' argument.
   // Thus, undefined will be used in the arithmetic ops and produce NaN.
   var newcurr = passfrom();

   // Don't need the var keyword below.
   var newcurr = newcurr * 1000;
   console.log(typeof(newcurr)); //number
   return newcurr;
}

You need to make the same currpage variable accessible from both passfrom and passto by putting it in a higher/more global scope or move those functions into the same scope that the original currpage is in. Something like this:

var currpage;

$(document).ready(function () {    
    $('p').click(function () {
        var xyz = passfrom(1); //pass var to function and return value
        console.log(xyz); //returns correct value

        var abc = passto();
        console.log(abc); //NaN
    })
})

// Rename the param so there isn't a naming conflict.
function passfrom(currpageParam) { 
    // If the param is a number, reset the global var.
    if (typeof currpageParam == 'number') { currpage = currpageArg; }

    var newpage = parseInt(currpage) * 1000;
    return newpage;
}

function passto() {
    var newcurr = passfrom();
    newcurr = newcurr * 1000;
    console.log(typeof (newcurr)); //number
    return newcurr;
} 

Be careful though. You'll probably want to take steps to protect your currpage var from outside modification. Also, I suspect that there's a better way to do what you're trying to do, but it isn't clear exactly what that is, so I can't suggest anything.