Frontend Web Development JavaScript Programming Flashcards

24 sample cards from the JavaScript Programming deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. What is object destructuring, and how do you rename a property during it?

   Destructuring extracts properties into variables: `const { a, b } = obj`. Rename with a colon: `const { a: x } = obj` assigns `obj.a` to a variable named `x`.

2. What is the difference between the spread operator and rest parameters (both `...`)?

   Spread expands an iterable/object into individual elements (`[...arr]`, `{...obj}`, `f(...args)`). Rest collects multiple elements into a single array/object (`function f(...args)`, `const [a, ...rest] = arr`).

3. Does the spread operator create a deep or shallow copy?

   A shallow copy. `{...obj}` or `[...arr]` copies only the top level; nested objects/arrays are still shared by reference.

4. How do you set a default value while destructuring?

   Assign with `=`: `const { x = 5 } = obj` gives `x` the value `5` when `obj.x` is `undefined`. Works similarly for arrays: `const [a = 1] = []`.

5. What is the difference between a `Map` and a plain object?

   A `Map` allows keys of any type (including objects/functions), maintains insertion order, has a `size` property, and is directly iterable. Object keys are coerced to strings/symbols.

6. What guarantee does a `Set` provide, and how do you check membership?

   A `Set` stores only unique values (no duplicates). Check membership with `set.has(value)`; add with `set.add(value)`; get count with `set.size`.

7. What do `JSON.stringify()` and `JSON.parse()` do?

   `JSON.stringify(value)` converts a JavaScript value into a JSON string; `JSON.parse(text)` converts a JSON string back into a JavaScript value.

8. What happens to `undefined`, functions, and symbols during `JSON.stringify()`?

   In an object, properties with `undefined`, function, or symbol values are omitted. In an array, they are converted to `null`.

9. What is a closure?

   A closure is a function bundled with references to its surrounding lexical environment, allowing it to access variables from an outer scope even after that outer function has returned.

10. What is lexical scope?

    Lexical (static) scope means a variable's accessibility is determined by where it is written in the source code (the nesting of functions/blocks), not by where or how a function is called at runtime.

11. How does the `this` keyword behave in a regular function called as a standalone function (non-strict vs strict mode)?

    In non-strict mode, `this` defaults to the global object (`window`/`globalThis`). In strict mode, `this` is `undefined`.

12. What do `call`, `apply`, and `bind` do?

    All set `this` explicitly. `call(thisArg, arg1, arg2)` invokes immediately with args listed; `apply(thisArg, [args])` invokes immediately with args as an array; `bind(thisArg)` returns a new function with `this` permanently bound.

13. When a method is called as `obj.method()`, what is `this`?

    `this` is the object to the left of the dot at call time (`obj`). Note this is dynamic: extracting the method and calling it standalone loses that binding.

14. What is a higher-order function?

    A function that takes one or more functions as arguments and/or returns a function. Examples include `map`, `filter`, `reduce`, and `setTimeout`.

15. What is a callback function?

    A function passed as an argument to another function, to be invoked ('called back') later — either synchronously (e.g., `map`) or asynchronously (e.g., event handlers, `setTimeout`).

16. What is hoisting, and how are `var` and function declarations affected?

    Hoisting moves declarations to the top of their scope during compilation. `var` declarations are hoisted and initialized to `undefined`; function declarations are hoisted with their full body. `let`/`const` are hoisted but uninitialized (TDZ).

17. What are the two phases of the JavaScript execution context?

    The creation (memory allocation/hoisting) phase, where variables and functions are set up, and the execution phase, where code runs line by line and values are assigned.

18. What is prototypal inheritance?

    Objects inherit properties and methods from another object (their prototype) via the prototype chain. When a property isn't found on an object, JavaScript looks up its `[[Prototype]]` (accessible as `Object.getPrototypeOf(obj)` or `__proto__`).

19. What is the difference between `__proto__` and `prototype`?

    `prototype` is a property on constructor functions used to build the prototype of instances they create. `__proto__` (or `[[Prototype]]`) is the internal link on every object pointing to its actual prototype.

20. How do ES6 classes implement inheritance, and what does `super` do?

    A subclass uses `class B extends A`. `super(...)` calls the parent constructor (required before using `this` in the subclass constructor), and `super.method()` calls a parent method.

21. What is the difference between an instance method and a `static` member in a class?

    Instance methods are called on instances (`obj.method()`) and live on the prototype. `static` members belong to the class itself (`ClassName.method()`) and are not accessible from instances.

22. What are getters and setters in a class or object?

    Accessor properties defined with `get` and `set` keywords. A getter runs when the property is read (`obj.x`); a setter runs when it is assigned (`obj.x = v`). They let you compute or validate values while using property syntax.

23. What is the difference between a named export and a default export in ES modules?

    A module can have many named exports, imported with braces and matching names: `import { a, b } from './m'`. It can have only one default export, imported without braces under any name: `import x from './m'`.

24. What is the difference between `querySelector()` and `querySelectorAll()`, and how do you traverse to a parent or children?

    `querySelector(sel)` returns the first matching element (or `null`); `querySelectorAll(sel)` returns a static `NodeList` of all matches. Traverse with `.parentElement`, `.children`, `.nextElementSibling`, and `.closest(sel)`.

What this deck covers

JavaScript Programming flashcards FAQ