I'm currently going through Metric-Imperial Converter project on freeCodeCamp. Furthermore, I'm working on the Error Handling part of the user stories.
I've encountered different types of error, but I'll focus on one for this article.
TypeError: Cannot read property 'includes' of null
at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)
at /home/username/webdev/metric-imperial-converter/routes/api.js:21:36
at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:137:13)
at Route.dispatch (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/route.js:112:3)
at Layer.handle [as handle_request] (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/layer.js:95:5)
at /home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:281:22
at Function.process_params (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:335:12)
at next (/home/username/webdev/metric-imperial-converter/node_modules/express/lib/router/index.js:275:10)
at urlencodedParser (/home/username/webdev/metric-imperial-converter/node_modules/body-parser/lib/types/urlencoded.js:91:7)
This seems intimidating at first, but the solution may be located in the first few lines. Let's look at the first line:
TypeError: Cannot read property 'includes' of null
There are two includes methods: one on the String object, and the other the Array object.
Note: the
Arrayincludes is case-sensitive when comparing strings and characters.
I should be passing a string or an array as an argument, but its receiving null as the value. Let's if the error message can still help us:
at ConvertHandler.getNum (/home/username/webdev/metric-imperial-converter/controllers/convertHandler.js:24:13)
From this we can gather that it takes place in the getNum method part of the ConvertHandler module.
Let's look at the code:
this.getNum = function(input) {
var result = null;
var num = null;
var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);
// Check if fraction
if (num.includes('/')) {
...
}
};
A simple mistake. I forget to update the num variable. I set it to null at first, since it receives a value later.
Revised code:
this.getNum = function(input) {
var result = null;
var num = null;
var numRe = (/\d\.?\d*\/?\d?\.?\d*/g);
num = input.match(numRe).join(''); // Fix Type Error
// Check if fraction
if (num.includes('/')) {
...
}
};
I hope this helps you with debugging. The console can be a valuable resource in squashing bugs.
NOTE: Recently, I improved the code. However, I think others might benefit from my mistake, and help with their own debugging.
Resources:
String includes
Array includes
Photo by Franco Atkins from Pexels
Top comments (2)
A couple other helpful tips for you:
Thanks! I want to be consistent with the style, but can see benefits of leaner code. Some of the helper methods just return a value:
I'll refactor the code after the user stories are satisfied.