JS Functions: Declaration, Anonymous, and Arrow

Master the fundamental building blocks of JavaScript code: functions. Learn the syntax and use cases for each type.

🏭

Welcome! Let's explore the three core ways to build reusable blocks of code, or functions, in JavaScript.

/* Starting our function factory... */

The Classic: Function Declaration

This is the traditional way to define a function, using the function keyword followed by a name. A key feature is hoisting, which means the browser knows about the function before it's even read in the code, so you can call it before you declare it.

The Flexible: Function Expression

Here, a function—often without a name (anonymous)—is assigned to a variable. These are not hoisted, meaning you can only call them after they have been defined in the code. This is great for conditional logic or passing functions as arguments.

The Modern: Arrow Function

Introduced in ES6, arrow functions provide a shorter, more concise syntax. They are always anonymous and are particularly useful for simple, one-line functions and for how they handle the this keyword, which we'll explore in later lessons.

A Quick Look at Hoisting

Think of hoisting as JavaScript moving all function declarations to the top of their scope at compile time. This is why you can call a declared function before it appears. Function expressions and arrow functions, being assigned to variables, are not hoisted and must be defined before use.

Practice Zone

Interactive Test 1: Match the Syntax

Drag the syntax to its corresponding function type.

Arrastra en el orden correspondiente.

Arrastra las opciones:

() => {}

function name() {}

function() {}

Completa el código:

Declaration______

Anonymous Function______

Arrow Function______

Unlock with Premium

Interactive Test 2: Build an Arrow Function

Complete the arrow function to log "Hello World!".

Rellena los huecos en cada casilla.

const  = () => {
  console.log();
};
();

Unlock with Premium

Practice Example: Code Editor

Create a complete arrow function named `saludar` that logs "¡Hello World!" to the console and then call it.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

const saludar = () => {
  console.log("¡Hello World!");
};
saludar();

Unlock with Premium

Knowledge Check

What type of function is used when a function name is not needed and it's assigned to a variable?

Unlock with Premium

Functions in Action

In JavaScript, functions are "first-class citizens." This means they can be treated like any other variable: stored, passed as arguments to other functions, and returned by functions.

1. Callback Functions

A "callback" is a function passed into another function as an argument, which is then invoked inside the outer function to complete some kind of routine or action. It's a cornerstone of asynchronous programming.

// The arrow function is the 'callback'
setTimeout(() => {
  alert("Time's up!");
}, 2000);

⏰

Waits 2 seconds, then runs the function.

2. Higher-Order Functions

A Higher-Order Function (HOF) is any function that either takes one or more functions as arguments, or returns a function as its result. Array methods like .map(), .filter(), and .reduce() are common HOFs.

const numbers = [1, 2, 3];
// .map() is a HOF
// (n) => n * 2 is the callback
const doubled = numbers.map((n) => n * 2); 

// doubled is now [2, 4, 6]

[1, 2, 3]→[2, 4, 6]

Practical Takeaway: Mastering callbacks and higher-order functions unlocks powerful patterns for writing clean, efficient, and scalable JavaScript code.

JavaScript Functions Glossary

Function Declaration: The standard way to create a named function using the function keyword. They are hoisted.
Function Expression: A function created and assigned to a variable. The function itself is often anonymous. They are not hoisted.
Arrow Function: A modern, compact syntax for writing function expressions using =>. They do not have their own this context.
Hoisting: JavaScript's default behavior of moving function declarations (but not expressions) to the top of the current scope before code execution.
Parameter vs. Argument: Parameters are the named variables in a function's definition. Arguments are the real values passed to the function when it is invoked.
Callback: A function that is passed as an argument to another function, to be "called back" at a later time.
Return: The keyword that specifies the value to be outputted by a function. If omitted, the function returns undefined.