# Type Conversion & Arithmetic Operators in JavaScript

In the previous articles, we have seen many data types including numbers, strings, booleans, and the object data type. We have also learned a few JavaScript fundamentals.

Today you will learn how the `console.log()`

statement actually prints a bunch of text along with numbers like age and salary directly. You will also learn how to do it by yourself.

You will also look at the basic mathematical operations that you can do in JavaScript.

And remember, you can download all the code and experiment with it on **codedamn playgrounds**. It is a full-fledged IDE that you can use online without installing anything on your system.

Let’s begin!

## How to print variables in console using console.log()?

Check out the code below and see **statement 1**:

We have `firstName`

as Jason and we are printing it out on the console with some other text (`String`

data type). “Jason” is also a `String`

datatype.

The output you see is: “Hi! I am Jason”.

You can easily figure out that JavaScript just combined two String datatype objects into a single object!

Now, check out **statement 2:**

You took a few strings and then added a number to the string. The final output was a string! Where did the number go!?

This is exactly why you need to understand type conversions!

JavaScript is a clever language. When you put a number and a string together, it automatically converts the `Number`

to a `String`

datatype so that it can perform that “addition” on the strings. It is also called String Concatenation.

Well, then, what will be the output of the following code?

If your answer is:

`I am 221 years old.`

You will be 100% right! Remember, “+” concatenates the strings. So if you add a `Number`

and a `String`

Datatype together, the Number will be **converted **to a `String`

type and the final result will be a `String`

.

Since JavaScript does it all under the hood, it is called **Implicit Type Conversion**.

If you are curious try replacing “+” addition with:

**–**: Subtraction*****: Multiplication**/**: Division

You will realize that the calculations were actually performed! But why? The addition wasn’t done. We were not able to increment the age when we tried adding 1 to it. Why were we able to subtract, multiply or divide?

The reason is simple, JavaScript is clever. This time it saw that it could convert the string into a number and actually complete the calculation. So it did. And you get `Number`

data type as an output.

Attempt the following and note the output for each by adding a `console.log()`

after each statement. You can find the code **here**.

The general rule of thumb is that if it makes sense, JavaScript will compute it.

Find a summary table below for a quick reference:

Data Type 1 | Operator | Data Type 2 | Output |

String | add | String, Number, Boolean undefined, null | String |

String | subtract, multiply, divide | Number | Number |

String | subtract, multiply, divide | Null, String | NaN |

String | subtract, multiply, divide | undefined | undefined |

Number as String, Number | add, subtract | Boolean | Number |

Number | add, subtract | null | Number |

Number | multiply, divide | null | Infinity, 0 |

undefined | ANY | ANY | undefined |

Just like implicit conversion, if you want you can convert from one type to another explicitly, i.e., you tell JavaScript what conversion to make!

The syntax is:

I’d recommend you to try out various value parameters directly on playground and **play with the code**.

This is the end of Type Conversion. Next up is basic mathematics!

## Arithmetic Operators in JavaScript

Let me try to keep this section quick! You have done simple addition, multiplication, division, and subtraction in school. You can do the same in JavaScript between two `Number`

data types.

Well, that was easy! I have a question for you:

**Since 20.5 doesn’t divide 100 fully, what is the remainder? Can you calculate it in JavaScript? **

Of course, you can. And you don’t need to write any calculations logic. You can simply use the **modulo (%) **operator as shown below:

What if you want to calculate the 2 raised to the power 3? Just use the exponent operator → `base**power`

= 2**3

There is another thing JavaScript provides to increase or decrease the value of a Number data type by 1.

Operator | Operation |

++ | Increment the value by 1 |

– – | Decrement the value by 1 |

These operators are the same as doing:

`variable = variable + 1`

`variable = variable - 1`

Then why do we have these separately? Well for starters, they are a quick way to increase or decrease the value by 1 (you will use it a lot in loops).

Another thing is, that their placement matters! What do you think is the output of the following code?

If you just go by the explanation above, you would say that line 2 prints 2, and line 3 prints 3! You’d be partially correct. Line 3 does print 3, but line 2 prints 1!

But why does this happen at all? See, when you place “`++`

” after the variable, JavaScript will first print the value of x and then increment it.

But when you place it before the variable, JS will increment the value first and then print it (reverse of the above).

This is what it looks like internally:

You can similarly use “`--`

” to decrement the value by 1!

Below you will find a summary of the arithmetic operators for a quick reference!

Operator | Operation | Example |

`+` | Addition | x + y |

`-` | Subtraction | x – y |

`*` | Multiplication | x * y |

`/` | Division | x / y |

`%` | Modulo/Remainder | x % y |

`**` | Exponent | x ** y |

`++` | Increment by 1 | x++ or ++x |

`--` | Decrement by 1 | x– or –x |

That’s all folks! In the next article, we will learn about if-else statements in JavaScript which will help you write the logic on which your applications will eventually run! See you!

Till then, practice, practice, and practice on codedamn playgrounds.

**Become The Best Full-Stack Developer 🚀**

**Node.js**courses, labs, and become employable full-stack web developer.

Free money-back guarantee

Unlimited access to all platform courses

100+ practice projects included

ChatGPT Based Instant AI Help (Jarvis)

Structured Node.js Full-Stack Roadmap To Get A Job

Exclusive community for events, workshops

### Sharing is caring

Did you like what Rishabh Mittal wrote? Thank them for their work by sharing it on social media.

- String methods in JavaScript
- Console.log in JavaScript – Complete Guide
- JavaScript Operators – Complete Guide With Examples