Cracking JavaScript: My Notes from LeetCode’s 30-Day Challenge

I have compiled my notes while working on LeetCode's 30 Days of JavaScript exercises. This study covers key aspects of JavaScript and explains concepts we frequently use but may not fully understand. I believe it will also be very useful for interview preparation. Resources I use: I refer to ChatGPT for examples and explanations I use Test Your JavaScript Knowledge by Lydia Hallie on Frontend Masters I also follow 30 Days of JavaScript Part1: Closures Closures are a fundamental concept in JavaScript that allow functions to retain access to their lexical scope even after the outer function has finished executing. This is possible because functions in JavaScript "capture" the variables they reference from their surrounding scope. Closures occur when: A function is defined inside another function. The inner function uses variables from the outer function’s scope. The outer function returns the inner function, and the inner function is later executed elsewhere. A closure is when a function remembers its own lexical scope even if it is called by another function’s lexical scope. If a function uses a variable outside of its own scope, it still has access to that variable even when executed from a different scope. function counter() { let count = 0; return function () { count++; console.log(count); }; } const increment = counter(); increment(); // 1 increment(); // 2 Why Are Closures Useful? Data Encapsulation: Closures allow private variables by keeping them accessible only within a function. Maintaining State in Callbacks and Event Handlers: Used in setTimeout, event listeners, or asynchronous operations. Avoiding Global Variables: Helps prevent polluting the global scope. Part2: Basic Array Transformations Question: What Is the Performance Difference Between the ForEach Method and the For Loop? For Loop The for loop is faster and can be optimized, but it requires more manual work. Its readability is lower. Since it involves less abstraction, it is easier for the JavaScript engine (e.g., V8) to optimize. Direct access: In a for loop, array elements are accessed directly using arr[i] in each iteration. This is faster compared to calling an internal function like forEach. Disadvantage: Lower abstraction means writing more code, which reduces readability. ForEach Method forEach provides abstraction for looping over an array. While it makes the code cleaner and more understandable, it comes with a performance cost. This is because a callback function is invoked in each iteration. Part3: Function Transformations Functional Programming 1. Pure Functions: Pure functions are functions that always produce the same output for the same input and have no side effects. // Pure function example function add(a, b) { return a + b; // Always returns the same output for the same input } console.log(add(2, 3)); // Output: 5 2. Immutability: In functional programming, data should be immutable. This means that once a data structure is created, it should not be changed; instead, a new data structure should be created. // Immutability example const arr = [1, 2, 3]; const newArr = [...arr, 4]; // Instead of modifying the original array, we create a new one console.log(arr); // Output: [1, 2, 3] console.log(newArr); // Output: [1, 2, 3, 4] 3. High-Order Functions: High-order functions are functions that can take other functions as arguments or return a function (e.g., map, filter, reduce). // High-order function example const numbers = [1, 2, 3, 4]; const doubled = numbers.map(num => num * 2); // 'map' is a high-order function console.log(doubled); // Output: [2, 4, 6, 8] 4. Function Composition: Function composition is the process of combining multiple functions to create more complex functions. // Function composition example const add5 = x => x + 5; const multiplyBy2 = x => x * 2; const composedFunction = x => multiplyBy2(add5(x)); // Compose functions console.log(composedFunction(3)); // Output: 16 (3 + 5 = 8, 8 * 2 = 16) 5. First-Class Functions: Functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions. // First-class function example const greet = name => `Hello, ${name}!`; const sayHello = greet; // Assigning a function to a variable console.log(sayHello("Alice")); // Output: Hello, Alice! 6. Declarative Programming: Declarative programming focuses on what needs to be done, rather than how it is done. For example, using reduce instead of a for loop. // Declarative programming example using reduce const numbers = [1, 2, 3, 4]; // Using reduce to sum the numbers (declarative) const sum = numbers.reduce((acc, num) => acc + num, 0); console.log(sum); // Output: 10

Apr 3, 2025 - 23:27

Cracking JavaScript: My Notes from LeetCode’s 30-Day Challenge

I have compiled my notes while working on LeetCode's 30 Days of JavaScript exercises. This study covers key aspects of JavaScript and explains concepts we frequently use but may not fully understand. I believe it will also be very useful for interview preparation.

Resources I use:

I refer to ChatGPT for examples and explanations
I use Test Your JavaScript Knowledge by Lydia Hallie on Frontend Masters
I also follow 30 Days of JavaScript

Part1: Closures

Closures are a fundamental concept in JavaScript that allow functions to retain access to their lexical scope even after the outer function has finished executing. This is possible because functions in JavaScript "capture" the variables they reference from their surrounding scope.

