Front End Development Front-End Development 3 — Questions and Answers
Question 1: What is the difference between `localStorage` and `sessionStorage` in the browser?
- localStorage is faster to access
- sessionStorage data persists after the tab is closed; localStorage does not
- localStorage data is cleared when the tab closes; sessionStorage persists indefinitely
- sessionStorage data is cleared when the tab closes; localStorage persists indefinitely (Correct answer)
Correct answer: sessionStorage data is cleared when the tab closes; localStorage persists indefinitely
sessionStorage data is cleared when the browser tab or window is closed, while localStorage data persists until explicitly cleared.
Question 2: In CSS Flexbox, what does `align-items: stretch` do?
- Stretches items along the main axis to fill the container
- Makes all items the same width
- Stretches items along the cross axis to fill the container height (Correct answer)
- Aligns items to the flex-start of the cross axis
Correct answer: Stretches items along the cross axis to fill the container height
align-items: stretch causes flex children to stretch along the cross axis (perpendicular to flex-direction) to fill the container's full height (or width in column layout).
Question 3: What is a closure in JavaScript?
- A function that has no return value
- A function that retains access to its outer scope even after the outer function has returned (Correct answer)
- A method to close a browser window
- An immediately invoked function expression
Correct answer: A function that retains access to its outer scope even after the outer function has returned
A closure is a function that remembers and can access variables from its outer (enclosing) lexical scope even after that outer function has finished executing.
Question 4: Which CSS unit is relative to the font-size of the root element?
- em
- rem (Correct answer)
- vh
- ex
Correct answer: rem
The `rem` (root em) unit is relative to the font-size of the HTML root element, making it consistent regardless of nesting depth.
Question 5: What does the `async` keyword do when placed before a function declaration?
- Makes the function run in a separate thread
- Causes the function to always return a Promise (Correct answer)
- Prevents the function from blocking other code
- Enables synchronous execution of await expressions
Correct answer: Causes the function to always return a Promise
The async keyword causes a function to implicitly return a Promise, and enables the use of await inside it.
Question 6: In HTML, what is the correct use of the `<figure>` element?
- To display a table of data
- To wrap self-contained content like images or diagrams with an optional caption (Correct answer)
- To define a section of navigation links
- To embed an external webpage
Correct answer: To wrap self-contained content like images or diagrams with an optional caption
The `<figure>` element is used to encapsulate self-contained content (such as images, charts, or code snippets) that is referenced from the main text, often with a `<figcaption>`.
Question 7: Which browser API would you use to observe when a DOM element enters or exits the viewport?
- MutationObserver
- ResizeObserver
- IntersectionObserver (Correct answer)
- PerformanceObserver
Correct answer: IntersectionObserver
The IntersectionObserver API asynchronously reports changes in the intersection of a target element with its ancestor or the viewport.
Front End Development Front-End Development 3
What is the difference between `localStorage` and `sessionStorage` in the browser?