Multiple return values

We already discussed the fact that functions in JavaScript, as well as in many other programming languages, can return a value by using the return keyword. It is optional though - a function can work just fine without ever returning anything.

At some point, when working with functions, you will likely get the urge to define a function that can return more than one value. But is that even possible in JavaScript? As an example, consider this function, which takes a full name like "John Doe" and then splits it up into a first and a last name - can we return both values?

function GetNameParts(fullname)
{
	let nameParts = fullname.split(" ");
	return nameParts[0];
	return nameParts[1];
}

let fullName = "John Doe";
// Only returns "John"
alert(GetNameParts(fullName));

No, of course this won't work, because the return keyword also acts as an exit command for the function, which means that as soon as the return keyword is reached, the function is exited and the value returned to the caller. In this situation it just means that only the first name will be returned and the second return keyword is never reached.

There are several programming languages out there which natively supports multiple return values, but because of how the return keyword works in JavaScript (as well as in other, related programming languages), it's not possible to directly return multiple values. But there is of course a workaround!

Arrays

One way of returning multiple values is to simply return an array. Here's how our function from above could look if we re-wrote it to return an array:

function GetNameParts(fullname)
{
	let nameParts = fullname.split(" ");
	return nameParts;
}

let fullName = "John Doe";
let firstName = GetNameParts(fullName)[0];
let lastName = GetNameParts(fullName)[1];
// Doe, John
alert(lastName + ", " + firstName);

Since we already get an array back when we use the Array.split() method, we can just return it. Once we have an array back from the function, it's just a matter of accessing the two individual values. In this case, we use it to display the name in the "Last name, First name" format.

Objects

Arrays are easy to return, but a more elegant solution might be to create an object and return it. Since we can just create objects on-the-fly in JavaScript, this is really easy to do and I personally think that it will make the code easier to read and nicer to look at. Here's a re-written version of the above example where we use an object instead of an array:

function GetNameParts(fullname)
{
	let nameParts = fullname.split(" ");
	let result = 
	{
		firstName: nameParts[0],
		lastName: nameParts[1]
	};
	return result;
}

let fullName = "John Doe";
let name = GetNameParts(fullName);
// Doe, John
alert(name.lastName + ", " + name.firstName);

We're mostly doing the same here, but as the consumer of the GetNameParts() function, it's a bit more cleaner to obtain the first and last name since we can do it with named properties instead of indexes in the array.

Summary

JavaScript doesn't natively support returning multiple values from a function, but it's quite simple to achieve the same functionality by simply returning arrays or objects.