Predict the Output: 10 JavaScript Prototypes, 'this' Binding, and Coercion Questions Every Developer Should Practise

In front-end technical screenings and pair-programming rounds, output prediction questions are among the most common formats for evaluating a candidate's core JavaScript proficiency. Rather than asking for textbook definitions, interviewers present short code snippets to evaluate whether an engineer understands runtime execution contexts, prototype delegation, and type coercion algorithms.

While modern frameworks abstract away raw DOM and state manipulation, production bugs often trace back to foundational mechanics: losing this in callback handlers, mutating shared prototype references, or misunderstanding abstract equality (==) and logical operator short-circuiting.

This guide walks through 10 high-frequency output prediction problems covering this binding, prototypal inheritance, and type coercion for developers with 0–5 years of experience.

---

Question Index

---

Q1. Method Invocation vs Detached Function Call

Difficulty: Junior-Mid
Target Concept: Implicit binding, lost context in detached references, and arrow function lexical scoping.

Code Snippet

const user = {
  name: 'Alice',
  regularGreet() {
    console.log('Regular:', this.name);
  },
  arrowGreet: () => {
    console.log('Arrow:', typeof this !== 'undefined' ? this.name : undefined);
  },
};

user.regularGreet();

const detached = user.regularGreet;
detached();

user.arrowGreet();

What is the exact console output in a standard non-strict browser environment?

Predicted Output

Regular: Alice
Regular: undefined
Arrow: undefined

Step-by-Step Execution Trace

1. user.regularGreet(): The function is called as an object method with user preceding the dot. Implicit binding sets this to user. Logs: Regular: Alice.
2. detached = user.regularGreet; detached(): The function reference is assigned to a standalone variable. Invoking detached() without a receiver defaults this to the global object (window). Since window.name is undefined, this.name evaluates to undefined. Logs: Regular: undefined.
3. user.arrowGreet(): Arrow functions do not bind their own this. They capture this lexically from their enclosing scope at declaration time. Because user is defined in the global scope (an object literal does not create a local execution context), arrowGreet inherits global this. Logs: Arrow: undefined.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Regular functions determine this dynamically at call time based on the call-site. Calling user.regularGreet() binds this to user, but detaching the reference to a variable executes it standalone, resetting this to the global object. Arrow functions ignore call-site binding and inherit this lexically from their enclosing scope."
• Common Mistake: Assuming arrow functions declared inside object literals bind this to the object. Object literals do not create an execution context."

Q2. Explicit and Hard Binding with bind()

Difficulty: Mid
Target Concept: Function.prototype.bind internal slot immutability and chained binding.

Code Snippet

function display() {
  console.log(this.brand);
}

const laptop = { brand: 'Apple' };
const tablet = { brand: 'Google' };
const phone = { brand: 'Samsung' };

const boundLaptop = display.bind(laptop);
boundLaptop();

const reBound = boundLaptop.bind(tablet);
reBound();

boundLaptop.call(phone);

What is the exact console output?

Predicted Output

Apple
Apple
Apple

Step-by-Step Execution Trace

1. const boundLaptop = display.bind(laptop): Calling bind() returns an exotic bound function wrapper whose internal [[BoundThis]] slot is permanently set to laptop.
2. boundLaptop(): Executes display with this locked to laptop. Logs: Apple.
3. const reBound = boundLaptop.bind(tablet): Calling bind() on an already-bound function creates an outer wrapper around the existing bound function. When invoked, the outer wrapper calls the inner bound function, which still executes with laptop. Subsequent bind calls cannot alter the initial [[BoundThis]] target. Logs: Apple.
4. boundLaptop.call(phone): Bound functions override call() and apply() behavior. The bound function wrapper ignores the thisArg passed to call(phone). Logs: Apple.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Once a function is bound with .bind(), its this target is permanently locked in the internal [[BoundThis]] slot. Subsequent calls to .bind(), .call(), or .apply() can pass new arguments, but cannot re-bind or override the original this context."
• Common Mistake: Believing that chained .bind() calls re-bind the function to the latest argument, or that explicit .call() overrides a previous .bind()."

