Thread by @SimonHoiberg

20 of my most popular JavaScript Tips 💡

Thread 🧵👇

Pass arguments as an object.

The meaning becomes much more clear from the names of the properties.
Also, the order doesn’t matter anymore.

Trust me - your teammates will be happy 🙌

Extending the standard built-ins is considered bad practice.

Create your own utility class instead 🙌
(...And share it on NPM, if it's useful to others).

Did you know that you can use the Broadcast Channel API to do basic communication between browser tabs, windows, and iframes?

It's pretty simple 🙌

Here's an example of how you can create a reusable and composable pipe using JavaScript.

Use console.trace instead of console.log.
It will show you the complete call stack when debugging.

Understanding closures.

A closure gives a function access to an outer function's scope, even if the inner function is invoked from a completely different context.

The nullish coalescing operator will return its right-hand operand when the left side is null or undefined. Not just falsy.

When working with numbers, this is typically very useful.

Did you know that you can cancel a fetch request using an AbortController?

A common use-case is React:
If a component unmounts while a fetch call is awaited, it can be useful to abort the call.

Instead of using find(), or manually searching a list for an occurrence, use the array method some() instead.

It’s built for exactly that purpose.

TypeScript comes with a utility type, 'ReadonlyArray<T>'.

It's equivalent to 'Array<T>', but with all mutating methods removed.

In this way, you can make sure you don’t change your arrays after creation.

Did you know that you can use object destructuring on arrays?

This is very convenient when we need a group of values from specific indexes.

Did you know that you can trigger a "scroll into view" on a specific element using a single function call in JavaScript?

You can even add a "smooth" behavior to get a nice smooth scroll animation.

Try it for yourself 😎

By using function composition, you can compose functions for different purposes.

In this case, we're using one function to create different "setter" functions for updating state in React.

Use proper variable names - also in callbacks!

Short, concise code is not necessarily an ideal.
Clarity and readability is.

Paying with an extra line is perfectly ok.

Did you know that you can use curly braces with switch-statements?

Takeaways:
🔸 More readable
🔸 Establishes their own block scope

Did you know that you can create your own custom HTML Elements using JavaScript - and then use them in your HTML file just like any other element? 😎

You can create some pretty powerful experiences using this technique.

Did you know - if you add the option -y to npm init, NPM will create a starter setup for you without having to go through all the questions 🙌

You can set timers using console.time.
This can be useful when debugging slow loops or function calls.

3 options you can pass to addEventListener.

{ once: true } can be a lifesaver on some occasions!

Avoid callback hell while using NodeJS builtins.

You don't need promisify either - from NodeJS 10 and up, you can import the promisified versions directly from '[module]/promises' 💪

Did you like these tips? 🤩

Don't forget to like/retweet this thread. Thank you!

Also, you can find all 65+ of these in my FREE e-book 👇
simonhoiberg.com/ebooks/65-code…