React Native Interview Handbook — Part 8 of 10: Code Output Challenges

This is Part 8 of 10, a bonus practice article with 70 code-output challenges. Each challenge asks you to predict the result before revealing the answer and reasoning.

Complete series

This Dev.to series has five core handbook articles plus five focused practice extras. Open the series page to move through the complete reading order:

1. Part 1: JavaScript — core handbook, questions 1–120
2. Part 2: React — core handbook, questions 121–220
3. Part 3: React Native — core handbook, questions 221–420
4. Part 4: Performance & Architecture — core handbook, questions 421–560
5. Part 5: Senior & System Design — core handbook, questions 561–719
6. Part 6: Output-Based JavaScript Practice — bonus practice article
7. Part 7: Coding Interview Practice — bonus practice article
8. Part 8: Code Output Challenges — bonus practice article
9. Part 9: Current React Native Interview Questions — new high-frequency practice article
10. Part 10: Project & Production Interviews — senior project ownership and real-production practice

How to use this challenge set

Read the code, state the exact output or error, then explain the language rule. Do not run the snippet until you have committed to an answer. For React Native interviews, connect the JavaScript behavior to rendering, state updates, list handling, or the JavaScript thread when relevant.

Skills tested

• Hoisting, scope, closures, and this
• Arrays, conditions, references, object behavior, and loose versus strict equality
• Promises, timers, async/await, and microtasks
• Common JavaScript patterns used in React and React Native interviews

Code output challenges

Challenge 1. Block-scoped counter

Predict the exact output before opening the answer.

let total = 0;
for (let i = 0; i < 3; i++) {
  total += i;
}
console.log(total);

Answer and explanation

Expected output: 3

Why: The loop adds 0, 1, and 2.

Challenge 2. var callback loop

Predict the exact output before opening the answer.

for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

Answer and explanation

Expected output: 3, 3, 3

Why: var creates one shared function-scoped binding.

Challenge 3. let callback loop

Predict the exact output before opening the answer.

for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}

Answer and explanation

Expected output: 0, 1, 2

Why: let creates a fresh binding for each iteration.

Challenge 4. Mutation through an array reference

Predict the exact output before opening the answer.

const a = [1, 2];
const b = a;
b.push(3);
console.log(a.length);

Answer and explanation

Expected output: 3

Why: a and b reference the same array.

Challenge 5. Shallow object copy

Predict the exact output before opening the answer.

const a = { user: { name: 'A' } };
const b = { ...a };
b.user.name = 'B';
console.log(a.user.name);

Answer and explanation

Expected output: B

Why: Object spread copies only the outer object.

Challenge 6. Array map with a missing return

Predict the exact output before opening the answer.

console.log(
  [1, 2].map((x) => {
    x * 2;
  }),
);

Answer and explanation

Expected output: [undefined, undefined]

Why: A block-bodied arrow function needs an explicit return.

Challenge 7. reduce accumulator

Predict the exact output before opening the answer.

console.log([1, 2, 3].reduce((sum, x) => sum + x, 0));

Answer and explanation

Expected output: 6

Why: The accumulator starts at zero and receives every value.

Challenge 8. Default numeric sort

Predict the exact output before opening the answer.

console.log([10, 2, 1].sort());

Answer and explanation

Expected output: [1, 10, 2]

Why: Without a comparator, values are sorted as strings.

Challenge 9. Sparse array hole

Predict the exact output before opening the answer.

const a = [1, , 3];
console.log(a.length, 1 in a);

Answer and explanation

Expected output: 3, false

Why: The missing element is a hole, but array length remains three.

Challenge 10. filter(Boolean)

Predict the exact output before opening the answer.

console.log([0, 1, '', 2, null].filter(Boolean));

Answer and explanation

Expected output: [1, 2]

Why: Boolean removes every falsy value.

Challenge 11. Loose versus strict equality

Predict the exact output before opening the answer.

console.log(0 == false, 0 === false);

Answer and explanation

Expected output: true, false

Why: Loose equality coerces types; strict equality does not.

Challenge 12. Nullish coalescing

Predict the exact output before opening the answer.

console.log(0 || 10, 0 ?? 10);

Answer and explanation

Expected output: 10, 0

Why: || falls back for falsy values, while ?? only falls back for nullish values.

Challenge 13. Optional chaining

Predict the exact output before opening the answer.

const user = null;
console.log(user?.profile?.name ?? 'Guest');

Answer and explanation

Expected output: Guest

Why: Optional chaining returns undefined, then ?? supplies the fallback.

Challenge 14. Closure counter

Predict the exact output before opening the answer.

function make() {
  let n = 0;
  return () => ++n;
}
const next = make();
console.log(next(), next());

Answer and explanation

