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
(a, b) -> a + b
function => (a + b)
(a, b) => a + b
2 Which keyword declares a block-scoped variable that cannot be reassigned?
let
const
static
var
3 Which array method creates a new array by transforming every element?
some()
find()
map()
includes()
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?
include
publish
export
require
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 create vite@latest
npm install react-page
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?
querySelector()
createRoot()
createElement()
appendChild()
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 for team.
this binding for every method.
22
What is printed by this code after the timers execute?
for (let i = 0; i < 3; i++) { setTimeout(() => console.log(i), 0); }
3, 3, and 3
ReferenceError occurs
0, 0, and 0
0, 1, and 2
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());
['pen', 'book']
[true, true]
['PEN', 'BAG', '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);
undefined-viewer-Pune
Mira-undefined-Pune
Mira-viewer-undefined
Mira-viewer-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 dark
dark dark
light light
dark light
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 => ({ ...prev, profile: { ...prev.profile, city: 'Goa' } }));
setUser(prev => ({ ...prev, profile: { city: 'Goa' } }));
setUser(prev => { const next = { ...prev }; next.profile.city = 'Goa'; return next; });
setUser(prev => { prev.profile.city = 'Goa'; return prev; });
28 Which function is pure and therefore easiest to use predictably during React rendering?
const visit = user => ++user.views;
const fullName = user => user.first + ' ' + user.last;
const arrange = items => items.sort();
const timestamp = () => Date.now();
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 = JSON.parse(JSON.stringify(original));
const copy = { ...original };
const copy = structuredClone(original);
30
Consider an array state update:
const next = current;
next.push('B');
setItems(next);
Which statement best describes the problem?
push creates a new array, so the update is immutable.
Object.is(current, next) is true, so React may skip the update.
Object.is(current, next) is false, so React must rerender.
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?
return <p>{isOnline && 'Online'}</p>;
document.querySelector('p').textContent = isOnline ? 'Online' : 'Offline';
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?
App and select it using DOM element IDs.
ProductCard that receives product data and an add handler.
34 Which command sequence creates and starts a React project using Vite?
npm create vite@latest my-app -- --template react, then cd my-app, npm install, and npm run dev
npm install -g vite react react-dom, then vite create my-app, npm eject, and npm run production-server
npm install react-vite my-app, then cd my-app, npm build, and npm start
npm create react-app my-app, then cd my-app, npm install, and npm run vite
35
In a standard Vite React project, which command creates optimized production assets, usually in the dist directory?
npm run dev
npm run build
npm run preview
npm run lint
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?
shared and duplicate Button inside every feature.
components directory.
src and distinguish their purpose only through long filenames.
features/checkout and Button in shared/components.
37
Which JSX expression displays No items when count is 0 and displays 3 items when count is 3?
<span>{if (count) count + ' items'}</span>
<span>{count && count + ' items'}</span>
<span>{count || 'No items'}</span>
<span>{count ? count + ' items' : 'No items'}</span>
38
Assuming createRoot is imported from react-dom/client, which code correctly mounts App into <div id='root'></div>?
createRoot(document.getElementById('root')).render(<App />);
createRoot(document.querySelector('App')).mount(<div id='root' />);
document.getElementById('root').render(createRoot(<App />));
createRoot(<App />).render(document.getElementById('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); });
loadUser(userId); return <Profile />;
useEffect(() => { loadUser(userId); }, [userId]);
useEffect(() => { loadUser(userId); }, []);
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={item.name + Date.now()} item={item} />
<Row key={Math.random()} item={item} />
<Row key={item.id} item={item} />
<Row key={index} 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 }));
undefined
20
30
10
42
What happens when this code executes?
let value = 1; { console.log(typeof value); let value = 2; }
undefined because typeof safely handles every inaccessible binding.
ReferenceError before logging anything.
number and then changes the outer value to 2.
number because the outer variable is visible.
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 === 2, Object.keys(b) is ["0","1"], and c is [1,2].
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.
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 };
[undefined, null, 1, 2]
[1, 2, 3, 4]
[1, null, 3, 4]
[1, null, 2, 3]
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: 1 }
{ role: "user", active: false, id: 9 }
{ id: 1, role: "user", active: true }
{ 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.
TypeError, because an exported variable cannot be changed after import.
0 followed by 0, because imports copy primitive values.
1 followed by 1, because dependencies execute after import statements.
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 }; next.user.profile.name = "Ada";
const next = { ...state, user: { ...state.user, profile: { ...state.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.filter(Boolean).reverse()
[...items].sort((a, b) => a.score - b.score)
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 === 7, original.list.length === 2, and deep.list.length === 3.
original.nested.x === 7, original.list.length === 3, and deep.list === original.list.
original.nested.x === 1, original.list.length === 3, and deep.nested.x === 7.
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?
process.env.VITE_API_URL
import.meta.env.VITE_API_URL
import.meta.env.API_URL
globalThis.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, because every falsy value is omitted.
div, because the entire JSX expression becomes falsy.
div containing the text 0.
div containing an empty span.
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 →