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.
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.
How to print variables in console using
Check out the code below and see statement 1:
firstName as Jason and we are printing it out on the console with some other text (
String data type). “Jason” is also a
The output you see is: “Hi! I am Jason”.
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!
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
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?
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.
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||multiply, divide||null||Infinity, 0|
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!
Number data types.
Well, that was easy! I have a question for you:
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
|++||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 “
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!
|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|
Till then, practice, practice, and practice on codedamn playgrounds.