Web Development MCQs - JavaScript and React Fundamentals (Set 2)

Q1. What is the output of the following code?

console.log(typeof a);
console.log(b);
var a = 10;
var b = function () {};

a) 10 then function

b) undefined then undefined

c) ReferenceError

d) undefined then function

Q2. What happens when this code runs?

console.log(x);
let x = 5;

a) It prints undefined

b) It prints 5

c) It throws a ReferenceError

d) It throws a TypeError

Q3. What does this line print?

console.log(null == undefined, null === undefined, '0' == false, NaN == NaN);

a) true false true false

b) true true false false

c) false false true true

d) true false false false

Q4. When a user clicks a <li> inside a <ul> that has a single click listener attached (event delegation), which property tells you which <li> was actually clicked?

a) event.currentTarget

b) event.target

c) this (inside the listener)

d) event.relatedTarget

Q5. What is printed?

const obj = {
  count: 10,
  getCount() { return this.count; }
};
const fn = obj.getCount;
console.log(fn.call({ count: 20 }));

a) 10

b) undefined

c) 20

d) TypeError

Q6. What is printed?

function makeCounter() {
  let count = 0;
  return () => ++count;
}
const c1 = makeCounter();
const c2 = makeCounter();
c1();
c1();
console.log(c1(), c2());

a) 3 1

b) 3 3

c) 1 1

d) 2 1

Q7. What does this code print (one value per line)?

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}

a) 0 1 2

b) 3 3 3

c) 0 0 0

d) undefined undefined undefined

Q8. In React, what is the main problem with using the array index as the key for a list whose items can be reordered, inserted or deleted?

a) React throws an error when keys are numbers

b) Indexes are not unique within the list

c) Keys stay tied to positions rather than items, so React may reuse the wrong component's state and DOM

d) It disables the virtual DOM for that list

Q9. What is the output order?

console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');

a) A C D B

b) A B C D

c) A D B C

d) A D C B

Q10. What does this code print?

async function run() {
  console.log(1);
  await null;
  console.log(2);
}
console.log(3);
run();
console.log(4);

a) 1 3 2 4

b) 3 1 4 2

c) 3 1 2 4

d) 1 2 3 4

Q11. What is printed?

const nums = [1, 2, 3, 4];
const result = nums.filter(n => n % 2 === 0).reduce((acc, n) => acc + n * 10, 1);
console.log(result);

a) 61

b) 60

c) 100

d) 11

Q12. What is printed?

const [x, , y = 10, z = 5] = [1, 2, 3];
const { p, ...rest } = { p: 1, q: 2, r: 3 };
console.log(x, y, z, rest);

a) 1 2 3 { q: 2, r: 3 }

b) 1 3 5 { p: 1, q: 2, r: 3 }

c) 1 10 5 { q: 2, r: 3 }

d) 1 3 5 { q: 2, r: 3 }

Q13. Which statement about props and state in React is correct?

a) Props are passed in by the parent and are read-only; state is owned by the component and updated via its setter

b) A component can freely modify its own props

c) State is passed from parent to child, props are internal

d) Changing a plain local variable re-renders the component just like state

Q14. Two sibling components both need to read and update the same search text. What is the recommended React approach?

a) Store the text in a global variable outside React

b) Keep a copy of the state in each sibling and sync them with useEffect

c) Lift the state up to their closest common parent and pass the value and an updater function down as props

d) Have one sibling call a method on the other via a ref

Q15. What makes an <input> a controlled component in React?

a) It has a ref attached using useRef

b) It uses the defaultValue prop

c) It is wrapped inside a <form> element

d) Its value is driven by React state through the value prop and updated in an onChange handler

Q16. What is the output order?

console.log('start');
setTimeout(() => console.log('timeout'), 0);
Promise.resolve()
  .then(() => console.log('then1'))
  .then(() => console.log('then2'));
queueMicrotask(() => console.log('micro'));
console.log('end');

a) start end micro then1 then2 timeout

b) start end then1 then2 micro timeout

c) start end then1 micro then2 timeout

d) start then1 micro then2 end timeout

Q17. Ignoring React StrictMode's extra development checks, when does the effect below run?

useEffect(() => {
  fetchProfile(userId);
}, [userId]);

a) After every render

b) Only once, before the first render

c) Only when the component unmounts

d) After the first render, and again after any render in which userId has changed

Q18. count starts at 0. The button below is clicked once. What is the value of count after the re-render?

const [count, setCount] = useState(0);

function handleClick() {
  setCount(count + 1);
  setCount(count + 1);
  setCount(count + 1);
}

a) 3

b) 1

c) 0

d) 2