JavaScript Fundamentals: Functions Are Values

Functions are weird. Consider the following code:

function sayHello() {  console.log("Hello");}sayHello();

Seems straightforward enough, right? We're creating a function sayHello, then immediately calling it.

Now, what about the following code:

function sayHello() {  console.log("Hello");}const greeting = sayHello;greeting();

This “intuitive” code comes loaded with assumptions and processes that we regularly take for granted:

• Why are we able to assign a function to a variable?
• What is this doing under the hood?
• Are we able to utilize functions in potentially unexpected ways?

While you could get away with never knowing the answers to these questions, being a great developer often involves understanding how the tools we use actually work – and JavaScript functions are no exception.

For example, do you know what “function currying” is and why it’s useful? Or do you know how [].map() and [].filter are implemented?

Fret not, dear reader, as we will now take a look at all these questions.

Why are we able to assign a function to a variable?

To understand why we're able to assign a function to a variable, let's analyze what happens when anything is assigned to a variable.

How memory works

Inside of your computer, there's something called "memory," AKA RAM,which allows your computer to store short-term memory that it can quickly reference later.

When we create a variable, what we're doing is storing values inside of this memory.

For example, take the following code:

const helloMessage = "HELLO";const byeMessage = "SEEYA";

This will create two sections of memory that your compiler will keep around for reference when you use those variables. Each of these sections of memory will be just big enough to store 5 characters of the string.

This might be visually represented like so:

It's important to remember that the memory address itself doesn't store the name, your compiler does. When you create blocks of memory via variables, the compiler gets back a number that it can use to look up the variable's value inside of a "stack" of memory.

You can loosely think of this memory stack as an array that the compiler looks through in order to get the data based on an index. This number can be huge because your computer likely has multiple gigabytes of RAM. Even 16GB is equivalent to 1.28e+11 bytes. Because of this, memory addresses are often colloquially shortened to hexadecimal representations.

This means that our 0x7de35306 memory address is associated with bit number 2112049926, or just over the 0.2GB mark.

This explanation of memory is a very generalized explanation of how memory allocation works. You can read more about memory stacks here.

When your browser compiles the following code:

const helloMessage = "HELLO";const byeMessage = "SEEYA";console.log(helloMessage);console.log(byeMessage);

The browser's compiler will replace the variable names with memory addresses:

memoryBlocks[0x7de35306] = "HELLO";memoryBlocks[0x7de35307] = "SEEYA";console.log(memoryBlocks[0x7de35306]);console.log(memoryBlocks[0x7de35307]);

This code is simply pseudocode and will not actually run. Instead, your computer will compile down to "machine code" or "assembly code", which will in turn run on "bare metal". What's more, this is a drastic oversimplification of how your browser's JIT compiler and your system's memory managementactually works under-the-hood.

How does this relate to function storage?

Remember that functions in JavaScript have two different syntaxes:

function sayHello() {  console.log("Hello");}sayHello();

Is roughly equivalent to:

const sayHello = () => {  console.log("Hello");}sayHello();

As you might correctly assume, this means that both of these syntaxes allow a function to be stored in memory.

Using our pseudocode again, this might look like:

memoryBlocks[0x9de12807] = () => {    console.log("Hello");}memoryBlocks[0x9de12807]();

Why does it matter that functions are stored as memory addresses?

The reason I've gone on to show you that functions are stored as memory addresses is to help reinforce the idea that functions are values and can be treated like such. For example, you can do the following with numbers in JavaScript:

console.log(1 + 2);

Without having to assign each number to a variable:

const one = 1;const two = 2;console.log(one + two);

Likewise, you can use functions without assigning them to a variable.

This means the the following sayHello function:

const sayHello = () => {    console.log("Hello");}sayHello();

Can be used without a variable to assign the function:

(() => console.log("Hello"))();

This is just the start of what's possible with functions. Think of all the interactions you can have with a non-function variable like integers and strings. You can have those same interactions with functions as well.

Can you pass a function to another function?

One very popular use of functions is passing in values as properties. For example:

function sayThis(message) {    console.log(message);}sayThis("Hello");

Here, we're passing a string as a property to the sayThis function.

Just like you can pass in integers, strings, or arrays to a function, you might be surprised to know you can also pass in functions into a function:

function doThis(callback) {    callback();}function sayHello() {    console.log("Hello");}doThis(sayHello);

