JavaScript Quiz From Basics to Advanced - claymation artwork

JavaScript Quiz From Basics to Advanced

8 – 18 Questions 7 min
This JavaScript quiz checks core language behavior and real code-reading skills, from scope and coercion to prototypes, modules, and async flow with Promises and async/await. It targets practical debugging and implementation decisions that show up in browser apps and Node.js services. Front-end engineers, full-stack developers, and QA automation engineers benefit most.
Start Quiz
1You are refactoring a script and need a variable that is limited to the current block, like inside an if statement, and can be reassigned. Which declaration fits that need?
2Variables declared with var are block-scoped inside if and for blocks.

True / False

3What gets logged by this code? console.log(a); var a = 5;
4A teammate sees a bug and writes typeof null to check for null values. What does typeof null return in JavaScript?
5This code logs "3" three times: for (var i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); } Without changing the setTimeout call, what change makes it log 0, 1, 2?
6You see this in an ES module: const user = { name: "Ada", greet() { return this.name; } }; const g = user.greet; console.log(g()); What happens when it runs?
7What is the output order of this code? console.log("A"); Promise.resolve().then(() => console.log("B")); console.log("C");
8A setTimeout(fn, 0) callback always runs before any pending Promise.then callbacks.

True / False

9Consider this code: let n = 1; function f(x = n++) { return x; } console.log(f(), f()); What gets logged?
10A user navigates away mid-request and you want to cancel an in-flight fetch to avoid wasted bandwidth. What is the standard browser approach?
11What is the output order of this code? async function run() { console.log(1); await null; console.log(2); } console.log(0); run(); setTimeout(() => console.log(3), 0); console.log(4);
12Your manager asks for a counter module where the internal count cannot be modified directly from outside, but can be incremented and read through functions. Which technique best matches that requirement?
13What is the output order of this code? console.log("start"); setTimeout(() => console.log("timeout"), 0); queueMicrotask(() => console.log("micro1")); Promise.resolve().then(() => { console.log("then1"); queueMicrotask(() => console.log("micro2")); }); console.log("end");

JavaScript Pitfalls That Break “Correct-Looking” Code

Intermediate JavaScript errors often come from assumptions about scope, coercion, and async ordering. These mistakes show up as flaky UI behavior, missing data, or “works on my machine” bugs.

Scope, hoisting, and the temporal dead zone

  • Accidental globals by assigning to an undeclared name. Fix by using "use strict" and always declaring with const or let.
  • Assuming var is block-scoped. var is function-scoped and hoisted, so loop callbacks can capture the same variable. Prefer let in loops.
  • Reading let/const before declaration. That triggers a ReferenceError because of the temporal dead zone. Move reads below the declaration.

Equality, types, and “weird” values

  • Using == and expecting intuitive coercion. Prefer ===, and explicitly convert with Number(), String(), or Boolean().
  • Forgetting that typeof null is "object". Use value === null for null checks.
  • NaN comparisons. NaN !== NaN, so check with Number.isNaN(x).

Functions, this, and mutation

  • Using arrow functions when you need dynamic this. Methods that rely on this usually need function syntax or explicit binding.
  • Shallow copying objects and arrays. {...obj} and [...arr] do not clone nested structures. Clone deeply when required.
  • Unexpected mutation from sort(), reverse(), or in-place updates. Copy before mutating.

Async ordering and error handling

  • Not awaiting a Promise, which returns early and hides failures. Await or return the Promise from the function.
  • Missing try/catch around await. Rejections become exceptions at the await site, so handle them where recovery makes sense.

JavaScript Basics-to-Advanced Quick Reference (Printable)

Use this as a quick recall sheet while reviewing answers. You can print this page or save it as a PDF from your browser print dialog.

Declarations and scope

  • const: block-scoped, cannot reassign the binding (object contents can still mutate).
  • let: block-scoped, can reassign.
  • var: function-scoped, hoisted, avoid in new code.

Equality and type conversion

  • Prefer === and !==.
  • Truthiness: false, 0, -0, 0n, "", null, undefined, NaN are falsy.
  • Number.isNaN(x) checks NaN safely.
  • typeof null is "object", check null explicitly.

Functions and this

  • Arrow functions capture lexical this and have no arguments.
  • Regular functions have dynamic this based on call-site. Use fn.call(obj, ...) or fn.bind(obj) when needed.

Objects, prototypes, and classes

  • Property lookup follows the prototype chain: own props, then Object.getPrototypeOf(obj), and so on.
  • class is syntax over prototypes. Methods live on ClassName.prototype.

