Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content.

Inspired by Laravel's tap helper, I recently created a small little library for tapping in JavaScript. It's yet another interesting thing we can do thanks to ES6 proxies.

const numbers = []
numbers.push(1)
numbers.push(2)

const { tap } = require('taptaptap')
const numbers = tap([])
    .push(1)
    .push(2)

class User {
    name = null
    setName(name) {
        this.name = name
    }
    getId() {
        return this.id
    }

    save() {
        // persist data

        this.id = this.createUUID

Take Array.prototype.push for example. It returns the new length of the array, making chaining impossible.

const numbers = []
numbers.push(1)
numbers.push(2)

Wrapping the array inside "tap" allows us to chain everything together nicely.

const { tap } = require('taptaptap')

const numbers = tap([])
    .push(1)
    .push(2)

Each function that gets executed simply returns the originally passed value again.

There is also another use case for tap which allows grouping common logic.

Imagine you have a test like this

const user = await User.query().latest().first()

expect(user.name).toBe('test name')
expect(user.bio).toBe('test bio')

We can group everything together nicely, so it is clear the user variable is only used here.

tap(await User.query().latest().first(), user => {
    expect(user.name).toBe('test name')
    expect(user.bio).toBe('test bio')
})