# My JavaScript Learning Journey: From Array Methods to DOM Manipulation

I have been learning JavaScript step by step and recently I reached a point where things started becoming much more interesting.

In the beginning, I was mostly writing JavaScript code and checking the output in the console. But now I am learning how JavaScript can actually interact with a webpage.

During the last few days of my learning journey, I explored:

*   JavaScript Array Methods
    
*   Functions
    
*   Arrow Functions
    
*   Callback Functions
    
*   forEach(), map(), filter() and reduce()
    
*   The DOM
    
*   The Window Object
    
*   The Script tag
    
*   defer
    
*   DOM Manipulation
    
*   DOM Properties and Attributes
    

Some concepts were easy to understand, while others were definitely confusing.

So in this article, I want to share what I learned as a beginner.

📝 **<mark class="bg-yellow-200 dark:bg-yellow-500/30">My Learning Notes:</mark>**

This article is part of my 30 Days of JavaScript learning challenge, where I am learning JavaScript step by step and sharing what I learn along the way.

Here are my daily learning notes:

**Day 7:** [JavaScript Array Methods](https://x.com/dharmapada0003/status/2104593838648230108?s=20)

**Day 8:** [JavaScript Functions & Callback Functions](https://x.com/dharmapada0003/status/2104951151229911271?s=20)

**Day 9:** [forEach(), map(), filter() & reduce()](https://x.com/dharmapada0003/status/2105316450479280475?s=20)

**Day 10:** DOM, Window Object & defer

**Day 11:** DOM Manipulation

**Day 12:** DOM Properties & Attributes

I am using these daily notes to track my progress, share what I am learning and document the concepts that I find difficult along the way.

## Day 7 - Getting More Comfortable with Arrays

I had already learned what arrays are, but I started exploring some of the methods that we can use to work with them.

For example:

```javascript
let fruits = ["Apple", "Banana", "Mango"];

fruits.push("Orange");

console.log(fruits);
```

The result is:

\["Apple", "Banana", "Mango", "Orange"\]

push() adds an item to the end of the array.

I also learned about:

*   push()
    
*   pop()
    
*   unshift()
    
*   shift()
    
*   slice()
    
*   splice()
    

One thing that I found important was understanding whether a method changes the original array or not.

### Methods that change the original array

The methods I learned that modify the original array are:

*   push()
    
*   pop()
    
*   unshift()
    
*   shift()
    
*   splice()
    

For example:

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

numbers.push(4);

console.log(numbers);
```

Now the original numbers array has changed.

### **What about slice()?**

slice() works differently.

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

let newNumbers = numbers.slice(1, 4);

console.log(newNumbers);
console.log(numbers);
```

The result is:

\[2, 3, 4\]

\[1, 2, 3, 4, 5\]

So slice() creates a new array and doesn't modify the original array. Understanding this difference was one of the useful things I learned while practising arrays.

## **Day 8 - Learning Functions**

After working with arrays, I spent some time learning more about functions.

A function is basically a reusable block of code that we can call whenever we need it. Functions can receive values through parameters and can return a result.

For example:

```javascript
function myFunction() {
  console.log("I am Dharmapada.");
  console.log("I love coding");
}

myFunction();
```

The function can be called whenever I want to use that piece of code.

### **Understanding return**

One thing I paid attention to was the return statement.

```javascript
function multiplication(a, b) {
  let Value = a * b;
  return Value; //This will return
}

let result = multiplication(5, 4);

console.log(result); //output: 20 
```

Once JavaScript reaches return, the function finishes and returns the value.

That means the code written after the return in the same execution path will not run.

This was a small thing, but understanding it made functions easier for me.

## **Arrow Functions**

I also learned about Arrow Functions.

A normal function can look like this:

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

The same basic operation can be written using an Arrow Function:

```javascript
const add = (a, b) => {
    return a + b;
};
```

And it can be shortened further:

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

At first, the syntax looked a little strange to me.

But after writing a few examples, I started getting more comfortable with it.

## **Callback Functions Were Confusing**

This was one of the topics where I didn't immediately feel comfortable.

A callback function is basically a function that is passed to another function so that it can be called by that function.

For example:

```javascript
function greet(name) {
    console.log("Hello " + name);
}

function processUser(callback) {
    callback("Dharma");
}

processUser(greet);
```

Here, greet is passed into processUser().

The important part for me was understanding that I am not calling greet() when passing it. I am passing the function itself:

processUser(greet);

rather than:

processUser(greet());

This was confusing at first.

I am still practising callback functions because I don't want to just memorize the definition. I want to understand why and when they are actually useful.

JavaScript treats functions as values, which is why functions can be passed to other functions.

## **Day 9 - forEach(), map(), filter() and reduce()**

After learning callbacks, I started seeing them used with array methods.

This is where things became more interesting.

### **forEach()**

forEach() allows us to run a function for each item in an array.

It is commonly used when you want to perform an action for each element, rather than create a new array.

```javascript
const fruits = ["apple", "banana", "orange", "grapes"];

const output = fruits.forEach((fruit) => {
  console.log(fruit.toUpperCase());
});
```

The callback runs for each element.

### **map()**

map() can be used when you want to create a new array by changing each item.

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

let doubled = numbers.map((number) => {
    return number * 2;
});

console.log(doubled);
```

Output:

\[2, 4, 6\]

This helped me understand that map() is useful when I want to transform values into a new array.

### **filter()**

filter() is useful when you want to keep only the values that meet a condition.

```javascript
let numbers = [1, 2, 3, 4, 5, 6];

let evenNumbers = numbers.filter((number) => {
    return number % 2 === 0;
});

console.log(evenNumbers);
```

Output:

\[2, 4, 6\]

### **reduce() Is Still a Challenge for Me**

Then came reduce().

Honestly, this one took me more time to understand.

A simple example is:

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

let total = numbers.reduce((sum, number) => {
    return sum + number;
}, 0);

console.log(total);
```

Output:

10

The idea is that reduce() keeps updating an accumulated value as it goes through the array. The way I started thinking about it was:

Start with 0

0 + 1 = 1

1 + 2 = 3

3 + 3 = 6

6 + 4 = 10

This made the concept a little easier to visualize.

But I am still practising reduce() because I don't want to pretend that I completely understand it yet.

And I think that is okay.

Some concepts need more practice than others.

## **Solving a Small Exercise**

I also practised a small exercise where I had to check vowels in a string.

The idea was simple:

a

e

i

o

u

But while solving it, I got stuck trying to compare the vowels with characters from the string.

This was actually a useful experience.

Instead of simply reading about JavaScript methods, I had to think about:

*   How to access characters
    
*   How to compare values
    
*   How loops work
    
*   How conditions work
    
*   How to structure the solution
    

Getting stuck showed me that understanding a concept and being able to use it in a problem are two different things.

I need practice to connect the two.

## **Day 10 - Moving From JavaScript to the Browser**

After spending time with arrays and functions, I started learning about something that made JavaScript feel much more practical:

### **The DOM.**

DOM stands for **Document Object Model**.

The browser represents the webpage as a structure of objects, and JavaScript can use the DOM to access and manipulate elements on the page.

For example, suppose I have this HTML:

```html
<h1 id="title">Hello World!</h1>
```

I can select it using JavaScript:

```javascript
const title = document.getElementById("title");
```

Now JavaScript has a reference to that element.

I can change its text:

```javascript
title.textContent = "Hello JavaScript!";
```

The webpage changes from:

Hello World

to:

Hello JavaScript

This was one of those moments where JavaScript started feeling much more interesting to me.

I was not just seeing output in the console anymore.

I was actually changing the webpage.

## **Understanding the Window Object**

While learning the DOM, I also came across the **Window Object**.

The window object represents the browser window or tab in which the webpage is loaded.

For example:

```javascript
console.log(window.innerWidth);
```

This can give information about the width of the browser window.

The document object is also available through the window and represents the webpage document that JavaScript can interact with.

At first, I found the relationship between:

```plaintext
window
   ↓
document
   ↓
HTML elements
```

a little confusing.

But thinking about it as a hierarchy helped me understand it better.

## **Where Should We Put the script Tag?**

I also learned something that I had not paid much attention to before:

### **Where should JavaScript be loaded in an HTML page?**

For example:

```html
<head>
    <script src="script.js"></script>
</head>
```

If the script runs before the HTML elements it needs have been parsed, JavaScript may not be able to access those elements yet.

One option is to put the script near the end of the body:

```html
<body>
    <h1>Hello</h1>

    <script src="script.js"></script>
</body>
```

Another option for an external script is to use defer:

```html
<head>
    <script src="script.js" defer></script>
</head>
```

With defer, the browser can parse the HTML while fetching the external script, and the script executes after the document has been parsed.

This made me understand why the placement of JavaScript matters when working with the DOM.

## **Day 11 - My First Steps Into DOM Manipulation**

Once I understood how to select elements, I started practising DOM manipulation.

For example:

```html
<p id="message">Old Message</p>
```

JavaScript:

```javascript
const message = document.getElementById("message");

message.textContent = "New Message";
```

I also practised changing styles:

```javascript
message.style.color = "blue";
```

Adding classes:

```javascript
message.classList.add("highlight");
```

Changing a link:

```javascript
link.href = "https://amazon.com";
```

And changing an image:

```javascript
image.src = "new-image.jpg";
```

These examples were simple, but they helped me understand how JavaScript can control different parts of a webpage.

DOM scripting commonly involves selecting elements and then changing their content, styles, attributes or structure.

## **Day 12 - DOM Properties and Attributes**

Another topic I started learning was the difference between **properties** and **attributes**.

For example, consider:

```html
<a id="myLink" href="https://google.com">
    Visit Website
</a>
```

JavaScript can access the link's href property:

```javascript
const link = document.getElementById("myLink");

console.log(link.href);
```

We can also work directly with HTML attributes:

```javascript
link.setAttribute("href", "https://flipkart.com");
```

And read an attribute:

```javascript
link.getAttribute("href");
```

I also practised things like:

```javascript
element.textContent
element.classList
element.style
image.src
link.href
```

At this stage, I started realizing that DOM manipulation is not just about changing text.

There are many different ways JavaScript can interact with an HTML element.

## **What I Found Difficult**

One thing I have noticed during this learning journey is that not every topic becomes clear on the first attempt.

For me, these were some of the confusing parts:

### **Callback Functions**

I understood the definition, but using callbacks naturally in code took more practice.

### **reduce()**

forEach(), map(), and filter() felt easier to understand.

reduce() took more time because I had to understand how the accumulated value changes during each iteration.

### **DOM**

The DOM introduced a completely different way of thinking.

Before this, I was mostly thinking:

Input -> JavaScript -> Output

Now I am starting to think:

```plaintext
HTML
 ↓
DOM
 ↓
JavaScript
 ↓
Change the webpage
```

That change in perspective has been interesting.

## **What I Learned From These Days**

Looking back at these days of learning, I think the biggest improvement wasn't memorizing more methods.

It was understanding how different concepts connect.

For example:

```plaintext
Functions
   ↓
Callback Functions
   ↓
Array Methods
   ↓
DOM
   ↓
DOM Manipulation
   ↓
Interactive Webpages
```

A concept that seemed separate at first can become useful when combined with another concept.

For example, forEach() uses a callback function.

DOM manipulation uses JavaScript methods and properties.

And eventually, events will allow me to make webpages respond to user actions.

That is the part I am looking forward to learning next.

## **What is Next?**

My next topics are:

*   DOM insertion methods
    
*   Events
    
*   Event listeners
    
*   More DOM practice
    
*   Building small projects
    

I know there is still a lot to learn.

There are also concepts from this week that I need to revisit, especially callback functions and reduce().

But I am trying not to rush through the topics just to say that I have completed them.

I want to understand them well enough to actually use them.

## **Final Thoughts:**

This week of JavaScript learning taught me something simple:

Getting confused is also part of learning.

Sometimes I understand a concept immediately.

Sometimes I need to write the same type of code several times.

And sometimes I get stuck on something that looked very simple when I first read about it.

Instead of seeing that as a problem, I am trying to use those moments to find what I do not understand.

I am still at the beginning of my JavaScript journey, but moving from basic arrays and functions to manipulating an actual webpage feels like real progress.

I am going to keep learning, practising, making mistakes and improving one step at a time.

➡️ Follow my JavaScript learning journey on: [X](https://x.com/dharmapada0003)

➡️ Follow my JavaScript learning journey on: [Linkedin](https://www.linkedin.com/in/dharmapada0003/)

➡️ To get code follow me on: [Github](https://github.com/dharmapada0003)

**Learn -> Build -> Make mistakes -> Understand -> Improve -> Repeat. 🚀**