# JavaScript Revision – Core Concepts & Modern JavaScript

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:

```text
Variables
Data Types
Operators
Conditionals
Loops
Functions
Arrays
Objects
```

For example:

```javascript
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.

```javascript
function add(a, b) {

    return a + b;

}
```

Arrow functions provide a shorter syntax:

```javascript
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:

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

Objects allow us to represent structured data:

```javascript
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:

```text
map()
filter()
reduce()
forEach()
```

### map()

Transform data:

```javascript
const numbers = [1, 2, 3];

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

### filter()

Select data:

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

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

### reduce()

Combine data:

```javascript
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.

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

const { name, age } = user;
```

Array destructuring:

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

const [first, second, third] = skills;
```

* * *

# Spread & Rest

Spread expands values:

```javascript
const first = [1, 2];

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

Rest collects values:

```javascript
function sum(...numbers) {

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

}
```

The easiest way to remember:

```text
Spread → Expand
Rest   → Collect
```

* * *

# Scope & Closures

JavaScript has different levels of scope.

```javascript
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:

```javascript
function counter() {

    let count = 0;

    return function () {

        count++;

        return count;

    };

}

const increment = counter();

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

Output:

```text
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:

```javascript
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:

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

Import:

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

Modules help keep larger applications organized and maintainable.

* * *

# OOP & Prototypes

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

```javascript
class User {

    constructor(name) {

        this.name = name;

    }

    greet() {

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

    }

}
```

And then:

```javascript
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:

```text
Callbacks
Higher-Order Functions
Pure Functions
Side Effects
```

For example:

```javascript
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:

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

For example:

```javascript
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:

```text
Fetch
 ↓
Promise
 ↓
await
 ↓
Response
 ↓
JSON
 ↓
Data
```

* * *

# APIs & HTTP

I learned how frontend applications communicate with servers.

The major HTTP methods are:

```text
GET
POST
PUT
PATCH
DELETE
```

And important status codes include:

```text
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.

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

title.textContent =
    "JavaScript";
```

I learned how to:

```text
Select
Create
Modify
Append
Remove
```

DOM elements dynamically.

* * *

# Event Handling

I learned how to respond to user interactions.

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

        console.log("Clicked!");

    }
);
```

I also learned:

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

* * *

# Browser Storage

I learned how to store data in the browser.

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

For objects:

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

And retrieve them:

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

* * *

# My JavaScript Toolkit

After revising everything, my JavaScript toolkit now looks like:

```text
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.