JavaScript Data Types and Debugging Type Errors with "typeof"
Tags: javascript, webdev, codenewbie, beginners
Published: 2021-07-26 07:40:01

While I started learning *JavaScript*, I faced a problem often. I've seen many of the learners facing a common problem at the beginning of learning JavaScript. I want to share that with my readers in this post.

###Data Types in JavaScript 

JavaScript recognizes:
6 *immutable* data types: *Boolean*, *Null*, *Undefined*, *Number*, *String* & *Symbol*.
1 type for *mutable* items: *Object* 

Let me show you an example first:

```js
let nine = 9; //data type : Number
let three = "3"; //data type : String

let summation = nine + three; //expected output: 9+3=12

console.log(summation) //output: 93
``` 
We all know that the summation of *9* and *3* is *12*. But here, the actual *output* shows a different result, that is *93*, which means there must be some *error* in the code. 

The *reason* of this wrong output is, the variable *nine* is assigned with the value *9* which is a *number* and the variable  *three* is assigned with the value *3* which is a *string*.

#####A basic information about JavaScript is, when we add two and different data types with + operator , it actually concatenates them, doesn't return a summation!

If you + two strings, it will return the *concatenation* of them but if you + two numbers they will return the *sum*. That's why, The variable *summation* returned a *concatenated value* 93, not the actual *summation* 12.

Now that we've seen this problem, let's try to solve it. 
It may happen often that, maybe you're in hurry and you just mistakenly used *quotation marks ("")* around a *number* while assigning it to a variable. This mistake will turn the *number* data type into a *string* data type as we saw in the example above.

#####To check why the *unexpected output* has occurred, we can debug the problem. 

In *JavaScript*, `typeof` is useful in `debugging` while working with *multiple data types*. *typeof* is used to check the *data structure* or *type* of a variable. 

Type errors and unexpected outputs may occur if the data types are not similar, especially when you're accessing data in the form of *JSON (JavaScript Object Notation) Object*. 

Some *examples* of using *typeof* while debugging are:
1) console.log(typeof " ") //output String
2) console.log(typeof 7) //output Number
3) console.log(typeof {}) //output Object
4) console.log(typeof []) //output Object
######(Note that, in JavaScript, *Arrays* are also technically one type of *Object*)  

Let's see the previous example and how to debug it with *typeof* :

```js
let nine = 9; //data type : Number
let three = "3"; //data type : String
let summation = nine + three; //expected output: 9+3=12

console.log(summation) //output: 93
console.log(typeof nine); //output: number
console.log(typeof three); //output string
```
Now, we can easily know where we have mistaken and simply change the *string* to *number*.
Then everything will work as we desired.
 
The changed and correct *output* will be:
```js
let nine = 9; //data type : Number
let three = 3; //data type : Number
let summation = nine + three; //output: 9+3=12
```

Now that I have explain the reason of the wrong output, I have a problem for you to solve.
```js
let nine = 9; 
let five =5;
let three = "3"; 
let two = "2";

let summation = nine + three + five + two; 
let sum = nine + five + three + two;

console.log(summation);
console.log(sum);
```

Can you tell me what *summation* and *sum* will return and why?

######Hint: check the data types carefully and also the sequence of the variables in the summation and sum.

You can explain your answer in the *discussion section*.