Console Log Color Meaning

Viewed 953

I'm curious what's the difference between numbers that show up the color black or blue in the console log?

I'm currently outputting using this variable:

currentImageIndex = currentImage.attr('data-index'),

It does output the correct number in the console. It shows the number in the color black. For some reason, even though the correct number is outputted, my function doesn't work. But if I write the following:

currentImageIndex = 5, 

the function will work. I notice the number shows up as the color blue in the console log. What's the difference?

2 Answers

Black indicates a string, blue indicates a number:

enter image description here

Element attributes are always strings; .attr returns a string. You need to convert it to a number:

currentImageIndex = Number(currentImage.attr('data-index'));

That's because the value of your data-index attribute is a string, not a number (number are shown as blue in the console).

You should parse the value of the attribute as a number using window.parseInt to parse the string as a number:

...
const currentImageIndexValue = currentImage.attr('data-index');
const currentImageIndex = window.parseInt(currentImageIndexValue);

Just be careful that, if the value of the attribute cannot be parsed as a number, the value of currentImageIndex will be NaN.

Some details on JavaScript types: MDN JavaScript types

Related