Your Ultimate JavaScript and React Cheat Sheet for Interviews

Preparing for Your Next Interview: Key JavaScript and React Topics

JavaScript Topics

1. Hoisting

Hoisting is JavaScript's mechanism of moving variable and function declarations to the top of their containing scope during the compile phase, before the code is executed. This means you can reference variables and functions before they are actually declared in the code. However, only declarations are hoisted, not initializations. For variables declared with var, they are hoisted and initialized to undefined, while let and const are hoisted but not initialized, causing a "temporal dead zone" error if accessed before declaration. Function declarations are fully hoisted, meaning they can be called before they appear in the code.

Example:

console.log(a); // undefined
var a = 5;

// Equivalent to:
var a;
console.log(a); // undefined
a = 5;

Function declarations are also hoisted:

greet(); // "Hello!"
function greet() {
  console.log("Hello!");
}

2. Closure

A closure is a feature in JavaScript where a function retains access to its lexical scope even when executed outside that scope. This allows the function to "remember" variables from its surrounding scope. Closures are often used for data encapsulation, maintaining state, or creating private variables in JavaScript. They are formed whenever a function is defined inside another function and the inner function references variables in the outer function.

Example:

function outer() {
  let count = 0;
  return function inner() {
    count++;
    return count;
  };
}

const increment = outer();
console.log(increment()); // 1
console.log(increment()); // 2

3. Promise

Promises represent a placeholder for a value that will be available in the future. They are used to handle asynchronous operations more effectively than traditional callback functions, reducing "callback hell." Promises can be in one of three states: pending, fulfilled, or rejected. Once a promise is either fulfilled or rejected, it becomes immutable. Promises improve code readability and make it easier to chain asynchronous operations.

Example:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 1000);
});

fetchData.then(data => console.log(data)); // "Data fetched!"

4. Function Currying

Function currying is a technique where a function with multiple arguments is transformed into a sequence of functions, each taking a single argument. This approach is widely used in functional programming to create reusable functions by fixing some arguments of the original function. Currying enables better code readability, reusability, and modularization.

Example:

function add(a) {
  return function(b) {
    return a + b;
  };
}

const add5 = add(5);
console.log(add5(3)); // 8

5. Execution Context

The execution context defines the environment in which JavaScript code is executed. It includes variables, objects, and functions accessible at a particular time. There are three types of execution contexts:

• Global Execution Context: Created when a script first runs. Variables and functions declared in the global scope are part of this context.
• Function Execution Context: Created whenever a function is invoked, containing its local variables and parameters.
• Eval Execution Context: Rarely used, created when eval() is invoked. The execution context also determines the value of this and involves the creation of the scope chain.

Example:

var a = 10; // Global Execution Context
function foo() {
  var b = 20; // Function Execution Context
  console.log(a + b); // 30
}
foo();

6. Call, Apply, Bind

These are methods to explicitly set the value of this when invoking a function.

• Call: Invokes a function with a given this context and arguments passed individually.
• Apply: Similar to call, but arguments are passed as an array.
• Bind: Returns a new function with a specific this context and arguments pre-set, without immediately invoking it.

Example:

const person = {
  name: "Alice",
};

function greet(greeting) {
  console.log(`${greeting}, ${this.name}`);
}

greet.call(person, "Hello"); // "Hello, Alice"
greet.apply(person, ["Hi"]); // "Hi, Alice"

const boundGreet = greet.bind(person);
boundGreet("Hey"); // "Hey, Alice"

7. Polyfills for Common Methods

Polyfills are code snippets that implement features in environments where they are not natively available. They allow older browsers or runtime environments to support modern JavaScript features like Array.map, Promise, or Object.assign. Polyfills are often used to ensure compatibility and are implemented using fallback logic that mimics the behavior of the missing feature.

Example: Array.prototype.map Polyfill:

