Functions in JavaScript: declaration, expression, and arrow functions

Anton Ioffe - August 11th 2023 - 2 minutes read

Introduction

In the vast realm of JavaScript, functions serve as the building blocks, allowing us to craft dynamic, reusable, and modular code. From the old-fashioned function declarations to the modern arrow functions, each has its unique flavor and use cases. Let's take a voyage through these.

The Basics of JavaScript Functions

Before diving deep, it's crucial to grasp the essence of functions. They're essentially sets of instructions bundled under a name, and they can be run multiple times from different parts of your program.

Function Declarations

This is the most traditional way to declare a function in JavaScript.

function greet() {
    console.log("Hello, world!");
}
greet(); // Outputs: Hello, world!

It's hoisted, which means you can call it even before you declare it.

Function Expressions

A function expression is a way to declare a function as a part of an expression, typically with a variable. Unlike function declarations, these aren't hoisted.

const greetExpression = function() {
    console.log("Hello from a function expression!");
};
greetExpression(); // Outputs: Hello from a function expression!

Arrow Functions

ES6 brought a concise way to write functions, especially for short one-liners. Arrow functions shine in their brevity and lexical this.

const greetArrow = () => console.log("Hello from an arrow function!");
greetArrow(); // Outputs: Hello from an arrow function!

Differences & When to Use Each

Each function type has its own strengths:

Syntax differences: Arrow functions are more concise, especially for one-liners. Scoping differences: Arrow functions don’t create their own this value. Use-cases: Traditional functions are great for regular tasks and methods. Function expressions, when you need a function on-the-fly or with conditional declarations. Arrow functions, when working within contexts like event listeners or in functional programming patterns. Advanced Concepts (Briefly) IIFE (Immediately Invoked Function Expression) This fancy term denotes a function that runs as soon as it's defined.

(function() {
    console.log("This function is invoked immediately!");
})();

Callback Functions

In JavaScript, functions can be arguments too. This empowers dynamic and asynchronous operations.

function runFunction(fn) {
    fn();
}
runFunction(() => console.log("Callback function!")); // Outputs: Callback function!

Conclusion

From basic operations to advanced, asynchronous code, functions are pivotal in JavaScript. They lend flexibility, reusability, and modularity to our applications. It's valuable to know when and how to use each type, so go ahead and play around, experiment, and find what suits your needs best!

Challenge/Exercise Section

Write a function declaration that returns the square of a number.
Convert the above into a function expression.
Convert the function expression into an arrow function.

Happy coding!