Contemplate with me : mitt.js
Tags: javascript, typescript, tutorial, opensource
Published: 2022-06-12 17:11:03

In this article, I'm going to explain some shine lines that I have found in this tiny library, and what we can learn from them.
Before diving into these lines you should have the basics of typescript and javascript.

## What is mitt.js
mitt describes itself as a tiny 200-byte functional event emitter / pubsub.
And this is what makes the mitt awesome because the priority of the mitt's size, makes its creator look for solutions that keep their library tiny and awesome at the same time.

## Our material
This is the code that we will explain. Check it well to understand what is doing, before continuing reading.

```typescript
/**
 * Remove an event handler for the given type.
 * If `handler` is omitted, all handlers of the given type are removed.
 * @param {string|symbol} type Type of event to unregister `handler` from (`'*'` to remove a wildcard handler)
 * @param {Function} [handler] Handler function to remove
 * @memberOf mitt
 */
off<Key extends keyof Events>(type: Key, handler?: GenericEventHandler) {
    const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
    if (handlers) {
        if (handler) {
            handlers.splice(handlers.indexOf(handler) >>> 0, 1);
        }
        else {
            all!.set(type, []);
        }
    }
},
```

---

## Non-null assertion operator `!.`
```typescript
const handlers: Array<GenericEventHandler> | undefined = all!.get(type);
```
look at this operator `!.` did you see it, if you like me I think this is the first time you have seen this operator before in typescript.
This operator is a way to tell the compiler "this expression cannot be `null` or `undefined` here, so don't complain about the possibility of it being `null` or `undefined`." Sometimes the type checker is unable to make that determination itself.

## Bitwise operators with `.splice` method
```typescript
handlers.splice(handlers.indexOf(handler) >>> 0, 1);
```

before we know why they used the bitwise operator with `.splice` method, we should know how `.splice` method work.

> The splice() method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place. To access part of an array without modifying it, see slice().

```typescript
let list1 = [1, 2, 3, 4, 5];

list.splice(list1.indexOf(2), 1) // [2]

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

let list2 = [1, 2, 3, 4, 5]

list.splice(list.indexOf(6), 1) // []

console.log(list) // [1, 2, 3, 4] Why ?
```

but why, because the "indexOf" function returned here `-1` so the `.splice` remove the last one, so simple but the issue is we need to prevent that from happening, but how?
here the ">>>" operator comes, this operator is called `Unsigned Right Shift Operator` ( we will not talk about it here ), what you should know about this operator, it can convert `-1` to `4294967295`, and keep all the rest of the numbers as it is.
```javascript
console.log(-1 >>> 0) // 4294967295
console.log(1 >>> 0) // 1
console.log(4 >>> 0) // 4
```
and this is the trick, it acts as an implicit `if` condition, if the item is `undefined` ( here `.splice` will return `-1` ) the operator will convert it to this huge number `4294967295` if not it keep it the same, and this reduces the possibility of accidentally deleting or sometimes makes it impossible

### Finally

I know it ended quickly but these are the things that caught my eye, and it was very interesting to explain them to you.
if you enjoyed like me by learning from these shine lines, remember that the beauty always is in the details.

#### Resources

[In Typescript, what is the ! (exclamation mark / bang) operator when dereferencing a member? - stackoverflow.com](https://stackoverflow.com/questions/42273853/in-typescript-what-is-the-exclamation-mark-bang-operator-when-dereferenci)

[Unsigned right shift (>>>) - developer.mozilla.org](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Unsigned_right_shift)

if you want more like this article, tell me in the comments below. bye 👋