JavaScript: How do I return two values from a function and call those two variables in another function?
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);
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;
}
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/