This content originally appeared on DEV Community and was authored by The Eagle 🦅
NOTE: To get the full potential of this article, I recommend opening the console (F12) and trying out the ones you believe are mind-blowing. Have fun!
1. NaN is a number
typeof NaN; // "number"
JavaScript treats NaN (Not-a-Number) as a number type, despite its name implying the opposite.
2. Inaccurate Floating-Point Arithmetic
0.1 + 0.2 === 0.3; // false
Due to floating-point precision errors, simple arithmetic can behave unexpectedly
3. True Equals 1
true == 1; // true
true === 1; // false
The loose equality (==) will coerce the boolean true into the number 1, but strict equality (===) respects types.
4. Empty Array and String Concatenation
[] + []; // ""
[] + {}; // "[object Object]"
{} + []; // 0
Adding arrays and objects results in odd outputs like an empty string or zero due to type coercion.
5. Array Length from Crazy Expression
(![]+[]+![]).length; // 9
JavaScript turns ![] into false, adds an empty array, and coerces the result into a string of length 9.
6. Math with Empty Arrays
[] == 0; // true
You are comparing an empty array to 0 results in true because JavaScript converts [] to a number (which becomes 0).
7. parseInt and Decimals
parseInt(0.0000001); // 1
parseInt only reads the integer part of the number, so 0.0000001 gets interpreted as 1.
8. JavaScript Magic Number
9999999999999999 === 10000000000000000; // true
JavaScript loses precision for huge numbers, treating 9999999999999999 as 10000000000000000.
9. Subtraction & Addition with Booleans
true - true; // 0
true + true; // 2
Booleans are treated as 1 (true) and 0 (false) when performing arithmetic, so true - true results in 0. And in true + true both are treated as 1 (true)
10. Adding Different Types
9 + "1"; // "91"
9 - "1"; // 8
Adding a number and a string concatenates them as strings while subtracting attempts to convert the string to a number.
Bonus: Empty Array Is True
[] == false; // true
JavaScript coerces an empty array ([]) into a falsy value when compared with ==, but still considers it truthy in conditions.
Conclusion
Learn JavaScript, and use TypeScript. Your future self will thank you later.
TypeScript does not completely eliminate these problems because they are rooted in JavaScript's runtime behavior. However, TypeScript's type system and compile-time checks reduce the likelihood of encountering many of these issues, especially those related to type coercion and unintended type conversions.
Yes, it takes some time to implement certain features in TypeScript, whereas in JavaScript it takes less time, but the cost is accumulating technical debt and someone will have to pay for it, usually the developer and their team. In TypeScript, at least, you can reduce or eliminate it if you follow good practices and use a design pattern that fits your project's needs.
This content originally appeared on DEV Community and was authored by The Eagle 🦅
The Eagle 🦅 | Sciencx (2024-09-28T17:44:09+00:00) Top 10 weird JavaScript behaviors. Retrieved from https://www.scien.cx/2024/09/28/top-10-weird-javascript-behaviors/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.