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

Question

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.

Solution 1

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

Solution 2

Simply return an object! Objects are one of the things that make JavaScript so powerful.

function getValue() {
  return {
     firstNum:  document.getElementById("firstNum").value,
     secondNum: document.getElementById("secondNum").value
  };
}

function add() {
   var values = getValue();
   var result = parseFloat(values.firstNum) + parseFloat(values.secondNum);
   return result;
}

Solution 3

In ECMAScript 6 (ES6), you can use object destructuring, using braces to create and unpack objects (it looks like a tuple in your case). You can also make use of the property value shorthand available in ES6:

const getValues = () => {
  const num1 = document.getElementById("firstNum").value;
  const num2 = document.getElementById("secondNum").value;
  return { num1, num2 }; //note that this is the property value shorthand. 
  // It is a shorthand for { num1: num1, num2: num2 }
}

const add = () => {
  const { num1, num2 } = getValue(); //unpack using object destructuring
  return parseFloat(num1) + parseFloat(num2);
}

More information here: http://www.benmvp.com/learning-es6-enhanced-object-literals/

Solution 4

You could put your variables into a neat little object, like so:

return {num1: num1, num2: num2};

Then:

var values = getValue();

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

And so on..

Solution 5

Try returning an array (as you can only return one value from a function)

  function getValue() {
    var num1 = document.getElementById("firstNum").value;
    var num2 = document.getElementById("secondNum").value;

    return [num1, num2];
  }

  function add() {
    var values = getValue(),
        result = parseFloat(values[0]) + parseFloat(values[1]);

    return result;
  }

View more solutions