Question

133

JavaScript: How do I return two values from a function and call those two variables in another function?

rated 0 times [ 137] [ 4] / answers: 1 / hits: 35948 / 9 Years ago, sat, march 14, 2015, 12:00:00

JavaScript:

                function getValue(){

                    var num1 = document.getElementById(firstNum).value;

                    var num2 = document.getElementById(secondNum).value;



                    return (num1, num2);

                }



                function add(){

                    getValue();



                    var result = parseFloat(num1) + parseFloat(num2);



                    return result;

                }

What I'm creating is a calculator that gets the values from input boxes. What I'm having trouble with is how am I supposed to call the variables I declare in the getValue(); function in my add(); function to create a value.

I appreciate the help.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ignacio

Add To Favorites

Follow

Total Points: 467

Total Questions: 128

Total Answers: 79

Location: Luxembourg

Member since Tue, Mar 14, 2023

1 Year ago

answered 9 Years ago domeniccolti · Accepted Answer

You can't return two values like this:

return (num1, num2);

Javascript doesn't work that way. If you're trying to do a Python-like tuple, Javascript doesn't have a data structure with that syntax.

You can put two values in an array and return the array or two values in an object and return the object.

And, then when you call the function, you have to assign the result to something in order to use the returned result.

Here's one way returning an array:

function getValues(){

    var num1 = document.getElementById(firstNum).value;

    var num2 = document.getElementById(secondNum).value;

    // return array of two values

    return [num1, num2];

}



function add(){

   // get values and assign the returned array to a local variable named values

   var values = getValues();

   return parseFloat(values[0]) + parseFloat(values[1]);

}

Or, you could put both values into an object with named properties:

function getValues(){

    var num1 = document.getElementById(firstNum).value;

    var num2 = document.getElementById(secondNum).value;

    // return array of two values

    return {firstNum: num1, secondNum: num2};

}



function add(){

   // get values and assign the returned array to a local variable named values

   var values = getValues();

   return parseFloat(values.firstNum) + parseFloat(values.secondNum);

}

The object syntax is more descriptive and verbose because each property has a relevant name rather than just a numeric index, but it's also less compact. In this particular case, you could use either the object or the array.

ES6 Destructuring Update

When returning two values in an array or an object, you can also use ES6 syntax to shorten the code to do that. For example, when returning an object, you can use the shorthand syntax that assigns the property name as the same name as the variable as in:

return {num1, num2};

This actually returns an object that is like this:

{ num1: num1, num2: num2 }

And, then when you call that function, you can use destructuring to assign both values to variables:

function getValues(){

    var num1 = document.getElementById(firstNum).value;

    var num2 = document.getElementById(secondNum).value;

    // return array of two values

    return {num1, num2};

}



let {num1, num2} = getValues();

console.log(num1);

console.log(num2);

Or, you can use destructuring similarly with an array:

function getValues(){

    var num1 = document.getElementById(firstNum).value;

    var num2 = document.getElementById(secondNum).value;

    // return array of two values

    return [num1, num2];

}



let [num1, num2] = getValues();

console.log(num1);

console.log(num2);