Q3. The new Operator with Explicit Returns

Difficulty: Mid
Target Concept: Constructor return value mechanics, object vs primitive return overrides.

Code Snippet

function Vehicle(name) {
  this.name = name;
  return 'Automobile';
}

function Device(name) {
  this.name = name;
  return { customType: 'Hardware' };
}

const v = new Vehicle('Sedan');
const d = new Device('Phone');

console.log(v.name);
console.log(d.name);
console.log(d.customType);

What is the exact console output?

Predicted Output

Sedan
undefined
Hardware

Step-by-Step Execution Trace

1. new Vehicle('Sedan'):
   • A fresh object is created, inheriting from Vehicle.prototype.
   • this.name = 'Sedan' sets the property on the new object.
   • The constructor executes return 'Automobile'.
   • Under the ECMAScript specification for [[Construct]], returning a primitive (like a string, number, or boolean) is ignored. The operator returns the newly constructed this instance.
   • v.name logs: Sedan.
2. new Device('Phone'):
   • A fresh object is created, and this.name = 'Phone' executes.
   • The constructor executes return { customType: 'Hardware' }.
   • Because the return value is an object (non-non-primitive), the engine discards the this instance and returns the explicit object instead.
   • d is { customType: 'Hardware' }. d.name is undefined, and d.customType is Hardware.

Spoken Explanation & Common Mistakes

• Spoken Summary: "When invoking a function with new, returning a primitive value is completely ignored by the engine, returning the newly created this instance. If the constructor returns an explicit object, that object overrides and replaces the instance."
• Common Mistake: Assuming any return value overrides new, overlooking the critical distinction between primitive and object returns."

Q4. Prototypal Property Shadowing with Object.create

Difficulty: Mid
Target Concept: Prototype delegation, property shadowing via assignment, and shared object references.

Code Snippet

const proto = {
  count: 0,
  tags: ['base'],
  increment() {
    this.count++;
  }
};

const obj1 = Object.create(proto);
const obj2 = Object.create(proto);

obj1.increment();
obj1.tags.push('frontend');

console.log(obj1.count);
console.log(obj2.count);
console.log(proto.count);

console.log(obj1.tags.join(','));
console.log(obj2.tags.join(','));

What is the exact console output?

Predicted Output

1
0
0
base,frontend
base,frontend

Step-by-Step Execution Trace

1. Object.create(proto): Creates obj1 and obj2 as empty objects whose prototype links to proto.
2. obj1.increment(): Executes proto.increment with this === obj1.
   • this.count++ expands to this.count = this.count + 1.
   • Reading this.count traverses the prototype chain and reads proto.count (0).
   • Adding 0 + 1 assigns 1 to this.count. In JavaScript, property assignment creates an own property on the receiver (obj1).
   • obj1 now owns count: 1, shadowing proto.count. proto.count remains 0.
   • obj2.count delegates to proto.count and logs 0.
3. obj1.tags.push('frontend'):
   • Reading obj1.tags traverses to proto.tags.
   • .push() mutates the existing array reference in place on proto. No assignment occurs on obj1.
   • Both obj1.tags and obj2.tags reference the same shared array on proto.

Spoken Explanation & Common Mistakes

• Spoken Summary: "this.count++ performs an assignment (this.count = this.count + 1), which creates an own property on obj1 that shadows the prototype value without mutating it. In contrast, tags.push() mutates the shared array on the prototype in place, affecting all instances."
• Common Mistake: Expecting obj1.count++ to mutate proto.count, or expecting tags.push() to create an isolated array for obj1."

Q5. Class Inheritance and Field Initializer Order

Difficulty: Mid-Senior
Target Concept: ES6 class field initialization order, super() execution timing, and method polymorphism.

Code Snippet

class Parent {
  constructor() {
    this.name = 'Parent';
    this.printName();
  }

  printName() {
    console.log('Parent print:', this.name);
  }
}

class Child extends Parent {
  name = 'Child';

  printName() {
    console.log('Child print:', this.name);
  }
}

const inst = new Child();
console.log('Final:', inst.name);

What is the exact console output?

Predicted Output

Child print: Parent
Final: Child

