Photo by Esteban Lopez on Unsplash

#9 Big O with JS examples: The basic that you need to know

Ricardo Luz
Frontend Weekly
Published in
4 min readAug 7, 2018

--

There are many ways to analyse how good is a code that you have written, some people believe that beautiful code is better and others prefer a code with fewer lines, but there a universal way to analyse that help you to understand how fast your approach is and how sustainable your system is when running millions of operations.

Its a common mistake to think that performance doesn’t matter anymore once the servers and devices processing capacity are increasing every year, we always should to remember that there are a considerable number of users using old devices or low power devices like smartphones, even updated smartphones reduce its processing capacity when the battery is running low, and powerful devices running low when dozen of tabs is running at the same time or several apps running together.

So, remember, performance matters, always matters.

Big O Notation is a way to measure how well a computer algorithm scales as the number of data increases, so when you have to choose an approach to create your system Big O Notation will help you to select the most efficient solution, let’s take some examples:

In the example above is possible execute this operation using precisely the same time regardless the number of items inside People object, it always takes the same time, in Big O Notation its called O(1) or constant.

Usually, O(1) is the best scenario, always when is possible you should try to look for a way to use functions that have O(1) Notation.

But in the example below the situation changes, take a look:

If you don’t know how destructuring works, take a look in this article:

Now the number of operations will increase according to the items inside the array, it is called O(n) or Linear, this approach is one of the best that you could take when you’re coding something new, however, there a lot of situations that aren’t possible use functions with O(n), but sometimes we merely decide to use an approach that will spend more processing.

When you create a loop inside another loop you have worst performance than O(1) and O(n), like below:

This case is called O(n²) or quadratic, depending on the number of items inside your array this operation will take a very long time, and sometimes is possible to do the same using O(n), you could convert this example to this:

When you have inside an algorithm more than one O(x) you will always consider that have the worst O(x):

In this case, your algorithm has:

  1. A constant operation O(1):
const total = people.length;

2. A Linear operation O(n)

const names = people.map(({ name }) => name);

3. A Quadratic operation O(n²)

const peopleWithSameAge = people.filter
(
({ age }) =>
people.filter(person => person.age == age)
.length > 1
);

In this case, we could think in this way O(1) + O(n) + O(n²), right? Nope, is more simple than that, you ignore the faster operations and consider only the slower operation, in this case, O(n²), so this is an algorithm with O(n²) notation.

You’ll use this same approach when you have more than one operation with the same type:

No, this isn’t O(2n²), it’s merely O(n²), when you have constants like this you ignore the constant and use only the original notation.

Source: http://bigocheatsheet.com/

There are a lot of other examples of Big O Notation that you could discover, beyond that I showed here one that I really like called logarithmic notation or O(log(n)), this is very common in divide and conquer algorithms type, take a look in this famous example called binary search:

In this case the operations that you need to get the number that you’re searched increase less than in a quadratic or linear way, for example, to search for 4096 items you need only 12 operations! Cool right?

This article was an initial approach about Big O Notation. I recommend you study more about this because this will help you to code better and make the best decisions about how you write your code! I read a book called Data Structures and Algorithms in Javascript written by Loiane Groiner that helps me a lot to understand better how Big O Notation works.

Thanks for reading! Feel free to hit the recommend button below if you found this helpful.

If this post was helpful, please click the clap 👏 button below to show your support! ⬇⬇

--

--

Frontend Weekly
Frontend Weekly

Published in Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co