The Quirky World of JavaScript — Part 1

Photo by Nonsap Visuals on Unsplash

JavaScript, a widely-used language, is known for its simple syntax and extensive ecosystem.
It powers numerous applications across diverse platforms, from small startups to large enterprises. Despite its popularity and utility, JavaScript has a quirky side that can lead to unexpected bugs.

In this article, we explore some of the most peculiar behaviors of JavaScript that every developer should be aware of.

An Array is NOT an Array ?

In most programming languages, comparing two arrays directly should follow the law of identity (A = A). However, in JavaScript:

[] == [] // false

This happens because arrays in JavaScript are compared by reference, not by their content. Thus, two empty arrays have different references in memory. To compare arrays accurately, you must compare their elements or use a deep equality function.

The Weird Case of NaN

Another fascinating quirk involves the special value NaN (Not a Number):

NaN === NaN // false

This might seem counterintuitive, but in JavaScript, NaN is not equal to anything, including itself. This is why comparing NaN to NaN using the === operator returns false. To check if a value is NaN, you should use the isNaN() function:

isNaN(NaN) // true

Sorting Shenanigans

JavaScript’s sort() method can behave unexpectedly with numeric arrays:

[10, 1, 4].sort() // [1, 10, 4]

The sort() method converts elements to strings and sorts them lexicographically by default. To sort numerically, you need to provide a comparison function:

[10, 1, 4].sort((a, b) => a - b) // [1, 4, 10]

The Floating-Point Precision Issue

Adding decimal numbers can yield surprising results:

0.1 + 0.2 // 0.30000000000000004

This is due to floating-point precision errors inherent in binary representation of decimal numbers, a common issue in many programming languages.

Object.is() vs ===

JavaScript’s Object.is() method is similar to the strict equality operator ===, but with some differences:

Object.is(NaN, NaN) // true
NaN === NaN // false

Object.is(-0, 0) // false
-0 === 0 // true

Object.is() correctly handles NaN and -0, unlike ===.

The Unexpected Behavior of parseInt()

The parseInt() function can produce unexpected results when used with non-decimal bases or invalid characters:

parseInt('f-ine', 16) // 15

parseInt() parses the string character by character until it encounters an invalid character for the specified base.

var vs let

The var keyword can lead to bugs due to its function-scoped behavior, while let is block-scoped:

function checkVar() {
  var number = 10;
  if (true) {
    var number = 20;
    console.log(number); // 20
  }
  console.log(number); // 20
}

function checkLet() {
  let number = 10;
  if (true) {
    let number = 20;
    console.log(number); // 20
  }
  console.log(number); // 10
}

Using let avoids accidental reassignments outside the intended scope.

Conclusion

JavaScript’s quirks can be both fascinating and frustrating. Understanding these oddities is crucial for writing robust code and avoiding hidden bugs.

If you’re looking to start a new React Native / Expo project, check out my expo starter kit. It will help you bootstrap your project quickly and efficiently :
https://expostarter.com