Step-by-Step Execution Trace

1. new Child() begins instantiation. In derived classes, super() must run before child class field initializers execute.
2. The Parent constructor executes:
   • this.name = 'Parent' sets property name on the instance.
   • this.printName() is called.
3. Method lookup: Because the instance being constructed is a Child, polymorphic lookup finds Child.prototype.printName (which overrides Parent.prototype.printName).
4. Child.prototype.printName runs: It accesses this.name. At this point, child field initializers have not executed yet, but Parent constructor already assigned this.name = 'Parent'. Logs: Child print: Parent.
5. super() completes: Now the child class field initializers execute. name = 'Child' assigns 'Child' to this.name, overwriting the previous value.
6. console.log('Final:', inst.name) logs Final: Child.

Spoken Explanation & Common Mistakes

• Spoken Summary: "In class inheritance, super() runs the parent constructor first, which sets this.name = 'Parent'. Calling printName() executes the overridden child method while the instance still holds the parent's property value. Once super() finishes, the child's class field initializer name = 'Child' runs and overwrites this.name."
• Common Mistake: Assuming this.name is undefined inside printName(), or assuming child class fields initialize before the parent constructor runs."

Q6. Abstract Equality (==) and ToPrimitive Algorithm

Difficulty: Mid
Target Concept: The ToPrimitive conversion algorithm, valueOf vs toString priority, and equality coercion.

Code Snippet

const obj = {
  valueOf() {
    return 10;
  },
  toString() {
    return 'hello';
  }
};

console.log(obj + 5);
console.log(obj + ' world');
console.log(String(obj));
console.log(`${obj}`);

What is the exact console output?

Predicted Output

15
10 world
hello
hello

Step-by-Step Execution Trace

1. obj + 5: The binary + operator invokes the ECMAScript ToPrimitive algorithm with hint "default".
   • For non-Date objects, hint "default" behaves as hint "number".
   • The engine checks for valueOf(). Since valueOf() returns primitive 10, that value is used.
   • 10 + 5 evaluates to numeric addition 15. Logs: 15.
2. obj + ' world': The binary + operator again calls ToPrimitive with hint "default".
   • valueOf() returns 10.
   • Now the expression is 10 + ' world'. Because one operand is a string, binary + coerces both to strings and concatenates. Logs: 10 world.
3. String(obj): Explicit String() conversion calls ToPrimitive with hint "string".
   • For hint "string", the engine calls toString() first.
   • toString() returns 'hello'. Logs: hello.
4. ${obj}: Template literal interpolation calls ToPrimitive with hint "string", executing toString(). Logs: hello.

Spoken Explanation & Common Mistakes

• Spoken Summary: "The binary + operator calls ToPrimitive with hint 'default', which prioritizes valueOf() over toString(). In contrast, string coercion (like String() or template literals) calls ToPrimitive with hint 'string', prioritizing toString()."
• Common Mistake: Assuming string concatenation (obj + ' world') invokes toString() on obj directly. Binary + always calls ToPrimitive(default) first, invoking valueOf() before checking operand types."

Q7. Abstract Equality (==) Corner Cases

Difficulty: Mid
Target Concept: ECMA-262 §7.2.14 Abstract Equality Comparison rules for booleans, arrays, and numbers.

Code Snippet

console.log([] == ![]);
console.log('' == 0);
console.log(null == undefined);
console.log([0] == 0);
console.log(false == '0');

What is the exact console output?

Predicted Output

true
true
true
true
true

Step-by-Step Execution Trace

1. [] == ![]:
   • ![]: The unary logical NOT operator evaluates first. In JavaScript, all objects (including empty arrays) are truthy. Therefore, ![] evaluates to boolean false.
   • Expression becomes [] == false.
   • When comparing an object to a boolean, the boolean is coerced to a number: false -> 0. Now [] == 0.
   • When comparing an object to a number, the object undergoes ToPrimitive: [].toString() produces "". Now "" == 0.
   • When comparing string to number, string coerces to number: Number("") -> 0.
   • Finally, 0 == 0 evaluates to true.
