DEV Community

Tomas Stveracek
Tomas Stveracek

Posted on • Edited on

3

JavaScript Quirks: What You Need to Know

JavaScript is a powerful and flexible language, but it also has some quirks that can surprise even experienced developers. Understanding these strange behaviors can help you write more robust and bug-free code. In this article, we'll explore some of the most notable oddities in JavaScript.

1. Type Coercion

JavaScript automatically converts types in certain situations, which can lead to unexpected results.

console.log(1 + '1'); // '11' - Number 1 is coerced to a string
console.log(1 - '1'); // 0 - String '1' is coerced to a number
console.log(true + true); // 2 - true is coerced to 1
console.log('' == 0); // true - Empty string is coerced to 0
console.log([] == 0); // true - Empty array is coerced to 0
Enter fullscreen mode Exit fullscreen mode

2. NaN is Not Equal to NaN

NaN stands for "Not-a-Number" and is used to represent a value that is not a valid number. Interestingly, NaN is not equal to itself.

console.log(NaN === NaN); // false
console.log(Number.isNaN(NaN)); // true - Correct way to check for NaN
Enter fullscreen mode Exit fullscreen mode

3. The typeof Operator

The typeof operator can return some unexpected results.

console.log(typeof null); // 'object' - This is a long-standing bug in JavaScript
console.log(typeof []); // 'object' - Arrays are technically objects in JavaScript
console.log(typeof function(){}); // 'function' - Functions have their own type
Enter fullscreen mode Exit fullscreen mode

4. Adding Arrays

Adding two arrays together can produce surprising results due to type coercion.

console.log([] + []); // '' - Both arrays are coerced to empty strings
console.log([] + {}); // '[object Object]' - Empty array is coerced to empty string, empty object is coerced to string '[object Object]'
console.log({} + []); // 0 - Here, {} is interpreted as an empty block
Enter fullscreen mode Exit fullscreen mode

5. Floating-Point Arithmetic

JavaScript uses floating-point arithmetic, which can lead to precision issues.

console.log(0.1 + 0.2); // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
Enter fullscreen mode Exit fullscreen mode

6. The Double Equals (==) Operator

The == operator performs type coercion before comparison, which can lead to unexpected results. It’s generally better to use the strict equality operator (===).

console.log('' == false); // true
console.log(0 == false); // true
console.log('' == 0); // true
console.log(null == undefined); // true
Enter fullscreen mode Exit fullscreen mode

7. Misleading Scoping with var

Variables declared with var are function-scoped, not block-scoped, which can lead to unexpected behavior.

if (true) {
  var x = 5;
}
console.log(x); // 5 - x is available outside the block

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 1000);
}
// Output: 3 3 3 - Because var is function-scoped, the same i is referenced
Enter fullscreen mode Exit fullscreen mode

8. The Global Object

In the browser, this refers to the global window object in non-strict mode. This can cause some surprising behaviors.

function foo() {
  console.log(this); // window (in browser)
}
foo();

const bar = {
  method: function() {
    console.log(this); // bar object
  }
};
bar.method();

const baz = bar.method;
baz(); // window (in browser)
Enter fullscreen mode Exit fullscreen mode

Conclusion

JavaScript is a versatile and powerful language, but it's important to be aware of its quirks and idiosyncrasies. By understanding these strange behaviors, you can avoid common pitfalls and write more reliable code. Keep exploring and experimenting with JavaScript to deepen your understanding of these and other interesting aspects of the language.


Do you know other quirks in Javascript? Write them in the comments.

Do you know the basic methods in Javascript? Check out my article here to learn more!

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more