Front End Development Front-End Development 4 — Questions and Answers
Question 1: What is tree shaking in the context of JavaScript bundlers?
- A technique to minify CSS selectors
- Removing unused code (dead code elimination) from the final bundle (Correct answer)
- Splitting code into multiple chunks for lazy loading
- Reordering CSS rules for better specificity
Correct answer: Removing unused code (dead code elimination) from the final bundle
Tree shaking is a dead code elimination technique where bundlers like webpack or Rollup remove exports that are never imported, reducing bundle size.
Question 2: What does `event.stopPropagation()` do in JavaScript?
- Prevents the default browser action for the event
- Stops the event from bubbling up to parent elements (Correct answer)
- Removes all event listeners from an element
- Cancels any pending setTimeout calls
Correct answer: Stops the event from bubbling up to parent elements
event.stopPropagation() prevents the event from traveling up the DOM tree to parent elements during the bubbling phase.
Question 3: In CSS Grid, what does `grid-template-columns: repeat(3, 1fr)` create?
- Three rows of equal height
- Three columns each taking one-third of the available space (Correct answer)
- A 3x3 grid with equal cells
- Three columns with a 1px fraction gap
Correct answer: Three columns each taking one-third of the available space
This creates three columns that each take an equal fraction (1/3) of the available container width using the fr (fractional) unit.
Question 4: What is the purpose of the `key` prop in React lists?
- It adds a CSS class to list items
- It helps React identify which items have changed, been added, or removed during reconciliation (Correct answer)
- It sets the tab order for accessibility
- It enforces unique IDs in the HTML output
Correct answer: It helps React identify which items have changed, been added, or removed during reconciliation
The key prop gives React a stable identity for each list item, enabling efficient DOM updates by tracking changes during the reconciliation process.
Question 5: Which of the following is NOT a valid way to declare a variable in modern JavaScript?
- let
- const
- var
- def (Correct answer)
Correct answer: def
JavaScript uses let, const, and var for variable declarations; `def` is not a JavaScript keyword (it's used in Python).
Question 6: What does CORS stand for and what problem does it solve?
- Code Organization and Reuse System; manages module imports
- Cross-Origin Resource Sharing; controls which origins can access resources on a server (Correct answer)
- Content Object Rendering Standard; handles HTML parsing
- Cascading Override Rule Set; resolves CSS conflicts
Correct answer: Cross-Origin Resource Sharing; controls which origins can access resources on a server
CORS (Cross-Origin Resource Sharing) is a browser security mechanism that uses HTTP headers to allow or restrict web pages from making requests to a different origin than the one that served the page.
Question 7: What is the difference between `==` and `===` in JavaScript?
- === is used for objects; == is for primitives
- == performs type coercion before comparison; === checks value and type without coercion (Correct answer)
- They are identical in behavior
- === is faster but less accurate than ==
Correct answer: == performs type coercion before comparison; === checks value and type without coercion
The == operator converts operands to the same type before comparing (loose equality), while === requires both value and type to match exactly (strict equality).
Front End Development Front-End Development 4
What is tree shaking in the context of JavaScript bundlers?