Arrays and iteration

  • map returns a new array. forEach returns undefined.
  • filter keeps elements where the callback returns truthy.
  • Avoid for...in for arrays. It iterates keys and inherited properties. Use for...of or array methods.

Promises and async/await

  • await pauses within an async function and unwraps the resolved value.
  • Use Promise.all for parallel work. One rejection rejects the whole result.
  • Error handling pattern:
async function load() {
  try {
    const res = await fetch("/api");
    if (!res.ok) throw new Error("HTTP " + res.status);
    return await res.json();
  } catch (e) {
    // recover or rethrow
    throw e;
  }
}

Modern operators

  • a?.b optional chaining avoids crashes on nullish receivers.
  • a ?? b uses b only when a is null or undefined, not when a is 0 or "".

Worked Example: Fix a Buggy Async Search Handler (Scope, this, and Promises)

Scenario: a search box triggers API calls, but results arrive out of order and the UI sometimes shows stale data.

1) Start with the buggy code

class Search {
  constructor(input, list) {
    this.input = input;
    this.list = list;
    this.lastQuery = "";
    input.addEventListener("input", this.onInput);
  }

  async onInput(e) {
    this.lastQuery = e.target.value;
    const res = await fetch("/api?q=" + this.lastQuery);
    const items = await res.json();
    this.render(items);
  }

  render(items) {
    this.list.textContent = items.join(", ");
  }
}

2) Identify the first failure: this binding

addEventListener calls the handler with this set to the input element (or undefined in strict mode), not the class instance. So this.render can be missing or wrong.

Fix by binding once in the constructor or by making the handler an arrow property.

3) Identify the second failure: out-of-order responses

If the user types fast, an earlier request can resolve after a later request. The late arrival overwrites the latest results. Track a request token and ignore stale responses.

4) Correct implementation

class Search {
  constructor(input, list) {
    this.input = input;
    this.list = list;
    this.reqId = 0;

    this.onInput = this.onInput.bind(this);
    input.addEventListener("input", this.onInput);
  }

  async onInput(e) {
    const q = e.target.value;
    const id = ++this.reqId;

    const res = await fetch("/api?q=" + encodeURIComponent(q));
    if (!res.ok) throw new Error("HTTP " + res.status);
    const items = await res.json();

    if (id !== this.reqId) return; // stale
    this.render(items);
  }

  render(items) {
    this.list.textContent = items.join(", ");
  }
}

This example checks three quiz themes: call-site this, async/await error paths, and race conditions between Promises.

JavaScript Quiz FAQ: Scope, Async Semantics, and Modern Syntax

What topics typically separate “basics” from “advanced” JavaScript questions?

Basics focus on syntax and everyday APIs like arrays, objects, and functions. Advanced questions usually target JavaScript’s execution model and edge cases: scope rules (including the temporal dead zone), prototype chain lookup, this binding, coercion rules behind ==, and the event loop behavior that affects Promises, async/await, and timers.

Why do arrow functions cause bugs with this in event handlers and class methods?

Arrow functions capture this from the surrounding scope. That is great for callbacks where you want the outer this, but it is wrong when you need a dynamic receiver. A DOM event listener that passes a regular function will set this to the element in many environments, so mixing handler styles without intent can break property access and method calls.

How should I reason about Promise ordering versus setTimeout ordering?

Promise reactions (then/catch/finally) are scheduled as microtasks. Timers like setTimeout schedule macrotasks. After the current call stack completes, the runtime drains microtasks before running the next macrotask. If your answer depends on print order, first list synchronous logs, then microtasks, then timers.

What is the safest way to avoid accidental mutation in quiz-style code snippets?

Assume many array and object operations share references. Prefer non-mutating patterns: use spread to copy arrays and objects before changing them, and use map, filter, and reduce to produce new arrays. Watch for mutators like sort, reverse, push, and direct property assignment on shared objects.

Should I use async/await everywhere instead of chaining then()?

Async/await improves readability for sequential steps and try/catch error handling. Promise chaining is still useful for small transformations, for composing reusable helpers, and for concurrency patterns. In either style, make sure you return Promises from functions that callers need to await, and always decide where errors are handled versus rethrown.

Any good cross-training if I struggle with control flow or data transformations?

If control flow and scoping are the issue, practicing in another language can help you see what is JavaScript-specific. Use Check Your Python Programming Skills to compare function scope, closures, and error handling patterns. If data shaping is the issue, Practice Writing SQL Queries Correctly for filtering and grouping, then map those concepts back to JavaScript arrays.

Looking for more? Browse Technology & IT quizzes on QuizWiz or explore the full professional training quizzes on QuizWiz.