Javascript/notes.txt at master · crazyguy-67/Javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
Phase 1: JavaScript Fundamentals

Start here:

Variables: let, const
Data types: string, number, boolean, null, undefined, object, array
Operators: +, -, ===, !==, &&, ||
Conditions: if, else, switch
Loops: for, while, for...of
Functions:
normal functions
arrow functions
parameters and return
Arrays:
push, pop, shift, unshift
map, filter, reduce, find, some, every
Objects:
object creation
accessing properties
destructuring
nested objects

Mini projects:

Counter
Todo list in console
Student marks calculator
Expense tracker in console
Phase 2: DOM Manipulation

This is important before React.

Learn:

document.querySelector
getElementById
Changing text/content
Changing styles/classes
Creating elements
Removing elements
Event listeners:
click
submit
input
keydown
Form handling
Local storage

Mini projects:

Todo app with localStorage
Password show/hide
Character counter
Theme toggle
Simple quiz app
Phase 3: Modern JavaScript

This is the real full-stack JS foundation.

Learn:

Template literals

`Hello ${name}`

Destructuring

const { name, age } = user;

Spread/rest operator

const newArr = [...arr, 4];

Optional chaining

user?.profile?.image

Modules

export default App;
import App from "./App";

Higher-order functions

users.map(user => user.name)
Callback functions

Error handling

try {
  // code
} catch (error) {
  console.log(error);
}
Phase 4: Async JavaScript

Very important for backend, APIs, React, Next.js.

Learn:

Synchronous vs asynchronous code
setTimeout
Promises
.then() and .catch()
async/await
fetch
API calls
Error handling in async code
Loading states
Handling failed requests

Mini projects:

Weather app using API
GitHub profile finder
Movie search app
Random quote generator
Phase 5: JavaScript for React

Before going deep into React, be strong in:

Array rendering with map
Conditional rendering logic
Event handlers

Immutability:

setTodos([...todos, newTodo])
Updating objects and arrays
Passing functions
Filtering and searching data
Form state handling
Reusable functions

Practice projects:

Todo app
Notes app
Search/filter users
Shopping cart
Multi-step form
Phase 6: JavaScript for Backend

For Node.js and Express, learn:

Node.js basics
npm
package.json
CommonJS vs ES Modules
File system basics
Environment variables
Express.js basics
Routes
Controllers
Middleware
Request/response cycle
Status codes
Error handling
Authentication logic
JWT basics
Cookies
Password hashing
API validation

Backend projects:

Notes API
Todo API
Auth API
Blog API
Chat API
Phase 7: Advanced JavaScript

Learn these slowly while building projects:

Closures
Scope
Hoisting
this
Prototypes
Classes
Event loop
Call stack
Microtasks/macrotasks
Debouncing
Throttling
Currying
Memoization
Deep copy vs shallow copy
Reference vs value
Garbage collection basics

These topics are also useful for interviews.