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

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

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

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

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

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

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

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)

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!