Chapter 13: The Interview Gauntlet - Common Tricks and Gotchas
Type Coercion Mysteries
// The infamous equality comparisons console.log([] == ![]); // true (wat?!) // Explanation: // [] == ![] // [] == false (! converts [] to false) // "" == false ([] converts to "") // 0 == false ("" converts to 0) // true (0 == 0) console.log([] + []); // "" (empty string) console.log({} + []); // 0 (in some contexts) console.log([] + {}); // "[object Object]" console.log({} + {}); // "[object Object][object Object]" // Truthy/falsy gotchas console.log(Boolean([])); // true (empty array is truthy!) console.log(Boolean({})); // true (empty object is truthy!) console.log(Boolean("")); // false console.log(Boolean("0")); // true (string "0" is truthy!) console.log(Boolean(0)); // false console.log(Boolean(NaN)); // false // typeof surprises console.log(typeof null); // "object" (historical bug) console.log(typeof undefined); // "undefined" console.log(typeof []); // "object" console.log(typeof function(){}); // "function" console.log(typeof NaN); // "number"
The this Binding Puzzle
// Global context function globalFunction() { console.log(this); // Window (browser) or global (Node.js) in non-strict mode } // Object method const obj = { name: "Alice", greet: function() { console.log(this.name); // "Alice" // Nested function loses context function inner() { console.log(this.name); // undefined (this is global/undefined) } inner(); // Arrow function preserves context const arrowInner = () => { console.log(this.name); // "Alice" }; arrowInner(); } }; // Call, apply, bind function introduce(greeting, punctuation) { return `${greeting}, I'm ${this.name}${punctuation}`; } const person = { name: "Bob" }; console.log(introduce.call(person, "Hello", "!")); // "Hello, I'm Bob!" console.log(introduce.apply(person, ["Hi", "."])); // "Hi, I'm Bob." const boundIntroduce = introduce.bind(person, "Hey"); console.log(boundIntroduce("?")); // "Hey, I'm Bob?"
Event Loop and Microtask Queue
console.log("1"); setTimeout(() => console.log("2"), 0); Promise.resolve().then(() => console.log("3")); Promise.resolve().then(() => { console.log("4"); setTimeout(() => console.log("5"), 0); }); setTimeout(() => console.log("6"), 0); console.log("7"); // Output: 1, 7, 3, 4, 2, 6, 5 // Explanation: // 1. Synchronous code runs first: 1, 7 // 2. Microtasks (Promises) run next: 3, 4 // 3. Macrotasks (setTimeout) run last: 2, 6, 5
Variable Hoisting Edge Cases
// Function vs variable hoisting precedence console.log(typeof foo); // "function" var foo = "I'm a variable"; function foo() { return "I'm a function"; } console.log(typeof foo); // "string" // Explanation: Function declarations are hoisted before variable declarations // But variable assignments happen in order // Temporal Dead Zone gotcha function tdz() { console.log(typeof x); // "undefined" - x doesn't exist yet if (true) { console.log(typeof x); // ReferenceError - x is in TDZ here let x = "I'm block scoped"; } }
Closure Memory Leaks
// Memory leak example function createLeak() { const hugeArray = new Array(1000000).fill("data"); return function() { // This closure keeps the entire hugeArray in memory // even though it doesn't use it return "I'm a small function"; }; } // Better approach function createNoLeak() { const hugeArray = new Array(1000000).fill("data"); const summary = hugeArray.length; // Extract what you need return function() { return `Array had ${summary} elements`; }; }
Classic Interview Questions
Question 1: What's the output?
for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } // Output: 3, 3, 3 (after 1 second) // Why: var is function-scoped, closures capture the same variable // Fixed versions: // With let for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 1000); } // Output: 0, 1, 2 // With IIFE for (var i = 0; i < 3; i++) { (function(j) { setTimeout(() => console.log(j), 1000); })(i); } // Output: 0, 1, 2
Question 2: Object property access
const obj = { a: 1, b: 2, c: { a: 3, b: 4 } }; const { a, b, c: { a: nestedA } } = obj; console.log(a, b, nestedA); // 1, 2, 3 // What happens here? const key = 'a'; console.log(obj.key); // undefined (looks for literal 'key' property) console.log(obj[key]); // 1 (evaluates variable)
Question 3: Function behavior
function test() { console.log(arguments.length); console.log(typeof arguments); console.log(Array.isArray(arguments)); } test(1, 2, 3, 4, 5); // Output: 5, "object", false // arguments is array-like but not a real array // Modern equivalent with rest parameters function modernTest(...args) { console.log(args.length); console.log(typeof args); console.log(Array.isArray(args)); } modernTest(1, 2, 3, 4, 5); // Output: 5, "object", true
Question 4: Scope and closures
let x = 1; function outer() { let x = 2; function inner() { console.log(x); // What does this log? } return inner; } const fn = outer(); fn(); // Logs: 2 (lexical scope, not dynamic scope) // Even after outer() finished, inner() remembers its scope
Tricky Array Methods
// map vs forEach return behavior const numbers = [1, 2, 3]; // forEach returns undefined const result1 = numbers.forEach(n => n * 2); console.log(result1); // undefined // map returns new array const result2 = numbers.map(n => n * 2); console.log(result2); // [2, 4, 6] // sort() mutates original array and returns it const arr = [3, 1, 4, 1, 5]; const sorted = arr.sort(); console.log(arr); // [1, 1, 3, 4, 5] - mutated! console.log(sorted); // [1, 1, 3, 4, 5] - same reference // Gotcha: sort() converts to strings by default const nums = [1, 10, 2, 20]; nums.sort(); console.log(nums); // [1, 10, 2, 20] - not [1, 2, 10, 20]! // Fix with compare function nums.sort((a, b) => a - b); console.log(nums); // [1, 2, 10, 20]
Object Reference Gotchas
const a = { value: 1 }; const b = a; const c = { value: 1 }; console.log(a === b); // true (same reference) console.log(a === c); // false (different references) console.log(a.value === c.value); // true (same values) // Mutation through references b.value = 2; console.log(a.value); // 2 (a and b point to same object) // Object.assign creates shallow copy const original = { a: 1, nested: { b: 2 } }; const copy = Object.assign({}, original); copy.a = 10; copy.nested.b = 20; console.log(original.a); // 1 (not affected) console.log(original.nested.b); // 20 (affected! shallow copy)
Promise Chain Gotchas
// What gets logged? Promise.resolve(1) .then(val => { console.log(val); // 1 return val + 1; }) .then(val => { console.log(val); // 2 // No return statement! }) .then(val => { console.log(val); // undefined }); // Error handling gotcha Promise.reject("error") .then(val => console.log("Success:", val)) .catch(err => { console.log("Caught:", err); // "Caught: error" return "recovered"; }) .then(val => { console.log("After catch:", val); // "After catch: recovered" });
Advanced Gotchas
parseInt surprises
console.log(parseInt("08")); // 8 console.log(parseInt("08", 10)); // 8 console.log(parseInt("08", 8)); // 0 (invalid octal) ["1", "2", "3"].map(parseInt); // What do you think this returns? // [1, NaN, NaN] // Because: parseInt(string, radix) // "1", 0 -> parseInt("1", 0) -> 1 // "2", 1 -> parseInt("2", 1) -> NaN (radix 1 is invalid) // "3", 2 -> parseInt("3", 2) -> NaN (3 is not valid in base 2) // Fix: ["1", "2", "3"].map(str => parseInt(str, 10)); // [1, 2, 3]
Date constructor gotchas
// Month is 0-indexed! console.log(new Date(2023, 1, 15)); // February 15, 2023 (not January!) // Different behavior for Date.parse vs constructor console.log(new Date("2023-01-15")); // Local timezone console.log(new Date("2023-01-15T00:00:00")); // Local timezone console.log(new Date("2023-01-15T00:00:00Z")); // UTC
Number precision issues
console.log(0.1 + 0.2); // 0.30000000000000004 console.log(0.1 + 0.2 === 0.3); // false // Fix with proper comparison function isEqual(a, b, tolerance = Number.EPSILON) { return Math.abs(a - b) < tolerance; } console.log(isEqual(0.1 + 0.2, 0.3)); // true
Next Chapter: Chapter 14: Modern JavaScript Features (ES6+)
Previous Chapter: Chapter 12: Advanced Concepts and Modern Features
Table of Contents: JavaScript Guide