Unit 1: Refreshing JavaScript and React Fundamentals - Practice Quiz
1
Which arrow function correctly returns the sum of a and b?
(a, b) => a + b
function => (a + b)
(a, b) = a + b
(a, b) -> a + b
2 Which keyword declares a block-scoped variable that cannot be reassigned?
let
var
static
const
3 Which array method creates a new array by transforming every element?
find()
some()
includes()
map()
4
Given const user = { name: "Asha", age: 20 };, which statement extracts the name property?
const [name] = user;
const name => user;
const name := user;
const { name } = user;
5 Which operator is used for both spread and rest syntax in JavaScript?
...
**
??
=>
6 Which keyword makes a function or value available to other JavaScript modules?
require
publish
export
include
7 What does immutability mean when updating React state?
8 What is a pure function?
async
9 What does a shallow copy of an object do with its nested objects?
10
When are two separate object variables referentially equal using ===?
11 What is a common characteristic of a Single Page Application (SPA)?
12 What does declarative UI mean in React?
13 What is a main benefit of component-based architecture?
14 Which command starts the process of creating a new Vite project with npm?
npm start vite-project
npm build react@latest
npm install react-page
npm create vite@latest
15 What is the main purpose of a development server in a React project?
16 How does a feature-based folder structure organize a React project?
17 How is a JavaScript expression inserted into JSX?
18 Which React DOM method creates a root for rendering a React application?
createElement()
appendChild()
querySelector()
createRoot()
19 What usually happens when a functional component's state changes?
20 What does React do during reconciliation?
21
Consider the following code:
const team = { name: 'UI', members: ['Ana'], print() { this.members.forEach(member => console.log(this.name + ': ' + member)); } };
Why does calling team.print() correctly log UI: Ana?
forEach method automatically binds this to team.
this from print.
this binding for every method.
this for team.
22
What is printed by this code after the timers execute?
for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }
0, 0, and 0
ReferenceError occurs
0, 1, and 2
3, 3, and 3
23
What is the value of result?
const items = [{ name: 'pen', active: true }, { name: 'bag', active: false }, { name: 'book', active: true }];
const result = items.filter(item => item.active).map(item => item.name.toUpperCase());
[true, true]
['PEN', 'BAG', 'BOOK']
['PEN', 'BOOK']
['pen', 'book']
24
What does the following code print?
const user = { name: 'Mira', address: { city: 'Pune' } };
const { name: displayName, role = 'viewer', address: { city } } = user;
console.log(displayName + '-' + role + '-' + city);
Mira-viewer-undefined
undefined-viewer-Pune
Mira-viewer-Pune
Mira-undefined-Pune
25
What is logged by this code?
const original = { settings: { theme: 'dark' } };
const copy = { ...original };
copy.settings.theme = 'light';
console.log(original.settings.theme, copy.settings.theme);
light light
dark dark
dark light
light dark
26
A file named app.js contains export default function App() {} and export const version = '1.0';. Which statement correctly imports both exports?
import App, { version } from './app.js';
import { App as default, version } from './app.js';
import { App, version } from './app.js';
import * as App, { version } from './app.js';
27
Given state shaped as { name: 'Lee', profile: { city: 'Delhi', timezone: 'IST' } }, which update changes only the city while preserving all other fields and references appropriately?
setUser(prev => { const next = { ...prev }; next.profile.city = 'Goa'; return next; });
setUser(prev => ({ ...prev, profile: { ...prev.profile, city: 'Goa' } }));
setUser(prev => ({ ...prev, profile: { city: 'Goa' } }));
setUser(prev => { prev.profile.city = 'Goa'; return prev; });
28 Which function is pure and therefore easiest to use predictably during React rendering?
const timestamp = () => Date.now();
const visit = user => ++user.views;
const fullName = user => user.first + ' ' + user.last;
const arrange = items => items.sort();
29
An object contains nested arrays and a Date. Which approach creates an independent deep copy while preserving the Date as a Date in modern browsers?
const copy = Object.assign({}, original);
const copy = structuredClone(original);
const copy = { ...original };
const copy = JSON.parse(JSON.stringify(original));
30
Consider an array state update:
const next = current;
next.push('B');
setItems(next);
Which statement best describes the problem?
Object.is(current, next) is false, so React must rerender.
Object.is(current, next) is true, so React may skip the update.
push creates a new array, so the update is immutable.
31 A dashboard must update its URL and switch views after initial loading without requesting a new HTML document for each navigation. Which architecture best matches this requirement?
32 Which implementation most clearly follows React's declarative UI approach for displaying an online status?
document.querySelector('p').textContent = isOnline ? 'Online' : 'Offline';
return <p>{isOnline && 'Online'}</p>;
return <p>{isOnline ? 'Online' : 'Offline'}</p>;
if (isOnline) document.body.innerHTML = '<p>Online</p>';
33 A product card containing an image, title, price, and add button appears on several pages. What is the best component-based design?
ProductCard that receives product data and an add handler.
App and select it using DOM element IDs.
34 Which command sequence creates and starts a React project using Vite?
npm install -g vite react react-dom, then vite create my-app, npm eject, and npm run production-server
npm create react-app my-app, then cd my-app, npm install, and npm run vite
npm install react-vite my-app, then cd my-app, npm build, and npm start
npm create vite@latest my-app -- --template react, then cd my-app, npm install, and npm run dev
35
In a standard Vite React project, which command creates optimized production assets, usually in the dist directory?
npm run dev
npm run preview
npm run lint
npm run build
36
An application has checkout-specific components and hooks plus a generic Button used throughout the application. Which organization best follows a feature-based structure?
components directory.
features/checkout and Button in shared/components.
shared and duplicate Button inside every feature.
src and distinguish their purpose only through long filenames.
37
Which JSX expression displays No items when count is 0 and displays 3 items when count is 3?
<span>{count ? count + ' items' : 'No items'}</span>
<span>{count || 'No items'}</span>
<span>{count && count + ' items'}</span>
<span>{if (count) count + ' items'}</span>
38
Assuming createRoot is imported from react-dom/client, which code correctly mounts App into <div id='root'></div>?
document.getElementById('root').render(createRoot(<App />));
createRoot(document.getElementById('root')).render(<App />);
createRoot(<App />).render(document.getElementById('root'));
createRoot(document.querySelector('App')).mount(<div id='root' />);
39
A functional component receives userId as a prop and should load user data after the component is committed whenever userId changes. Which implementation is appropriate?
useEffect(() => { loadUser(userId); }, []);
useEffect(() => { loadUser(userId); }, [userId]);
useEffect(() => { loadUser(userId); });
loadUser(userId); return <Profile />;
40
A rendered list can be reordered and its items have stable database IDs. Which key best helps React reconcile the list while preserving the correct item state?
<Row key={index} item={item} />
<Row key={item.id} item={item} />
<Row key={item.name + Date.now()} item={item} />
<Row key={Math.random()} item={item} />
41
What does the following code print?
const obj = { value: 10, make() { const arrow = () => this.value; return { value: 20, arrow }; } }; const { arrow } = obj.make(); console.log(arrow.call({ value: 30 }));
20
undefined
30
10
42
What happens when this code executes?
let value = 1; { console.log(typeof value); let value = 2; }
number and then changes the outer value to 2.
ReferenceError before logging anything.
number because the outer variable is visible.
undefined because typeof safely handles every inaccessible binding.
43
Given const a = [, 1, , 2]; const b = a.map(x => x * 2); const c = a.filter(() => true);, which description is correct?
b.length === 4, Object.keys(b) is ["0","1","2","3"], and c contains holes.
b.length === 4, Object.keys(b) is ["1","3"], and c is [1,2].
b.length === 2, Object.keys(b) is ["1","3"], and c has length 4.
b.length === 2, Object.keys(b) is ["0","1"], and c is [1,2].
44
What are the final values in [a, b, c, x]?
let x = 1; const { a = x++, b = x++, c = x++ } = { a: undefined, b: null };
[1, null, 2, 3]
[undefined, null, 1, 2]
[1, 2, 3, 4]
[1, null, 3, 4]
45
What is returned by apply()?
function apply({ id, ...base }, patch) { return { ...base, ...patch, id }; } const result = apply({ id: 1, role: "user", active: true }, { id: 9, active: false });
{ role: "user", active: false, id: 9 }
{ id: 1, role: "user", active: true }
{ role: "user", active: false, id: 1 }
{ role: "user", active: true, id: 9 }
46
Consider these modules.
counter.js: export let count = 0; export const increment = () => count++;
main.js: import { count, increment } from "./counter.js"; console.log(count); increment(); console.log(count);
What is printed?
0 followed by 1, because imported bindings are live.
1 followed by 1, because dependencies execute after import statements.
TypeError, because an exported variable cannot be changed after import.
0 followed by 0, because imports copy primitive values.
47
Given state = { user: { profile: { name: "Lin" }, permissions: ["read"] }, settings: { theme: "dark" } }, which update changes the name to "Ada" without mutation while preserving the original settings and permissions references?
const next = { ...state, user: { ...state.user, profile: { ...state.user.profile, name: "Ada" } } };
const next = { ...state }; next.user.profile.name = "Ada";
const next = structuredClone(state); next.user.profile.name = "Ada"; next.settings = { ...next.settings };
const next = { ...state, user: state.user }; next.user.profile = { name: "Ada" };
48
A component must return products sorted by ascending score without mutating the items prop and while retaining each product object's identity. Which expression satisfies those requirements?
items.sort((a, b) => a.score - b.score)
[...items].sort((a, b) => a.score - b.score)
items.filter(Boolean).reverse()
items.map(item => ({ ...item })).sort((a, b) => a.score - b.score)
49
What is true after this code runs?
const original = { nested: { x: 1 }, list: [1, 2] }; const shallow = { ...original }; const deep = structuredClone(original); shallow.nested.x = 7; deep.list.push(3);
original.nested.x === 1, original.list.length === 2, and shallow.nested !== original.nested.
original.nested.x === 1, original.list.length === 3, and deep.nested.x === 7.
original.nested.x === 7, original.list.length === 2, and deep.list.length === 3.
original.nested.x === 7, original.list.length === 3, and deep.list === original.list.
50
A React component executes state.user.name = "Ada"; setState(state);, where state is the current object from useState. Which outcome best describes the problem?
51 An application has many URLs, uses the History API for navigation, loads route-specific JavaScript chunks, retrieves data through APIs, and keeps the same document alive between routes. How should it be classified?
52
A component directly changes a rendered element using document.querySelector(...).textContent = "Saved". After an unrelated state update, React restores the previous text. What best explains this behavior?
53 Two sibling components must display and update the same selected product, while a third sibling only reads it. Which design best preserves a single source of truth?
54
A Vite React project defines VITE_API_URL=https://api.example.com in the applicable environment file. Which client-side expression accesses the value correctly?
import.meta.env.API_URL
process.env.VITE_API_URL
globalThis.VITE_API_URL
import.meta.env.VITE_API_URL
55 Which statement accurately distinguishes Vite's development server from its production build process?
56
In a feature-based application, checkout needs a stable selector owned by the cart feature. Which import strategy best protects feature boundaries?
features/cart/internal/state/selectors.
features/cart.
utils directory.
57
What visible content is produced by <div>{count && <span>New</span>}</div> when count is the number 0?
div containing an empty span.
div, because every falsy value is omitted.
div, because the entire JSX expression becomes falsy.
div containing the text 0.
58
What is the semantic effect of calling root.render(<App mode="light" />) and then root.render(<App mode="dark" />) on the same root?
59
Which statement about functional component rendering and effects remains valid under concurrent rendering and development StrictMode?
60
A list of stateful row components is reordered. Each row currently uses its array index as key. What is the most likely reconciliation issue, and what is the correct remedy?
Did this save you a night before the exam?
LPU Notes is free, and it stays free. Ads cover part of the server bill. The rest comes out of a student's own pocket: the domain, the storage, and keeping the site up through the weeks everyone needs it at once.
The payment button didn't load. An ad blocker or a filtered network is the usual reason. to try again.
Nothing here is ever locked, and nothing unlocks. Chip in only if it was worth it. What it pays for →