JavaScript functions: parameters, return values and arrow functions

The previous chapter covered loops and control flow statements, and how they drive the execution of your code. This part of the tutorial explores another important piece of JavaScript: functions.

Functions are blocks of code you can run on demand. They let you define a single task once and run it as many times as you need without rewriting the code, which makes your code more efficient and easier to maintain.

Here is what to keep in mind when writing functions in JavaScript:

• Declaring functions
• Arguments and parameters
• The return value of a function
• Arrow functions

Declaring functions

There are two ways to declare a function in JavaScript: the function declaration and the function expression.

Function declaration

function maFonction() {
  // code to run
}

Function expression

const maFonction = function() {
  // code to run
}

Arguments and parameters

Arguments are the values passed to a function when it is called. Parameters are the variables named in the function declaration that receive those arguments.

Here is a function with one parameter, called with one argument:

function maFonction(parametre) {
  console.log(parametre);
}

maFonction('Bonjour'); // prints 'Bonjour' in the console

The return value of a function

A function can return a value with the “return” statement. A function that returns nothing is considered to return “undefined”.

function maFonction() {
  return 'Bonjour';
}

console.log(maFonction()); // prints 'Bonjour' in the console

You can also return several values from a function by using an object or an array:

function maFonction() {
  return {
    message: 'Bonjour',
    nombre: 42
  };
}

console.log(maFonction());
// prints { message: 'Bonjour', nombre: 42 } in the console

function maFonction() {
  return [1, 2, 3];
}

console.log(maFonction()); // prints [1, 2, 3] in the console

When you use the “return” statement, the function stops immediately and the code that follows it is never run. Here is an example that shows it:

function maFonction() {
  return 'Bonjour';
  console.log('Ce message ne sera jamais affiché');
}

console.log(maFonction()); // prints 'Bonjour' in the console

Arrow functions

Arrow functions are a shorter syntax for writing functions in JavaScript. They come in handy whenever you need a small function that does not call for a full body.

const maFonction = () => {
  // code to run
};

If the function body is a single expression, you can omit the braces and the return keyword: the value of the expression is returned. The parentheses, however, remain mandatory when the function has no parameter:

const maFonction = () => console.log('Bonjour');

Conclusion

Functions are a key part of JavaScript and essential to writing efficient code that stays easy to maintain. Once you are comfortable with function declarations, arguments and parameters, return values and arrow functions, you will be able to write powerful, genuinely useful functions in your applications.

The next chapter explores another important concept in JavaScript: objects. We will see how to create and use objects to store and handle data in a structured way in our code.