Episode 1 — Fundamentals / 1.13 — Introduction to JavaScript
Interview Questions: Introduction to JavaScript
Practice questions with model answers for JavaScript’s role on the web, browser vs Node, <script> loading, Console debugging, let/const/var, types, and beginner I/O patterns.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.13.a→1.13.h. - Practice out loud — aim for 1–2 minutes per question, then compare to the model answer.
- Structure answers — definition → example → trade-off or pitfall.
- Pair with exercises —
1.13-Exercise-Questions.md. - Quick review —
1.13-Quick-Revision.md.
Beginner (Q1–Q5)
Q1. What is JavaScript’s role alongside HTML and CSS?
Why interviewers ask: Confirms you understand the separation of concerns on the web platform.
Model answer:
- HTML defines structure and meaning (headings, forms, links).
- CSS defines presentation (layout, color, typography).
- JavaScript defines behavior — reacting to events, validating input, updating the DOM, fetching data, and orchestrating application logic.
Together they form the standard front-end stack in the browser.
Q2. Where does JavaScript run besides the browser?
Why interviewers ask: Tests whether you know Node.js and the same-language full-stack story.
Model answer:
JavaScript runs in multiple hosts. In the browser, engines provide the DOM and Web APIs. Node.js is a server-side (and tooling) runtime built on V8 — it offers file I/O, HTTP servers, and npm ecosystem packages, but no document unless you embed a browser (e.g. Puppeteer). Other hosts include Deno, Bun, serverless workers, and embedded contexts — same core language syntax, different globals and APIs.
Q3. How do you load an external JavaScript file in HTML, and how does defer help?
Why interviewers ask: Performance and correctness of script order are daily concerns.
Model answer:
Use <script src="path/to/app.js" defer></script>. defer downloads the file in parallel with HTML parsing but executes it only after the document is parsed, in declaration order for multiple deferred scripts. That avoids parser blocking and ensures the DOM exists before your code runs — a common default for bundled applications. async is for independent scripts where execution order is not guaranteed.
Q4. Explain the difference between let, const, and var.
Why interviewers ask: Scope and hoisting mistakes still appear in legacy codebases.
Model answer:
const— block-scoped binding that cannot be reassigned (object contents may still mutate).let— block-scoped binding that can be reassigned.var— function-scoped, hoisted, allows redeclaration — legacy; avoid in new code.
let/const live in the temporal dead zone until their declaration line executes, preventing “use before declare” bugs that var can hide.
Q5. What are JavaScript primitives, and name five of them.
Why interviewers ask: Foundation for equality, mutability, and later object topics.
Model answer:
Primitives are atomic values: number, string, boolean, null, undefined, plus bigint and symbol. They are compared by value when copied into new bindings. Non-primitives (objects, arrays, functions) are reference types — variables hold a reference to mutable data in memory. typeof null incorrectly returns "object" (historical spec quirk); use value === null to test for null.
Intermediate (Q6–Q10)
Q6. What is typeof [] and how do you correctly detect an array?
Why interviewers ask: typeof alone is insufficient for arrays and null.
Model answer:
typeof [] is "object" because arrays are a kind of object. Use Array.isArray(value) for a reliable array check. For null, use value === null since typeof null is misleading.
Q7. Why does prompt("Enter a number") + 5 often produce wrong results?
Why interviewers ask: Tests understanding of string return type and coercion.
Model answer:
prompt always returns either a string or null (Cancel). The + operator with a string performs string concatenation, so "3" + 5 becomes "35". Convert first: Number(prompt(...)) or parseFloat, then validate with Number.isNaN before doing math.
Q8. What is the temporal dead zone?
Why interviewers ask: Separates candidates who memorized keywords from those who understand execution model.
Model answer:
For let and const, from the start of their block until the declaration line is executed, the variable is in the temporal dead zone — reading or writing it throws ReferenceError. This prevents using a block-scoped variable before initialization, unlike var, which is hoisted and initializes as undefined.
Q9. When would you use async on a script tag instead of defer?
Why interviewers ask: Shows practical loading strategy knowledge.
Model answer:
Use async for standalone scripts that do not depend on other scripts’ execution order and do not need the full DOM before running — e.g. some analytics snippets. defer is better when scripts must run in order after the document is parsed, which is typical for application bundles.
Q10. What is the difference between null and undefined?
Why interviewers ask: APIs often return one or the other; conflating them causes bugs.
Model answer:
undefined usually means “not assigned” or missing property — the language’s default for uninitialized bindings. null is an intentional “no object” value often used by APIs to mean empty. Both are falsy. In APIs, null is explicit; undefined often means “key not present.” Use strict equality (===) to distinguish them.
Advanced (for “strong beginner” / early junior) (Q11–Q13)
Q11. How does a classic blocking <script src> in <head> affect the critical rendering path?
Why interviewers ask: Links JS placement to performance and Core Web Vitals mindset.
Model answer:
A parser-blocking script in <head> pauses HTML parsing while the script is fetched and executed. That delays DOM construction and can delay first paint / LCP. Mitigations: defer, type="module" (deferred by default), move non-critical scripts to end of body, or split critical vs deferred bundles. Modern default: defer on a single bundle or ES modules.
Q12. Can you mutate an object declared with const?
Why interviewers ask: Common misconception about const meaning “deep freeze.”
Model answer:
const freezes the binding, not the value. For an object, you cannot reassign the variable to a different object, but you can mutate properties: const u = {}; u.name = "Ada" is valid. For deep immutability, you need patterns like Object.freeze (shallow), libraries, or immutable data structures — not const alone.
Q13. Why prefer === over == in new JavaScript code?
Why interviewers ask: Coercion rules on == are hard to reason about in review.
Model answer:
== allows type coercion (0 == false is true, "" == false is true), which produces surprising results. === checks value and type without coercion, making code easier to read and audit. Linters often forbid == except for intentional checks against null / undefined (x == null matches both — advanced idiom).
Quick-fire (one-line drills)
| # | Question | One-line answer |
|---|---|---|
| 1 | Engine in Chrome / Node? | V8 |
| 2 | Global for the DOM tree? | document |
| 3 | Default for new bindings? | const |
| 4 | typeof NaN | "number" |
| 5 | Safe array check? | Array.isArray(x) |
| 6 | prompt return on Cancel? | null |
| 7 | Script that runs after parse, ordered? | defer |
| 8 | Primitives stored “by value” in assignment? | Copied as value; objects by reference |