JavaScript Fundamentals That Finally Make Sense
A beginner-friendly guide to template literals, truthy and falsy values, type conversion, and implicit coercion.
Template literals (Template strings)
Template literals are literals delimited (determine the limit or boundary) with back-ticks `` (define string here) characters for declaring strings, allowing for multi-line strings, string interpolation with embedded expressions.
let name = 'Ayan';
console.log(`Hello ${name}`); // Hello Ayan
Hello ${name} insert variable values directly into strings, producing output such as hello Ayan.Cleaner concatenation: They avoid using +, making string creation more readable and easier to write.
Template literals take all the
numbervalues and converts them intostring.
Truthy and Falsy values
true or false in Boolean context.falsy values
A falsy value is a value that is considered false when encountered in a Boolean context.
false, but will become false when we try to convert them into a boolean.JavaScript uses type coversion (explicit conversion) to coerce (implicit convert) any value to a Boolean in contexts that require it, such as conditional and loops.
false, undefined, NaN, null, "", 0, 0n, -0
truthy values
In JavaScript a truthy value is a value that is considered true when encountered in a Boolean context.
true, 1, "Ayan"
Except falsy all values are truthy.
Type coercion
Type coercion is the automatic or implicit conversion of values from one data type to another (such as strings to numbers).
const value1 = "5";
const value2 = 9;
let sum = value1 + value2;
console.log(sum); // 59
Explanation
JavaScript has coerced the 9 from a number into a string and then concatenated the two values together, resulting in a string of 59.
JavaScript had a choice between a string or a number and decided to use a string.
Why? Because it’s defined in it’s engine.
The compiler could have coerced the 5 into a number and returned a sum of 14, but it did not.
To return this result, you'd have to explicitly convert the 5 to a number using the Number() method:
console.log(Number("9" + 5); // 14
How Type Coercion Works?
In JavaScript, type coercion mainly occurs in the three ways:
String Coercion
It occurs when the string is combined with the non-string using (+). JavaScript converts numbers and booleans into strings before concatenation.
console.log("5" + 2); //52
console.log("5" + true); //5true
The number
2is coerced to astringand then concatenated with thestring "5", resulting in"52".The
boolean trueis coerced into thestring "true", and the twostringsare concatenated.
Number Coercion
In the number coercion*, JavaScript converts the* string into a number before operating.
console.log("5" - 2); //3
console.log("5" * 2); //10
console.log("10" / "2"); //5
+ operator, JavaScript performs concatenation. Except + operator, JavaScript performs arithmetic operations.Boolean Coercion
JavaScript treats the truthy / true value as 1 and the falsy / false value as 0.
console.log(Boolean("hello")); //true
console.log(Boolean(0)); //false
console.log(Boolean([])); //true
Non-empty
stringsare coerced totrue, while0is coerced tofalse.
Common Issues of Type Coercion
Comparing Different Data Types
Comparison Operator (==), allows coercion due to which the unexpected conversions occur. To avoid this, we should use the strict equality (===) operator.
console.log(0 == "0"); //true
console.log(0 == false); //true
console.log(" " + 0 == 0); //true
Operations on null and undefined
Null and undefined behave unexpectedly.
console.log(null == undefined); //true
console.log(null === undefined); //false
console.log(null + 1); //1
NaN Comparisons
NaN is not equal to itself*, so checking with* isNaN() is the best way to detect it.
console.log(NaN == NaN); //false
console.log(isNaN(NaN)); //true
Best Practices to Avoid Type Coercion Issues
Use === Instead of ==
When we use strict equality (===), instead of the comparison operator / loose equality (==), it prevents unnecessary types of coercion*.*
console.log(5 === "5"); //false
=== ensures no implicit type conversion occurs and both values must be of the same type.
Use Explicit Conversion
Explicit conversion converts the value manually due to which there are fewer chances of errors in the code.
console.log(Number("123")); //123
This ensures that you're working with the correct type*, reducing the chance of errors during operations.*
Avoid False Value Confusion
Always check for
null,undefined, or“”empty strings explicitly.
if (value !== null && value !== undefined) {
console.log("Value exists");
}
This ensures that only non-null and defined values are considered valid.
Use parseInt() and parseFloat() for Number Conversion
console.log(parseInt("42px")); //42
console.log(parseFloat("3.14abc")); //3.14
This will parse the number part of a string, ensuring a valid numeric conversion.
Handle NaN Properly
isNaN() to check if a value is NaN instead of comparing it directly.if (isNaN(value)) {
console.log("Invalid number");
}
This ensures you're correctly detecting NaN and handling it appropriately.
Type conversion
Manually or explicitly convert the type of a value from one data-type to another.
Original value doesn’t converted.
JavaScript can only convert to three types. we can convert to a number, to a string, or to a boolean.
const inputYear = "1996";
console.log(Number(inputYear), inputYear);
