Working With JavaScript Variable Type Errors

I was struggling to get some code working in JavaScript and realised that I’d made a small variable type error. This is one of the problems in working with a loosely typed language like JavaScript.

When I work in C# it is strongly typed meaning that I have to declare a variable and its type at the same time. This saves a multitude of errors in my code. Unfortunately I don’t have this luxury with JavaScript and I have to be more careful with my variables.

My original code

 1    // get array from location.hash                                            
 2    const hashArray  = function (hash) {
 3      const arrayValues = hash.split("-");
 4      return arrayValues;
 5    }
 6
 7    const artists = getSavedArtists();
 8
 9    const arr = hashArray(location.hash);
10
11    let artistId = arr[0];
12    artistId = artistId.slice(1);
13    const RecordId = arr[1];
14
15    // Find an artist
16    const findArtist = function (artists, artistId) {
17      return artists.find(function (item) {
18        return item.artist[0].artistid === artistId;
19      });
20    }

I take the location.hash value from my URL, for example, #582-432. I split this into an array using the - as a separator and the first number is the artitistId and the last number is the recordId. I also need to slice() the first character off artistId which is the hash character.

My big mistake was that I forgot that split() only returns strings. As a result the findArtist() function wasn’t returning the artist object.

I always use the strict equality comparison operator to do my checking.

    item.artist[0].artistid === artistId;                                      

item.artist[0].artistid was a number and artistId was a string so the strict equality comparison wasn’t finding a match.

I changed the equation to the type converting equality comparison.

    item.artist[0].artistid == artistId;                                       

And this allowed me to find a match. It converts both variables to the same type for the comparison. This is something that is only found in JavaScript and takes a while to get used to.

Most JavaScript coders would be comfortable that the code was producing a result and leave the type conversion equality operator in place.

Coming from a strongly typed language background I find this code strange and so I decided to do the job properly and make sure the variables I created had the correct type.

11    let aid = arr[0];                                                          
12    aid = aid.slice(1);
13    const rid = arr[1];
14    const artistId = parseInt(aid);
15    const recordId = parseInt(rid);
16
17    // Find an artist
18    const findArtist = function (artists, artistId) {
19        return artists.find(function (item) {
20            return item.artist[0].artistid === artistId;
21        });
22    }

I use the parseInt() function to convert my artistId and recordId variables into numbers. Now I can use the strict equality operator to do an exact match.

The other thing that I could have done to check my variable’s type is to use the typeof() operator to check type.

    console.log(typeof(artistId));                                             
    console.log(typeof(recordId));

This would tell me that both of my variables were numbers. I will make sure that I use typeof() more often when I’m coding.