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.
/**
* 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 !.
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
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().
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.
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
Unsigned right shift (>>>) - developer.mozilla.org
if you want more like this article, tell me in the comments below. bye 👋
Top comments (1)
I find libraries like that interesting, because there's a native EventTarget class that you can use:
But I have to concede the API is a bit nicer.