2. '' == 0: String '' coerces to Number(''), which is 0. 0 == 0 evaluates to true.
3. null == undefined: Special rule in the abstract equality specification: null and undefined equal each other and nothing else (except themselves). Evaluates to true.
4. [0] == 0: [0].toString() evaluates to '0'. '0' == 0 coerces '0' to 0. 0 == 0 evaluates to true.
5. false == '0': Boolean false coerces to 0. String '0' coerces to 0. 0 == 0 evaluates to true.

Spoken Explanation & Common Mistakes

• Spoken Summary: "[] == ![] is true because ![] evaluates to boolean false first. Then abstract equality coerces both sides through ToNumber, turning the array into an empty string \"\" and then into 0, while false becomes 0. This is why strict equality (===) is standard production practice."
• Common Mistake: Thinking [] == ![] compares truthiness of both sides. == does not evaluate truthiness; it executes the abstract equality coercion algorithm."

Q8. Unary + and Binary Addition with Primitives and Objects

Difficulty: Junior-Mid
Target Concept: Operator overloading, string concatenation vs numeric coercion, and object stringification.

Code Snippet

console.log('5' - 3);
console.log('5' + 3);
console.log(1 + 2 + '3');
console.log(+true);
console.log(+[]);
console.log(Number({}));
console.log([] + {});

What is the exact console output?

Predicted Output

2
53
33
1
0
NaN
[object Object]

Step-by-Step Execution Trace

1. '5' - 3: The subtraction operator - only exists for numbers. It coerces '5' to number 5. 5 - 3 = 2. Logs: 2.
2. '5' + 3: The addition operator + is overloaded. Because one operand is a string, it performs string concatenation. 3 coerces to '3'. Logs: 53.
3. 1 + 2 + '3': Left-to-right operator associativity:
   • First, 1 + 2 evaluates to numeric 3.
   • Then, 3 + '3' performs string concatenation, resulting in '33'. Logs: 33.
4. +true: Unary + coerces its operand to a number. Number(true) is 1. Logs: 1.
5. +[]: Unary + calls ToPrimitive([]) -> "" -> Number("") -> 0. Logs: 0.
6. Number({}): ToPrimitive({}) -> "[object Object]" -> Number("[object Object]") -> NaN. Logs: NaN.
7. [] + {}: Binary + coerces both to primitives: [].toString() is "", and {}.toString() is "[object Object]". Concatenating "" + "[object Object]" yields "[object Object]". Logs: [object Object].

Spoken Explanation & Common Mistakes

• Spoken Summary: "The subtraction operator - strictly coerces operands to numbers, while binary + defaults to concatenation if either operand is a string. When coercing arrays and objects, [].toString() yields an empty string, while plain objects yield '[object Object]'."
• Common Mistake: Expecting '5' - 3 to produce '53' or NaN, forgetting that minus has no string concatenation overload."

Q9. Short-Circuit Evaluation and Nullish Coalescing (??)

Difficulty: Junior
Target Concept: Falsy values (0, "", false, NaN) in logical OR (||) vs nullish values (null, undefined) in ??.

Code Snippet

console.log(0 || 'default');
console.log(0 ?? 'default');

console.log('' || 'fallback');
console.log('' ?? 'fallback');

console.log(null || undefined || 'found');
console.log(null ?? undefined ?? 'found');

What is the exact console output?

Predicted Output

default
0
fallback

found
found

Step-by-Step Execution Trace

1. 0 || 'default': Logical OR (||) checks whether the left-hand operand is truthy. In JavaScript, 0 is a falsy value. Since 0 is falsy, || short-circuits to the right-hand operand 'default'. Logs: default.
2. 0 ?? 'default': Nullish coalescing (??) checks strictly whether the left-hand operand is nullish (null or undefined). Since 0 is a defined number (not null or undefined), ?? returns 0. Logs: 0.
3. '' || 'fallback': An empty string '' is falsy. || returns the fallback 'fallback'. Logs: fallback.
4. '' ?? 'fallback': An empty string is not null or undefined. ?? returns ''. Logs an empty line: "".
5. null || undefined || 'found': null and undefined are both falsy. Evaluates through to 'found'. Logs: found.
6. null ?? undefined ?? 'found': null and undefined are both nullish. Evaluates through to 'found'. Logs: found.

