The Wacky World of JavaScript: Unraveling the Oddities

javascript check element visibility

JavaScript, the ubiquitous language of the web, is known for its flexibility and, at times, its perplexing behavior. Let’s dive into some of the more peculiar aspects of JavaScript that can leave both novice and experienced developers scratching their heads.

Table of Contents

Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


NaN is a Number?

typeof NaN // "number"

Despite its name, NaN (Not-a-Number) is considered a type of number in JavaScript. This can lead to some confusing situations, but it’s important to remember that typeof NaN returns "number".

Big Numbers Get Rounded

9999999999999999 // 10000000000000000

JavaScript uses double-precision floating-point format numbers, which can cause large integers to be rounded. Here, 9999999999999999 gets rounded to 10000000000000000.

Floating-Point Arithmetic

0.5 + 0.1 == 0.6 // true
0.1 + 0.2 == 0.3 // false

Due to floating-point precision, 0.1 + 0.2 does not exactly equal 0.3. Instead, it results in 0.30000000000000004, making the comparison to 0.3 false.

Math Functions

Math.max() // -Infinity
Math.min() // Infinity

Calling Math.max() without arguments returns -Infinity, while Math.min() returns Infinity. This is a quirky yet predictable behavior when no parameters are provided.

Adding Arrays and Objects

[] + [] // ""
[] + {} // "[object Object]"
{ } + [] // 0
  • Adding two empty arrays results in an empty string due to type coercion.
  • Adding an empty array to an empty object gives "[object Object]".
  • { } + [] is interpreted as a block followed by an array, resulting in 0.

True Equals One

true == 1 // true
true === 1 // false
  • true is loosely equal to 1 due to type coercion.
  • However, true is not strictly equal to 1 because they are of different types.

Length of a Weird String

(![] + [] + ![]).length // 10

Here’s a breakdown:

  • ![] is false, which coerces to the string "false".
  • Concatenating false with an empty array results in "false".
  • Adding another false gives "falsefalse".
  • The length of "falsefalse" is 10.

Mixing Numbers and Strings

9 + "1" // "91"
91 - "1" // 90
  • Adding a number and a string results in string concatenation ("91").
  • Subtracting a string from a number coerces the string to a number, allowing the arithmetic operation (90).

Empty Array Equals Zero

[] == 0 // true

An empty array is loosely equal to 0 due to type coercion.

Adding and Subtracting Booleans

true + true + true === 3 // true
true - true // 0
  • true is coerced to 1, so 1 + 1 + 1 equals 3.
  • Subtracting true from true results in 0.

Conclusion

JavaScript’s quirks can be both amusing and baffling. Understanding these oddities is crucial for debugging and writing more predictable code. So, the next time you encounter a strange JavaScript behavior, remember that there’s often a logical (if not always intuitive) explanation behind it.

Happy coding!


About the Author

Subscribe to our newsletter
Get early information about new products, product updates and blog posts.
How to Achieve Perfectly Rounded Corners in CSS
How to Achieve Perfectly Rounded Corners in CSS

How to Add a Tab in HTML
How to Add a Tab in HTML

How to Open Link in a New Tab in HTML?
How to Open Link in a New Tab in HTML?

How to Clone an Object in JavaScript
How to Clone an Object in JavaScript

How to Fix “Sass @import Rules Are Deprecated and Will Be Removed in Dart Sass 3.0.0.”
How to Fix “Sass @import Rules Are Deprecated and Will Be Removed in Dart Sass 3.0.0.”

How to Remove Elements from a JavaScript Array
How to Remove Elements from a JavaScript Array