Front End Development Front-End Development 4

Question 1

What is tree shaking in the context of JavaScript bundlers?

Accepted Answer

Removing unused code (dead code elimination) from the final bundle

Answer

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?

Accepted Answer

Stops the event from bubbling up to parent elements

Answer

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?

Accepted Answer

Three columns each taking one-third of the available space

Answer

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?

Accepted Answer

It helps React identify which items have changed, been added, or removed during reconciliation

Answer

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?

Accepted Answer

def

Answer

JavaScript uses let, const, and var for variable declarations; `def` is not a JavaScript keyword (it's used in Python).

Front End Development Practice Test