JavaScript & React Flashcards

A comprehensive set of flashcards covering core JavaScript concepts and React basics, derived from the provided teaching video notes.

What are the data types in JavaScript?

Primitive (string, number, boolean, null, undefined, symbol, bigint) and Non-Primitive (objects, arrays, functions).

What is the difference between var, let, and const?

var → function-scoped, can be redeclared; let → block-scoped, can be updated, not redeclared; const → block-scoped, cannot be updated or redeclared.

What are truthy and falsy values?

Falsy values are 0, empty string (""), null, undefined, NaN, and false. Everything else is truthy.

What is the difference between == and ===?

== compares values with type coercion; === compares values and types (strict equality).

What are template literals?

Strings enclosed in backticks that support interpolation and multiline strings.

What are arrow functions?

A shorter syntax for functions; this is lexically bound to the surrounding scope.

What is a callback function?

A function passed as an argument to another function and invoked after the main task completes, commonly used for async tasks.

What happens behind the scenes when a function uses a callback for an async task?

You call the function with a callback. If an async operation occurs, it’s handed off to Web APIs (in browsers) or libuv (in Node.js). When the task completes, the callback is placed in the callback queue and moved to the call stack by the event loop when the stack is empty.

What is a promise?

An object that represents the eventual completion or failure of an asynchronous operation.

What are the states of a Promise?

Pending → initial state; Fulfilled → operation succeeded; Rejected → operation failed.

How do you create a new Promise?

Let p = new Promise((resolve, reject) => { /* async work */; if (success) resolve(value); else reject(error); });

What are .then(), .catch(), and .finally()?

.then() handles success; .catch() handles failure; .finally() runs regardless of the outcome.

What is Promise.all()?

Runs multiple promises in parallel and resolves when all finish; rejects if any promise rejects.

What is Promise.race()?

Returns the result of the first settled promise (fulfilled or rejected).

What is Promise.allSettled()?

Waits for all promises to settle and returns an array of objects describing each outcome (status and value/reason).

What is Promise.any()?

Returns the first fulfilled promise; ignores rejections.

What is async/await?

Syntactic sugar for handling promises; async functions return promises, and await pauses execution until the awaited promise resolves.

What is the difference between null and undefined?

null is an intentional empty value; undefined means a variable has been declared but not assigned.

What are higher-order functions?

Functions that take other functions as arguments or return functions.

How do you define functions in JavaScript?

Function Declaration, Function Expression, and Arrow Function.

Arrow Functions vs Regular Functions?

Arrow functions are shorter and have lexical this; regular functions have their own this and can be used as constructors.

What are Props and State in React?

Props are read-only inputs passed from parent to child; State is mutable data managed inside a component.

What is the Event Loop in JavaScript?

Single-threaded model that handles async tasks by moving callbacks from the callback queue to the call stack when it’s empty.

What is the difference between async and defer in

async loads and executes as soon as ready (order not guaranteed); defer loads in parallel but executes after HTML parsing, preserving order.

What is the difference between shallow copy and deep copy?

Shallow copy copies object references; deep copy creates new copies of nested objects (e.g., via JSON.stringify/parse or structuredClone).

What are Spread and Rest operators (…)?

Spread expands elements; Rest collects remaining arguments into an array.

What is Destructuring in JavaScript?

Extraction of values from arrays/objects into separate variables.

What is the difference between for…in and for…of?

for…in iterates over object keys; for…of iterates over iterable values.

What is Event Delegation in JS?

Attach a single event listener to a parent element to handle events from its children.

What is the difference between mutable and immutable data in JS?

Mutable data (objects, arrays) can be changed; immutable data (primitives) cannot be changed in place.

What is Currying in JavaScript?

Breaking a function with multiple arguments into nested single-argument functions.

What is the difference between call, apply, and bind?

call invokes function with arguments separately; apply invokes function with arguments as an array; bind returns a new function with this bound (and optional initial arguments).

What is the difference between synchronous and asynchronous code?

Synchronous code runs line by line; asynchronous code uses callbacks/promises to avoid blocking.

What is the this keyword in JavaScript?

This refers to the object that is executing the current function; its value depends on how the function is called (global, object method, constructor, etc.).

How does await work?

Pauses execution inside an async function until the awaited promise resolves.

Can we use await outside an async function?

No, except for top-level await in ES2022 modules.

How do you handle errors with async/await?

Use try…catch blocks around awaited promises.

Difference between async/await and .then/.catch?

.then/.catch use promise chaining; async/await provides cleaner, synchronous-like syntax.

Can multiple await run in parallel?

Yes—use Promise.all to await multiple promises concurrently.

What happens if you don’t use await with a promise?

You get a Promise object instead of the resolved value.

What is top-level await?

In ES2022+, await can be used directly in modules without wrapping in async.

What is React?

A JavaScript library for building fast, reusable, component-based UIs.

What are components in React?

Reusable pieces of UI; functional components (preferred) and class components (older).

What are props in React?

Read-only inputs passed from parent to child.

What is state in React?

Data managed inside a component that can change over time.

Difference between props and state?

Props are passed from parent and are immutable; state is internal and mutable.

What are hooks in React?

Functions like useState, useEffect, and useContext that let you use state and lifecycle features in functional components.

What is JSX?

JavaScript XML – syntax that allows writing HTML-like code inside JavaScript.

What is the Virtual DOM?

A lightweight in-memory representation of the real DOM that React uses to efficiently update the UI.

What are controlled and uncontrolled components?

Controlled components have form data managed by React state; uncontrolled components rely on the DOM to manage form data.

What is the difference between useEffect and useLayoutEffect?

useEffect runs after render (asynchronous); useLayoutEffect runs synchronously after DOM updates, before painting.

What is React Router?

A library for navigation and routing in React apps.

What is lifting state up in React?

Moving shared state to a common parent so multiple children can access it.

What is conditional rendering in React?

Showing different UI based on conditions (e.g., isLoggedIn ? : ).

What are keys in React lists?

Unique identifiers to help React track items efficiently.

What is ReactDOM?

A package that provides DOM-specific methods to render React components.

What is the difference between functional and class components?

Functional components are plain JS functions (often with hooks); class components use ES6 classes and this.state.

What is the role of index.js in a React app?

Entry point that renders the root component (App) into the DOM.

What are fragments in React?

A wrapper that lets you group elements without adding extra DOM nodes.

What is React StrictMode?

A development tool that highlights potential problems; does not affect production.

What are default props in React?

Default values assigned to props if not provided by the parent.

What are PropTypes in React?

A way to type-check props passed to a component.

What is React reconciliation?

The process by which React updates the DOM by diffing the Virtual DOM with the previous version.

What is conditional CSS in React?

Dynamically applying styles or classes based on conditions.

What is inline styling in React?

Styling using a JavaScript object assigned to the style prop.

What are synthetic events in React?

React’s cross-browser wrapper around native events to ensure consistency.

What is the difference between stateful and stateless components?

Stateful components manage their own state; stateless components rely only on props.

What are controlled vs uncontrolled forms in React?

Controlled forms have their input value controlled by React state; uncontrolled forms access DOM values directly.

What is the React key prop and why is it important?

A unique identifier for list items to help React optimize rendering and reconcile efficiently.