JavaScript ES6 Arrow Function Default Parameters & Multiple Return Values

Just like most programming languages, JavaScript provides functions which are logical unit of code instructions that execute a specific task or implements a certain algorithm. A function has zero or more parameters and a single return value.

How to Declare a JavaScript Arrow Function?

Let's take an example of a JavaScript function using the arrow syntax:

const func = () => {
  // Other instructions
}

How to Declare a JavaScript Arrow Function with Parameters

This function takes no parameter. Let's now see a function with one parameter:

const func = param => {
  // Other instructions
}

Or also two parameters:

const func = (param1, param2) => {
  // Other instructions
}

How to Declare JavaScript Functions with Default Values?

In ES6, functions can take parameters with default values:

const func = (param1 = 'param1', param2 = 'param2') => {
  // Other instructions
}

So now if you call the func function without passing any parameters:

func();

The param1 and param2 variables will have the 'param1' and 'param2' values as initial values.

How to Return a Value from A JavaScript Function?

JavaScript functions always return a value. If no value is explicetly returned from the function, undefined is returned.

You can use the return statement to return a single value from a function. For example:

const func = (param1 = 'param1', param2 = 'param2') => {

  return param1 + ' ' + param2;
}

We can call the function and assign the returned value to a variable like so:

const ret = func(); // ret = 'parma1 param2'

How to Return Multiple Values from a Function in JavaScript?

You can only return one value from a function. But you can use various way to simulate returning multiple values.

You can use arrays and objects and use object/array destructuring assignment to get individual values.

Let's see this by example:

const func = (firstName = 'kaima', lastName = 'Abbes') => {

  return [firstName, lastName];
}

const [firstName, lastName] = func();

We call the function which returns an array and we use the array destructuring syntax to get the individual return values.

Let's see another example using an object:

const func = (firstName = 'kaima', lastName = 'Abbes') => {

  return {firstName: firstName, lastName: lastName};
}

const {firstName, lastName} = func();

We call the func() function and we use the object destructuring assignment to get individual return values.

Conclusion

In this post, we've seen how to use arrow functions with default parameters and multiple return values.

Note: We also publish our tutorials on Medium and DEV.to. If you prefer reading in these platforms, you can follow us there to get our newest articles.

You can reach the author via Twitter:

About the author

Ahmed Bouchefra
is a web developer with 5+ years of experience and technical author with an engineering degree on software development. You can hire him with a click on the link above or contact him via his LinkedIn account. He authored technical content for the industry-leading websites such as SitePoint, Smashing, DigitalOcean, RealPython, freeCodeCamp, JScrambler, Pusher, and Auth0. He also co-authored various books about modern web development that you can find from Amazon or Leanpub


Get our Learn Angular 8 in 15 Easy Steps ebook in pdf, epub and mobi formats, plus a new Angular 8 tutorial every 3 days.


Online Courses (Affiliate)

If you prefer learning with videos. Check out one of the best Angular courses online
Angular 8 - The Complete Guide (2019+ Edition)

Angular Crash Course for Busy Developers

comments powered by Disqus
DMCA.com Protection Status