Expected output: 1, 2

Why: The returned function retains its lexical n binding.

Challenge 15. Arrow lexical this

Predict the exact output before opening the answer.

const user = {
  name: 'A',
  show() {
    return (() => this.name)();
  },
};
console.log(user.show());

Answer and explanation

Expected output: A

Why: The arrow captures this from the regular show method.

Challenge 16. Bound function receiver

Predict the exact output before opening the answer.

function show() {
  return this.name;
}
const f = show.bind({ name: 'A' });
console.log(f());

Answer and explanation

Expected output: A

Why: bind creates a function with a fixed receiver.

Challenge 17. Promise before timer

Predict the exact output before opening the answer.

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

Answer and explanation

Expected output: A, D, C, B

Why: Synchronous work runs first, then microtasks, then timer tasks.

Challenge 18. await continuation

Predict the exact output before opening the answer.

async function run() {
  console.log(1);
  await 0;
  console.log(2);
}
run();
console.log(3);

Answer and explanation

Expected output: 1, 3, 2

Why: Code after await continues in a microtask.

Challenge 19. Promise error recovery

Predict the exact output before opening the answer.

Promise.reject('x')
  .catch(() => 2)
  .then(console.log);

Answer and explanation

Expected output: 2

Why: Returning from catch fulfills the next promise.

Challenge 20. Async map result

Predict the exact output before opening the answer.

const x = [1, 2].map(async (n) => n * 2);
console.log(x[0] instanceof Promise);

Answer and explanation

Expected output: true

Why: An async callback always returns a Promise.

Challenge 21. Destructuring defaults

Predict the exact output before opening the answer.

const [a = 1, b = 2] = [undefined, null];
console.log(a, b);

Answer and explanation

Expected output: 1, null

Why: Defaults apply to undefined, not null.

Challenge 22. Object key coercion

Predict the exact output before opening the answer.

const o = {},
  a = {},
  b = {};
o[a] = 'one';
o[b] = 'two';
console.log(o[a]);

Answer and explanation

Expected output: two

Why: Plain-object keys are coerced to the same string.

Challenge 23. Prototype lookup

Predict the exact output before opening the answer.

const parent = { role: 'admin' };
const user = Object.create(parent);
console.log(user.role);

Answer and explanation

Expected output: admin

Why: Property lookup follows the prototype chain.

Challenge 24. Delete reveals prototype

Predict the exact output before opening the answer.

const p = { x: 1 },
  o = Object.create(p);
o.x = 2;
delete o.x;
console.log(o.x);

Answer and explanation

Expected output: 1

Why: Deleting the own property reveals the inherited one.

Challenge 25. Object.freeze is shallow

Predict the exact output before opening the answer.

const o = Object.freeze({ x: { n: 1 } });
o.x.n = 2;
console.log(o.x.n);

Answer and explanation

Expected output: 2

Why: The nested object is not frozen.

Challenge 26. React-style direct updates

Predict the exact output before opening the answer.

let count = 0;
const setCount = (v) => {
  count = v;
};
setCount(count + 1);
setCount(count + 1);
console.log(count);

Answer and explanation

Expected output: 2

Why: This plain JavaScript model evaluates each update immediately; React batching differs, so discuss that distinction in an interview.

Challenge 27. Debounce timer replacement

Predict the exact output before opening the answer.

let id;
const debounce = (f) => (x) => {
  clearTimeout(id);
  id = setTimeout(() => f(x), 0);
};
const f = debounce(console.log);
f(1);
f(2);

Answer and explanation

Expected output: 2

Why: The second call clears the first pending timer.

Challenge 28. Promise.all result order

Predict the exact output before opening the answer.

Promise.all([Promise.resolve(2), 1]).then(console.log);

Answer and explanation

Expected output: [2, 1]

Why: Promise.all preserves input order after resolving values.

Challenge 29. Function hoisting

Predict the exact output before opening the answer.

console.log(add(1, 2));
function add(a, b) {
  return a + b;
}

Answer and explanation

Expected output: 3

Why: Function declarations are initialized during scope creation.

Challenge 30. JSON clone limitation

Predict the exact output before opening the answer.

const a = { x: undefined };
const b = JSON.parse(JSON.stringify(a));
console.log('x' in b);

Answer and explanation

Expected output: false

Why: JSON serialization drops undefined object properties.

Hoisting, equality, and coercion challenges

These 40 additional challenges focus on the JavaScript traps frequently used in interview rounds: hoisting, scope, ==, ===, arrays, objects, coercion, and reference identity.

Hoisting and scope challenges

🟢 Beginner

Challenge 31. Hoisted var value

Predict the exact output or error before opening the answer.

console.log(score);
var score = 10;