Closures occur when:

A function is defined inside another function.
The inner function uses variables from the outer function’s scope.
The outer function returns the inner function, and the inner function is later executed elsewhere.

A closure is when a function remembers its own lexical scope even if it is called by another function’s lexical scope.
If a function uses a variable outside of its own scope, it still has access to that variable even when executed from a different scope.

function counter() {
  let count = 0;
  return function () {
    count++;
    console.log(count);
  };
}

const increment = counter();
increment(); // 1
increment(); // 2

Why Are Closures Useful?

Data Encapsulation: Closures allow private variables by keeping them accessible only within a function.
Maintaining State in Callbacks and Event Handlers: Used in setTimeout, event listeners, or asynchronous operations.
Avoiding Global Variables: Helps prevent polluting the global scope.

Part2: Basic Array Transformations

Question: What Is the Performance Difference Between the ForEach Method and the For Loop?

For Loop

The for loop is faster and can be optimized, but it requires more manual work. Its readability is lower.
Since it involves less abstraction, it is easier for the JavaScript engine (e.g., V8) to optimize.
Direct access: In a for loop, array elements are accessed directly using arr[i] in each iteration. This is faster compared to calling an internal function like forEach.
Disadvantage: Lower abstraction means writing more code, which reduces readability.

ForEach Method

forEach provides abstraction for looping over an array. While it makes the code cleaner and more understandable, it comes with a performance cost. This is because a callback function is invoked in each iteration.

Part3: Function Transformations

Functional Programming

1. Pure Functions:

Pure functions are functions that always produce the same output for the same input and have no side effects.

// Pure function example
function add(a, b) {
  return a + b;  // Always returns the same output for the same input
}
console.log(add(2, 3));  // Output: 5

2. Immutability:

In functional programming, data should be immutable. This means that once a data structure is created, it should not be changed; instead, a new data structure should be created.

// Immutability example
const arr = [1, 2, 3];
const newArr = [...arr, 4];  // Instead of modifying the original array, we create a new one
console.log(arr);     // Output: [1, 2, 3]
console.log(newArr);  // Output: [1, 2, 3, 4]

3. High-Order Functions:

High-order functions are functions that can take other functions as arguments or return a function (e.g., map, filter, reduce).

// High-order function example
const numbers = [1, 2, 3, 4];

const doubled = numbers.map(num => num * 2);  // 'map' is a high-order function
console.log(doubled);  // Output: [2, 4, 6, 8]

4. Function Composition:

Function composition is the process of combining multiple functions to create more complex functions.

// Function composition example
const add5 = x => x + 5;
const multiplyBy2 = x => x * 2;

const composedFunction = x => multiplyBy2(add5(x));  // Compose functions

console.log(composedFunction(3));  // Output: 16 (3 + 5 = 8, 8 * 2 = 16)

5. First-Class Functions:

Functions are first-class citizens, meaning they can be assigned to variables, passed as arguments, and returned from other functions.

// First-class function example
const greet = name => `Hello, ${name}!`;

const sayHello = greet;  // Assigning a function to a variable
console.log(sayHello("Alice"));  // Output: Hello, Alice!

6. Declarative Programming:

Declarative programming focuses on what needs to be done, rather than how it is done. For example, using reduce instead of a for loop.

// Declarative programming example using reduce
const numbers = [1, 2, 3, 4];

// Using reduce to sum the numbers (declarative)
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum);  // Output: 10

7. Recursion:

Recursion is a technique where a function calls itself instead of using traditional loops.

// Recursion example
function factorial(n) {
  if (n === 0) return 1;
  return n * factorial(n - 1);  // Recursive call
}

console.log(factorial(5));  // Output: 120 (5 * 4 * 3 * 2 * 1)

Using Memoize to cache Javascript function results and speed up your code!

Memoization improves performance by storing the results of expensive function calls in a cache. When the function is called again with the same inputs, it retrieves the result from the cache instead of recomputing it, making execution faster.

A common example of memoization is optimizing recursive Fibonacci calculations:

function memoize(fn) {
  const cache = {};  // Stores computed results
  return function (...args) {
    const key = JSON.stringify(args);
    if (cache[key]) {
      console.log("Fetching from cache:", key);
      return cache[key];
    }
    console.log("Computing result for:", key);
    const result = fn(...args);
    cache[key] = result;
    return result;
  };
}

// Expensive Fibonacci function
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// Memoized Fibonacci function
const memoizedFibonacci = memoize(fibonacci);

console.log(memoizedFibonacci(10)); // Computed
console.log(memoizedFibonacci(10)); // Retrieved from cache

Final Summary:

