Today marks the beginning of the final three days of my JavaScript journey in this #100DaysOfCode challenge.

Over the past few weeks, I've covered a huge part of modern JavaScript—from the basics of the language to asynchronous programming, APIs, DOM manipulation, modules, OOP, functional programming, and browser storage.

Instead of learning a completely new concept today, I decided to step back and revise the foundations.

Because learning JavaScript isn't just about knowing individual concepts.

It's about understanding how those concepts work together.

---

JavaScript Fundamentals

Some of the most important fundamentals I've learned include:

Variables
Data Types
Operators
Conditionals
Loops
Functions
Arrays
Objects

For example:

const name = "Saurabh";
const age = 22;

if (age >= 18) {
    console.log(`${name} is an adult`);
}

These fundamentals form the foundation for everything else in JavaScript.

---

Functions

Functions allow us to create reusable blocks of logic.

function add(a, b) {

    return a + b;

}

Arrow functions provide a shorter syntax:

const add = (a, b) => a + b;

Functions became even more powerful when I learned that they can be treated as first-class values.

---

Arrays & Objects

Arrays allow us to store collections:

const skills = [
    "HTML",
    "CSS",
    "JavaScript",
    "React"
];

Objects allow us to represent structured data:

const user = {
    name: "Saurabh",
    age: 22,
    role: "Developer"
};

These two data structures appear everywhere in frontend development.

---

Modern Array Methods

I learned how to work with arrays using:

map()
filter()
reduce()
forEach()

map()

Transform data:

const numbers = [1, 2, 3];

const doubled = numbers.map(
    number => number * 2
);

filter()

Select data:

const numbers = [1, 2, 3, 4];

const even = numbers.filter(
    number => number % 2 === 0
);

reduce()

Combine data:

const numbers = [10, 20, 30];

const total = numbers.reduce(
    (sum, number) => sum + number,
    0
);

These methods will become extremely important in React.

---

Destructuring

I learned how to extract values from arrays and objects.

const user = {
    name: "Saurabh",
    age: 22
};

const { name, age } = user;

Array destructuring:

const skills = [
    "HTML",
    "CSS",
    "JavaScript"
];

const [first, second, third] = skills;

---

Spread & Rest

Spread expands values:

const first = [1, 2];

const second = [
    ...first,
    3,
    4
];

Rest collects values:

function sum(...numbers) {

    return numbers.reduce(
        (total, number) => total + number,
        0
    );

}

The easiest way to remember:

Spread → Expand
Rest   → Collect

---

Scope & Closures

JavaScript has different levels of scope.

let globalValue = "Global";

function test() {

    let localValue = "Local";

}

The inner function can access variables from its surrounding scope.

This leads to an important concept:

Closures.

Example:

function counter() {

    let count = 0;

    return function () {

        count++;

        return count;

    };

}

const increment = counter();

console.log(increment());
console.log(increment());

Output:

1
2

The returned function remembers the count variable.

---

this Keyword

The meaning of this depends on how a function is called.

Inside an object method:

const user = {

    name: "Saurabh",

    greet() {

        console.log(this.name);

    }

};

user.greet();

Here, this refers to the object on which the method was called.

Understanding this is particularly important when working with objects, classes, and event handlers.

---

JavaScript Modules

I learned how to split code into multiple files.

Export:

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

Import:

import { add } from "./math.js";

Modules help keep larger applications organized and maintainable.

---

OOP & Prototypes

I also learned about JavaScript's object-oriented features.

class User {

    constructor(name) {

        this.name = name;

    }

    greet() {

        console.log(
            `Hello ${this.name}`
        );

    }

}

And then:

const user =
    new User("Saurabh");

I also learned that JavaScript's class syntax is built on the language's prototype system.

---

Functional Programming

JavaScript supports functional programming because functions are first-class values.

I learned about:

Callbacks
Higher-Order Functions
Pure Functions
Side Effects

For example:

function calculate(a, b, operation) {

    return operation(a, b);

}

console.log(
    calculate(
        10,
        20,
        (a, b) => a + b
    )
);

---

Asynchronous JavaScript

One of the biggest sections of my JavaScript journey was asynchronous programming.

I learned:

Callbacks
Promises
async/await
Promise.all()
Promise.allSettled()
Promise.race()
Promise.any()

For example:

async function getUsers() {

    try {

        const response = await fetch(
            "https://jsonplaceholder.typicode.com/users"
        );

        if (!response.ok) {
            throw new Error(
                `HTTP Error: ${response.status}`
            );
        }

        const users =
            await response.json();

        console.log(users);

    } catch (error) {

        console.error(error);

    }

}

This connects several concepts together:

Fetch
 ↓
Promise
 ↓
await
 ↓
Response
 ↓
JSON
 ↓
Data

---

APIs & HTTP

I learned how frontend applications communicate with servers.

The major HTTP methods are:

GET
POST
PUT
PATCH
DELETE

And important status codes include:

200 → OK
201 → Created
204 → No Content
400 → Bad Request
401 → Unauthorized
403 → Forbidden
404 → Not Found
500 → Server Error

Understanding these concepts has made API communication much clearer.

---

DOM Manipulation

I also learned how JavaScript interacts with webpages.

const title =
    document.querySelector("#title");

title.textContent =
    "JavaScript";

I learned how to:

Select
Create
Modify
Append
Remove

DOM elements dynamically.

---

Event Handling

I learned how to respond to user interactions.

button.addEventListener(
    "click",
    () => {

        console.log("Clicked!");

    }
);

I also learned:

Event Bubbling
Event Delegation
event.target
event.currentTarget
closest()
preventDefault()
stopPropagation()

---

Browser Storage

I learned how to store data in the browser.

localStorage.setItem(
    "username",
    "Saurabh"
);

For objects:

localStorage.setItem(
    "user",
    JSON.stringify(user)
);

And retrieve them:

const user =
    JSON.parse(
        localStorage.getItem("user")
    );

---

My JavaScript Toolkit

After revising everything, my JavaScript toolkit now looks like:

JavaScript
│
├── Fundamentals
│
├── Functions
│
├── Arrays & Objects
│
├── DOM
│
├── Events
│
├── APIs
│
├── Promises
│
├── async/await
│
├── Modules
│
├── OOP
│
├── Prototypes
│
├── Functional Programming
│
├── Destructuring
│
├── Spread & Rest
│
└── Browser Storage

---

My Biggest Takeaway

Today wasn't about learning something new.

It was about realizing how much I've already learned.

At the beginning of the JavaScript section, concepts like Promises, APIs, DOM manipulation, and asynchronous programming felt completely separate.

Now I can see how they connect.

JavaScript → Data → Functions → Events → APIs → Async Operations → DOM → UI

This revision gives me a much stronger foundation before moving into React.