JS - Select performance handling performance or readability? - boreddev

JS is increasingly developing in the direction of a more readable programming language. Of course, developing in this direction is a good thing.

Software development is a dynamic market, where development teams are constantly changing in terms of personnel, which means that code needs to become readable for newbies. But what about the cost of processing performance?

When do we need to make a choice between performance processing performance and readability? When do we need to choose one and sacrifice the other? At what time do we need to remove one of them to make a decisive solution?

Here are some questions that I will answer for you, or at least let's try to find the answers together.

The reason we try to make the code to have optimal processing performance is one obvious reason, but why are we so obsessed with readability?

The same problem, but the solution is different

Ok, looking back a bit, we must have come across very familiar with the code used to solve the problem as follows:

Given an array array with numbers whose elements are not in sorted order, it is necessary to create a new array array that satisfies: adding 1 to each element value and performing the arrangement from small to large. Alter the original array array.

var numbers = (2, 4, 12, 6, 8, 29, 5, 10, 87, 11, 7);

function process(arr) {
    let newArr = arr.slice(); // tạo ra 1 mảng array mới từ mảng array gốc
    newArr(0)++;
    for (let i = 1; i < newArr.length; i++) {
        const current = newArr(i) + 1;
        let leftIndex = i - 1;

        while (leftIndex >= 0 && newArr(leftIndex) > current) {
            newArr(leftIndex + 1) = newArr(leftIndex);
            leftIndex = leftIndex - 1;
        }
        newArr(leftIndex + 1) = current;
    }
    return newArr;
}

const newArray = process(numbers);

In the above example, I use the algorithm insertion sort, because it is easy to do.

The code in the above example is not easy to read, but it is optimized in terms of performance, in this way, it has a much better performance than how to solve using ES6 code. more legibility:

const process = (arr) => arr
    .map(num => num + 1)
    .sort((a, b) => a - b);

const newArray = process(numbers);

In fact, the code in the first example handles 75% faster than the code above, even though this code is easier to read and seems simpler, when we can encapsulate it in just one line of code. as follows:

const newArray = numbers.map(num => num + 1).sort((a, b) => a - b);

Or we can break it down into helper functions helper function To make the code easier to read and understand:

const addOne = (n) => n + 1;
const asc = (a, b) => a - b;
const newArray = numbers.map(addOne).sort(asc);

With code that is easy to understand, we can guide new developers to access projects faster, can share such code more easily and it also becomes easier to maintain.

All that we mentioned above, performance is not mentioned in most cases. This is why ES6 has developed in a legible way.

Finally, we make a comparison between these two approaches:

https://jsperf.com/copy-add-sort-array

Here, you seem to be asking yourself the question, "What do I get by accepting the performance reduction performant in return for readability and comprehension?"

Ok, let's look at a couple of examples that cover these two approaches

Spread syntax vs Object.assign ()

Let's consider the following simple example:

Make an object copy and add a new attribute to the copy object

const params = {...}; // filled Object

// ES6 - Spread syntax
var copy1 = { a: 2, ...params };

// Object.assign()
var copy2 = Object.assign({}, { a: 2 }, params);

Both approaches perform the same job, but we all realize that spread syntax is much easier to read although it is ~ 54% slower.

https://jsperf.com/comparing-object-asign-spread/

For loop vs Reduce

Question:

Sum all values ​​of an array array

The solution, consider how we follow it for ... loop traditional:

const numbers = (2, 4, 12, 6, 8, 29, 5, 10, 87, 11, 7);

function arraySum(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr(i)
    }
    return sum;
}

const sumOfNumbers = arraySum(numbers);

Now we do it by reduce:

const numbers = (2, 4, 12, 6, 8, 29, 5, 10, 87, 11, 7);

const add = (a, b) => a + b;
const arraySum = (arr) => arr.reduce(add);

const sumOfNumbers = arraySum(numbers);

In this example, for sure reduce will cost more in performance, and it is ~ 96% slower than the previous example.

https://jsperf.com/for-loop-vs-reduce-sum

For vs While vs Do while

https://jsperf.com/sraxi-for-vs-while

When should we choose the right solution?

OK, the truth is I'm using spread syntax, reduce, etc for all handling!

The problem here is that the approach I choose makes it more readable, but it doesn't come with performace performance.

So "When should we choose according to which solution?"

The answer is very simple, depending on the problem we perform.

Going back to the first example, if we had to do a copy, add or sort a small or medium sized Array or Object ... Then we should be in an easy-to-read direction, we will use all the code according to ES6.

In fact, almost all of our code is geared towards readability rather than performance.

When should we prioritize readability?

• When the data we handle data is not too large
• When the application is running, still running properly with the required performance and load
• When working in an environment with a lot of changes with many new people approaching the project
• When writing a library library or plugin provided for others to read and understand

When should we prioritize performance

• When processing large data data
• When the application is running slowly and there are performance problems
• When the project needs to scale
• When working on a personal project, whatever you like is up to you

Therefore, if we need to handle large data, we avoid using reduce, filter, map, spread syntax, etc. Especially for code that deals with Object and Array, it should not be used.

Conclude

Instead of jumping right into something new and exciting, we should revisit and analyze whether it is appropriate for our project and case.

Sure, the features in ES6 help improve and make everyday coding more interesting, but if you have performance issues or need to handle large data ... We should think again about the tools we are using.

With heavy processing, we choose a less understandable code solution but optimized for performance.

With large data blocks, we should research and apply the most optimal treatment.

For all remaining cases, we will use ES6 to make the code easy to read and understand!