And instead of writing long loops every time, JavaScript gives built-in array methods which make life much easier.

Let’s go through the important ones every beginner should know.

push() and pop() → add / remove from end

Think of push and pop like a stack.

push()

Adds item at the end.

Example:

Before → [10, 20, 30]
After push(40) → [10, 20, 30, 40]

Useful when you want to keep adding new data.

pop()

Removes last item.

Before → [10, 20, 30]
After pop() → [10, 20]

Pop also returns the removed value.

shift() and unshift() → start of array

These are similar, but work at the beginning.

unshift()

Adds item at start.

Before → [20, 30]
After unshift(10) → [10, 20, 30]

shift()

Removes first item.

Before → [10, 20, 30]
After shift() → [20, 30]

forEach() → simple iteration

forEach is used when you just want to run something for each item.

Example idea:
Print each number in array.

It does not return a new array.
It is mainly for side effects like logging or updating UI.

So if you need transformation, forEach is not the best choice.

map() → transform each element

map creates a new array by changing each item.

Example:
Numbers → [2, 4, 6]
Double them using map → [4, 8, 12]

Why not use a for loop?

You can use a loop, but map is cleaner and shorter.
It also avoids manually pushing values into a new array.

Think of map as:
“Take each value → change it → return new array”

filter() → select specific values

filter is used when you only want some items.

Example:
Numbers → [5, 12, 8, 20]
Filter numbers > 10 → [12, 20]

filter does not change original array.
It creates a new array with matching values.

So map = change values
filter = select values

reduce() → combine values into one result

reduce feels confusing at first, but idea is simple.

reduce takes many values and turns them into one final value.

Example:
Find sum of [10, 20, 30]

Result → 60

reduce keeps an accumulator which stores the running result.

You don’t need to master reduce now, just remember:
reduce = accumulate / combine

Small comparison (loop vs map/filter)

Traditional loop:

• more lines

• manual array handling

• easy to make mistakes

map / filter:

• shorter

• readable

• intention is clear

That’s why modern JS prefers array methods.

What is a Browser?

A browser is a software that:

• talks to servers

• downloads website files

• understands HTML, CSS, JS

• shows everything on your screen

So it does much more than just “open websites”.

What happens after pressing Enter?

Simple flow:

1. Browser sends request to server

2. Server sends HTML, CSS, JS

3. Browser reads them

4. Browser builds the page

5. Website appears on screen

Main parts of a Browser

At a high level, browser has:

• User Interface (address bar, tabs)

• Networking (downloads files)

• Rendering Engine (draws page)

• JavaScript Engine

All these work together.

HTML to DOM

Browser reads HTML and parses it.
Parsing means breaking code into pieces.

From HTML, browser creates DOM.
DOM is like a tree of elements.

CSS to CSSOM

Browser reads CSS and creates CSSOM.
CSSOM contains style rules like color, size, position.

DOM + CSSOM

DOM and CSSOM combine to make Render Tree.
Render Tree contains only visible things.

Layout and Paint

• Layout decides size and position

• Paint adds colors and text

• Screen shows final result

Conclusion

You don’t need to remember everything.
Just remember the flow:

HTML → DOM
CSS → CSSOM
DOM + CSSOM → Render Tree
Render Tree → Layout → Paint → Screen

\= Git is a Version Control System (VCS). It helps you track your code changes and save versions of your project.
Git mostly works on your local system and you use it from terminal.

Why Git is Used?

\= Git is used to:

• track code changes (who changed what and when)

• work in a team without messing code

• save project history safely

• go back to older version if something breaks

Git Basics and Core Terminologies?

\= Git Basics

• Git: tool to manage version history

• Repository (Repo): a project folder tracked by Git

• Local Repository: repo on your laptop/pc

• Remote Repository: repo online (GitHub, GitLab)

Core Terms:

• Commit: saved snapshot of changes

• Branch: separate line of work

• Main/Master: main branch of project

• Clone: copy remote repo to local

• Pull: take latest code from remote to local

• Push: send local commits to remote

• Merge: combine two branches

• Checkout/Switch: move between branches

• Staging Area: area before commit (git add)

• HEAD: points to your current commit

• Conflict: when Git can’t auto merge changes

Common Git Commands?

\= Repository Setup

• git init → start git in a folder

• git clone <url> → copy a remote repo

\= Daily Workflow

• git status → check file status

• git add <file> / git add . → stage changes

• git commit -m "message" → save changes

• git log → see commit history

\= Remote (GitHub) Commands

• git remote -v → view remote URLs

• git push → upload commits to GitHub

• git pull → download and merge updates

\= Branching

• git branch → list branches

• git branch <name> → create branch

• git checkout <branch> / git switch <branch> → change branch

• git merge <branch> → merge branch into current branch

Basic Developer Workflow (simple)

1. Create project folder

2. git init

3. make changes

4. git add .

5. git commit -m "first commit"

6. connect remote (GitHub)

7. git push