Front-end Web Development JavaScript Syllabus

JavaScript syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for JavaScript in Front-end Web Development, not a summary of it.

1. 1

   Basics

   3 topics

   • Syntax and Operators
   • Data Types
   • Control Structures
2. 2

   Functions

   3 topics

   • Function Declaration
   • Arrow Functions
   • Higher-Order Functions
3. 3

   DOM Manipulation

   3 topics

   • Selecting Elements
   • Event Handling
   • Modifying Elements
4. 4

   Advanced

   3 topics

   • Asynchronous JavaScript
   • Promises
   • Async/Await

JavaScript flashcards for Front-end Web Development

24 of 56 cards from the JavaScript deck — real questions with worked answers.

1. What are the three ways to declare a variable in modern JavaScript, and how does each handle reassignment and scope?

   $var$ (function-scoped, reassignable, hoisted), $let$ (block-scoped, reassignable), and $const$ (block-scoped, cannot be reassigned). $let$ and $const$ are not initialized until their declaration (temporal dead zone).

2. What is the difference between the equality operators $==$ and $===$ in JavaScript?

   $==$ is loose equality: it performs type coercion before comparing. $===$ is strict equality: it compares both value and type with no coercion. $===$ is generally preferred.

3. What does the ternary (conditional) operator look like and what does it do?

   $condition\ ?\ exprIfTrue : exprIfFalse$. It evaluates the condition and returns the first expression if truthy, otherwise the second. It is the only operator that takes three operands.

4. What is the difference between the logical AND operator ($\&\&$) and the nullish coalescing operator ($??$)?

   $\&\&$ returns the right operand only if the left is truthy. $??$ returns the right operand only if the left is $null$ or $undefined$ (it does NOT trigger on other falsy values like $0$ or empty string).

5. In JavaScript, what is the result of the expression $5\ \%\ 2$, and what does the operator do?

   The result is $1$. The $\%$ (modulo / remainder) operator returns the remainder of integer division of its operands.

6. What is the difference between the postfix ($x{++}$) and prefix ($+{+}x$) increment operators?

   Both increase $x$ by $1$. Prefix $+{+}x$ increments first then returns the new value; postfix $x{++}$ returns the original value first then increments.

7. List the seven primitive data types in JavaScript.

   $String$, $Number$, $Boolean$, $undefined$, $null$, $BigInt$, and $Symbol$. Everything else (objects, arrays, functions) is of type $Object$.

8. What does the $typeof$ operator return for $null$, and why is this notable?

   $typeof\ null$ returns $"object"$. This is a long-standing bug in JavaScript kept for backward compatibility; $null$ is actually a primitive.

9. What is the difference between $undefined$ and $null$ in JavaScript?

   $undefined$ means a variable has been declared but not assigned a value (the default absence of value). $null$ is an intentional, explicit assignment representing 'no value'. $typeof\ undefined$ is $"undefined"$; $typeof\ null$ is $"object"$.

10. What is the difference between a primitive type and a reference type regarding how they are copied?

    Primitives are copied by value (each variable holds its own copy). Reference types (objects, arrays, functions) are copied by reference (variables point to the same underlying object in memory).

11. What special numeric value does $0/0$ produce, and how do you reliably test for it?

    It produces $NaN$ (Not-a-Number). Since $NaN \neq NaN$, you must test it with $Number.isNaN(x)$ rather than $x === NaN$.

12. Which values are 'falsy' in JavaScript?

    There are six (plus NaN): $false$, $0$, empty string $""$, $null$, $undefined$, and $NaN$. ($0n$/BigInt zero is also falsy.) All other values are truthy.

13. What is the difference between an $if/else\ if/else$ chain and a $switch$ statement?

    An $if/else\ if$ chain evaluates arbitrary boolean conditions sequentially. A $switch$ compares one expression against multiple $case$ values using strict equality ($===$), and falls through unless $break$ is used.

14. What is the difference between a $for$ loop, a $for...of$ loop, and a $for...in$ loop?

    $for$ uses an explicit counter. $for...of$ iterates over the values of an iterable (arrays, strings). $for...in$ iterates over the enumerable keys/property names of an object.

15. What is the difference between a $while$ loop and a $do...while$ loop?

    A $while$ loop checks the condition before each iteration, so the body may run zero times. A $do...while$ loop runs the body once before checking the condition, guaranteeing at least one execution.

16. What do the $break$ and $continue$ statements do inside a loop?

    $break$ immediately exits the entire loop. $continue$ skips the rest of the current iteration and proceeds to the next one.

17. Write a standard JavaScript function declaration that returns the square of $x$.

    $$function\ square(x)\ \{\ return\ x\ *\ x;\ \}$$ A function declaration is hoisted, so it can be called before it appears in the code.

18. What is the difference between a function declaration and a function expression regarding hoisting?

    A function declaration ($function\ foo()\{\}$) is fully hoisted and callable before its definition. A function expression ($const\ foo = function()\{\}$) is not; only the variable is hoisted, so calling it early throws an error.

19. What does a function return if it has no explicit $return$ statement?

    It returns $undefined$.

20. What are default parameters and how are they written in a function declaration?

    Default parameters provide a fallback value when an argument is omitted or $undefined$: $$function\ greet(name = "Guest")\ \{\ ...\ \}$$ Calling $greet()$ uses $"Guest"$.

21. 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.

22. 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).

23. 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.

24. 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$.

See more JavaScript flashcards →

Planning JavaScript for Front-end Web Development

JavaScript (Front-end Web Development) FAQ