Front-end Web Development JavaScript Syllabus

What is the rest parameter syntax and what does it produce?

The rest parameter $...args$ collects all remaining arguments into a real array: $$function\ sum(...nums)\ \{\ ...\ \}$$ It must be the last parameter.

Write an arrow function that returns the sum of $a$ and $b$, using the most concise form.

$$const\ add = (a, b) \Rightarrow a + b;$$ With a single expression body, the braces and the $return$ keyword are omitted (implicit return).

How does an arrow function handle the $this$ keyword differently from a regular function?

An arrow function does not have its own $this$; it lexically inherits $this$ from the enclosing scope. A regular function's $this$ is determined by how it is called.

How do you write an arrow function that takes a single parameter, and one that takes no parameters?

Single parameter (parentheses optional): $x \Rightarrow x * 2$. No parameters (empty parentheses required): $() \Rightarrow 42$.

How do you return an object literal directly from a concise arrow function?

Wrap the object in parentheses so it is not parsed as a function body: $$const\ make = () \Rightarrow (\{\ id: 1\ \});$$

Name things arrow functions lack that regular functions have.

Arrow functions have no own $this$, no $arguments$ object, no $super$, and cannot be used as constructors (no $new$). They also have no $prototype$ property.

What is a higher-order function?

A higher-order function is a function that either takes one or more functions as arguments, returns a function, or both. Examples include $map$, $filter$, and $reduce$.

What does $Array.prototype.map()$ do and what does it return?

$map()$ calls a callback on every element and returns a NEW array of the same length containing the transformed results. It does not mutate the original array.

What is the difference between $map()$ and $forEach()$?

$map()$ returns a new array of transformed values and is used for transformation. $forEach()$ returns $undefined$ and is used purely for side effects (it does not build a new array).

What does $Array.prototype.filter()$ return?

It returns a new array containing only the elements for which the callback returns a truthy value. Its length is less than or equal to the original.

Explain $Array.prototype.reduce()$ and its callback signature.

$reduce()$ reduces an array to a single value by applying a callback $(accumulator, currentValue, index, array)$ across all elements, threading the accumulator: $$[1,2,3].reduce((acc, x) \Rightarrow acc + x, 0) = 6$$

What is a callback function?

A callback is a function passed as an argument to another function, to be invoked (called back) later — either synchronously (e.g., in $map$) or asynchronously (e.g., after an event or timer).

What is the difference between $find()$ and $filter()$?

$find()$ returns the first single element matching the predicate (or $undefined$). $filter()$ returns a new array of all matching elements.

Which DOM method selects a single element by its $id$ attribute, and what does it return if not found?

$document.getElementById("myId")$. It returns the element, or $null$ if no element with that id exists.

What is the difference between $querySelector()$ and $querySelectorAll()$?

$querySelector(selector)$ returns the FIRST element matching a CSS selector (or $null$). $querySelectorAll(selector)$ returns a static $NodeList$ of ALL matching elements.

What is the key difference between $getElementsByClassName()$ and $querySelectorAll()$ regarding the collection returned?

$getElementsByClassName()$ returns a LIVE $HTMLCollection$ that updates as the DOM changes. $querySelectorAll()$ returns a STATIC $NodeList$ that does not update after creation.

How do you select all elements with the class $card$ using a CSS-selector-based method?

$document.querySelectorAll(".card")$. The leading dot denotes a class selector; for an id you would use $"#card"$.

Why can't you call array methods like $map()$ directly on the result of $querySelectorAll()$, and how do you fix it?

It returns a $NodeList$, not a true array. Convert it first with $Array.from(nodeList)$ or the spread $[...nodeList]$ before using $map$, $filter$, etc.

What is the standard method to attach an event handler to an element, and what is an advantage of it?

$element.addEventListener(type, listener, options)$ — e.g., $element.addEventListener("click", handler)$. It can attach multiple handlers for the same event type without overwriting.

What is event bubbling in the DOM?

