JavaScript Quirks: Comprehensive Guide

JavaScript Quirks: Comprehensive Guide 1

1. typeof Quirks 2
Example: Type of null 2
Example: Type of NaN 3
2. Loose Equality (==) 3
Example: Loose vs. Strict Equality 3

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

1
 Exercise: 3
3. Global this 3
Example: Global this in Browsers 4
Example: Global this in Node.js 4
4. Floating-Point Math 4
Example: Precision Errors 4
Fix: 4
5. Adding Arrays and Objects 4
Example: Adding Arrays 4
6. Function Scoping with var 4
Example: Scope of var 5
7. Immutability of const 5
Example: Mutable const Objects 5
8. Automatic Semicolon Insertion 5
Example: Semicolon Misplacement 5
Exercises 5
Exercise 1: Predict typeof Output 6
Exercise 2: Floating-Point Fix 6
Exercise 3: Equality Check 6
Multiple-Choice Questions 6
Question 1: 6
Question 2: 7
Question 3: 7
Best Practices 7

JavaScript is known for its quirks—unusual, sometimes unintuitive behaviors resulting from its
design and flexibility. This guide explains some of JavaScript's quirks with examples,
explanations, exercises, and quiz questions to help you understand and navigate them
effectively.

1. typeof Quirks

The typeof operator is used to determine the type of a variable, but it has some
inconsistencies.

Example: Type of null

console.log(typeof null); // Output: "object"

Explanation:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

2
 ● null is a primitive value but is incorrectly classified as "object" due to a bug in the
original JavaScript implementation.

Example: Type of NaN

console.log(typeof NaN); // Output: "number"
console.log(isNaN("hello")); // Output: true

Explanation:

● NaN (Not-a-Number) is technically of type number, and isNaN tries to coerce its
argument to a number before checking.

2. Loose Equality (==)

JavaScript’s loose equality (==) allows type coercion, leading to surprising results.

Example: Loose vs. Strict Equality

console.log(0 == false); // Output: true
console.log(0 === false); // Output: false
console.log("" == false); // Output: true

Explanation:

● 0 and "" are coerced to false when compared with false using ==.
● Strict equality (===) checks both type and value.

Exercise:

Predict the output:

console.log(null == undefined); // ?
console.log(null === undefined); // ?

Answer:

1. null == undefined: true (loose equality considers them equivalent).

2. null === undefined: false (strict equality checks type).

3. Global this

The value of this in the global scope depends on the environment.

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

3
Example: Global this in Browsers
console.log(this); // Output: Window object

Example: Global this in Node.js

console.log(this); // Output: {}

Explanation:

● In browsers, this refers to the global window object.

● In Node.js, this refers to the module.

4. Floating-Point Math

JavaScript uses IEEE 754 for numbers, which can lead to precision issues.

Example: Precision Errors

console.log(0.1 + 0.2); // Output: 0.30000000000000004

Explanation:

● Floating-point numbers are represented in binary, which can’t exactly represent some
decimal values.

Fix:
console.log(Number((0.1 + 0.2).toFixed(2))); // Output: 0.3

5. Adding Arrays and Objects

Adding arrays or objects can yield surprising results.

Example: Adding Arrays

console.log([] + []); // Output: ""
console.log([] + {}); // Output: "[object Object]"
console.log({} + []); // Output: 0

Explanation:

● [] + []: Both arrays are coerced to strings, resulting in an empty string.

● [] + {}: Array becomes an empty string, and object becomes "[object Object]".
● {} + []: Interpreted as an empty block and an empty array coerced to 0.

6. Function Scoping with var

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

4
Variables declared with var are function-scoped, not block-scoped.

Example: Scope of var

if (true) {
var x = 5;
}
console.log(x); // Output: 5

Explanation:

● var is scoped to the enclosing function or global scope, not the block.

7. Immutability of const

const creates immutable bindings, but the object it references is mutable.

Example: Mutable const Objects

const obj = { name: "Alice" };
obj.name = "Bob";
console.log(obj.name); // Output: "Bob"

Explanation:

● The reference to obj is immutable, but the object itself can be modified.

8. Automatic Semicolon Insertion

JavaScript automatically inserts semicolons, but it can lead to unexpected results.

Example: Semicolon Misplacement

return
{
name: "Alice";
}

Output:

● undefined, because JavaScript inserts a semicolon after return.

Exercises

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

5
Exercise 1: Predict typeof Output

What is the output of the following?

console.log(typeof undefined); // ?
console.log(typeof NaN); // ?
console.log(typeof function() {}); // ?

Answer:

1. "undefined"
2. "number"
3. "function"

Exercise 2: Floating-Point Fix

How can you fix the precision error in 0.1 + 0.2?

Solution:

console.log(Number((0.1 + 0.2).toFixed(2))); // Output: 0.3

Exercise 3: Equality Check

Predict the output:

console.log([] == false); // ?
console.log(![] == false); // ?

Answer:

1. true (empty array coerces to false in equality).

2. true (![] is false, and false == false).

Multiple-Choice Questions

Question 1:

What will the following code output?

console.log(typeof null);

1. "null"

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis

6
 2. "object"
3. "undefined"
4. "function"

Answer: 2. "object"

Question 2:

What will [] + {} evaluate to?

1. ""
2. "{}"
3. "[object Object]"
4. 0

Answer: 3. "[object Object]"

Question 3:

What is the value of this in the global scope of a browser?

1. window
2. document
3. {} (empty object)
4. null

Answer: 1. window

Best Practices

1. Use Strict Equality (===):

○ Avoid type coercion issues by preferring strict equality checks.
2. Avoid Implicit Coercion:
○ Be explicit when converting types using String(), Number(), or Boolean().
3. Use let and const:
○ Prefer let and const over var for block scoping.
4. Handle Floating-Point Numbers:
○ Use toFixed or libraries like math.js for accurate calculations.
5. Understand this:
○ Learn how this behaves in different contexts (e.g., arrow functions, methods).

Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis