How to make your Javascript code run faster
Tags: javascript, functional, optimization
Published: 2018-05-31 15:58:00

---
title: How to make your Javascript code run faster
published: true
tags: javascript,fp,optimization
canonical_url: 
---

A long time ago, in 2011, I wrote my first DNI (Spanish ID) [validation script](https://blog.singuerinc.com/javascript/actionscript3/validators/dni/nie/nif/2011/06/17/tip-validar-un-dninienif-de-espana-con-actionscript/). I did it with ActionScript.

Some years later, after the Flash era, I [re-wrote it](https://blog.singuerinc.com/javascript/validation/spain/dni/nie/nif/regex/2014/08/06/code-day-006-spain-dni-validation/) for Javascript.

Recently, I went into a heavily Functional Programming learning process and as a goal, I propose myself to create a new module applying what I learned.

The result (not following FP paradigm too much I would say) is:

#### Better DNI

{% github singuerinc/better-dni %}

Quickly I found out that there are many modules doing the same…

Replicate what others already did is a little boring, so I changed my goal to

> “Create the faster module to validate a DNI”

In this process, I found many ways to improve the speed of the code, although sometimes it looks a bit uglier, some of them made the code twice faster.

> Note that you would get better results with newer versions of Node. I think [https://jsperf.com](https://jsperf.com) is quite good in speed since it runs isolated with just one or two lines of code, but when I tried in “normal” computers with the whole module the difference is quite big. I would say that you should test your code in different environments and see where you can optimize.

Here is what I discovered:

### str.substr() vs str.slice()

```
'0123456789'.slice(-9); // => '123456789'
'0123456789'.substr(-9); // => '123456789'
```

Winner: **slice** / x21 faster! / [test](https://jsperf.com/better-dni-slice-vs-substr/1)

### toLowerCase() vs toUpperCase()

I have to admit that I have never thought before why would one method be faster than the other. I was looking into the V8 code and looks like [https://github.com/v8/v8/blob/master/src/string-case.cc#L16](https://github.com/v8/v8/blob/master/src/string-case.cc#L16) is the answer to that.

```
'A'.toLowerCase(); // => 'a'

'a'.toUpperCase(); // => 'A'
```

This is especially useful if you need to compare two strings.

Before comparing them, better to convert them to lower case.

Winner: **toLowerCase** / slightly faster / [test](https://jsperf.com/better-dni-lower-case-vs-upper-case/1)

![](https://cdn-images-1.medium.com/max/1024/1*uQjccedT8iMRt8M6EgPfnw.jpeg)<figcaption>Random image related to speed. You need one in all posts. Photo by <a href="https://unsplash.com/photos/ukTd6UiQbLQ?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">James Traf</a> on <a href="https://unsplash.com/search/photos/fast?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>

### indexOf() vs object prop

```
const y = 'xyz'.indexOf('y'); // => 1

const y = {x: 0, y: 1, z: 2}['y'] // => 1
```

Winner: **indexOf** / slightly faster / [test](https://jsperf.com/better-dni-index-of-vs-obj-prop/1)

### String concatenation vs Template literals

I don’t know why I imagined that template literals were more complex than a simple string concatenation.

```
const x = 'x';

'yyy' + x;

'yyy${x}'; // faster
```

Winner: **Template literals** / slightly faster / [test](https://jsperf.com/better-dni-str-concat-vs-str-template/1)

### Convert to number

```
parseInt('1234', 10); // => 1234

+'1234'; // => 1234
```

Winner: **+sign** / x6.12 faster! / [test](https://jsperf.com/better-dni-convert-to-number/1)

### Math.floor() vs Bitwise shift

I took some inspiration from this [blog post](http://blog.blakesimpson.co.uk/read/58-fastest-alternative-to-math-floor-in-javascript).

```
Math.floor(1.123456789); // => 1

1.123456789 << 0; // => 1
```

Winner: **Bitwise shift** / slightly faster in jsperf but Math.floor() performs better much better in my MacBook Pro. / [test](https://jsperf.com/better-dni-floor-vs-bitwise/1)

### Other tips that could help your code to run faster

#### Tip 1

Do easy validations first and return as quickly as possible. Take a look at these snippets:

```
if(someComplexValidation(value) && value.length !== 9) return;
```

vs

```
if(value.length !== 9 && someComplexValidation(value)) return;
```

It’s the same code right? Do the “easy” validation first so your code does not run and return if the first validation does not pass.

#### Tip 2

Avoid using costly methods like “toUpperCase()” and try to use smart alternatives:

```
const n = 'XYZ'.indexOf('y'.toUpperCase()); // => 2
```

vs

```
const n = 'XYZxyz'.indexOf('y') % 3; // => 2
```

#### Tip 3

If you know that you can achieve the same result with different methods, find the one that works better for each specific case:

```
const x1 = 'xyz'.substr(0, 1); // => 'x'

const x2 = 'xyz'[0]; // => 'x'

const x3 = 'xyz'.slice(0, 1); // => 'x'
```

I hope this would help you to optimize your code!

Do you want to contribute, make it faster? Open a pull request:

[singuerinc/better-dni](https://github.com/singuerinc/better-dni/)