Event bubbling is the propagation phase where an event triggered on an element fires first on that target, then propagates upward through each ancestor toward the document root.

What is the difference between $event.preventDefault()$ and $event.stopPropagation()$?

$preventDefault()$ cancels the browser's default action (e.g., following a link or submitting a form). $stopPropagation()$ halts the event from bubbling/capturing further to other elements.

What is event delegation and why is it useful?

Event delegation attaches a single listener to a common parent and uses $event.target$ to determine which child triggered it. It is efficient and automatically handles dynamically added children.

What is the difference between $event.target$ and $event.currentTarget$?

$event.target$ is the actual element that originated the event. $event.currentTarget$ is the element whose listener is currently executing (the one $addEventListener$ was called on).

What is the difference between an element's $textContent$ and $innerHTML$ properties?

$textContent$ gets/sets only plain text and treats input as literal text. $innerHTML$ gets/sets HTML markup, parsing tags into DOM nodes (which carries XSS risk with untrusted input).

How do you add, remove, and toggle a CSS class on an element?

Use the $classList$ API: $el.classList.add("x")$, $el.classList.remove("x")$, and $el.classList.toggle("x")$. You can also test with $el.classList.contains("x")$.

What is the difference between setting a style via $element.style.color$ and changing a class?

$element.style.color$ sets an inline style on that single element only. Changing a class applies all rules defined for that class in the stylesheet, which is preferred for separating concerns.

What is the difference between $setAttribute()$ and directly setting a property like $element.value$?

$setAttribute("value", x)$ changes the HTML attribute (the initial/default). Setting $element.value$ changes the live DOM property (current state). They can diverge after user interaction.

What is the JavaScript event loop, and why is single-threaded JS still non-blocking?

The event loop continuously checks the call stack; when it is empty it pushes queued callbacks (from the task/microtask queues) onto it. Async operations are offloaded to the environment, so the single thread is never blocked waiting.

What is a Promise in JavaScript and what three states can it be in?

A Promise is an object representing the eventual result of an asynchronous operation. Its three states are: $pending$ (initial), $fulfilled$ (resolved with a value), and $rejected$ (failed with a reason). Once settled it is immutable.

What is the difference between the microtask queue and the macrotask queue regarding execution order?

Microtasks (e.g., Promise $.then$ callbacks, $queueMicrotask$) run after current synchronous code and BEFORE the next macrotask. Macrotasks (e.g., $setTimeout$, DOM events) run one per event-loop tick, with all microtasks drained between them.

How do $Promise.all()$ and $Promise.race()$ differ?

$Promise.all([...])$ resolves when ALL promises fulfill (returning an array of results) and rejects as soon as any one rejects. $Promise.race([...])$ settles as soon as the FIRST promise settles (fulfilled or rejected).

How do you handle a rejected Promise, and what method runs regardless of outcome?

Chain $.catch(err \Rightarrow ...)$ to handle rejection, and $.finally(() \Rightarrow ...)$ to run cleanup code whether the promise fulfilled or rejected.

What does the $async$ keyword do to a function's return value?

An $async$ function always returns a Promise. A returned non-promise value is automatically wrapped in a resolved Promise, and a thrown error becomes a rejected Promise.

What does the $await$ keyword do, and where can it be used?

$await$ pauses execution of an $async$ function until the awaited Promise settles, then returns its fulfilled value (or throws its rejection). It can only be used inside an $async$ function or at the top level of a module.

How do you handle errors when using $async/await$?

Wrap the awaited calls in a $try...catch$ block; a rejected awaited Promise throws an error that $catch$ intercepts. Optionally add a $finally$ block for cleanup.

What is the difference between awaiting two promises sequentially versus running them concurrently with $Promise.all$?

Sequential ($const\ a = await\ p1; const\ b = await\ p2;$) waits for each in turn, so total time is the sum. $await\ Promise.all([p1, p2])$ starts both immediately and waits once, so total time is the maximum of the two.