LeetCode 30 Days of JavaScript — Day 1: Closures & Counter Function

Nubian — Fri, 11 Jul 2025 07:45:19 +0000

Today I started the LeetCode 30 Days of JavaScript challenge, and Day 1 is all about closures — a core concept in JavaScript — with a simple but insightful problem:

The Problem
Given an integer n, return a counter function.

This counter function should initially return n and then return 1 more than the previous value every time it is called.

Example:

const counter = createCounter(10);
counter(); // 10
counter(); // 11
counter(); // 12

So the task is to implement the createCounter function that returns a function with memory — a perfect use case for closures.

My solution

/**
 * @param {number} n
 * @return {Function} counter
 */
var createCounter = function (n) {
    return function counter() {
        return n++;
    };
};

How it works

The outer function

var createCounter = function (n) {

This function takes an initial number n.
Inside it, we return a new function.

2.The inner function (the closure)

return function counter() {
    return n++;
};

This is the function that we’ll call later: counter().
Even though createCounter has already finished running, the inner counter function still remembers the variable n from its outer scope.
Every time we call counter(), it returns n and then increments n for the next call.

Example Run

const counter = createCounter(10);

console.log(counter()); // 10
console.log(counter()); // 11
console.log(counter()); // 12

Here’s what happens:
✅ First call → returns 10, then increments n to 11.
✅ Second call → returns 11, then increments n to 12.
✅ Third call → returns 12, then increments n to 13.

Why is this a closure?
Because:

A closure is a function that “closes over” (remembers) the variables from the scope where it was created, even after that scope is gone.

Here, the returned counter function retains access to n from createCounter.

What I learned
Closures are simple but powerful.

You can use closures to encapsulate state without polluting the global scope.

Understanding this pattern is key to solving many JavaScript interview and coding challenge problems.

React Componets

Nubian — Mon, 03 Jul 2023 07:56:40 +0000

React components consist of three main parts:

Data:

Data includes the state and props of the component.

State represents data that can be updated by the component's logic.
Props (short for properties) are used to pass data from a parent component to a child component.
The parent component controls how the child component should look or behave through props.
Props are data that comes from the outside and can only be updated by the parent component. The parent component owns the data and transfers it to the child components.

Logic: The logic of a component refers to the code that handles the component's behavior and functionality. It includes functions, event handlers, and any other operations that manipulate or process data. 3. View (UI): The view, or UI (User Interface), represents the visual part of the component that users interact with. It includes elements, styles, and layout configurations that define how the component appears on the screen.

React follows a one-way data flow:

Data flows from the parent component to its child components through props.
Child components cannot directly modify the data received via props; they can only read and display it.
If a child component needs to update data, it should communicate with its parent component by triggering events or callbacks.
The parent component can then modify its own state based on these events and pass the updated data down to its child components again.

By separating data, logic, and view, React components promote a modular and reusable structure, making it easier to build complex user interfaces.

Here is a working example of a Profile Card from Jonas Schmedtmann's React Course Challenge, Problem #1, and I solved. Sandbox Link below

DEV Community: Nubian

LeetCode 30 Days of JavaScript — Day 1: Closures & Counter Function

React Componets