This will output the same "Hello" as our previoussayThis usage.

Not only can you call these functions that are passed as parameters, but you can pass parameters to those functions as well.

function callThisFn(callback) {    // Remember, `callback` is a function we're padding    // `console.log` specifically    return callback('Hello, world');}callThisFn(console.log);

To walk through this step-by-step, we:

• Pass console.log to callThisFn through an argument
• callThisFn assigns that property as callback, which remains a function
• We then call callback with a parameter of it's own: 'Hello, world'

In case this isn't clear, let's do our previous trick of calling a function without assigning it to a variable.

(callback => callback('Hello, world!'))(console.log);

What about returning a function from another function?

As a function’s input, parameters are only half of the story of any function's capabilities – just as any function can output a regular variable, they can also output another function:

function getMessage() {  return "Hello";}const message = getMessage();console.log(message);// Equivalent toconsole.log(getMessage());

If you've done much coding in JavaScript, this will look familiar. We're "calling"getMessage and storing the return value to message variable. We can then do anything else we might expect with this message variable - including passing it to other functions as a parameter.

This too, is possible with a function as a return value:

function getMessageFn() {    return () => {        console.log("Hello");    }}const messageFn = getMessageFn();messageFn();// This can be simplified togetMessageFn()();

This code block is an extension on the "returned value" idea. Here, we're returninganother function from getMessageFn. This function is then assigned to messageFn which we can then in turn call itself.

Meta, right?

Funnily enough, you can even combine this with the ability to return within the inner function.

function getMessageFn() {    return () => {        return "Hello";    }}const messageFn = getMessageFn();const message = messageFn();console.log(message);// This can be simplified toconsole.log(getMessageFn()());

Let's combine concepts by accepting and returning a function from another function

Knowing that we can both accept a function as a property and return a different function as a value, we can combine these both to create the following logic:

function passFunctionAndReturnFunction(callback) {    return () => {        callback("Hello, world");    }}const sayHello = passFunctionAndReturnFunction(console.log);sayHello(); // Will log "Hello, world"

How do you pass data from one function to another? A pipe function!

The concepts we've spoken about today are commonly utilized when programming in a style called "functional programming." Functional programming is a style of programming - similar to"Object Oriented Programming" (OOP) - that utilizes functions as a method to pass, change, and structure data.

Functional programming relies heavily on the properties of functions that we've looked at today: passing functions to other functions, returning functions from functions, and more.

If you spend much time looking at functional programming libraries, such as Ramda, you might run into a function called a "Pipe".

Traditionally, a pipe function takes a list of other functions to call them and return a final value.

For example, you might run:

const finalVal = pipe([  () => 1,  // Pass `1` to `v`  v => v + 1]);console.log(finalVal); // 2

This is useful when you need to chain a list of actions together and get the final output.

Luckily, pipe is an easy function to implement:

function pipe(fns) {    let val = undefined;    for (let fn of fns) {        val = fn(val)    }    return val;}

So when is this useful? Let's assume that we want to clamp the values between two numbers.

clamp({min: 0, max: 10, val: 5}); // 5clamp({min: 0, max: 10, val: 15}); // 10clamp({min: 0, max: 10, val: -10}); // 0

Thinking about this problem, we can break up our logic into three different parts:

1. Check if smaller than minimum
2. Check if larger than maximum
3. Return final value

We can implement this using distinct functions and our new pipe method:

function pipe(fns) {    let val = undefined;    for (let fn of fns) {        val = fn(val)    }    return val;}const min = (val, min) => val < min ? min : val;const max = (val, max) => val > max ? max : val;function clamp(props) {    return pipe([        // Step 1: Check if smaller than minimum        () => min(props.val, props.min),        // Step 2: Check if larger than maximum        val => max(val, props.max)    ])}clamp({min: 0, max: 10, val: 5}); // 5clamp({min: 0, max: 10, val: 15}); // 10clamp({min: 0, max: 10, val: -10}); // 0

While this might seem a bit confusing at first, the benefits are that we now are able to use the min and max method independently of clamp.

min(10, 0); // 10min(0, 10); // 10max(10, 0); // 0max(0, 10); // 0

What are built-in functional paradigms in JavaScript?

While we've touched on how to build many of our own functional ideals using JavaScript, many of the core concepts are built into JavaScript itself through usage of Array methods.

For example, want to run a function over each item of an array? Array.forEach to the rescue!

[1, 2, 3].forEach(val => console.log(val));// Will output123

Array.forEach doesn't just pass a single value to the inner mapping function, it also passes the index of the item and the original array:

[1,2,3].forEach((val, i, arr) => console.log({val, i, length: arr.length}));// Will output{val: 1, i: 0, length: 3}{val: 2, i: 1, length: 3}{val: 3, i: 2, length: 3}

Mapping items in an array to a new value

Don't have a use for "forEach"? No matter! There's also Array.map that enables you to have a list and want to change each item in the list in some way.

const listAddedByOne = [1, 2, 3].map(val => val + 1);

Array.map accepts a function that, when you return a new value, will update that item of the list.

Just like Array.forEach, Array.map passes the index of the item and the original array to the inner function as well:

const newList = ["Eat", "Sleep", "Play Elden Ring"].map((val, i, arr) => {    return `${i + 1} / ${arr.length} - ${val}`;});// This will return:"1 / 3 - Eat""2 / 3 - Sleep""3 / 3 - Play Elden Ring"

Filter a list down based on a function's return value

Say that you have a list of numbers:

const numbers = [10, 20, 30, 40, 50, 60, 70, 80, 90];

And want to filter down this list to only include "small" numbers - aka when a number is smaller than 50. This is where we can useArray.fiter:

const smallNumbers = numbers.filter(val => val < 50);

Once again, you're also given the option to get the index and original array in the filter method.

Reduce an array down to a single value

While there are other array methods, the last one we'll be taking a look at today enables you to reduce a list down to a single value. Let's take a list of numbers and sum them together to a final output.

const numbers = [1, 2, 3];// This will return "6"const sum = numbers.reduce((acc, curr) => acc + prev, 0);

Reduce is passed two items:

1. The function that provides a reduced value when returned
2. The initial value to set to acc

How can we re-write built-in JavaScript functional programming methods?

While forEach, map, filter, and reduce are all built into JavaScript, the foundations of functional programming means that we can implement them ourselves. This doesn't have any practical usecases, but allows us to understand how JavaScript works under the hood a bit better.

For example, a forEach can be implemented using a basic for loop:

const forEach = (arr, callback) => {    for (let i = 0; i < arr.length; i++) {        callback(arr[i], i, arr);    }};const cars = ["Ford", "Volvo", "BMW"];forEach(cars, car => console.log(car));

Similarly, you can write your own implementation of map with an intermediary array alongside a for loop.

const map = (arr, callback) => {    const returnedVal = [];    for (let i = 0; i < arr.length; i++) {        const newVal = callback(arr[i], i, arr);        returnedVal.push(newVal);    }    return returnedVal;};const cars = ["Ford", "Volvo", "BMW"];const carNameLengths = map(cars, car => car.length);console.log(carNameLengths); // [4, 5, 3]

To implement filter is as easy as adding a single if statement to our map implementation.

const filter = (arr, callback) => {    const returnedVal = [];    for (let i = 0; i < arr.length; i++) {        const exist = callback(arr[i], i, arr);        if (exist) {            returnedVal.push(arr[i]);        }    }    return returnedVal;};const cars = ["Ford", "Volvo", "BMW"];const onlyBMW = filter(cars, car => car === "BMW");console.log(onlyBMW); // ["BMW"]

Finally, implementing reduce is similar to our map implementation, but instead of pushing new values to an array, we simply replace the old value between loop iterations.

const reduce = (arr, callback, init) => {    let returnedVal = init;    for (let i = 0; i < arr.length; i++) {            returnedVal = callback(returnedVal, arr[i], i, arr);    }    return returnedVal;};const numbers = [1,2,3];const sum = reduce(numbers, (acc, curr) => acc + curr, 0);console.log(sum); // 6

Functional programming methods can be applied everywhere

Now that you've mastered the fundamentals of JavaScript functions, you can build more kinds of APIs for your applications. These APIs can help you make debugging easier, consolidate your application logic, and more.

The functional programming paradigms we've touched on today are immensely popular in ecosystems like React applications and library development. In particular, React uses these concepts alongside its useEffect API.

These concepts aren't unique to JavaScript, either! Python utilizes similar ideas in its "list comprehension" functionality.

If you find any of these techniques useful (or even confusing, we know that functional programming can be a world of its own) let us know on Twitter!