Intermediate JavaScript

Working with Functions

JavaScript and NodeJS Fundamentals

Working with Functions

Arrow functions
Default parameters
Spread parameters (...)
Higher-order functions
Map(), filter(), reduce()

You’ve already learned how to declare and use functions in JavaScript. But JavaScript gives you more tools to work with functions in powerful ways.

Arrow functions

Arrow functions are a shorter way to write functions. Instead of using the function keyword, we use an arrow (=>).

Here’s a normal function:

function greet(name) {
  return `Hello, ${name}!`
}

The arrow version looks like this:

const greet = (name) => {
  return `Hello, ${name}!`
}

If the function has only one line, you can skip the braces and return:

const greet = (name) => `Hello, ${name}!`

If the function has only one parameter, you can even skip the parentheses around the parameters:

const greet = name => `Hello, ${name}!`

Arrow functions are very common in modern JavaScript, as they allow to express simple functions with significantly less boilerplate.

Default parameters

Sometimes you want a function to have a default value if no argument is passed.

You can do that like this:

function sayHello(name = "friend") {
  console.log(`Hello, ${name}!`)
}

sayHello("Alice") // Hello, Alice!
sayHello()        // Hello, friend!

The default value "friend" is used when nothing is passed in.

Spread parameters (...)

What if your function takes a flexible number of arguments?

You can use the spread operator (...) to gather them into an array:

function logAll(...items) {
  console.log(items)
}

logAll(1, 2, 3) // [1, 2, 3]
logAll("a", "b") // ["a", "b"]

You can then use a loop to process each item:

function logEach(...items) {
  for (const item of items) {
    console.log(item)
  }
}

The spread operator is useful when you don’t know how many arguments will be passed.

Higher-order functions

A higher-order function is a function that:

takes another function as input
and/or returns a function as output

Here’s a simple example:

function runTwice(action) {
  action()
  action()
}

function sayHello(name = "friend") {
  console.log(`Hello, ${name}!`)
}

runTwice(sayHello)

This prints:

Hello, friend!
Hello, friend!

We can pass an arrow function to it:

runTwice(
  () => console.log("Hello!") 
)

This prints:

Hello!
Hello!

You can also write functions that return other functions:

function makeGreeter(name) {
  return () => console.log(`Hi, ${name}`)
}

const greetAlice = makeGreeter("Alice")
const greetBob = makeGreeter("Bob")

greetAlice() // Hi, Alice
greetBob() // Hi, Bob

The makeGreeter function is a function that builds other functions. It receives a string and returns a new function that uses that string in its console.log call.

This kind of pattern is very powerful, as it allows you to leave "holes" in your functions that you can fill later with the behavior you need.

map(), filter(), reduce()

JavaScript gives you some useful built-in methods to use with arrays.

These methods take functions as arguments, so they are also higher-order functions.

map() transforms each item in an array into something else.

Example:

const numbers = [1, 2, 3]
const doubled = numbers.map(x => x * 2)

console.log(doubled) // [2, 4, 6]

Each number is doubled, and the result is a new array.

filter() removes items from the array if they don’t pass a test.

Example:

const numbers = [1, 2, 3, 4, 5]
const numbersGreaterThanTwo = numbers.filter(x => x > 2)

console.log(numbersGreaterThanTwo) // [3, 4, 5]

Only the array entries for which the x > 2 condition returns true are kept.

reduce() is used to combine all the items in an array into a single value.

Example:

const numbers = [1, 2, 3, 4]
const total = numbers.reduce((current, next) => current + next)

console.log(total) // 10

reduce goes through the array and, in this example, applies the + operator between 1 and 2, then between the resulting 3 and 3, then between the resulting 6 and 4, until it has the sum of all the array entries (which is 10).

You can use reduce() for many things like totals, averages, or building new values step by step.

These methods (map, filter, reduce) are powerful tools to process data without writing manual loops.

You can even combine them in a chain of operations, like this:

const numbers = [1, 2, 3, 4, 5]

const result = numbers
  .map(n => n * 2)        // Double each entry, obtain [2, 4, 6, 8, 10]
  .filter(n => n > 3) // Keep only the entries bigger than 3, so you get [4, 6, 8, 10]
  .reduce((n1, n2) => n1 + n2) // Adds them: 4 + 6 + 8 + 10 = 28

console.log(result) // 28