Jambo, I'm Julia.

One of the things I initially found confusing about JavaScript was how we define functions. Why are there multiple ways of doing this, and is one better than the other? In this post, I will provide a quick summary of the key differences between function declarations, function expressions and arrow functions, along with some guidance on when we might want to use each one.

Function Declarations

Function declarations, also known as function statements, are created using the function keyword followed by a name, a set of parentheses, and a block of code. Here's an example:

function sayHello(name) {
	console.log('Hello, ' + name + '!');
}

sayHello('Julia'); // Output: "Hello, Julia!"

One key feature of function declarations is that they are hoisted to the top of the scope in which they are defined, meaning they can be used before they are declared. Whether this "feature" is a pro or con to you will depend on your use case and how you like to write JavaScript. I personally prefer to define my functions first, before calling them. 🤷🏻‍♀️

Function Expressions

Function expressions are created by assigning a function to a variable or property. Here's an example:

var sayHello = function(name) {
	console.log('Hello, ' + name + '!'); 
};  

sayHello('Julia'); // Output: "Hello, Julia!"

Unlike function declarations, function expressions are not hoisted. They also provide more flexibility and can be used in more advanced programming patterns, such as closures and higher-order functions.

Closures are functions that have access to variables defined in their outer lexical environment, even after that environment has been destroyed. This means that you can create a function that references a variable defined outside of it, and that variable's value will persist even after the function has completed execution. Whilst any function definition can form a closure, function expressions are likely to be used since we'd want to be able to call the reference at some later point.

function outerFunction() {
  var outerVariable = "Hello, ";

  function innerFunction(name) {
    var innerVariable = "What's up?";
    console.log(outerVariable + name + "! " + innerVariable);
  }

  return innerFunction;
}

var greeting = outerFunction(); // <-- function expression!!
greeting("Julia"); // logs "Hello, Julia! What's up?"

Another capability of function expressions is their usage in higher-order functions. Higher-order functions are functions that take one or more functions as arguments or return a function as its result. They are often used to abstract common functionality that can be reused across multiple functions. For example, the map, filter, and reduce functions in JavaScript are higher-order functions that take a function as an argument.

Arrow Functions

Arrow functions, also known as fat arrow functions, are a shorthand way of writing function expressions. They are created using the "=>" syntax, as follows:

var sayHello = (name) => {
	console.log('Hello, ' + name + '!');
};

sayHello('Julia'); // Output: "Hello, Julia!"

The main benefit of using arrow functions is conciseness. One of the ways it achieves this is by automatically inheriting the this keyword from their parent scope...so if you don't want to have to manage this, consider using arrow functions. They also have an implicit return, meaning that the return statement doesn't need to be explicitly written out.