{"slug": "react-native-interview-handbook-part-8-of-10-code-output-challenges", "title": "React Native Interview Handbook — Part 8 of 10: Code Output Challenges", "summary": "A developer published Part 8 of a 10-part React Native Interview Handbook series, featuring 70 code-output challenges. The challenges cover JavaScript concepts such as variable scoping, closures, object references, and array methods, with explanations of the underlying language rules.", "body_md": "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.\n\nThis Dev.to series has five core handbook articles plus five focused practice extras. Open the series page to move through the complete reading order:\n\nRead 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.\n\n`this`\n\n`async`\n\n/`await`\n\n, and microtasksPredict the exact output before opening the answer.\n\n``` js\nlet total = 0;\nfor (let i = 0; i < 3; i++) {\n  total += i;\n}\nconsole.log(total);\n```\n\n**Why:** The loop adds 0, 1, and 2.\n\n`var`\n\ncallback loop\nPredict the exact output before opening the answer.\n\n``` js\nfor (var i = 0; i < 3; i++) {\n  setTimeout(() => {\n    console.log(i);\n  }, 0);\n}\n```\n\n**Why:** `var`\n\ncreates one shared function-scoped binding.\n\n`let`\n\ncallback loop\nPredict the exact output before opening the answer.\n\n``` js\nfor (let i = 0; i < 3; i++) {\n  setTimeout(() => {\n    console.log(i);\n  }, 0);\n}\n```\n\n**Why:** `let`\n\ncreates a fresh binding for each iteration.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst a = [1, 2];\nconst b = a;\nb.push(3);\nconsole.log(a.length);\n```\n\n**Why:** `a`\n\nand `b`\n\nreference the same array.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst a = { user: { name: 'A' } };\nconst b = { ...a };\nb.user.name = 'B';\nconsole.log(a.user.name);\n```\n\n**Why:** Object spread copies only the outer object.\n\n`map`\n\nwith a missing return\nPredict the exact output before opening the answer.\n\n``` js\nconsole.log(\n  [1, 2].map((x) => {\n    x * 2;\n  }),\n);\n```\n\n**Why:** A block-bodied arrow function needs an explicit `return`\n\n.\n\n`reduce`\n\naccumulator\nPredict the exact output before opening the answer.\n\n``` js\nconsole.log([1, 2, 3].reduce((sum, x) => sum + x, 0));\n```\n\n**Why:** The accumulator starts at zero and receives every value.\n\nPredict the exact output before opening the answer.\n\n```\nconsole.log([10, 2, 1].sort());\n```\n\n**Why:** Without a comparator, values are sorted as strings.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst a = [1, , 3];\nconsole.log(a.length, 1 in a);\n```\n\n**Why:** The missing element is a hole, but array length remains three.\n\n`filter(Boolean)`\n\nPredict the exact output before opening the answer.\n\n```\nconsole.log([0, 1, '', 2, null].filter(Boolean));\n```\n\n**Why:** `Boolean`\n\nremoves every falsy value.\n\nPredict the exact output before opening the answer.\n\n```\nconsole.log(0 == false, 0 === false);\n```\n\n**Why:** Loose equality coerces types; strict equality does not.\n\nPredict the exact output before opening the answer.\n\n```\nconsole.log(0 || 10, 0 ?? 10);\n```\n\n**Why:** `||`\n\nfalls back for falsy values, while `??`\n\nonly falls back for nullish values.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst user = null;\nconsole.log(user?.profile?.name ?? 'Guest');\n```\n\n**Why:** Optional chaining returns `undefined`\n\n, then `??`\n\nsupplies the fallback.\n\nPredict the exact output before opening the answer.\n\n``` js\nfunction make() {\n  let n = 0;\n  return () => ++n;\n}\nconst next = make();\nconsole.log(next(), next());\n```\n\n**Why:** The returned function retains its lexical `n`\n\nbinding.\n\n`this`\n\nPredict the exact output before opening the answer.\n\n``` js\nconst user = {\n  name: 'A',\n  show() {\n    return (() => this.name)();\n  },\n};\nconsole.log(user.show());\n```\n\n**Why:** The arrow captures `this`\n\nfrom the regular `show`\n\nmethod.\n\nPredict the exact output before opening the answer.\n\n``` js\nfunction show() {\n  return this.name;\n}\nconst f = show.bind({ name: 'A' });\nconsole.log(f());\n```\n\n**Why:** `bind`\n\ncreates a function with a fixed receiver.\n\nPredict the exact output before opening the answer.\n\n``` js\nconsole.log('A');\nsetTimeout(() => console.log('B'), 0);\nPromise.resolve().then(() => console.log('C'));\nconsole.log('D');\n```\n\n**Why:** Synchronous work runs first, then microtasks, then timer tasks.\n\n`await`\n\ncontinuation\nPredict the exact output before opening the answer.\n\n```\nasync function run() {\n  console.log(1);\n  await 0;\n  console.log(2);\n}\nrun();\nconsole.log(3);\n```\n\n**Why:** Code after `await`\n\ncontinues in a microtask.\n\nPredict the exact output before opening the answer.\n\n``` js\nPromise.reject('x')\n  .catch(() => 2)\n  .then(console.log);\n```\n\n**Why:** Returning from `catch`\n\nfulfills the next promise.\n\n`map`\n\nresult\nPredict the exact output before opening the answer.\n\n``` js\nconst x = [1, 2].map(async (n) => n * 2);\nconsole.log(x[0] instanceof Promise);\n```\n\n**Why:** An async callback always returns a Promise.\n\nPredict the exact output before opening the answer.\n\n```\nconst [a = 1, b = 2] = [undefined, null];\nconsole.log(a, b);\n```\n\n**Why:** Defaults apply to `undefined`\n\n, not `null`\n\n.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst o = {},\n  a = {},\n  b = {};\no[a] = 'one';\no[b] = 'two';\nconsole.log(o[a]);\n```\n\n**Why:** Plain-object keys are coerced to the same string.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst parent = { role: 'admin' };\nconst user = Object.create(parent);\nconsole.log(user.role);\n```\n\n**Why:** Property lookup follows the prototype chain.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst p = { x: 1 },\n  o = Object.create(p);\no.x = 2;\ndelete o.x;\nconsole.log(o.x);\n```\n\n**Why:** Deleting the own property reveals the inherited one.\n\n`Object.freeze`\n\nis shallow\nPredict the exact output before opening the answer.\n\n``` js\nconst o = Object.freeze({ x: { n: 1 } });\no.x.n = 2;\nconsole.log(o.x.n);\n```\n\n**Why:** The nested object is not frozen.\n\nPredict the exact output before opening the answer.\n\n``` js\nlet count = 0;\nconst setCount = (v) => {\n  count = v;\n};\nsetCount(count + 1);\nsetCount(count + 1);\nconsole.log(count);\n```\n\n**Why:** This plain JavaScript model evaluates each update immediately; React batching differs, so discuss that distinction in an interview.\n\nPredict the exact output before opening the answer.\n\n``` js\nlet id;\nconst debounce = (f) => (x) => {\n  clearTimeout(id);\n  id = setTimeout(() => f(x), 0);\n};\nconst f = debounce(console.log);\nf(1);\nf(2);\n```\n\n**Why:** The second call clears the first pending timer.\n\n`Promise.all`\n\nresult order\nPredict the exact output before opening the answer.\n\n```\nPromise.all([Promise.resolve(2), 1]).then(console.log);\n```\n\n**Why:** `Promise.all`\n\npreserves input order after resolving values.\n\nPredict the exact output before opening the answer.\n\n```\nconsole.log(add(1, 2));\nfunction add(a, b) {\n  return a + b;\n}\n```\n\n**Why:** Function declarations are initialized during scope creation.\n\nPredict the exact output before opening the answer.\n\n``` js\nconst a = { x: undefined };\nconst b = JSON.parse(JSON.stringify(a));\nconsole.log('x' in b);\n```\n\n**Why:** JSON serialization drops `undefined`\n\nobject properties.\n\nThese **40 additional challenges** focus on the JavaScript traps frequently used in interview rounds: hoisting, scope, `==`\n\n, `===`\n\n, arrays, objects, coercion, and reference identity.\n\n`var`\n\nvalue\nPredict the exact output or error before opening the answer.\n\n``` js\nconsole.log(score);\nvar score = 10;\n```\n\n**Why:** `var`\n\ndeclarations are initialized as `undefined`\n\nbefore execution; the assignment happens later.\n\n`let`\n\nPredict the exact output or error before opening the answer.\n\n``` js\nconsole.log(score);\nlet score = 10;\n```\n\n**Why:** `let`\n\nexists in the Temporal Dead Zone until its declaration runs.\n\nPredict the exact output or error before opening the answer.\n\n```\nshow();\n\nfunction show() {\n  console.log('ready');\n}\n```\n\n**Why:** Function declarations are initialized with their function body during scope creation.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nshow();\n\nvar show = function () {\n  console.log('ready');\n};\n```\n\n**Why:** Only `show`\n\nis hoisted as `undefined`\n\n; it is not callable before assignment.\n\n`var`\n\nshadows outer state\nPredict the exact output or error before opening the answer.\n\n``` js\nvar value = 'outer';\n\nfunction printValue() {\n  console.log(value);\n  var value = 'inner';\n}\n\nprintValue();\n```\n\n**Why:** The local `var value`\n\nis hoisted and shadows the outer variable.\n\n`const`\n\nPredict the exact output or error before opening the answer.\n\n``` js\n{\n  const token = 'secret';\n}\n\nconsole.log(typeof token);\n```\n\n**Why:** `const`\n\nis block-scoped; `typeof`\n\non an undeclared name returns `undefined`\n\n.\n\n`var`\n\nbinding\nPredict the exact output or error before opening the answer.\n\n``` js\nfunction update(value) {\n  console.log(value);\n  var value = 'new';\n  console.log(value);\n}\n\nupdate('old');\n```\n\n**Why:** A parameter and a same-named `var`\n\nshare one function-scoped binding.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nlet value = 1;\n\nfunction read(value = value) {\n  return value;\n}\n\nconsole.log(read());\n```\n\n**Why:** The parameter binding shadows the outer name while it is still uninitialized.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nconst user = new User();\n\nclass User {}\n```\n\n**Why:** Classes are not usable before their declaration is evaluated.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nconst run = function internal() {\n  return typeof internal;\n};\n\nconsole.log(run());\nconsole.log(typeof internal);\n```\n\n**Why:** The expression name is available inside the function body, not outside it.\n\n`var`\n\nleaks from an if block\nPredict the exact output or error before opening the answer.\n\n``` js\nif (true) {\n  var message = 'visible';\n}\n\nconsole.log(message);\n```\n\n**Why:** `var`\n\nhas function scope rather than block scope.\n\n`let`\n\ndoes not leak from an if block\nPredict the exact output or error before opening the answer.\n\n``` js\nif (true) {\n  let message = 'hidden';\n}\n\nconsole.log(typeof message);\n```\n\n**Why:** `let`\n\nremains inside the block.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nlet count = 1;\n\n{\n  let count = 2;\n  console.log(count);\n}\n\nconsole.log(count);\n```\n\n**Why:** The inner block creates a separate binding.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nlet status = 'loading';\nconst readStatus = () => console.log(status);\nstatus = 'ready';\nreadStatus();\n```\n\n**Why:** Closures retain the binding, not a copied old value.\n\n`for`\n\nloop `let`\n\nscope\nPredict the exact output or error before opening the answer.\n\n``` js\nfor (let index = 0; index < 1; index++) {}\n\nconsole.log(typeof index);\n```\n\n**Why:** The loop initializer `let`\n\ndoes not escape the loop.\n\n`for`\n\nloop `var`\n\nscope\nPredict the exact output or error before opening the answer.\n\n``` js\nfor (var index = 0; index < 1; index++) {}\n\nconsole.log(index);\n```\n\n**Why:** The `var`\n\nbinding is available after the loop.\n\n`let`\n\nPredict the exact output or error before opening the answer.\n\n``` js\nlet value = 1;\nlet value = 2;\n```\n\n**Why:** A lexical binding cannot be redeclared in the same scope.\n\n`const`\n\nPredict the exact output or error before opening the answer.\n\n``` js\nconst value = 1;\nvalue = 2;\n```\n\n**Why:** `const`\n\nprevents rebinding after initialization.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nvar name = 'first';\n\nfunction read() {\n  console.log(name);\n  var name = 'second';\n}\n\nread();\n```\n\n**Why:** The function-local `var name`\n\nshadows the outer value before its assignment.\n\nPredict the exact output or error before opening the answer.\n\n``` js\nfunction getValue() {\n  return 1;\n}\n\nvar getValue = 2;\nconsole.log(typeof getValue);\n```\n\n**Why:** The later assignment replaces the function value at runtime.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([] === []);\n```\n\n**Why:** Each array literal creates a different object.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([] == false);\n```\n\n**Why:** The empty array becomes an empty string, then zero; `false`\n\nalso becomes zero.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([] == 0);\n```\n\n**Why:** Loose equality converts the empty array to an empty string and then to zero.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([] == '');\n```\n\n**Why:** An empty array converts to an empty string.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([0] == 0);\n```\n\n**Why:** `[0]`\n\nconverts to the string `\"0\"`\n\n, then to numeric zero.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([1] == true);\n```\n\n**Why:** `[1]`\n\nconverts to `\"1\"`\n\n; both sides then compare as numeric one.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([1, 2] == '1,2');\n```\n\n**Why:** Arrays convert to their comma-joined string representation for this comparison.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([] == {});\n```\n\n**Why:** The array becomes `\"\"`\n\nwhile the object becomes `\"[object Object]\"`\n\n.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log({} === {});\n```\n\n**Why:** Object equality compares identity, not matching properties.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(null == undefined, null === undefined);\n```\n\n**Why:** Loose equality has a special null/undefined rule; strict equality requires identical types.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(null == 0);\n```\n\n**Why:** The null/undefined loose-equality exception does not include zero.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log('' == 0, '' === 0);\n```\n\n**Why:** Loose equality coerces the empty string to zero; strict equality does not coerce.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(false == '0');\n```\n\n**Why:** Both operands coerce to numeric zero during loose equality.\n\n`NaN`\n\nequality\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(NaN === NaN, Object.is(NaN, NaN));\n```\n\n**Why:** `NaN`\n\nis not equal to itself with `===`\n\n; `Object.is`\n\nhandles it specially.\n\n`Object.is`\n\nand signed zero\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(0 === -0, Object.is(0, -0));\n```\n\n**Why:** `===`\n\ntreats signed zeroes as equal; `Object.is`\n\ndistinguishes them.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([null] == '');\n```\n\n**Why:** A one-item array containing null converts to an empty string.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log([undefined] == '');\n```\n\n**Why:** A one-item array containing undefined also converts to an empty string.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(Boolean(new Boolean(false)));\n```\n\n**Why:** Wrapper objects are objects, and objects are truthy.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log(Boolean({}), Boolean([]));\n```\n\n**Why:** All ordinary objects and arrays are truthy, including empty ones.\n\nPredict the exact output or error before opening the answer.\n\n```\nconsole.log('5' === 5, Number('5') === 5);\n```\n\n**Why:** Strict equality compares both type and value; explicit conversion makes types match.\n\nRevisit 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.", "url": "https://wpnews.pro/news/react-native-interview-handbook-part-8-of-10-code-output-challenges", "canonical_source": "https://dev.to/amitkumar13/react-native-interview-handbook-part-8-of-9-code-output-challenges-5ggn", "published_at": "2026-07-17 18:40:09+00:00", "updated_at": "2026-07-17 19:02:42.502390+00:00", "lang": "en", "topics": ["developer-tools"], "entities": [], "alternates": {"html": "https://wpnews.pro/news/react-native-interview-handbook-part-8-of-10-code-output-challenges", "markdown": "https://wpnews.pro/news/react-native-interview-handbook-part-8-of-10-code-output-challenges.md", "text": "https://wpnews.pro/news/react-native-interview-handbook-part-8-of-10-code-output-challenges.txt", "jsonld": "https://wpnews.pro/news/react-native-interview-handbook-part-8-of-10-code-output-challenges.jsonld"}}