Spoken Explanation & Common Mistakes

• Spoken Summary: "Logical OR (||) falls back on any falsy value (0, \"\", false, NaN, null, undefined). The nullish coalescing operator (??) falls back strictly on null and undefined, preserving valid numerical counts like 0 and empty text strings \"\"."
• Common Mistake: Using || for default configuration values when 0 or false is a legitimate, intended value (e.g., timeout = config.timeout || 5000 overrides a valid 0 timeout)."

Q10. Prototype Chain Enumeration vs Object.hasOwn

Difficulty: Mid
Target Concept: Own properties vs inherited prototype properties, the in operator, and Object.hasOwn.

Code Snippet

const baseObj = { role: 'user' };
const userDict = Object.create(baseObj);
userDict.name = 'Alex';

console.log('name' in userDict);
console.log('role' in userDict);
console.log(Object.hasOwn(userDict, 'role'));
console.log(Object.keys(userDict));

What is the exact console output?

Predicted Output

true
true
false
[ 'name' ]

Step-by-Step Execution Trace

1. Object.create(baseObj): userDict is created with its prototype set to baseObj.
2. userDict.name = 'Alex': Assigns an own property name directly to userDict.
3. 'name' in userDict: The in operator checks whether the property exists on the object or anywhere along its prototype chain. Since name is an own property on userDict, it evaluates to true. Logs: true.
4. 'role' in userDict: role does not exist directly on userDict, so the in operator traverses the prototype chain to baseObj. Finding role on baseObj, it evaluates to true. Logs: true.
5. Object.hasOwn(userDict, 'role'): Object.hasOwn() (modern ES2022 replacement for hasOwnProperty) checks strictly whether the property is an own property of userDict. Because role is inherited from baseObj, it evaluates to false. Logs: false.
6. Object.keys(userDict): Returns an array of an object's own enumerable string-keyed property names, ignoring inherited prototype properties. Logs: [ 'name' ].

Spoken Explanation & Common Mistakes

• Spoken Summary: "The in operator checks both own properties and inherited prototype properties. Object.hasOwn() and Object.keys() check strictly for own properties on the target instance, ignoring inherited prototype chains."
• Common Mistake: Using 'prop' in obj to check if an object holds its own data, which accidentally returns true for inherited properties like toString or prototype defaults."

---

Front-End Interview Preparation Checklist

Before your next front-end technical interview, verify that you can confidently explain these core JavaScript concepts:

• Call-site this Resolution: Identify whether a function is called as a method, standalone, or with explicit binding.
• Lexical this in Arrow Functions: Explain why arrow functions ignore call/apply/bind and inherit surrounding context.
• Hard Binding with bind(): Understand why the internal [[BoundThis]] slot cannot be overwritten by subsequent binds.
• Constructor Returns: Differentiate how returning a primitive vs returning an object impacts the new operator.
• Property Shadowing: Explain why property assignment (this.prop = val) creates an own property instead of mutating prototypes.
• Class Field Initializers: Understand that super() runs before child class field initializers execute.
• ToPrimitive Algorithm: Trace valueOf vs toString priority during binary addition and template literals.
• Abstract Equality Coercion: Walk through ECMA-262 type conversion steps for [] == ![] and '' == 0.
• || vs ?? Operators: Contrast falsy value fallback with strict nullish (null/undefined) coalescing.
• Prototype Reflection: Differentiate the in operator from Object.hasOwn and Object.keys.

---

Conclusion

Output prediction interview questions evaluate whether an engineer truly understands JavaScript as a runtime system rather than relying on guesswork. By mastering execution contexts, prototype delegation, and type coercion mechanics, you can confidently explain not just what code logs, but the exact ECMAScript rules that govern its behavior.

---

Sources

• MDN Web Docs: this operator
• MDN Web Docs: Inheritance and the prototype chain
• MDN Web Docs: Equality comparisons and sameness
• MDN Web Docs: Object.prototype
• MDN Web Docs: The new operator
• MDN Web Docs: Classes