Defining functions

In programming, repeating code is considered a serious mistake. Duplicate code makes programs harder to read and maintain, especially when multiple developers work on the same project. Functions help us avoid these problems. We use functions to execute the same action multiple times throughout a program. For example, if you want to show a welcome message to your visitors, you can create a function to display it across different parts of your website or application.

JavaScript offers several ways to declare functions, and each method suits specific situations. In this topic, you will learn the basic ways to declare functions.

Function declaration

To declare a function, you need to have:

1. The function keyword.

2. A required identifier should reflect what it does. Function identifiers can contain letters, digits, underscores, and dollar signs (the same rules as variables). Usually, they are verbs.

3. A pair of parentheses. The parentheses may include parameter names separated by commas: (parameter1, parameter2). Parameters are inputs passed to functions as names and behave as local variables. For example, when a user logs into an application, we may want the program to greet them by name.

4. The function body consists of a pair of curly braces within which you can execute the code.

function sayHi(name) {
  alert('Hello' + ' ' + name);
}

sayHi("Joe"); // "Hello Joe"

Declared functions are not executed immediately. They are for later use and will be executed when invoked (called upon).

The main feature of the function declaration is that the interpreter that reads JavaScript defines the declaration before the rest of the code executes. This behavior of functions is called hoisting. JavaScript's default behavior is hoisting or moving declarations to the top. So, we can call the function in the code before defining it, and this code will work just fine.

sum(2, 3); // 5

function sum(a, b) {
  return a + b;
}

Function expressions

A function expression defines a function that is part of an expression (usually an assignment).

let sayHi = function(name) {
  alert('Hello' + ' ' + name);
}

A function expression is often defined as assigning an anonymous function to a variable.

This way allows us to create an anonymous function that doesn't have any function identifier, which is the main difference between function expression and function declaration.

Unlike function declarations, function expressions must be defined before they are called. Function expressions are created during the execution of the expression that creates them.

In this case, the function will be created during the assignment operation.

let sum = function(a, b) {
  return a + b;
}

sum(2, 3);

Arrow function expressions

ECMAScript is a JavaScript Standard revision with different versions (ES6, ES21, etc.). ES6 was released in 2015, a milestone in JavaScript's history. It added arrow functions.

In the modern standard JavaScript, function expressions can be declared using arrow functions. They have a shorter syntax than function expressions.

let sum = (a, b) => {
  return a + b;
}

sum(2, 3);

Function() constructor

Functions can also be defined with a built-in JavaScript function constructor called Function().

const mult = new Function("a", "b", "return a * b");

let x = mult(4, 3); // x = 12

In practice, this way of function definition is rarely used: you don't have to use a function constructor. The example above is the same as writing the following:

const mult = function (a, b) {return a * b};

let x = mult(4, 3); // x = 12

Conclusion

There are two main ways to define functions: function declaration and function expression. In this topic, you learned what function declaration consists of and the main differences between these two ways of function definition. You also learned about declaring function expressions using arrow notation.