Array.prototype.myMap = function(callback) {
  const result = [];
  for (let i = 0; i < this.length; i++) {
    result.push(callback(this[i], i, this));
  }
  return result;
};

console.log([1, 2, 3].myMap(x => x * 2)); // [2, 4, 6]

React Topics

1. Reconciliation

Reconciliation is React's process of updating the DOM to match the virtual DOM. React uses a diffing algorithm to determine the minimal number of updates needed, making rendering efficient. When state or props change, React creates a new virtual DOM, compares it with the previous one, and updates only the parts that have changed.

2. Hooks

Hooks are functions that allow functional components to use features like state and lifecycle methods, which were previously available only in class components. Examples include useState for state management and useEffect for side effects. Hooks make React code more concise and functional components more powerful.

Example:

import React, { useState } from "react";

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

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

3. Class vs. Functional Components

Class components are ES6 classes that use this for state and lifecycle methods. Functional components are simple functions that render UI. With the introduction of hooks, functional components can manage state and lifecycle without the need for classes. Functional components are preferred for their simplicity and better performance.

Example of a class component:

class Counter extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

4. Memoization

Memoization is a performance optimization technique used to prevent unnecessary re-calculations or re-renders. In React, memoization ensures components are re-rendered only when their props or state change. This is especially useful in components that are computationally expensive or have frequent updates.

Example:

const ExpensiveComponent = React.memo(({ data }) => {
  console.log("Rendered!");
  return <div>{data}</div>;
});

5. Higher-Order Component (HOC)

An HOC is a design pattern in React where a function takes a component as input and returns an enhanced version of that component. HOCs are commonly used for code reuse, managing state, and adding functionality like logging or authentication.

Example:

function withLogger(Component) {
  return function WrappedComponent(props) {
    console.log("Props:", props);
    return <Component {...props} />;
  };
}

6. Performance

Improving React performance involves techniques like avoiding unnecessary re-renders, lazy loading components, and optimizing rendering using React.memo or useMemo. Developers also use tools like React Profiler to identify bottlenecks.

7. React Router

React Router is a library for managing navigation in React applications. It allows developers to define routes and dynamically render components based on the URL. Features include nested routes, route parameters, and navigation guards.

Example:

import { BrowserRouter, Route, Link } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Link to="/home">Home</Link>
      <Route path="/home" component={() => <div>Home Page</div>} />
    </BrowserRouter>
  );
}

8. Caching

Caching in React involves storing frequently used data to avoid re-fetching it. This can be achieved using libraries like react-query, Redux, or localStorage. Caching improves performance and user experience by reducing load times.

9. Security

To secure React applications, developers should validate and sanitize user inputs, use HTTPS, and avoid inline JavaScript to prevent XSS attacks. Libraries like Helmet help set secure HTTP headers. Authentication and authorization should also be implemented securely.

10. Improving Performance

Performance can be improved by:

• Reducing bundle size with code splitting.
• Avoiding unnecessary state updates.
• Using React.lazy for lazy loading.
• Optimizing images and assets.
• Using efficient algorithms for computational tasks.

11. Memory Leaks

Memory leaks occur when objects are no longer in use but are not garbage collected. In React, leaks often arise from improper cleanup of event listeners, timers, or subscriptions. Using useEffect with a cleanup function ensures proper cleanup, preventing such issues.

Clean up subscriptions or timers in useEffect:

useEffect(() => {
  const timer = setInterval(() => console.log("Running"), 1000);
  return () => clearInterval(timer); // Cleanup
}, []);

In conclusion, mastering the core concepts of JavaScript and React is crucial for any developer aiming to build robust and efficient applications. These principles not only form the foundation of web development but also prepare you to tackle complex challenges with confidence. Whether it’s understanding closures, optimizing performance with React, or implementing security best practices, a deep understanding of these topics will set you apart in interviews and in your career. Keep exploring, practicing, and refining your skills—because the journey of learning never truly ends in the ever-evolving world of programming.