JavaScript Data Types and Debugging Type Errors with "typeof"

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:

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 :

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:

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.

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.