The memoize function takes a function as an argument and returns a new function that caches the results. When called with the same arguments, it retrieves the result from the cache instead of recomputing it.
This improves performance, especially for functions that take a long time to compute or are frequently called with the same arguments.
How It Works:
The memoize function returns an inner function. This inner function takes a rest parameter (...args), allowing it to accept any number of arguments.

Part 4: Promises and Time In Javascript

`Promise.all()` Method

The Promise.all() method takes multiple promises as an array, executes them simultaneously, and waits for all of them to resolve successfully.

If all promises succeed, it returns an array containing their results.

If any promise rejects, even if others have already resolved, the first rejected promise is caught, and the execution moves to the catch block.

Common Interview Question on setTimeout & clearTimeout

Question:
What will be the output of the following code, and why?

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

console.log("End");

Answer:
The output will be

Start  
End  
Timeout

Explanation:

JavaScript is single-threaded and uses an event loop.

Even though the timeout is set to 0 milliseconds, the callback is placed in the task queue and waits for the call stack to be empty.

Since console.log("End") is in the main execution thread, it runs before the timeout callback.

This question will lead us to the Event Loop and Task Queue concepts.

Event Loop and Task Queue

Web APIs are managed by the Event Loop and add tasks to the appropriate Task Queue when the Call Stack is empty.

The Microtask Queue executes before the Macro Task Queue.

*setTimeout, setInterval, DOM Events, and WebSockets belong to the Macro Task Queue.

*fetch().then(), Promise.then() belong to the Microtask Queue.

*The Event Loop processes the Microtask Queue first, then the Macro Task Queue in each cycle.

Tricky situations :)

new Promise(() => console.log(5));
Here are the steps that occur:

When new Promise() is called, the following steps occur:

A Promise is created, and the executor function inside the constructor is executed immediately.
console.log(5) runs immediately in the Call Stack.
This operation does not go to the Web API or Task Queue because a Promise’s executor function runs synchronously.
If resolve() or reject() is called inside the executor, these calls are asynchronous and are added to the Microtask Queue.

Summary: How to Determine if a Task is a Microtask or a Macrotask?
You can use the following logic to identify whether an operation is a Microtask or a Macrotask:

Asynchronous operations managed by JavaScript itself (Promises, async operations, queueMicrotask) → Added to the Microtask Queue.

Promise-based tasks are the highest-priority asynchronous operations.

The Microtask Queue runs immediately after the Call Stack is cleared.

2.
Operations managed by browser APIs (setTimeout, setInterval, DOM Events, WebSockets) → Added to the Macrotask Queue.

The Macrotask Queue is processed in the next Event Loop cycle.

It runs after all Microtasks are completed.

3.
General Rule:

Tasks that require an immediate response are placed in the Microtask Queue (Promises, queueMicrotask, MutationObserver).

Larger or scheduled operations are placed in the Macrotask Queue (setTimeout, DOM events, WebSockets, setInterval).

What is `Promise.race()`?

Promise.race() is a JavaScript method that takes multiple Promises and returns the first one that settles (either resolves or rejects). It "races" the Promises against each other and immediately returns the result of the first one that completes.

const p1 = new Promise((resolve) => setTimeout(resolve, 100, 'First'));
const p2 = new Promise((resolve) => setTimeout(resolve, 50, 'Second'));

Promise.race([p1, p2])
  .then(result => console.log(result)); // Output: 'Second'

What is Debounce?

Debounce is a programming technique used to limit the number of times a function is executed. It ensures that a function is only called once after a specified delay and prevents it from being called too frequently within that time frame.

Common Use Cases:
Preventing multiple API calls when a user types in a search box (e.g., live search)
Reducing excessive button clicks (e.g., a "Submit" button)
Optimizing window resize or scroll event listeners

How Does Debounce Work?

When an event (like keypress, scroll, or resize) occurs, debounce waits for a defined time (delay) before executing the function.
If the event happens again within that time, the timer resets.
The function executes only after the delay has fully elapsed without further interruptions.

function debounce(func, delay) {
    let timeoutId;
    return function (...args) {
        clearTimeout(timeoutId); // Clear the previous timeout
        timeoutId = setTimeout(() => func(...args), delay); // Set a new timeout
    };
}

// Example Usage
const searchInput = document.getElementById("search");

function fetchResults(query) {
    console.log(`Fetching results for: ${query}`);
}

const debouncedSearch = debounce(fetchResults, 500);

searchInput.addEventListener("input", (event) => {
    debouncedSearch(event.target.value);
});

I know this isn’t an all-encompassing guide, but rather a collection of notes highlighting the key points I found important. Happy coding ^_^