Answer and explanation

Expected output: undefined

Why: var declarations are initialized as undefined before execution; the assignment happens later.

Challenge 32. Temporal Dead Zone with let

Predict the exact output or error before opening the answer.

console.log(score);
let score = 10;

Answer and explanation

Expected output: ReferenceError

Why: let exists in the Temporal Dead Zone until its declaration runs.

Challenge 33. Function declaration hoisting

Predict the exact output or error before opening the answer.

show();

function show() {
  console.log('ready');
}

Answer and explanation

Expected output: ready

Why: Function declarations are initialized with their function body during scope creation.

Challenge 34. Function expression hoisting

Predict the exact output or error before opening the answer.

show();

var show = function () {
  console.log('ready');
};

Answer and explanation

Expected output: TypeError

Why: Only show is hoisted as undefined; it is not callable before assignment.

Challenge 35. Local var shadows outer state

Predict the exact output or error before opening the answer.

var value = 'outer';

function printValue() {
  console.log(value);
  var value = 'inner';
}

printValue();

Answer and explanation

Expected output: undefined

Why: The local var value is hoisted and shadows the outer variable.

Challenge 36. Block scope with const

Predict the exact output or error before opening the answer.

{
  const token = 'secret';
}

console.log(typeof token);

Answer and explanation

Expected output: undefined

Why: const is block-scoped; typeof on an undeclared name returns undefined.

Challenge 37. Parameter and var binding

Predict the exact output or error before opening the answer.

function update(value) {
  console.log(value);
  var value = 'new';
  console.log(value);
}

update('old');

Answer and explanation

Expected output: old, then new

Why: A parameter and a same-named var share one function-scoped binding.

🟡 Intermediate

Challenge 38. Default parameter self-reference

Predict the exact output or error before opening the answer.

let value = 1;

function read(value = value) {
  return value;
}

console.log(read());

Answer and explanation

Expected output: ReferenceError

Why: The parameter binding shadows the outer name while it is still uninitialized.

Challenge 39. Class declaration timing

Predict the exact output or error before opening the answer.

const user = new User();

class User {}

Answer and explanation

Expected output: ReferenceError

Why: Classes are not usable before their declaration is evaluated.

Challenge 40. Named function expression scope

Predict the exact output or error before opening the answer.

const run = function internal() {
  return typeof internal;
};

console.log(run());
console.log(typeof internal);

Answer and explanation

Expected output: function, then undefined

Why: The expression name is available inside the function body, not outside it.

Challenge 41. var leaks from an if block

Predict the exact output or error before opening the answer.

if (true) {
  var message = 'visible';
}

console.log(message);

Answer and explanation

Expected output: visible

Why: var has function scope rather than block scope.

Challenge 42. let does not leak from an if block

Predict the exact output or error before opening the answer.

if (true) {
  let message = 'hidden';
}

console.log(typeof message);

Answer and explanation

Expected output: undefined

Why: let remains inside the block.

Challenge 43. Nested shadowing

Predict the exact output or error before opening the answer.

let count = 1;

{
  let count = 2;
  console.log(count);
}

console.log(count);

Answer and explanation

Expected output: 2, then 1

Why: The inner block creates a separate binding.

Challenge 44. Closure reads the latest binding

Predict the exact output or error before opening the answer.

let status = 'loading';
const readStatus = () => console.log(status);
status = 'ready';
readStatus();

Answer and explanation

Expected output: ready

Why: Closures retain the binding, not a copied old value.

🔴 Advanced

Challenge 45. for loop let scope

Predict the exact output or error before opening the answer.

for (let index = 0; index < 1; index++) {}

console.log(typeof index);

Answer and explanation

Expected output: undefined

Why: The loop initializer let does not escape the loop.

Challenge 46. for loop var scope

Predict the exact output or error before opening the answer.

for (var index = 0; index < 1; index++) {}

console.log(index);

Answer and explanation

Expected output: 1

Why: The var binding is available after the loop.

Challenge 47. Redeclaring let

Predict the exact output or error before opening the answer.

let value = 1;
let value = 2;

Answer and explanation

Expected output: SyntaxError

Why: A lexical binding cannot be redeclared in the same scope.

Challenge 48. Reassigning const

Predict the exact output or error before opening the answer.

const value = 1;
value = 2;

Answer and explanation

Expected output: TypeError

Why: const prevents rebinding after initialization.

Challenge 49. Hoisted assignment order

Predict the exact output or error before opening the answer.

var name = 'first';

function read() {
  console.log(name);
  var name = 'second';
}

read();

Answer and explanation

Expected output: undefined

Why: The function-local var name shadows the outer value before its assignment.

Challenge 50. Function declaration replaced by assignment

