Understanding the conversions in Javascript.
If you are learning javascript, then you must understand how javascript treats values, how it compares them, and how it operates on them, and you need to understand it.
In javascript, one concept is known by many names, such as type conversions, type casting, and coercion. When we try to compare two values of different datatypes or try to operate on them, javascript will convert them in the same datatype to do this.
Arithmetic Operators
console.log(2 + "2" - "4") // 18In this case, we are operating.
When we operate on values of two different kinds, which value will be converted to what is determined by the Operator.
In this code first, we have 2 which is a number then we are adding a string to the number, when we add a string to the number, the number is converted to a string, hence they will concatenate and we will get “22” and then we are subtracting 4 from it. when we subtract a number from a string, the string is converted to a number. hence end result will be 22 – 4, which results in 18.
Get Gaurav Kumar’s stories in your inbox
Join Medium for free to get updates from this writer.
if a string can’t be converted to a number then what?
console.log("charan" - 4) // NaN (Not a Number)It is hard to always remember what will be converted to what? But still here’s something
const str = "10";
const num = 5;
console.log(str + num); // "105" - Number to String conversion
console.log(num + str); // "510" - Number to String conversion
console.log(str - num); // 5 - String to Number conversion
console.log(num - str); // 5 - String to Number conversion
console.log(str * num); // 50 - String to Number conversion
console.log(num * str); // 50 - String to Number conversion
console.log(str / num); // 2 - String to Number conversion
console.log(num / str); // 0.5 - String to Number conversionThis is good for operating on strings and numbers. But what if we want to take it to another level, like arrays and objects?
console.log({} + []) // [object Object]when we try to add an object to an array both the operands here are converted to a string, object evaluated to [object Object] , and an empty array is evaluated to an empty string after that it’s just pure concatenation.
console.log(true + []) // true
console.log(typeof (true + [])) //stringWhat happens, in this case, is javascript tries to convert true to its corresponding primitive value which is “true” an empty array is converted to an empty string. But things change when we do something like this
console.log(true + false) // 1Here javascript tries to convert both to their corresponding numeric values, as we say 1 is truthy and 0 is falsy.
Comparison Operators
If Javascript we can compare values of two different types, by using either == or === .
When we do == , we are basically saying that compare both the values, this javascript will do coercions and bring both values to the same data then check if they are equal or not. if we do === , it tells javascript to not do any kind of typecasting before comparing them.
Since we are trying to understand how datatypes are converted we will be using ==.
console.log(2 == "2") // true
console.log(2 === "2") // falseThe general rule is that JavaScript will attempt to convert the operand on the right-hand side (RHS) of the comparison to match the type of the operand on the left-hand side (LHS). This means that the RHS value will be typecasted to the type of the LHS value.
When we use a comparison operator result will always evaluate to a boolean value. But what about operands such as objects and arrays?
console.log({}==[]) // falseobjects and arrays are compared by their references in the memory and not by the actual values, so if you are comparing two objects it will always be false. So no coercion would occur here.
Conclusion A lot of people say that javascript is weird, cause they don’t understand how it works behind the scenes. I hope this article would have made things a lot clear for you than before. See you in the next one.
