Rethinking JavaScript: The complete elimination and eradication of JavaScript's this.
Tags: javascript, this
Published: 2018-08-08 17:26:36

---
title: Rethinking JavaScript: The complete elimination and eradication of JavaScript's this.
published: true
description: 
tags: javascript, this
---

![R.I.P. this 1995-2018](https://raw.githubusercontent.com/joelnet/nothis/master/assets/headstone-509x600.png)

![nothis demo](https://github.com/joelnet/nothis/raw/master/assets/nothis.gif)

If `this` is so difficult to reason about, why don't we just stop using it? Seriously. **Why. don't. we. just. stop. using. it.**?

If you have read [How I rediscovered my love for JavaScript after throwing 90% of it in the trash](https://hackernoon.com/how-i-rediscovered-my-love-for-javascript-after-throwing-90-of-it-in-the-trash-f1baed075d1b), then you won't be surprised when I say I am throwing `this` away. `this` is gone. goodbye. `this` won't be missed.

With functional JavaScript, you will almost never see `this`. I say almost never because even though _your code_ doesn't contain `this`, you have little control over 3rd party libraries. Popular libraries like [React](https://reactjs.org/), [jQuery](https://jquery.com/), [eventemitter2](https://www.npmjs.com/package/eventemitter2) and many others will force `this` down your throat.

Here are some examples of how libraries force us to use `this`.

## Forced this in React

```javascript
// 😞 GROSS: this
class Counter extends React.Component {
  constructor() {
    super()
    this.increment = this.increment.bind(this)
  }

  increment() {
    this.setState(s => ({ count: s.count + 1 }))
  }

  render() {
    return (
      <div>
        <button onClick={() => this.increment}>{this.state.count}</button>
        <button onClick={this.increment.bind(this)}>{this.state.count}</button>
      </div>
    )
  })
}
```

## Forced this in jQuery

```javascript
// 😞 GROSS: this
$('p').on('click', function() {
  console.log($(this).text())
})
```

## Forced this in eventemitter2

```javascript
const events = new EventEmitter2({ wildcard: true })

// 😞 GROSS: this
events.on('button.*', function() {
  console.log('event:', this.event)
})

events.emit('button.click')
```

`this` is everywhere!

# So what's the problem?

One problem is `this` is not accessible if you use an arrow function. Sometimes I prefer to write an arrow function instead of a classic `function`. Okay, I _always_ prefer to write arrow functions.

Another problem is `this` can be unintentionally reassigned. So your function might fail based on how others use it.

```javascript
// WTF? these will produce different outputs
const say = cat => cat.speak() //=> "meow"
const say = ({ speak }) => speak() //=> Error: Cannot read property 'sound' of undefined

// WTF? these will produce different outputs
cat.speak() //=> "meow"

const speak = cat.speak
speak() //=> undefined
```

So let's just get rid of `this` completely.

# NO. THIS.

I created a simple function decorator that to get rid of `this`. [More on function decorators here](https://dev.to/joelnet/function-decorators-part-2-javascript-4km9).

After creating `nothis`, I created a package so I can use it in all my projects.

So what would this look like you ask?

## nothis this in React

```javascript
import React from 'react'
import nothisAll from 'nothis/nothisAll'

// 🔥 LIT: no this in sight!
class Counter extends React.Component {
  state = { count: 0 }

  constructor() {
    super()
    nothisAll(this)
  }

  increment({ setState }) {
    setState(({ count }) => ({ count: count + 1 }))
  }

  render({ increment, state }) {
    return (
      <div>
        <button onClick={increment}>{state.count}</button>
      </div>
    )
  }
}
```

## nothis in jQuery

```javascript
$('p').on('click', nothis(ctx => console.log($(ctx).text())))
```

## nothis in eventemitter2

```javascript
const events = new EventEmitter2({ wildcard: true })

// 🔥 LIT: nothis + destructuring!
events.on('button.*', nothis(({ event }) => console.log('event', event)))

events.emit('button.click')
```

# But wait! There's more!

`fixthis` can fix some of your existing `this` rebinding problems!

```javascript
import fixthis from 'nothis/fixthis'

const cat = {
  sound: 'meow',
  speak: function() {
    return this.sound
  }
}

// 😞 GROSS: this is unintentionally rebound
const speak = cat.speak;
speak() //=> Error: Cannot read property 'sound' of undefined

// 🔥 LIT: this stays this
const fixedCat = fixthis(cat)
const speak = fixedCat.speak;
speak() //=> "meow"
```

# But I need help...

Install it...

```bash
npm install -P nothis
```

Add it to your libraries...

```javascript
import nothis from 'nothis'
```

Play with it...

... and report bugs, request features or contribute to the project here https://github.com/joelnet/nothis.

This is the latest addition to my **Rethinking JavaScript series**. If this made you curious, check out a few of my other articles in this series:
* [The if statement](https://hackernoon.com/rethinking-javascript-the-if-statement-b158a61cd6cb)
* [Death of the For Loop](https://hackernoon.com/rethinking-javascript-death-of-the-for-loop-c431564c84a8)
* [Replace break by going functional](https://hackernoon.com/rethinking-javascript-break-is-the-goto-of-loops-51b27b1c85f8)
* [Eliminate the switch statement for better code](https://hackernoon.com/rethinking-javascript-eliminate-the-switch-statement-for-better-code-5c81c044716d)

Hit me up on twitter with any questions [@joelnet](https://twitter.com/joelnet)