Predict the exact output or error before opening the answer.

function getValue() {
  return 1;
}

var getValue = 2;
console.log(typeof getValue);

Answer and explanation

Expected output: number

Why: The later assignment replaces the function value at runtime.

Equality, coercion, arrays, and objects

🟡 Intermediate

Challenge 51. Array reference equality

Predict the exact output or error before opening the answer.

console.log([] === []);

Answer and explanation

Expected output: false

Why: Each array literal creates a different object.

Challenge 52. Array and false

Predict the exact output or error before opening the answer.

console.log([] == false);

Answer and explanation

Expected output: true

Why: The empty array becomes an empty string, then zero; false also becomes zero.

Challenge 53. Array and zero

Predict the exact output or error before opening the answer.

console.log([] == 0);

Answer and explanation

Expected output: true

Why: Loose equality converts the empty array to an empty string and then to zero.

Challenge 54. Array and empty string

Predict the exact output or error before opening the answer.

console.log([] == '');

Answer and explanation

Expected output: true

Why: An empty array converts to an empty string.

Challenge 55. Single zero array and zero

Predict the exact output or error before opening the answer.

console.log([0] == 0);

Answer and explanation

Expected output: true

Why: [0] converts to the string "0", then to numeric zero.

Challenge 56. Single one array and true

Predict the exact output or error before opening the answer.

console.log([1] == true);

Answer and explanation

Expected output: true

Why: [1] converts to "1"; both sides then compare as numeric one.

Challenge 57. Array string conversion

Predict the exact output or error before opening the answer.

console.log([1, 2] == '1,2');

Answer and explanation

Expected output: true

Why: Arrays convert to their comma-joined string representation for this comparison.

Challenge 58. Array versus object

Predict the exact output or error before opening the answer.

console.log([] == {});

Answer and explanation

Expected output: false

Why: The array becomes "" while the object becomes "[object Object]".

Challenge 59. Object reference equality

Predict the exact output or error before opening the answer.

console.log({} === {});

Answer and explanation

Expected output: false

Why: Object equality compares identity, not matching properties.

Challenge 60. Null and undefined

Predict the exact output or error before opening the answer.

console.log(null == undefined, null === undefined);

Answer and explanation

Expected output: true, false

Why: Loose equality has a special null/undefined rule; strict equality requires identical types.

Challenge 61. Null and zero

Predict the exact output or error before opening the answer.

console.log(null == 0);

Answer and explanation

Expected output: false

Why: The null/undefined loose-equality exception does not include zero.

Challenge 62. Empty string and zero

Predict the exact output or error before opening the answer.

console.log('' == 0, '' === 0);

Answer and explanation

Expected output: true, false

Why: Loose equality coerces the empty string to zero; strict equality does not coerce.

Challenge 63. False and string zero

Predict the exact output or error before opening the answer.

console.log(false == '0');

Answer and explanation

Expected output: true

Why: Both operands coerce to numeric zero during loose equality.

Challenge 64. NaN equality

Predict the exact output or error before opening the answer.

console.log(NaN === NaN, Object.is(NaN, NaN));

Answer and explanation

Expected output: false, true

Why: NaN is not equal to itself with ===; Object.is handles it specially.

Challenge 65. Object.is and signed zero

Predict the exact output or error before opening the answer.

console.log(0 === -0, Object.is(0, -0));

Answer and explanation

Expected output: true, false

Why: === treats signed zeroes as equal; Object.is distinguishes them.

Challenge 66. Null array string conversion

Predict the exact output or error before opening the answer.

console.log([null] == '');

Answer and explanation

Expected output: true

Why: A one-item array containing null converts to an empty string.

Challenge 67. Undefined array string conversion

Predict the exact output or error before opening the answer.

console.log([undefined] == '');

Answer and explanation

Expected output: true

Why: A one-item array containing undefined also converts to an empty string.

Challenge 68. Boolean wrapper truthiness

Predict the exact output or error before opening the answer.

console.log(Boolean(new Boolean(false)));

Answer and explanation

Expected output: true

Why: Wrapper objects are objects, and objects are truthy.

Challenge 69. Empty object truthiness

Predict the exact output or error before opening the answer.

console.log(Boolean({}), Boolean([]));

Answer and explanation

Expected output: true, true

Why: All ordinary objects and arrays are truthy, including empty ones.

Challenge 70. Strict equality prevents coercion

Predict the exact output or error before opening the answer.

console.log('5' === 5, Number('5') === 5);

Answer and explanation

Expected output: false, true

Why: Strict equality compares both type and value; explicit conversion makes types match.

Continue practising

Revisit Parts 6 and 7 for larger output-based and coding practice sets, then return to the core handbook for architecture, system design, and behavioral preparation.