
A while back I needed to setup a custom WordPress REST API endpoint to provide a headless app with data that required some expensive database queries. The use-case for the application was such that it would likely be used and reused many times by the end user, requiring them to hit the endpoint each time.

So, how can we take a situation like this and make it as efficient and performant as possible?

One thing to consider is a multi-layered caching approach.

The first layer should be some kind of in-memory storage like [Redis](https://redis.io/).

Lots of managed WordPress hosting services will be setup to allow object caching. If your server supports it, a Redis server can be setup quite easily using a [plugin like this](https://wordpress.org/plugins/redis-cache/). Usually these object cache plugins will automatically store expensive database queries and [WordPress Transients](https://developer.wordpress.org/apis/transients/) in memory, but we're going to use the functions [wp_cache_get](https://developer.wordpress.org/reference/functions/wp_cache_get/) and [wp_cache_set](https://developer.wordpress.org/reference/functions/wp_cache_set/) for interacting with [WP_Object_Cache](https://developer.wordpress.org/reference/classes/wp_object_cache/) which gives us more explicit control over our cached data and can be used for persistence if you use [a plugin that supports persistent caching](https://developer.wordpress.org/reference/classes/wp_object_cache/#persistent-cache-plugins).

The second layer is in the user's browser, storing data and determining if it has gone stale and needs to be refreshed from the server.

## The server cache

So first step, we'll need to get our data and put it in the cache in the first place.

Let's say we are getting some data from 3 different post types - `recipes`, `cook_methods`, and `ingredients`.

First we'll need a function to get the modified times of posts from those post types and sort them to get the time of the most recent modification:

```php
/**
 * Returns the latest modified unix timestamp of all posts in the provided post types.
 *
 * @param mixed $post_types array (multiple) or string (singular) of post types to get timestamps from.
 *
 * @return mixed The latest timestamp.
 */
function get_last_modified_time( array|string $post_types ): string|int|false {
    // Query arguments, get all the posts of the relevant post types.
    // https://10up.github.io/Engineering-Best-Practices/php/
    $args = [
        'post_type'              => $post_types,
        'posts_per_page'         => 5000, // phpcs:ignore
        'no_found_rows'          => true,
        'update_post_term_cache' => false,
    ];

    // Array to store all the modified times.
    $modified_times = [];

    // Start query.
    $last_mod_query = new WP_Query( $args );
    if ( $last_mod_query->have_posts() ) {
        while ( $last_mod_query->have_posts() ) {
            $last_mod_query->the_post();

            $modified_times[] = get_post_modified_time();
        }
    }

    // Sort modified times in DESC order.
    rsort( $modified_times );

    // Return the first one (last modified time).
    return $modified_times[0];
}
```

Now we're going to need to create WP REST API responses with the data that our endpoint provides. It's worth abstracting this into it's own function since we're going to be using it to return either cached or uncached data and setting the headers each time gets a bit repetitious.

```php
/**
 * Returns an instance of WP_REST_Response constructed with the provided output and custom ETag and Last Modified headers.
 *
 * @param array $data               Array of data to be output as the REST response data and hashed for use as ETag header.
 * @param mixed $last_modified_time Timestamp to be converted and used for Last Modified header.
 *
 * @return WP_REST_Response Data endpoint response.
 */
function create_REST_response( array $data, string|int $last_modified_time ): WP_REST_Response {
    // Format timestamp for Last-Modified header.
    $last_modified_formatted = gmdate( 'D, d M Y H:i:s', $last_modified_time ) . ' GMT';
    // Format data for ETag header.
    $etag_value = md5( json_encode( $data ) );
    // Wrap in double quotes for ETag header format.
    $etag = '"' . strval( $etag_value ) . '"';

    // Create the response object.
    $response = new WP_REST_Response( $data );
    // Set the Last Modified header.
    $response->header( 'Last-Modified', $last_modified_formatted );
    // Set the ETag header.
    $response->header( 'ETag', $etag );

    return $response;
}

```

We'll also need a main function for the endpoint itself. This function should do the following:

- Get the last modified times for our post types we want to query.
- Check that against the timestamp from our Redis cache.
- If it's the same - return the cached data and don't bother with the expensive query.
- If a post has been modified since the cache was built, run the expensive query again and replace the cached data with the new results.

```php
/**
 * Returns an instance of WP_REST_Response with either fresh or cached content.
 *
 * @return WP_REST_Response Endpoint response.
 */
function custom_endpoint(): WP_REST_Response {
    $cache_last_modified_key = 'my_cache_last_modified_key';
    $cache_key               = 'my_cache_key';

    /**
     * Get the real last modified time of posts in our post types, and compare that with the cached one.
     * If they match (no new uncached data), just send the cached data.
     */

    $last_modified_time = intval( // Ensure Integer.
        $this->get_last_modified_time( [ 'recipes', 'cook_methods', 'ingredients' ] );
    );

    $cached_last_modified_time = intval( wp_cache_get( $cache_last_modified_key ) );

    if ( $cached_last_modified_time === $last_modified_time ) {
        // Get the cached data.
        $data = wp_cache_get( $cache_key );

        // Return the response.
        $response = $this->create_REST_response( $data, $last_modified_time );

		return $response;
    }


    /**
     * Otherwise (there's new changes since the cache was built), do the expensive query, rebuild the cache, send the response.
     */

    // Do your expensive query or operation.
    $expensive_query_result = ...

    // Cache the result.
    wp_cache_set( $cache_key, $expensive_query_result );
    wp_cache_set( $cache_last_modified_key, $last_modified_time );

    // Return the REST response.
    $response = $this->create_REST_response( $data, $last_modified_time );

    return $response;
}
```

Now we have the functionality for:

- Getting our data via our expensive query.
- Storing it in a fast cache and rebuilding that cache only when necessary due to content changes.
- Setting the appropriate headers on the REST API response to allow our client side application to determine whether there's new data.

Let's move onto the frontend.

## The client cache

Remember the idea for this app is that it's something people are likely to reuse. With that in mind, here's the goal for the client side application.

The first time the user uses the app, it will need to hit WP for the data.

The data and last modified time will then be stored in the users browser. Localstorage will suffice here.

The next time the user opens the app, the app will make a special kind of request to the WordPress endpoint called an OPTIONS request. An OPTIONS request is a way of fetching only the headers from the server and not the full response, so it's much faster and only a tiny amount of data is transferred.

Since we have the last modified time returned by our endpoint in the HTTP headers, we can use that to determine whether the content in the browser is stale and therefore needs us to run the full request.


```javascript
// Checks HTTP headers from endpoint to determine if there's content on the server we don't have.
async function isDataStale() {
  const localLastModified = localStorage.getItem("apiDataLastModified")
  const localTimersData = localStorage.getItem("apiData")

  // localStorage items haven't been setup yet, consider stale.
  if (!localLastModified || !localTimersData) {
    return true
  }

  // Check headers for last modified date.
  const responseHead = await fetch("https://example.com/my-endpoint", {
    method: "HEAD",
  })
  const remoteLastModified = new Date(
    responseHead.headers.get("Last-Modified")
  ).getTime()

  // Last modified dates dont match, needs updating.
  if (parseInt(localLastModified) !== parseInt(remoteLastModified)) {
    return true
  }

  // Otherwise, we're ok to use the stored data.
  return false
}
```

This function is all we need to determine if the data we have stored in the browser is out of date.

If the value returned by `isDataStale` is `false`, then there's no point running the full request to the server because we know for a fact that we already have the most recent data in localStorage.

## Summary

So to summarise, the main concepts here are:

- Manually caching expensive query results on the server, using in-memory caching solutions like Redis, Memcached or SQLite.
- Using an inexpensive query to validate whether the cache needs to be refreshed.
- Using HTTP headers to provide the client with the information it needs to implement it's own caching.
- Using an in-browser storage solution like localStorage to store data locally on the user's device.
- Using an OPTIONS request to determine whether the local data is stale and needs refreshing from the server.

With a setup like this we can be sure that most of our users will either be getting the data from our server's in-memory cache (fast), or from their browser's localStorage (faster). Only occasionally will a single user be the unlucky one who triggers the full query and causes the cache to be rebuilt. With some creativity and extra work this could also be avoided by serving the stale content to that user and triggering the cache rebuild in the background if it suits your use case.

There are many other caching strategies that differ from what I've outlined here, for example you could use [stale-while-revalidate](https://www.npmjs.com/package/swr) on the client side, or [Transients](https://developer.wordpress.org/apis/transients/) if you want your cached data to be invalidated at regular intervals. It's definitely worth exploring different caching strategies and knowing how to create your own caching setup when needed. Ultimately the right approach depends on your specific situation.


Caching expensive WP API requests


Something I've done once or twice with [react-hook-form](https://react-hook-form.com/).

Say you had a type that defined some expected form value types.

Now say you wanted another that you're going to use to ensure that your validation functions take the correct value type as a function argument.

You could do the following:

```typescript
type FormValues = {
  name: string,
  email: string,
  age: number
}

type FormValidation = {
  [key in keyof FormValues]: (value: FormValues[key]) => string | null;
}

const validate: FormValidation = {
  name: (value: FormValues['name']) => value !== "" || 'This field is required',
  email: (value: FormValues['email']) => value !== "" || 'This field is required',
  age: (value: FormValues['age']) => value < 21 || 'Age must be above 21',
}
```

Now that we're typing the properties of the `validate` object dynamically, each property must match a property key on `FormValues` and the value passed to the function must match the type of the passed property.




Dynamic TypeScript for Form Validation (and other things)


Well it's been several years since I posted anything here and looking back at my posts from 2022 I definitely can see some evolution in my interests. Which is a good thing I think!

These days I'm doing less ['front of the frontend'](https://css-tricks.com/front-of-the-front-back-of-the-front/) work and more 'back of the frontend' and backend work. And my outside of work interests have definitely turned more towards the backend of the stack. Reckon I might build something in Go soon, as a language the features look really interesting to me.

Anyway, to the topic of today's post. Hyprland and clamshell mode.

## What is Hyprland?

[Hyprland](https://hyprland.org/) is a display server for linux systems which uses the Wayland compositor.

A few months back I picked up a Thinkpad T480 for about £400 and I'm running Arch linux on it with Hyprland as the display manager. It's been fun tinkering with it, but I use laptops at my desk in clamshell mode (with the lid closed) pretty frequently and the laptop would suspend when I closed the lid instead of just displaying on the external monitor and staying awake which was frustrating me.

So how can we use this kind of system and implement a working clamshell mode?

## How to clamshell with Hyprland and Systemd

### Systemd HandleLidSwitch

Since this setup uses [systemd](https://systemd.io/) to handle lots of system and user functions we'll need to consider how to disable the default behaviour for the laptop lid closing.

To see what systemd is currently configured to do when you close the laptop lid, check the `HandleLidSwitch` config in `/etc/systemd/logind.conf`.

We can use `cat` and `grep` for this, or a tool like `fzf` if you prefer.

``` bash
cat /etc/systemd/logind.conf | grep "HandleLidSwitch="
```

The output will be something like: `#HandleLidSwitch=suspend`, meaning that systemd will suspend the system when the lid is closed. Use your editor of choice and edit this file to change `suspend` to `ignore` on that line.

Now systemd will ignore the lid close action.

### Hyprland config and clamshell script

When I was looking around for a way to implement this I came across [this blog post](https://bobbys.zone/guides/hyprland-clamshell). This was the key to getting clamshell mode working on Hyprland.

Basically the idea is have a script run whenever the state of the lid (open vs closed) changes, and have that script check the currently connected monitors to determine what the display settings should be.

First we need to know the names of our displays as Hyprland sees them.

We can use `hyprctl` like so:

```bash
hyprctl monitors
```

There'll be some output here that gives you the names of the connected displays according to Hyprland.

Mine were `eDP-1` and `HDMI-A-2`.

Next I modified the script I found so the regex would match my external display name (HDMI-). Here's my version:

```bash
#!/usr/bin/env zsh

if [[ "$(hyprctl monitors)" =~ "\sHDMI-+" ]]; then
  if [[ $1 == "open" ]]; then
    hyprctl keyword monitor "eDP-1,1920x1080,2560x0,1"
  else
    hyprctl keyword monitor "eDP-1,disable"
  fi
fi
```

I put this in a file in the same directory as my hyprland config file and named it `clamshell_mode.sh`.

Then in the hyprland config itself:

```
######################
### CLAMSHELL MODE ###
######################

## Lid is opened
bindl=,switch:off:Lid Switch,exec,~/.config/hypr/clamshell_mode.sh open

## Lid is closed
bindl=,switch:on:Lid Switch,exec,~/.config/hypr/clamshell_mode.sh close

```

And that was it!

There are still a few minor annoyances, for example my lock screen is activated when the lid closes so I have to type my password when I actually enter clamshell mode, but other than that it works great and wasn't particularly complicated to setup.


Using Hyprland in clamshell mode


Wahey it's the future now and centering stuff with CSS is easy peasy.

Three methods below. Depending on your situation one of these should do the trick.

## Method 1 - Grid

Centering stuff using CSS Grid is super simple. As long as you can set the parent element to be `display: grid` you can add the `place-content` property and set it to `center` and you should be good to go.

```html
<div class="parent">
  <p>sup</p>
</div>
```

```css
.parent {
  display: grid;
  place-content: center;
}
```

## Method 2 - Flex

Centering using flexbox requires an extra parent element, this is obviously not ideal. But if you need to, you can do this:

```html
<div class="boo">
  <div class="parent">
    <p>sup</p>
  </div>
</div>
```

```css
.boo {
  display: flex;
  justify-content: center;
}
.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
```

Basically what we're doing here is creating one flex context (.boo), and that'll have the default flex-direction of row, meaning it's a horizontal flex context, then `justify-content: center` to center the content within. Then inside that we have another flex context (.parent), this time vertical. Again `justify-content: center` to center the content. So we're centering both horizontally and vertically with separate flex contexts, hence the requirement of an extra parent element. (_booooo_).

You might find yourself stuck with this method if the circumstances are right, for example if you're already working with flex containers or if you're writing CSS for a React Native app.

## Method 3 - Transforms

The classic.

```html
<div class="parent">
  <p class="child">sup</p>
</div>
```

```css
.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```

Set the parent element to relative, this will give the child element the correct positioning context for it's absolute position. Then set the child element to be top and left 50%, this will position the element roughly in the center, except it'll be the top left corner of the element which is actually centered, to fix this move the element left and up by 50% of it's own proportions with `transform: translate(-50%, -50%)`.


How to center elements in CSS in 2022


Sometimes you might need to make a react app built in isolation available to a CMS user of a WordPress site. This might seem like a giant faff. WordPress has it's own React dependancy and tooling now right? Well we're going to ignore all of that and go a super simple option. Taking a built and hosted react app, and making it available as a shortcode by rendering the root element the app expects and enqueueing the built JS and CSS files.

`*N.B* These days a shortcode would be an unusual approach for initilisation, and a custom Gutenberg block would be an alternative to consider. However the simplicity of a shortcode does make it useful for demonstrating the approach.`

One thing to keep in mind about this approach is that the app will not be running inside of a node environment, so you will need to find your own way to make environment variables available to the app if needed.

Here's the shortcode bit:

```php
add_shortcode( 'my_shortcode', 'my_shortcode_definition' );

function my_shortcode_definition() {
    return '<div id="my-app-root-id"></div>';
}
```

This will render `<div id="my-app-root-id"></div>` whenever the shortcode is used: `[my_shortcode]`. Swap the id value on the div for the root id of your own app.

OK, now we have that, let's get the actual app JS setup for use in WordPress and ensure it is only enqueued when the shortcode is used.

```php
add_action( 'wp_enqueue_scripts', 'enqueue_my_app' );

function enqueue_my_app() {
    global $post;

    if ( has_shortcode( $post->post_content, 'my_shortcode' ) ) {
        $build_directory     = '/path/to/apps/build';
        $build_directory_uri = 'https://example.com/url/to/apps/build';
        $asset_manifest      = json_decode( file_get_contents( $build_directory . '/asset-manifest.json' ) );

        foreach ( $asset_manifest->entrypoints as $entrypoint ) {
            $resource_uri = $build_directory_uri . '/' . $entrypoint;
            if ( str_ends_with( $entrypoint, '.css' ) ) {
                wp_enqueue_style( 'app_styles', $resource_uri, [], '1.0.0' );
            }
            if ( str_ends_with( $entrypoint, '.js' ) ) {
                wp_enqueue_script( 'app_script', $resource_uri, [], '1.0.0', true );
            }
        }
    }
}
```

This part is a bit more interesting and there are few things happening:

- Checking whether the current post content contains the app shortcode we created earlier.
- Creating some necessary file paths and urls so we can get the resources we need.
- Using the asset-manifest.json file from the react app to get the list of resources we need.
- Looping over those values and enqueueing them as either JS or CSS based on the file extension.

You'll need to change the obvious bits here to be more relevant for your app, but also you'll especially want to change the $build_directory_uri assignment to be more dynamic. The WordPress/PHP functions you'll want to use here will vary depending on where you're creating this functionality. Here are some links that should give you what you need to make those build directory variables dynamic:

- [plugin_dir_url](https://developer.wordpress.org/reference/functions/plugin_dir_url/)
- [plugin_dir_path](https://developer.wordpress.org/reference/functions/plugin_dir_path/)
- [\_\_FILE\_\_](https://www.php.net/manual/en/language.constants.magic.php)
- [get_template_directory_uri](https://developer.wordpress.org/reference/functions/get_template_directory_uri/)
- [get_stylesheet_directory_uri](https://developer.wordpress.org/reference/functions/get_stylesheet_directory_uri/)
- [get_template_directory](https://developer.wordpress.org/reference/functions/get_template_directory/)
- [get_stylesheet_directory](https://developer.wordpress.org/reference/functions/get_stylesheet_directory/)

`Side note: using the asset-manifest.json to get the react JS and other resources is handy because every time you build the app, the string of characters at the end of the resource file path will be different, so we get automatic cache busting whether you update the enqueue version number or not`


How to enqueue react resources in WordPress


This will get a NodeList containing the direct children of the body tag, and convert that NodeList to an array

```javascript
let mySelection = document.querySelectorAll('body > *');
mySelection = [].slice.call(mySelection);
```

Convert NodeList to array


To target an element in JavaScript that has certain inline styles, you can use the following code:

```js
var elem = document.querySelector('h1[style*="color: red;"]');
```

The value of elem will now be the first H1 on the page that has a style attribute with a value that includes color: red;

The use of style*= allows for other inline styles to be present, otherwise the query would have to match the exact value of the style attribute.

Target elements with inline styles


Higher order functions are functions that take other functions as parameters, and can be a highly useful type of abstraction.

Here's a good definition of higher order functions from [Eloquent JavaScript](https://eloquentjavascript.net/05_higher_order.html):
> "Functions that operate on other functions, either by taking them as arguments or by returning them, are called higher-order functions. Since we have already seen that functions are regular values, there is nothing particularly remarkable about the fact that such functions exist. The term comes from mathematics, where the distinction between functions and other values is taken more seriously."

A simple example of a higher order function would be Array.map.

## array.map()

Map takes a function as its argument, which runs on each element in the provided array and creates a new array containing the values returned by the function. Consider the following example:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = numbers.map(num => num * 2);
// numbersDoubled = [20, 40, 60]
```

In the above example we're iterating over the numbers array and creating a new array made up of the results of doubling each element in the first array.

Of course, you can achieve the same result in a less abstracted way with a loop like this:

```js
let numbers = ['10', '20', '30'];
let numbersDoubled = [];
for (let i = 0; i < numbers.length; i++) {
  numbersDoubled.push(numbers[i] * 2);
}
// numbersDoubled = [20, 40, 60]
```

This code is fine, and would work for the situation described. In fact, since it is less of an abstraction than Array.map, it can be more flexible. For example we could use a for loop like this to construct a single, complex object or perform mutations on the original array. One of the benefits of map is that it doesn't let us do this, which makes it useful in a functional programming context, (where we would aim to avoid mutating existing values).

---

So Array.map will only ever return a new array, and in a case where we want to perform operations on every item in an array in order to produce a new array of results, map saves us a lot of the extra work (and a couple of lines of code) by abstracting away some repetitive elements, and makes for a good entry point into the basics of higher order functions.

Map - an introduction to higher order functions in JavaScript


A JavaScript Promise is an object that can be used to handle asynchronous operations, which will either successfully resolve, or be rejected when an error occurs. Examples of this could be waiting on the response from an AJAX request before using that response data for further operations, or making requests to a database.

Instead of relying on traditional callback functions, Promises allow us to chain functionality off the results of these kinds of asynchronous function calls and handle any errors that occur.

**Here's a basic example of a Promise:**
```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
});
// 0ms - 1000ms, myPromise = Promise {<pending>}
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message
```

So, starting off with a pretty unrealistic use case for the sake of explanation, here we can see that myPromise is created as a Promise object, which is pending. But once the setTimeout has triggered the resolve method, myPromise becomes a 'resolved' Promise, (otherwise known as 'fullfilled'). To access the value that the Promise now contains, we'll need to call the .then() method.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
});
```

The call to .then() occurs when the Promise has successfully resolved and the value exists for further operations. If you run the above example in a JS console you will see that a second passes, then the message is logged, since the Promise has now resolved with that value.

## Chaining .then()

One of the benefits of the .then() method is that we can chain them together and pass returned values from one to the next like so:

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
}).then(res => {
  console.log(res);
  return `${res} 1`;
}).then(str => {
  console.log(str);
  return `${str} 2`;
}).then(str => {
  console.log(str);
  return `${str} 3`;
}).then(str => {
  console.log(str);
  return str;
});
// 1000ms +, myPromise = Promise {<resolved>: "Promise resolved message 1 2 3"}
```

Once this Promise resolves, we'll see the following messages logged to the console:

```
Promise resolved message
Promise resolved message 1
Promise resolved message 1 2
Promise resolved message 1 2 3
```

And the resolved value in the Promise will be the final returned value in the chain of .then() functions:

## Error handling

In addition to .then(), Promises also have a .catch() method which we can use for catching errors and any values that the Promise is rejected with.

**For example:**

```js
let myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {resolve('Promise resolved message')}, 1000);
  setTimeout(() => {reject(new Error('Promise rejected'))}, 900);
}).then(res => {
  console.log(res);
  return res;
}).catch(err => {
  console.error(err);
  return err;
});
// 900ms +, myPromise = Promise {<resolved>: Error: Promise rejected at setTimeout (<anonymous>:3:28)}
```

Since the above Promise will be rejected after 900ms have passed, it will not resolve and the .then() method will never be called, instead the Promise rejection will trigger the .catch() method, where we're logging the contents of the Error. In a more real-world scenario this would be where we access the results of errors thrown, perhaps as a result of a malformed API call or database failure.

---

Some further resources:

- [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
- [Google - JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises)


The basics of JavaScript Promises


Now that we know a little about what higher order functions are and we've had a look at the Array.map example, lets take a look at a couple of other frequently used examples of higher order functions in JS.

## Array.filter()

You can pretty much guess what [Array.filter](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) does from the name. It filters an existing array and returns a new array of filtered results. More specifically, it tests each element in the given array against a function that returns a boolean, if the result of the function is true, the element passes the test and is added to the resulting array.

**Here is a basic example:**

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let numbersArray = mixedArray.filter(el => Number.isInteger(el));
// numbersArray = [1, 2, 3, 4, 5]
```

We start with an array of mixed types, integers and strings, and we want to get an array which only contains the integers. Filter loops over the mixedArray and passes each value to Number.isInteger, which returns true when the current element is an integer. All the elements that pass this 'test' are added to the resulting array and we end up with an array containing only the integers.

## Array.reduce()

The basic concept of [Array.reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) in JavaScript is that it iterates over an array and allows us to perform operations on each item, kind of similar to Array.map, but unlike the map function, reduce also passes the result of the previous operation to the function used in the next iteration.

**Here's an example:**

```js
let count = [1, 2, 3, 4, 5].reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);
// count = 15
```

Here we're using reduce to simply count up the total of the numbers in the starting array. Reduce loops through the array, adding the previous number to the 'accumulator', which is the value returned by the previous loop.

Reduce also takes a second argument as it's starting value, which in our case is 0 since that's what where we want to start the count.

Reduce can be quite a bit more flexible than map and filter, which have fairly specific use cases. For example, we could use reduce on our mixedArray from the filter example to count both the sum of the numbers, and the number of words in the array at the same time.

```js
let mixedArray = [1, "one", 2, "two", 3, "three", 4, "four", 5, "five"];
let countObj = mixedArray.reduce((accumulator, currentValue) => {
	if (typeof(currentValue) === 'number') {
		accumulator.total += currentValue;
	} else if (typeof(currentValue) === 'string') {
		accumulator.wordCount++;
	}
	return accumulator;
}, {
	total: 0,
	wordCount: 0,
});
// countObj = { total: 15, wordCount: 5 }
```

We pass an object with a couple of properties as our initial value, and use the function to either add the number to the existing sum, or tally up a word count, based on type.

---

So to summarise, Array.filter can be used to filter out items in an array and return a new array with just the elements that pass a provided 'test'. And reduce can be used in any cases where we want to perform operations on array items where we also need access to the previous result.

More higher order functions - filter and reduce


I recently wrote some code to try and understand JavaScript Object creation and Prototypal Inheritance a bit better, here it is, heavily commented to explain what's going on:

```javascript
// Let's declare a person object using an object literal
const person = {
	init: function(name) {
		this.name = name;
	},
	introduce: function() {
		console.log(`My name is ${this.name}`);
	}
}

// We can create a new object using Object.create and set its prototype to 'person'
const adam = Object.create(person);
adam.init('Adam');
adam.introduce(); // ​​​​​My name is Adam​​​​​

// Let's create another person
const nick = Object.create(person);
nick.init('Nick');
// We can set a property on an object that has the property already set in its prototype
// ... and when called, it will refer to the property highest on the 'prototype chain'.
// If the property doesn't exist on the object we called, it'll look for it in the prototype instead
nick.introduce = function() {
	console.log(`My name is ${this.name}, and I'm totally obsessed with Emacs`);
}
nick.introduce(); // ​​​​​My name is Nick, and I'm totally obsessed with Emacs​​​​​

// How to check the prototypes of an object - use isPrototypeOf
console.log(`person is the prototype of ${adam.name}: ${person.isPrototypeOf(adam)}`); // ​​​​​person is the prototype of Adam: true​​​​​
console.log(`person is the prototype of ${nick.name}: ${person.isPrototypeOf(nick)}`); // ​​​​​person is the prototype of Nick: true​​​​​

// You can also do typechecking using isPrototypeOf
// Is person the prototype of a string?
console.log(`person is the prototype of 'myStr': ${person.isPrototypeOf('myStr')}`); // ​​​​​person is the prototype of 'myStr': false​​​​​
// Is Array.prototype the prototype of a new array?
const myTestArr = [];
console.log(`Array.prototype is the prototype of myTestArr: ${Array.prototype.isPrototypeOf(myTestArr)}`); // ​​​​​Array.prototype is the prototype of myTestArr: true​​​​​


// Here's another way using a constructor
const Person = function(name) {
	this.name = name;
	this.introduce = function() {
		console.log(`My name is ${this.name}`);
	}
}
// Create tommy as a new instance of Person
const tommy = new Person('Tommy');
tommy.introduce(); // ​​​​​My name is Tommy​​​​​

// This time, the prototype of tommy is not Person as you might expect, but Person's prototype
// This is because 'Person' is simply the constructor used to create the object and is of type function
console.log(`Person's prototype is the prototype of ${tommy.name}: ${Person.prototype.isPrototypeOf(tommy)}`); // ​​​​​Person's prototype is the prototype of Tommy: true​​​​​
// And tommy is an instanceof Person
console.log(`${tommy.name} is an instanceof Person: ${tommy instanceof Person}`); // ​​​​​Tommy is an instanceof Person: true​​​​​

// Whereas for our objects created with Object.create, we need to check if they're instances of the prototype's constructor!
console.log(`${nick.name} is an instanceof person.constructor: ${nick instanceof person.constructor}`); // ​​​​​Nick is an instanceof person.constructor: true​​​​​
```
---
Try running the above code in a browser to test the results.

Adam Hollister