đ My JavaScript Journey
JavaScript áá˛áˇ áĄááźáąááśáááą Advanced concepts áá˝áąáĄáá á áá áşáááť ááąáˇááŹááŹá¸áá˛áˇ Practice Repository ááźá áşááŤáááşá
đ Table of Contents
- JavaScript Execution Model - Js Engine - Web APIs - Event Loop - Callback Queue
- LexicalStructure
- Expressions
- DataTypes
- Variables
- Operators
- Conditions
- Loops
- Functions
- Objects
- Arrays
- Asynchronous
- TypeCasting
- Modules
- ErrorHandling
- OOP
- JSON
- FetchAPI
- ES6+(Modern JavaScript)
- Hoisting
- Scope
- Scope Chain
- Lexical Scoping
- Closure
đ Useful Links
JavaScript Execution Model
Js Engine
JavaScript Engine áááŻáᏠJavaScript code áá˝áąááᯠMachine Code (áááŻáˇ) Bytecode áĄááźá áş ááźáąáŹááşá¸ááźáŽá¸ execute ááŻááşááąá¸áá˛áˇ software program áá áşááŻááźá áşááŤáááşá
-
Google Chrome, Edge â V8 Engine
-
Firefox â SpiderMonkey
-
Safari â JavaScriptCore (Nitro)
-
Node.js â V8 Engine áááŻáá˛ááŻáśá¸áááş
JS Engine áá˛áˇ áĄááá áĄá áááşáĄáááŻááşá¸ááťáŹá¸
-
- Memory Heap
-
- Call Stack
Memory Heap
JavaScript Engine áá˛á Memory Heap áááŻáᏠvariable áá˝áąá objects áá˝áąáá˛áˇ
data áá˝áąááᯠááááşá¸áááşá¸ááŹá¸áá˛áˇ "áááŻááąáŤááş" áá
áşááŻáááŻááŤáá˛á
Memory Heap áá˛áˇ áĄááá áĄááťááşááťáŹá¸
áá Unstructured Memory (ááŻáśááą áááşáážááşáááŹá¸ááąáŹ ááąááŹ)
Call Stack áááŻááťááŻá¸ áĄá
áŽáĄá
ááşáááť (LIFO) ááááşá¸ááŹááťááŻá¸ áááŻááşáá˛á
Heap áááąáŹáˇ ááźáŽá¸ááŹá¸áá˛áˇ memory á§ááááŹááźáŽá¸áá
áşááŻááŤá ááŻáśáá˛áážáŹáááşá¸ data áá˝áąáááŻ
ááąááŹáĄáážáśáˇ ááźá˛ááźááˇáşááźáŽá¸ ááááşá¸ááŹá¸ááŹááᯠáá˝áąáˇáááŻááşááŤáááşá
áá ááŹáá˝áąááᯠááááşá¸ááá˛?
Objects & Arrays: JavaScript áážáŹáážááá˛áˇ reference types áá˝áą
(áĽáááŹ- {name: "Mg Mg"}, [1, 2, 3]) ááᯠááŽáážáŹ ááááşá¸ááŤáááşá
Functions: Function definition áá˝áąáááŻáááşá¸ memory heap áá˛áážáŹáᲠááááşá¸áááşá¸ááŤáááşá
Large Data: Stack áá˛áážáŹ ááááşá¸áááŻáˇ áĄáá˝ááşáĄá
áŹá¸ ááźáŽá¸ááŹá¸áá˝ááşá¸áá˛áˇ data áá˝áąáááŻ
ááŽááąááŹáážáŹ ááąááŹááť (Allocate) ááąá¸ááŤáááşá
áá Allocation vs Garbage Collection
Memory Allocation: Variable áĄáá
áşáá
áşáᯠááąáŹááşáááŻááşáááŻááşá¸ Engine á Heap áá˛áážáŹ
ááąááŹáĄáá˝ááşáá
áşáᯠáážáŹááźáŽá¸ ááááşá¸ááąá¸ááŤáááşá
Garbage Collection: JavaScript áážáŹ Memory ááᯠáááŻááşáááŻááş ááťááşááąá¸á
áᏠááááŻááŤáá°á¸á
Engine áá˛áážáŹ Garbage Collector áááŻáᏠááŤááŤáááşá
áá°á Heap áá˛ááᯠáĄááźá˛á
á
áşááąá¸ááźáŽá¸ áááş variable áááŻááž áĄááŻáśá¸áááźáŻááąáŹáˇáá°á¸
(Reference ááážáááąáŹáˇáá°á¸) áááŻáááş áĄá˛áᎠmemory ááᯠáĄáááŻáĄááťáąáŹááş ááźááşááááşá¸áá˝áŹá¸ááŤáááşá
Call Stack áá˛áˇ áááşááᯠááťáááşáááşááá˛?
ááŽáĄááťááşá áĄááąá¸ááźáŽá¸ááŤáááşá
Object áá
áşááŻááᯠHeap áá˛áážáŹ ááááşá¸áááŻááşáá˛áˇáĄá፠áá°áˇáá˛áˇ
Memory Address (Reference) ááąá¸áá
áşáᯠáááŹááŤáááşá
áĄá˛áᎠAddress ááąá¸áááŻááž Call Stack áá˛áážáŹáážááá˛áˇ variable áá˛ááᯠáááˇáşááááşá¸áááŻááşááŹááŤá
áĽáááŹ: const user = { name: "Aung Aung" }; áááŻáˇ ááąá¸áááş:
{ name: "Aung Aung" } áááŻáá˛áˇ object ááźáŽá¸á Heap áᲠááąáŹááşáá˝áŹá¸áááşá
user áááŻáá˛áˇ variable ááŹáááşáá˛áˇ áĄá˛áᎠdata áážáááŹááąááŹááᯠáá˝ážááşááźáá˛áˇ Memory Address (Reference)ááąá¸áááąáŹáˇ Call Stack áá˛áážáŹ áážáááąááŤáááşá
Memory Heap áá˛áážáŹ data áá˝áą áĄáááşá¸ááťáŹá¸ááŹááźáŽá¸ Garbage Collector ááááşá¸
áááťááşááąá¸áááŻááşáá˛áˇáĄá፠Memory Leak (á
ááşááąá¸áá˝áŹá¸ááŹááťááŻá¸) ááźá
áşáááşááŤáááşá
Call Stack
Call Stack áááŻáᏠJavaScript Engine á áááşáážá áááş function áá˝áąááᯠááŻááşááąáŹááşááąááá˛á
áááş function áá˛áážáŹ ááąáŹááşááąááá˛áááŻááŹááᯠááźáąááŹááśáá˛áˇ ááášáááŹá¸áá
áşáᯠááźá
áşááŤáááşá
áá°áˇááᯠáááŻá¸áááŻá¸áážááşá¸áážááşá¸ ááźáąáŹááááş "áĄááŻááşá
áŹáááşá¸áážááşáá˛áˇ á
áŹáĄáŻááş" áááŻááťááŻá¸ááźá
áşááźáŽá¸
áĄáąáŹááşá፠áĄááťááşáá˝áąá áá°áˇáá˛áˇ áĄááá áááąáŹáááŹá¸áá˝áąááŤáá˛-
áá LIFO (Last In, First Out)
Call Stack áᏠLIFO á
áá
áşáá˛áˇ áĄááŻááşááŻááşááŤáááşá
áááşá¸áááşááźáŹá¸áá˝áąááᯠáá
áşááťááşááąáŤáşáá
áşááťááş áááˇáşáááşááŹá¸ááááŻááťááŻá¸ááŤáá˛á
Push: Function áá
áşááŻááᯠááąáŤáşáááŻááşáá˛áˇáĄá፠Stack áá˛áˇ áĄááąáŤáşááŻáśá¸ááᯠááąáŹááşááŹááŤáááşá
Pop: Function áá˛á áĄááŻááşáá˝áą ááźáŽá¸áá˝áŹá¸áá˛áˇáĄá፠(Return ááźááşáá˛áˇáĄááŤ) áĄááąáŤáşááŻáśá¸áááą ááźááşáá˝ááşáá˝áŹá¸ááŤáááşá
áá Single Call Stack
JavaScript á Single-threaded ááźá
áşáá˛áˇáĄáá˝ááş Call Stack áá
áşááŻáᲠáážáááŤáááşá
ááŤááźáąáŹááˇáş áá°á áá
áşááźáááşáážáŹ áĄááŻááşáá
áşááŻáááşá¸áááŻáᲠáĄáŹááŻáśá
ááŻááşááŻááşáááŻááşááŤáááşá
áĄááąáŤáşá function áááźáŽá¸áááťááşá¸ áĄáąáŹááşá function ááŽááᯠááá˝áŹá¸ááŤáá°á¸á
áá áĄááŻááşááŻááşááŻáś áĽáááŹ
function greet() {
sayHi();
console.log("Greet done");
}
function sayHi() {
console.log("Hi!");
}
greet();
greet() ááᯠááąáŤáşáááŻááşáááş Stack áá˛ááᯠgreet ááąáŹááşááŹááŤáááşá
greet áá˛áážáŹááž sayHi() ááᯠáááşááąáŤáşáá˛áˇáĄáá˝ááş Stack áá˛áˇ áĄááąáŤáşááŻáśá¸ááᯠsayHi áááşááąáŹááşááŹááŤáááşá
sayHi áĄááŻááşááźáŽá¸áá˝áŹá¸áá˛áˇáĄá፠Stack áá˛áááą sayHi áá˝ááşáá˝áŹá¸ááŤáááşá
ááąáŹááşááŻáśá¸áážáŹ greet áĄááŻááşááźáŽá¸áááŻáˇ Stack áá˛áááą greet áá˝ááşáá˝áŹá¸ááźáŽá¸ Stack á ááźááşáá˝ááş (Empty) áá˝áŹá¸ááŤáááşá
áá Stack Overflow (Error)
Function áá
áşááŻáááą ááąáŹááşáááş function áá
áşááŻááᯠáĄááŻáśá¸ááážá (Infinite) ááąáŤáşááąáááşáááŻáááş
Stack áá˛áážáŹ ááąááŹááááˇáşááąáŹáˇáᲠááźááˇáşááťážáśáá˝áŹá¸áááşááŤáááşá ááŤááᯠStack Overflow áááŻáˇ ááąáŤáşááŤáááşá
Call Stack áá˛áˇ Event Loop
ááŻáśáá˛áážáŹ ááźááşááá˛áˇáĄáááŻááşá¸ Call Stack áá˛á áĄááŻááşáá˝áą áĄááŻááşááŻáśá¸ ááźáŽá¸áá˝áŹá¸áážááŹ
Event Loop á Callback Queue áá˛áážáŹ á
áąáŹááˇáşááąáá˛áˇ áĄááŻááşáá˝áąááᯠStack áá˛ááᯠáááŻáˇááąá¸áᏠááźá
áşááŤáááşá
Web APIs
Web APIs áááŻáᏠBrowser (Web Runtime Environment) áááą ááąáŹááşááśáˇááąá¸ááŹá¸áá˛áˇ
áĄáááŻáááˇáşááąá¸ááŹá¸áá˛áˇ Features ááźá
áşááŤáááşá
JavaScript á single-threaded ááźá
áşááąáá˛áˇ ááąáŹááşáá˝ááşáážáŹ áĄááŻááşáá˝áąáĄááťáŹá¸ááźáŽá¸ááᯠáá
áşááźááŻááşáááş
ááŻááşááąáŹááşáááŻááşááąááŹáᏠáᎠWeb APIs áá˝áąááźáąáŹááˇáş ááźá
áşááŤáááşá
Web APIs áá˛áˇ áĄááá ááŹáááşááťáŹá¸
ááŻáśáá˛áážáŹ ááźááŹá¸áá˛áˇáĄáááŻááşá¸ Web APIs áá˝áąáᏠEngine áá˛áˇ áĄááźááşáááşáážáŹ ááŽá¸áááˇáş áĄááŻááşááŻááşááźááŹááŤá
DOM (Document Object Model): JavaScript áááą HTML element áá˝áąááᯠáážáŹááŹá áĄááąáŹááşááźáąáŹááşá¸ááŹá
á
áŹááŹá¸áĄáá
áş áááˇáşááŹáá˝áąááᯠááŻááşááąáŹááşááąá¸ááŤáááşá
Timer (setTimeout/setInterval): áááşáážááşááŹá¸áá˛áˇ áĄááťáááşáá
áşááŻáĄáá á
áąáŹááˇáşáááŻááşá¸ááąá¸áá˛áˇ áĄááŻááşáááŻ
ááŻááşááąáŹááşááąá¸ááŤáááşá
Fetch APIs (Network Requests): Server ááŽáááą data áá˝áą áážááşá¸ááąáŹááşá¸áá˛áˇáĄá፠Browser áá˛áˇ
Network thread ááᯠááŻáśá¸ááźáŽá¸ áĄááŻááşááŻááşááąá¸ááŤáááşá
Other APIs: ááŻáśáá˛áážáŹ ... áááŻáˇ ááźááŹá¸áá˛áˇáĄáá˛áážáŹ Geolocation (áááşááąááŹááźááˇáşááźááşá¸)á
Local Storage áá˛áˇ Canvas áááŻááťááŻá¸ APIs áá˝áąáááşá¸ ááŤáááşááŤáááşá
Web APIs á áááşááᯠáĄááŻááşááŻááşááá˛?
áá Request: Call Stack áááą setTimeout ááŤáážáááŻááş fetch áááŻááťááŻá¸ function ááᯠááąáŤáşáááŻááşáá˛áˇáĄááŤ
JS Engine á áĄá˛ááŽáĄááŻááşááᯠWeb APIs ááŽááᯠáá˝ážá˛ááąá¸áááŻááşááŤáááşá
áá Offloading: Web APIs á áĄá˛ááŽáĄááŻááşááᯠBrowser áá˛áˇ áĄááźáŹá¸ thread áá˝áą (áĽááᏠNetwork thread
áááŻáˇáááŻááş Timer thread) ááᯠááŻáśá¸ááźáŽá¸ ááąáŹááşáá˝ááşáážáŹ ááŽá¸áááˇáş ááŻááşááąáŹááşááŤáááşá
áá Callback: áĄááŻááşááźáŽá¸áá˝áŹá¸áá˛áˇáĄá፠(áĽááᏠTimer ááźááˇáşáá˝áŹá¸áá˛áˇáĄááŤ) Web API á áĄá˛ááŽáĄááŻááşáá˛áˇ áááşáááŻááşáá˛áˇ
Callback function ááᯠCallback Queue áá˛ááᯠáááŻáˇááąá¸áááŻááşááŤáááşá
ááŹááźáąáŹááˇáş áĄááąá¸ááźáŽá¸ááŹáá˛?
Web APIs ááážááá°á¸áááŻáááş JavaScript áᏠáĄáááşá¸ "áážáąá¸" áá˛áˇ ááŹááŹá
ááŹá¸ ááźá
áşáá˝áŹá¸ááŤááááˇáşáááşá
áĽáááŹ- Server áááą data ááŹááŹááᯠá
áąáŹááˇáşááąáá˛áˇáĄááťáááşáážáŹ Web API ááážááááş Browser ááźáŽá¸ áá
áşááŻááŻáśá¸
ááŹáážááŻááşáááŻáˇáááᲠ"Hang" ááąáážáŹááŤá
áĄááŻááąáŹáˇ Web APIs á ááąáŹááşáá˝ááşáážáŹ áĄááŻááşááŻááşááąá¸ááąáááŻáˇ ááťááąáŹáşáááŻáˇ Browser áážáŹ UI áá˝áąááᯠáááşááźáŽá¸
áĄááŻáśá¸ááźáŻáááŻááşááąáᏠááźá
áşááŤáááşá
Event Loop
Event Loop áááŻáᏠJavaScript Runtime áá˛áˇ "á
áááşááŹ" áááŻáˇáááŻááş "ááŹááşááááşá¸áá˛" áááŻááťááŻá¸ áĄáááááťáá˛áˇ
áĄá
áááşáĄáááŻááşá¸ááźá
áşááŤáááşá áá°á Call Stack áá˛áˇ Callback Queue áááŻáˇááźáŹá¸áážáŹ áĄááŻááşáá˝áąááᯠáááşáĄááťáááşáážáŹ
ááŻááşááąáŹááşáááá˛áááŻááŹááᯠáĄááźá˛áááşá¸ á
áŽá
ááşááąá¸ááąááŹááŤá
ááŻáśáá˛á ááźážáŹá¸ááąá¸ááᯠááźááˇáşáááş Event Loop á áĄááŻááşáá˝áą áážááˇáşáááşááąááŻáśááᯠááźááşáááŻááşááŤáááşá
Event Loop áá˛áˇ áĄááŻááşááŻááşááŻáś áĄáááˇáşáááˇáş
Event Loop á áĄáąáŹááşá፠áĄáááˇáş á áááˇáşááᯠáĄááźá˛áááşá¸ áááşááŤááá˛áᲠ(Loop) áááşááźáŽá¸ ááŻááşááąáŹááşááąááŤáááş-
áá Call Stack ááᯠá
á
áşááąá¸ááźááşá¸
Event Loop á Call Stack áá˛áážáŹ áááşáážá ááŻááşááąáá˛áˇ code áá˝áą áážáááąá¸ááŹá¸áááŻááŹááᯠáĄáááşááźááˇáşááŤáááşá
áĄáááşá Stack áá˛áážáŹ function áá
áşááŻáᯠáĄááŻááşááŻááşááąááŻááşá¸áááŻáááş áá°á ááŹááž áááşáááŻááşáᲠá
áąáŹááˇáşááąááŤáááşá
áá Callback Queue ááᯠááźááˇáşááźááşá¸
Call Stack áá˛áážáŹ ááŹáĄááŻááşááž ááážáááąáŹáˇáá°á¸ (áá˝ááşáá˝áŹá¸ááźáŽ) áááŻááŹáá˛áˇ Event Loop á Callback Queue áááşáááŻ
áážááˇáşááźááˇáşááŤáááşá Queue áá˛áážáŹ Web APIs ááŽáááą ááźáŽá¸á
áŽá¸áááŻáˇ ááąáŹááşááŹáá˛áˇ callback áĄááŻááşáá˝áą
(áĽáááŹ- click, timer, data) áážáááąáááŹá¸áááŻáˇ á
á
áşááŤáááşá
áá áĄááŻááşááᯠáá˝ážá˛ááźáąáŹááşá¸ááąá¸ááźááşá¸ (The Push)
Queue áá˛áážáŹ áĄááŻááşáážáááąáááş Event Loop á áĄá˛ááŽáá˛á áááááŻáśá¸áĄááŻááşááᯠáá°ááźáŽá¸ Call Stack áá˛áááŻ
áá˝ááşá¸áááş (Push) ááąá¸áááŻááşááŤáááşá áĄá˛ááŽáĄááŤáážáᏠáĄá˛áᎠcallback function á ááááş áĄááŻááşááŻááşááŹááźá
áşááŤáááşá
ááŹááźáąáŹááˇáş Event Loop á áĄááąá¸ááźáŽá¸ááŹáá˛?
JavaScript á Single-threaded ááźá
áşááąáá˛áˇ "ááá
áş" áᲠáĄááŻááşááŻááşáááŻááşááŹáᏠáᎠEvent Loop ááźáąáŹááˇáşááŤá
Non-blocking: setTimeout áááŻáˇáááŻááş fetch áááŻááťááŻá¸ ááźáŹáááˇáşáĄááŻááşáá˝áąááᯠWeb APIs áᎠáá˝ážá˛ááąá¸ááŹá¸áááŻááşáááŻáˇ UI á
ááŻáśáážááşáĄáááŻááşá¸ áĄááŻááşááŻááşááąáááŻááşááŹááŤá
Concurrency: áĄááŻááşáá˝áąááᯠáá
áşááźááŻááşáááş ááŻááşááąááááŻááťááŻá¸ ááśá
áŹá¸áá
áąááŤáááşá ááááşááąáŹáˇ ááąáŹááşáá˝ááşáážáŹ
Web APIs áá˝áąá áĄááŻááşááŻááşááąá¸ááąááźáŽá¸ Event Loop á áĄááźáąáá˝áąááᯠáĄá
áŽáĄá
ááşáááť ááźááşá
áŽááąá¸ááąáᏠááźá
áşááŤáááşá
Callback Queue
Callback Queue (áááŻáˇáááŻááş Task Queue) áááŻáᏠWeb APIs áá˝áąááŽáááą áĄááŻááşááźáŽá¸á
áŽá¸áááŻáˇ
ááźááşááŹáá˛áˇ function ááąá¸áá˝áą Call Stack áá˛ááᯠááźááşáááşáááŻáˇáĄáá˝ááş á
áąáŹááˇáşáááŻááşá¸ááá˛áˇ "áááşá¸á
áŽáááŹá¸" ááąááŹááźá
áşááŤáááşá
ááŻáśáá˛á JS Runtime Environment áá˛áˇ ááŹáááşáĄáąáŹááşááźáąáážáŹ click, timer, data á
áá˛áˇ
áĄááŻááşááąá¸áá˝áą áááşá¸á
áŽááąáá˛áˇ ááąááŹáᲠááźá
áşááŤáááşá
áá Callback Queue áá˛ááᯠáááşáááŻááąáŹááşááŹááá˛?
áĄááŻááşáá
áşááŻá Callback Queue áá˛ááᯠáááŻááşáááŻááşáááąáŹááşááŤáá°á¸á áĄáááˇáşáááˇáş ááźááşáááşá¸áááŤáááş:
Web APIs áááą ááááˇáşááŹááźááşá¸: áĽáááŹ- setTimeout áá˛áˇ timer ááźááˇáşáá˝áŹá¸áá˛áˇáĄá፠áááŻáˇáááŻááş fetch áááą
data áááŹáá˛áˇáĄá፠áĄá˛ááŽáĄááŻááşáá˛áˇ áááşáááŻááşáá˛áˇ callback function ááᯠWeb API á Queue áá˛ááᯠáááŻáˇááąá¸áááŻááşááŹááŤá
Events ááťáŹá¸: User á áááŻááşáá
áşááŻááᯠáážáááşáááŻááşáááş (click) áĄá˛áᎠclick event áĄáá˝ááş ááąá¸ááŹá¸áá˛áˇ function á
Queue áá˛áážáŹ ááŹááźáŽá¸ áááşá¸á
áŽááŤáááşá
áá FIFO (First In, First Out) á
áá
áş
Callback Queue áᏠFIFO á
áá
áşáá˛áˇ áĄááŻááşááŻááşááŤáááşá áážááşáááŻááşáážáŹ áá°áá˝áą áááşá¸á
áŽááááŻááťááŻá¸
áĄáááşááąáŹááşáá˛áˇ áĄááŻááşá áĄáááşááŻáśá¸ ááźááşáá˝ááşáá˝ááˇáş áááŤáááşá Call Stack áá˛áˇ LIFO á
áá
áşáá˛áˇ áááˇáşááťááşáááşááŤá
áá Event Loop áá˛áˇ ááťáááşáááşááŻáś
Callback Queue áá˛áážáŹ áĄááŻááşáá˝áą áááşááąáŹááşáᲠáážáááąááŤá
áąá áá°áááŻáˇá Call Stack áá˛ááᯠáááşá¸ááźáŽá¸ áááşáááŻáˇááááŤáá°á¸á
Event Loop á Call Stack ááᯠáĄááźá˛ááźááˇáşááąááźáŽá¸ Stack ááŻáśá¸á áĄáŹá¸áá˝áŹá¸ááźáŽáááŻááž Queue áá˛á áĄááŻááşáá˝áąáááŻ
áá
áşááŻááťááşá¸á
ᎠStack áá˛ááᯠáááŻáˇááąá¸ááŹááźá
áşááŤáááşá
Callback Queue áĄááťááŻá¸áĄá
áŹá¸ááťáŹá¸ (The Priority)
ááááşááąáŹáˇ Browser áá˛áážáŹ Queue á áá
áşááŻáááşá¸ áááŻááşááŤáá°á¸á áŚá¸á
áŹá¸ááąá¸áĄáááˇáş (Priority) áá˝áŹááźáŹá¸áážáŻ áážáááŤáááş:
Microtask Queue (Promises): Promise.then() ááŤáážáááŻááş async/await áá˝áąáĄáá˝ááşááŤá áá°á áŚá¸á
áŹá¸ááąá¸ áĄááźááˇáşááŻáśá¸ááŤá
Callback Queue (Macrotask): setTimeout, setInterval áá˛áˇ DOM events áá˝áąáĄáá˝ááşááŤá
áĽáááŹ: Timer áĄááŻááşáá˛áˇ Promise áĄááŻááş áážá
áşááŻá
ááŻáśá¸ Queue áá˛áážáŹ áááşá¸á
áŽááąáááş Event Loop á Promise áĄááŻááş
(Microtask) ááᯠáĄáááşáá°ááźáŽá¸ááž Timer áĄááŻááşááᯠááŻááşááąáŹááşááąá¸áážáŹ ááźá
áşááŤáááşá
LexicalStructure
JavaScript's lexical structure describes the basic building blocks of the language â the rules for writing code, forming tokens, naming variables, writing comments, and more. This document explains each part clearly.
1. What is Lexical Structure?
JavaScript áá˛áˇ Lexical Structure áááŻáᏠáĄááźáąááśááťáá˛áˇ á
ááşá¸ááťááşá¸áá˝áą (Grammar Rules) ááźá
áşááŤáááşá Programming language áá
áşááŻáážáŹ á
áŹááŻáśá¸áá˝áąááᯠáááşáááŻááąáŤááşá¸ááááşá
áááşáááŻááąá¸ááááşáááŻáá˛áˇ áĄááźáąááś "ááášááŤ" áááŻáˇ ááźáąáŹáááŻáˇáááŤáááşá
áá Case Sensitivity (áĄááźáŽá¸áĄááąá¸ áá˝á˛ááźáŹá¸ááźááşá¸)
JavaScript áᏠCase-sensitive ááźá
áşááŤáááşá áááŻáááŻááŹá á
áŹááŻáśá¸áĄááźáŽá¸áĄááąá¸ áá˝áŹááźáŹá¸áááş áĄáááášááŹááş ááá°ááąáŹáˇááŤáá°á¸á
let name = "Aung Aung";
let Name = "Su Su";
let NAME = "Kyaw Kyaw";
// ááŽááŻáśá¸ááŻááŻáśá¸áᏠvariable ááŽá¸ááźáŹá¸á
Ꭰááźá
áşááŤáááşá
áá Whitespace and Line Breaks
JavaScript áážáŹ áá˝ááşáááş (Space) áá˝áąáá˛áˇ á
áŹááźáąáŹááşá¸áááşá¸áᏠ(Line break) áá˝áąááᯠááťáŹá¸ááąáŹáĄáŹá¸ááźááˇáş ááťá
áşááťá°áážáŻááŤáááşá ááŤááźáąáŹááˇáş ááŻááşáá˝áąááᯠáááşááá˝ááşáĄáąáŹááş á
áŽááąá¸áááŻáˇáááŤáááşá
// áĄáá°áá°ááŤáá˛
let x=5;
let x = 5;
áá Literals (áááŻááşáááŻááşáááşáááŻá¸ááťáŹá¸)
Literals áááŻáᏠááŻááşáá˛áážáŹ áááŻááşáááŻááşááąá¸ááŹá¸áááŻááşáá˛áˇ data áááşáááŻá¸áá˝áą ááźá
áşááŤáááşá
123 (Number literal)
"Hello" (String literal)
true (Boolean literal)
{a: 1} (Object literal)
áá Identifiers (áĄáááşááąá¸ááźááşá¸ á
ááşá¸ááťááşá¸)
Variables áá˝áąá Functions áá˝áąááᯠááŹáááşááąá¸áá˛áˇáĄá፠áááŻááşááŹááááˇáş á
ááşá¸ááťááşá¸áá˝áąááŤá
áĄá
á
áŹááŻáśá¸ááᯠáĄáášááᏠ(letter)á underscore (_) ááŤáážáááŻááş dollar sign ($) áá˛áˇ á
áááŤáááşá
ááááşá¸ááááşá¸ (0-9) áá˛áˇ á
áááŻáˇ ááááŤá
Reserved Keywords (áĽáááŹ- if, while, return) áá˝áąááᯠááŻáśá¸áááŻáˇááááŤá
áá Semicolons (;)
JavaScript áážáŹ statement áá
áşááŻááźáŽá¸áááŻááşá¸ semicolon áááˇáşááąáˇáážáááŤáááşá áĄááŻááąááşáážáŹ JavaScript á áĄáááŻáĄááťáąáŹááş áááˇáşááąá¸áá˛áˇá
áá
áş (Automatic Semicolon Insertion)
ááŤáááşááąáá˛áˇ áĄáážáŹá¸áááşá¸áĄáąáŹááş áááŻááşáááŻááşáááˇáşááŹá áĄááąáŹááşá¸ááŻáśá¸ áĄááąáˇáĄááťááˇáşááŤá
áá Unicode
JavaScript ááŻááşáá˝áąááᯠUnicode character set áá˛áˇ ááąá¸ááŹá¸ááŹá¸ááŹááźá
áşáááŻáˇ variable name áá˝áąáážáŹ ááźááşááŹá
áŹáĄááŤáĄáááş ááŹááŹá
ááŹá¸áĄááťááŻá¸ááťááŻá¸ááᯠááŻáśá¸áááŻáˇáááŤáááşá
let ááŹáááş = "ááąáŹááşááąáŹááş";
console.log(ááŹáááş); // Output: ááąáŹááşááąáŹááş
Lexical structure defines how JavaScript source code is read and broken into tokens. It includes:
- Character set
- Case sensitivity
- Whitespace
- Line terminators
- Comments
- Literals
- Identifiers & keywords
- Operators & punctuators
2. Character Set
JavaScript uses the Unicode character set.
- This means it supports characters from almost all languages.
- Variable names can include Unicode letters â even emojis (not recommended in production).
let ááźááşáᏠ= "Hello"; let đ = 10;
3. Case Sensitivity
JavaScript is case-sensitive.
let name = "A"; let Name = "B"; // different variable
Keywords are also case-sensitive.
4. Whitespace
Whitespace includes spaces, tabs, and newlines.
- JavaScript generally ignores whitespace, except in specific cases.
Example:
Both are valid.
5. Line Terminators
Line terminators are characters such as:
\n(newline)\r(carriage return)
They can affect automatic semicolon insertion (ASI), so be careful.
Example (dangerous):
return 5; // returns undefined due to ASI
6. Comments
Single-line comment
Multi-line comment
/* This is a multi-line comment */
Note: Comments do not nest.
7. Identifiers
Identifiers are names for:
- variables
- functions
- classes
Rules:
- Must start with: letter,
_,$ - After first char: digits are allowed.
Valid:
let _value; let $item; let user123;
Invalid:
let 1user; // cannot start with digit
8. Keywords
These words have special meaning and cannot be used as identifiers. Examples:
break, case, class, const, continue, debugger, default,
delete, do, else, export, extends, finally, for, function,
if, import, in, instanceof, let, new, return, super,
switch, this, throw, try, typeof, var, void, while, with, yield
9. Literals
Literals are fixed values appearing directly in code.
Number literals
let a = 10; let b = 3.14; let hex = 0xFF; let binary = 0b1010;
String literals
let s1 = "hello"; let s2 = 'world'; let s3 = `template literal`;
Boolean literals
Null & Undefined
10. Operators & Punctuators
These include:
+ - * / %= += -= *=== === != !=={ } [ ] ( ), ; . ? :
JavaScript treats these as tokens during lexical scanning.
11. Automatic Semicolon Insertion (ASI)
JavaScript automatically inserts semicolons in some cases. This can cause unexpected behavior.
Bad:
let x = 5 let y = 10 (x + y).toString() // treated as function call
Recommended:
- Always use semicolons or
- Follow JS formatting rules carefully.
12. Escape Sequences
Used inside strings:
\nâ newline\tâ tab\"â double-quote\\â backslash
Example:
let text = "Hello\nWorld";
13. Unicode Escapes
Identifiers may include Unicode escapes:
let \u006Eame = "John"; // same as "name"
String Unicode:
Summary
JavaScript lexical structure defines how source code is read, including:
- Unicode support
- Case sensitivity
- Whitespace handling
- Comments
- Identifiers & keywords
- Literals
- Operators & punctuation
- ASI behavior
Understanding these rules helps you write cleaner and more predictable JavaScript.
Expressions
JavaScript expressions are pieces of code that produce a value. They are the building blocks of statements and logic in JavaScript.
JavaScript áážáŹ Expression áááŻáᏠáááşáááŻá¸áá áşáᯠ(Value) áá˝ááşááŹáĄáąáŹááş ááŻááşááąá¸áá˛áˇ Code áĄá áááşáĄáááŻááşá¸ááąá¸áá˝áąááᯠááąáŤáşááŹááŤá áá˝ááşáá˝ááşááźáąáŹááááş áá˝ááşááťááşáážáŻáá áşáᯠááŻááşáááŻááşáááŻáˇááźá áşá áąá ááąáŤáşáá°áááŻááşáááŻáˇááźá áşá áą áĄááźáąáá áşááŻáᯠáá˝ááşááŹáááş áĄá˛á፠Expression ááŤáá˛á
1. What Is an Expression?
JavaScript áážáŹ Expression áááŻáᏠáááşáááŻá¸áá
áşááŻáᯠ(Value) áá˝ááşááŹáĄáąáŹááş áá˝ááşááťááşááąá¸áá˛áˇ Code áĄáááŻááşá¸áĄá
ááᯠááąáŤáşááŹááŤá
áĄáááŻá¸áážááşá¸ááŻáśá¸ áážááşááŹá¸ááťááşáááş - "áá
áşááŻááŻááᯠáá˝ááşááťááşááźáŽá¸ áĄááźáą (Value) áá
áşáᯠááźááşááąá¸áááş áĄá˛á፠Expression áá˛" áááŻáˇ áážááşáááŻááşááŤáááşá
áá Expression áĄááťááŻá¸áĄá
áŹá¸ááťáŹá¸
JavaScript áážáŹ Expression áĄááťááŻá¸áĄá
áŹá¸ áĄááťáŹá¸ááźáŽá¸áážáááŤáááşá
Arithmetic Expressions: ááááşá¸ááááşá¸ áá˝ááşááťááşáážáŻááťáŹá¸á
5 + 5 (áĄááźáą 10 áá˝ááşáááş)
10 * 2 (áĄááźáą 20 áá˝ááşáááş)
String Expressions: á
áŹááŹá¸ááťáŹá¸ ááąáŤááşá¸á
ááşááźááşá¸á
"Hello " + "World" (áĄááźáą "Hello World" áá˝ááşáááş)
Logical Expressions: ááŻááş/áááŻááş á
á
áşááąá¸ááźááşá¸á
10 > 5 (áĄááźáą true áá˝ááşáááş)
Primary Expressions: áĄááźáąááś áááşáááŻá¸ááťáŹá¸á
true, 22, "Mg Mg" (áááşá¸áááŻáˇáááŻááşáááŻááşáááşáááşá¸ expression ááťáŹá¸ ááźá
áşáááş)
áá Expression vs Statement (áĄááąá¸ááźáŽá¸ááąáŹ áá˝áŹááźáŹá¸ááťááş)
Programming áážáŹ Expression áá˛áˇ Statement ááᯠáážáŹá¸áááşááźááŤáááşá
Expression: áááşáááŻá¸áá
áşááŻááᯠááźááşááąá¸áááşá áĽáááŹ- 2 + 2
Statement: áĄááŻááşáá
áşááŻááᯠááŻááşááąáŹááşáááşá áĽáááŹ- let x = 10; (ááŤá variable ááźáąááŹáá˛áˇ statement ááźá
áşááźáŽá¸ ááŹáááşáááŻá¸ááž ááźááşáááąá¸ááŤáá°á¸)
áá React áážáŹ Expression ááᯠáááşáááŻááŻáśá¸ááá˛?
React (JSX) ááąá¸áá˛áˇáĄá፠JavaScript Expression áá˝áąááᯠCurly Braces { } áá˛áážáŹ áááˇáşááąá¸áááŤáááşá
function Welcome() {
const name = "Aung Aung";
return (
<div>
{/* á¤áááşáážáŹ Expression ááźá
áşáááş */}
<h1>áááşášáááŹá፠{name}</h1>
{/* á¤áááşáážáŹáááşá¸ Expression ááźá
áşáááş */}
<p>á
ááąáŤááşá¸ á
áááş {5 + 5} ááźá
áşáááşá</p>
</div>
);
}
áá Ternary Operator (Expression áĄááźá
áşááŻáśá¸ááąáŹ If-Else)
React áážáŹ if-else statement ááᯠJSX áá˛áážáŹ ááąá¸áááŻáˇááááŤáá°á¸ (ááŹáááŻáˇáá˛áááŻááąáŹáˇ áá°á statement ááźá
áşáááŻáˇááŤ)á ááŤááźáąáŹááˇáş áĄááźáąááźááşááąá¸áá˛áˇ Ternary Expression ááᯠááŻáśá¸áááŤáááşá
JavaScript
{isLoggedIn ? "Welcome Back!" : "Please Log In"}
áĄáážá
áşááťáŻááş
Expression áááş áááşáááŻá¸ (Value) áá
áşááŻááᯠááŻááşááąá¸áááşá
React á JSX áá˛áá˝ááş Expression ááťáŹá¸áááŻáᏠ{ } ááźááˇáş ááŻáśá¸áááŻááşáááşá
An expression is any valid unit of code that evaluates to a value.
Examples:
5 // number expression "Hi" // string expression x + y // arithmetic expression sayHello() // function call expression
2. Primary Expressions
These are the simplest expressions that represent literal values or keywords.
Examples:
42 true "hello" null undefined this
Identifier Reference
3. Object & Array Initializer Expressions
Object Literal
let user = { name: "Aye", age: 20, };
Array Literal
4. Arithmetic Expressions
Perform mathematical operations.
x + y x - y x * 2 x / 10 x % 3 x ** 2
5. String Expressions
Involves string concatenation or template literals.
"Hello" + " World" `User: ${username}`
6. Logical Expressions
Use &&, ||, and !.
true && false isLoggedIn || hasToken !isAdmin
Logical operators return values, not booleans only.
"A" && "B" // "B" "A" || "B" // "A"
7. Comparison Expressions
x > y x < y x >= y x === y x !== y
They return true or false.
8. Assignment Expressions
These assign values and return the assigned value.
x = 10 x += 5 x -= 2 x *= 3
Example:
let a; console.log(a = 5); // prints 5
9. Function Call Expressions
Calling a function is an expression.
doSomething() alert("Hi") sum(10, 20)
Even methods:
10. Optional Chaining Expression
Safely access nested properties.
11. Member Access Expressions
Access properties:
Dot notation
Bracket notation
12. Conditional (Ternary) Expression
Short "if...else" that returns a value.
let status = age >= 18 ? "Adult" : "Child";
13. Arrow Function Expressions
Functions used as expressions.
const add = (a, b) => a + b;
Arrow function without body braces implicitly returns:
const double = x => x * 2;
14. Spread & Rest Expressions
Spread
let newArr = [...oldArr];
Rest
function sum(...nums) { return nums.reduce((a, b) => a + b); }
15. Comma Operator Expression
Evaluates multiple expressions but returns the last one.
let x = (1, 2, 3); // x = 3
Rarely used.
16. new Expression
Used to create instances.
let date = new Date(); let user = new User("Aye");
17. typeof, void, and delete Expressions
typeof
void
delete
18. Await Expression
Used in async functions.
let data = await fetch("/api");
19. Grouping Expressions
Control evaluation order.
Summary
JavaScript expressions:
- Always produce a value
- Can be simple (like
5) or complex (likeuser?.profile?.name ?? "Unknown") - Form the core of JavaScript logic
Understanding expressions helps you write more powerful and flexible code.
DataTypes
JavaScript has a flexible and dynamic type system. Every value in JavaScript belongs to a data type, and understanding them is essential for writing clean, predictable code.
JavaScript áážáŹ Data Types áááŻáᏠáá˝ááşááťá°ááŹá ááąááŹáá˝áąááᯠáááşáááŻáĄááťááŻá¸áĄá
áŹá¸áĄááźá
áş áážááşááŹá¸ááá˛áááŻáá˛áˇ áááşáážááşááťááş ááźá
áşááŤáááşá
JavaScript áážáŹ ááąááŹáĄááťááŻá¸áĄá
áŹá¸áá˝áąááᯠáĄááá áĄáŻááşá
áŻááźáŽá¸ (á) á
ᯠáá˝á˛ááŹá¸ááŤáááşá
áá Primitive Data Types (áĄááźáąááś áĄááťááŻá¸áĄá
áŹá¸ááťáŹá¸)
ááŤáá˝áąá áááşáááŻá¸áá
áşááŻáááşá¸áááŻáᲠááááşá¸áááşá¸áááŻááşááźáŽá¸ ááźáąáŹááşá¸áá˛áááŻáˇáááá˛áˇ (Immutable) áĄááźáąááśáĄááťááŻá¸áĄá
áŹá¸ á áᯠááźá
áşááŤáááşá
String: á
áŹááŹá¸ááťáŹá¸á (áĽáááŹ- "Hello", 'Mingalarbar')
Number: ááááşá¸ááááşá¸ááťáŹá¸ (Integer ááąáŹ Float á፠ááŤáááşáááş)á (áĽáááŹ- 25, 3.14)
Boolean: ááŻááş/áááŻááşá (true áááŻáˇáááŻááş false)
Undefined: Variable áá
áşááŻááᯠááźáąááŹááŹá¸ááźáŽá¸ áááşáááŻá¸ááááˇáşáááąá¸áá˛áˇ áĄááźáąáĄááąá
Null: ááááşááᏠ"ááŹáážááážááá°á¸" áááŻáˇ áááşáážááşááŹá¸áá˛áˇ áááşáááŻá¸ (Empty value)á
Symbol: áá°á¸ááźáŹá¸ááźáŽá¸ áá
áşááŻáááşá¸ááąáŹ identifier áĄááźá
áş ááŻáśá¸ááŤáááşá (ES6)
BigInt: áĄáá˝ááşááźáŽá¸ááŹá¸áá˛áˇ ááááşá¸ááááşá¸áá˝áą ááááşá¸áááŻáˇ ááŻáśá¸ááŤáááşá
áá Non-Primitive (Reference) Data Types
ááŤáá˝áąáááąáŹáˇ áážáŻááşáá˝áąá¸áá˛áˇ ááąááŹááŻáśá
áśáá˝áąááźá
áşááźáŽá¸ áááşáááŻá¸áĄááťáŹá¸ááźáŽá¸ááᯠá
áŻá
ááşá¸ááááşá¸áááşá¸áááŻááşááŤáááşá
1. Object: Key-value áĄáá˝á˛áááŻááş ááááşá¸áááşá¸áá˛áˇ ááąááŹááŻáśá
áśá
const person = { name: "Aung Aung", age: 20 };
2. Array: á
áŹáááşá¸ (List) ááŻáśá
áś ááááşá¸áááşá¸ááŹááźá
áşááźáŽá¸ ááááşááąáŹáˇ Object áĄááťááŻá¸áĄá
áŹá¸áá˛áááŤáá˛á
const fruits = ["Apple", "Banana", "Orange"];
3. Function: áĄááŻááşááŻááşááąáŹááşááťááşáá˝áąááᯠááááşá¸áááşá¸ááŹá¸áá˛áˇ áĄááťááŻá¸áĄá
áŹá¸á
áá Static vs Dynamic Typing
JavaScript áᏠDynamic Typed Language ááźá
áşááŤáááşá áááŻáááŻááŹá Variable áá
áşááŻááᯠáᏠáĄááťááŻá¸áĄá
áŹá¸áá˛áááŻáᏠááźááŻááźáąáŹá
ááŹááááŻáᲠáááˇáşáááŻááşáá˛áˇ áááşáááŻá¸ááąáŤáşáá°áááşááźáŽá¸ áĄááťááŻá¸áĄá
áŹá¸á áĄáááŻáĄááťáąáŹááş ááźáąáŹááşá¸áá˛áá˝áŹá¸ááŤáááşá
let x = 5; // x á Number ááźá
áşáá˝áŹá¸ááźáŽ
x = "Hello"; // áĄáᯠx á String ááźá
áşáá˝áŹá¸ááźááşááźáŽ
áá typeof Operator
Variable áá
áşááŻá áᏠData Type áá˛áááŻááŹááᯠááááťááşáááş typeof ááᯠááŻáśá¸ááźáŽá¸ á
á
áşááąá¸áááŻááşááŤáááşá
typeof 10; // "number"
typeof "hi"; // "string"
typeof true; // "boolean"
typeof undefined; // "undefined"
typeof null; // "object" (bug)
typeof {}; // "object"
typeof []; // "object"
typeof function(){}; // "function"
Primitive áá˝áąá áááŻá¸áážááşá¸ááźáŽá¸ Memory áá˛áážáŹ áááŻááşáááŻááşááááşá¸áááşá
Reference (Objects) áá˝áąá áážáŻááşáá˝áąá¸ááźáŽá¸ Memory áá˛áážáŹ Reference (ááááşá
áŹ) áĄááąáá˛áˇ ááááşá¸áááşá
1. Overview of Data Types
JavaScript has 8 main data types:
Primitive Data Types (7 types)
- Number
- String
- Boolean
- Undefined
- Null
- Symbol
- BigInt
NonâPrimitive Data Type (1 type)
- Object
2. Primitive Data Types
Primitive values:
- are immutable
- compared by value
- stored directly in memory
2.1 Number
Represents both integers and floatingâpoint numbers.
let age = 18; let price = 19.99; let infinity = Infinity; let notNumber = NaN;
JavaScript does not have separate types for int, float, double.
2.2 String
Represents text.
let name = "Aye"; let message = 'Hello'; let greeting = `Hi ${name}`; // template literal
2.3 Boolean
Represents logical values.
let isLoggedIn = true; let hasToken = false;
Common Boolean operations:
true && false true || false !true
2.4 Undefined
A variable that has been declared but not assigned.
let x; console.log(x); // undefined
2.5 Null
Represents an intentional absence of value.
Note:
typeof null; // "object" (JS historical bug)
2.6 Symbol (ES6)
Unique and immutable values, often used as object keys.
let id = Symbol("id"); let obj = { [id]: 123, };
2.7 BigInt (ES2020)
Used for very large integers.
let big = 12345678901234567890n; let sum = big + 10n;
BigInts cannot mix with normal numbers:
3. NonâPrimitive Data Type
3.1 Object
Objects store keyâvalue pairs.
let user = { name: "Aye", age: 20, };
Objects include:
- arrays
- functions
- dates
- regex
- maps
- sets
Everything that is not primitive is an object.
4. Special Object Types
4.1 Array
Ordered list of values.
4.2 Function
Functions are objects with callable behavior.
function greet() { return "Hello"; }
4.3 Date
Represents date and time.
4.4 Map
Stores keyâvalue pairs with any key type.
let map = new Map(); map.set("name", "Aye");
4.5 Set
Stores unique values.
let set = new Set([1, 2, 2, 3]); // {1,2,3}
5. Dynamic Typing
JavaScript is dynamically typed, meaning variables can change type at runtime.
6. Type Checking
typeof operator
typeof 10; // "number" typeof "hi"; // "string" typeof true; // "boolean" typeof undefined; // "undefined" typeof null; // "object" (bug) typeof {}; // "object" typeof []; // "object" typeof function(){}; // "function"
7. Difference Between Primitive & Object
| Feature | Primitive | Object |
|---|---|---|
| Storage | Value | Reference |
| Mutable? | No | Yes |
| Compared by | Value | Reference |
| Examples | 10, "hi", true |
{}, [], functions |
Example:
let a = { x: 1 }; let b = { x: 1 }; a === b; // false (different references)
8. Type Conversion
Implicit Conversion (Coercion)
"5" - 1 // 4 "5" + 1 // "51"
Explicit Conversion
Number("5") String(123) Boolean(1)
Summary
JavaScript data types include:
- 7 primitive types: Number, String, Boolean, Undefined, Null, Symbol, BigInt
- 1 nonâprimitive type: Object
- JavaScript is dynamically typed
- Primitive values are simple and immutable
- Objects are complex and mutable
Understanding data types helps prevent bugs and write cleaner, more predictable code.
Variables
Variables are one of the most fundamental parts of JavaScript. They allow you to store, update, and reuse values inside your programs.
1. What Is a Variable?
A variable is a named container for storing data.
let message = "Hello World";
2. Variable Declaration Keywords
JavaScript has 3 ways to declare variables:
â var
â let
â const
Each behaves differently.
3. let
Introduced in ES6, used for block-scoped variables.
let age = 20; age = 21; // reassign allowed
Features:
- Block scoped
{} - Can be reassigned
- Cannot be redeclared in the same scope
Example:
if (true) { let x = 10; } console.log(x); // â Error (x is block-scoped)
4. const
Also block-scoped, but cannot be reassigned.
const PI = 3.14; // PI = 3.15; â Error
Important:
const does not make objects immutable.
const user = { name: "Aye" }; user.name = "Ko"; // â allowed
You cannot reassign a new object:
user = {}; // â not allowed
5. var
Function-scoped and older keyword.
Problems with var:
- Not block scoped
- Can be redeclared
- Causes unexpected behavior due to hoisting
Example:
if (true) { var x = 10; } console.log(x); // â 10 (var ignores block scope)
Use let or const instead.
6. Scope
Scope determines where a variable can be used.
Types:
- Block Scope (
let,const) - Function Scope (
var) - Global Scope
Example:
let globalVar = "I am global"; // Global scope function exampleFunction() { var functionVar = "I am function-scoped"; // Function scope (var) if (true) { let blockVar = "I am block-scoped"; // Block scope (let) console.log(blockVar); // Accessible here } // console.log(blockVar); // Error: blockVar is not defined here console.log(functionVar); // Accessible here } exampleFunction(); console.log(globalVar); // Accessible here // console.log(functionVar); // Error: functionVar is not defined here
7. Hoisting
Hoisting áááŻáᏠâĄď¸ JavaScript engine á code run áááŻááşáááş âĄď¸ variable declarations (var, let, const) âĄď¸ function declarations áá˝áąááᯠmemory áá˛ááᯠáĄáááş ááŹá¸áá˝áŹá¸áá˛áˇ behavior ááᯠáááŻáááŻááŹááŤá
var is hoisted with undefined value:
console.log(x); // undefined var x = 10;
let and const are hoisted but in Temporal Dead Zone (TDZ):
console.log(y); // â Error let y = 10;
8. Initialization vs Declaration
let x; // declaration x = 5; // initialization let y = 10; // declared + initialized
9. Naming Variables
Variable names must follow rules.
Valid:
let name; let _counter; let $money; let age2;
Invalid:
let 1age; // cannot start with number let @name; // symbols not allowed
Best Practices:
- Use camelCase â
userName - Use descriptive names â
totalPrice - Constants in ALL_CAPS â
MAX_USERS
10. let vs const vs var
| Feature | var | let | const |
|---|---|---|---|
| Scope | Function | Block | Block |
| Redeclare? | â Yes | â No | â No |
| Reassign? | â Yes | â Yes | â No |
| Hoisting | Yes (undefined) | TDZ | TDZ |
Recommended:
- Use const by default
- Use let when value will change
- Avoid var
11. Global Variables
Variables declared outside functions.
Global variables can cause bugs â use only when needed.
12. Reassignment Examples
let count = 1; count = 2; // â allowed const PI = 3.14; PI = 3.2; // â not allowed
Summary
JavaScript variables:
- Store values for reuse
- Declared using
var,let, orconst let&constare block-scopedvaris function-scoped and outdatedconstprevents reassignment- Hoisting affects how variables behave
Understanding variables helps you control data flow and avoid bugs.
Operators
1. What Are Operators?
Operators are symbols that tell JavaScript to perform some action (calculations, comparisons, assignments, logic, etc.).
Example:
Here:
=is an assignment operator+is an arithmetic operator
2. Types of Operators
JavaScript has several categories of operators:
- Arithmetic Operators
- Assignment Operators
- Comparison Operators
- Logical Operators
- Unary Operators
- Ternary Operator
- String Operators
- Bitwise Operators
- Type Operators (
typeof,instanceof) - Optional Chaining & Nullish Coalescing Operators
3. Arithmetic Operators
| Operator | Name | Example |
|---|---|---|
+ |
Addition | 5 + 2 â 7 |
- |
Subtraction | 5 - 2 â 3 |
* |
Multiplication | 5 * 2 â 10 |
/ |
Division | 10 / 2 â 5 |
% |
Modulus (remainder) | 5 % 2 â 1 |
** |
Exponentiation | 2 ** 3 â 8 |
++ |
Increment | x++ |
-- |
Decrement | x-- |
Example:
let a = 10; a++; console.log(a); // 11
4. Assignment Operators
| Operator | Meaning | Example |
|---|---|---|
= |
Assign | x = 10 |
+= |
Add and assign | x += 5 (x = x + 5) |
-= |
Subtract and assign | x -= 5 |
*= |
Multiply and assign | x *= 5 |
/= |
Divide and assign | x /= 5 |
%= |
Modulus and assign | x %= 5 |
**= |
Power and assign | x **= 2 |
5. Comparison Operators
These return true or false.
| Operator | Meaning | Example |
|---|---|---|
== |
Equal (loose) | 5 == "5" â true |
=== |
Strict equal | 5 === "5" â false |
!= |
Not equal | 5 != 3 |
!== |
Strict not equal | 5 !== "5" |
> |
Greater than | 10 > 5 |
< |
Less than | 5 < 10 |
>= |
Greater or equal | 10 >= 10 |
<= |
Less or equal | 5 <= 5 |
Example:
console.log(5 === "5"); // false
6. Logical Operators
| Operator | Meaning | Example | | -------- | ------- | ------------------------- | | `&&` | AND | `true && false` â `false` | | `||` | OR | `true || false`â`true` | | `!` | NOT | `!true` â `false` |
Example:
let isLoggedIn = true; let isAdmin = false; console.log(isLoggedIn && isAdmin); // false
7. Unary Operators
| Operator | Meaning |
|---|---|
typeof |
Returns data type |
void |
Evaluates but returns undefined |
delete |
Removes object property |
+ |
Convert to number |
- |
Convert to negative number |
Example:
console.log(typeof 123); // "number"
8. Ternary Operator (Conditional Operator)
Shorthand for if/else.
condition ? valueIfTrue : valueIfFalse;
Example:
let age = 18; let msg = age >= 18 ? "Adult" : "Minor"; console.log(msg);
9. String Operator
The + operator is used for string concatenation.
let name = "Toe" + "Wai"; console.log(name); // "ToeWai"
10. Nullish Coalescing Operator (??)
Returns the right-hand value when the left side is null or undefined.
let user; console.log(user ?? "Guest"); // Guest
11. Optional Chaining Operator (?.)
Avoids errors when accessing properties of undefined or null.
let user = {}; console.log(user.address?.street); // undefined, no error
12. Bitwise Operators
Advanced topic â used for low-level operations.
| Operator | Meaning | | -------- | --------------------- | | `&` | AND | | || | OR | | `^` | XOR | | `~` | NOT | | `<<` | Left shift | | `>>` | Right shift | | `>>>` | Zero-fill right shift |
13. Operator Precedence (Which Runs First?)
Example:
2 + 3 * 4; // 14 (because * runs before +)
Shortcut:
()parentheses highest- Then unary (
!,typeof) - Then
* / % - Then
+ - - Then comparisons
- Then logical
- Last: assignment
Conditions
A complete guide to how decisions are made in JavaScript â using if, else, switch, ternary, truthy/falsy, and more.
1. What Are Conditions?
Conditions allow JavaScript to make decisions based on true/false results.
Example:
let age = 18; if (age >= 18) { console.log("You are an adult"); }
2. Types of Conditional Statements
JavaScript supports:
ifstatementif...elsestatementelse ifchainswitchstatement- Ternary operator (
? :) &&and||shortâcircuit conditions- Optional chaining (
?.) with conditions
3. The if Statement
Runs code only when the condition is true.
if (condition) { // code }
Example:
let score = 80; if (score > 50) { console.log("Pass"); }
4. if...else Statement
Runs one block if true, another if false.
if (condition) { // true block } else { // false block }
Example:
let isOnline = false; if (isOnline) { console.log("User is online"); } else { console.log("User is offline"); }
5. else if Chain
Checks multiple conditions one by one.
if (temperature > 30) { console.log("Hot"); } else if (temperature > 20) { console.log("Warm"); } else { console.log("Cold"); }
6. switch Statement
Used when checking one value against many possible cases.
switch (day) { case "Mon": console.log("Work day"); break; case "Sat": console.log("holiday"); case "Sun": console.log("Weekend"); break; default: console.log("Unknown day"); }
Why use switch?
- Cleaner when many
else ifconditions - Great for checking a single variable
7. Ternary Operator (? :)
Short version of if...else.
condition ? valueIfTrue : valueIfFalse;
Example:
let age = 18; let message = age >= 18 ? "Adult" : "Minor"; console.log(message);
Best used for simple decisions.
8. Truthy and Falsy Values
JavaScript treats some values as true or false automatically.
Falsy values:
false0""(empty string)nullundefinedNaN
Everything else is truthy.
Example:
if ("") console.log("This won't run"); if ("hello") console.log("This will run");
9. Logical Operators in Conditions
&& (AND)
Runs only if both conditions are true.
if (isLoggedIn && isAdmin) { console.log("Welcome Admin"); }
|| (OR)
Runs if at least one condition is true.
if (day === "Sat" || day === "Sun") { console.log("Weekend"); }
! (NOT)
Reverses a boolean.
if (!isOnline) { console.log("Offline"); }
10. Optional Chaining in Conditions (?.)
Avoids errors when checking nested properties.
if (user?.address?.city) { console.log("City found"); }
11. Combining Multiple Conditions
Example:
let age = 20; let hasID = true; if (age >= 18 && hasID) { console.log("You may enter"); }
12. Common Mistakes
Using = instead of == or ===
This assigns, not compares.
Correct:
Forgetting break in switch
switch(x) { case 1: console.log("One"); case 2: console.log("Two"); // Both run â }
13. Summary
Use conditions to:
- Make decisions
- Control program flow
- Validate data
- React to user input
Tools for conditions:
if,else,else ifswitch- Ternary operator
- Logical operators
- Truthy/falsy evaluation
Loops
A complete guide to loops in JavaScript â how to repeat actions, iterate data, and control flow efficiently.
1. What Are Loops?
Loops allow you to repeat code multiple times â automatically.
Example:
for (let i = 1; i <= 3; i++) { console.log(i); }
Output:
2. Types of Loops in JavaScript
JavaScript supports several loop types:
-
for loop
-
while loop
-
do...while loop
-
for...of loop (iterate arrays, strings, etc.)
-
for...in loop (iterate object keys)
-
Array iteration methods (not exactly loops but commonly used)
forEachmapfilterreduce
3. The for Loop
Most common and powerful loop.
Syntax:
for (initialization; condition; update) { // code }
Example:
for (let i = 0; i < 5; i++) { console.log("Number:", i); }
4. The while Loop
Runs as long as the condition is true.
let i = 0; while (i < 3) { console.log(i); i++; }
Use when you don't know how many times to loop.
5. The do...while Loop
Runs at least once, even if the condition is false.
let i = 5; do { console.log(i); i++; } while (i < 3);
6. The for...of Loop
Used for iterating iterables:
- Arrays
- Strings
- Maps
- Sets
Example:
let colors = ["red", "green", "blue"]; for (const c of colors) { console.log(c); }
7. The for...in Loop
Used to iterate object keys.
let user = { name: "Toe", age: 18, }; for (const key in user) { console.log(key, user[key]); }
â ď¸ Avoid using for...in for arrays.
8. Array Iteration Methods
These are not loops but often replace loops.
forEach (loop through each item)
[1, 2, 3].forEach(n => console.log(n));
map (returns new array)
let doubled = [1, 2, 3].map(n => n * 2);
filter (filters values)
let even = [1, 2, 3, 4].filter(n => n % 2 === 0);
reduce (accumulates values)
let sum = [1, 2, 3].reduce((a, b) => a + b, 0);
9. Loop Control: break and continue
break â stops the loop completely.
for (let i = 1; i <= 5; i++) { if (i === 3) break; console.log(i); }
continue â skips current iteration.
for (let i = 1; i <= 5; i++) { if (i === 3) continue; console.log(i); }
10. Infinite Loops (Be Careful!)
while (true) { console.log("This never stops"); }
Make sure your loop condition eventually becomes false.
11. Nested Loops
Loop inside a loop.
for (let i = 1; i <= 2; i++) { for (let j = 1; j <= 3; j++) { console.log(i, j); } }
12. When to Use Which Loop?
| Loop Type | Best Use |
|---|---|
for |
Known number of iterations |
while |
Unknown number of iterations |
do...while |
Run at least once |
for...of |
Arrays, strings, iterables |
for...in |
Object keys |
forEach |
Simple iteration (no break) |
map |
Transform array |
filter |
Filter array |
reduce |
Calculate a single value |
13. Common Mistakes
â Forgetting to update the counter
â Creating infinite loops
â Using for...in for arrays
â Expecting break inside forEach (it does not work)
14. Summary
Loops help you:
- Repeat actions
- Work with collections
- Automate repetitive tasks
- Process arrays/objects
You now know:
for,while,do...whilefor...of,for...in- Array iteration methods
- break/continue
Functions
A complete guide to JavaScript functions â definitions, types, parameters, return values, arrow functions, scopes, closures, and more.
1. What Is a Function?
A function is a reusable block of code designed to perform a task.
Example:
function greet() { console.log("Hello!"); }
2. Why Use Functions?
Functions help you:
- Avoid repeating code
- Organize logic
- Make code cleaner
- Create modular programs
- Return values from operations
3. Function Declaration
Also called a named function.
function add(a, b) { return a + b; } console.log(add(2, 3)); // 5
Features:
- Hoisted (usable before declaration)
4. Function Expression
Function stored in a variable.
const multiply = function (a, b) { return a * b; };
Features:
- Not hoisted
- Can be anonymous or named
5. Arrow Functions
Short syntax introduced in ES6.
const greet = () => { console.log("Hi!"); };
Short single-line form:
const square = n => n * n;
Differences from normal functions:
- No
thisbinding - No
argumentsobject - Great for callbacks
6. Parameters vs Arguments
Parameters â variables written in function definition Arguments â values passed when calling
Example:
function hello(name) { // parameter console.log("Hello", name); } hello("Toe"); // argument
7. Default Parameters
function greet(name = "Guest") { console.log("Hello", name); }
8. Rest Parameters (...args)
Used when the number of arguments is unknown.
function sum(...numbers) { return numbers.reduce((a, b) => a + b, 0); }
9. Return Statement
Functions can return a value.
function add(a, b) { return a + b; }
If no return â returns undefined.
10. Anonymous Functions
Functions without a name.
Used in callbacks:
setTimeout(function () { console.log("Done"); }, 1000);
11. Callback Functions
A function passed as an argument to another function.
function process(callback) { callback(); } process(() => console.log("Running!"));
12. Higher-Order Functions
Functions that:
- Take another function as an argument, or
- Return a function
Example:
function createMultiplier(x) { return function (y) { return x * y; }; } const double = createMultiplier(2); console.log(double(5)); // 10
13. Function Scope
Functions create their own scope.
function test() { let x = 10; } // x is not accessible here
14. Block Scope vs Function Scope
let&constâ block scopedvarâ function scoped
if (true) { let a = 10; // block var b = 20; // function } // b is still accessible
15. Closures
A closure is when a function remembers variables from its outer scope.
function outer() { let count = 0; return function () { count++; console.log(count); }; } const counter = outer(); counter(); // 1 counter(); // 2
Closures are used in:
- Private variables
- Factory functions
- Module patterns
16. Named vs Anonymous Functions
Named function
Anonymous function
const sayHi = function() {}
17. Immediately Invoked Function Expression (IIFE)
Runs immediately after creation.
(function () { console.log("I am an IIFE"); })();
18. Pure vs Impure Functions
Pure
- No side effects
- Same input â same output
function add(a, b) { return a + b; }
Impure
let x = 1; function addToX(y) { x += y; // modifies outside variable }
19. Functions as Objects
Functions in JavaScript are first-class citizens:
- Can be stored in variables
- Can be passed as arguments
- Can be returned from functions
20. Summary
You learned:
- Function declarations & expressions
- Arrow functions
- Parameters, arguments, return values
- Scope & closures
- Callbacks & higher-order functions
- IIFE, pure functions, rest parameters
Functions are the foundation of JavaScript. Mastering them = mastering JS.
Objects
JavaScript objects are one of the most important parts of the language. They let you store data in key-value pairs and model real-world entities.
đ 1. What Is an Object?
An object is a collection of related data and functions.
const user = { name: "Alex", age: 18, isStudent: true, };
- Keys â
name,age,isStudent - Values â "Alex", 18, true
đ 2. Creating Objects
A. Object Literal (most common)
const car = { brand: "Toyota", model: "Vios", year: 2020 };
B. Using new Object()
const obj = new Object(); obj.x = 10; obj.y = 20;
C. Using a Constructor Function
function Person(name, age) { this.name = name; this.age = age; } const p1 = new Person("John", 20);
D. Using Classes (ES6)
class User { constructor(name, age) { this.name = name; this.age = age; } } const u1 = new User("Alice", 25);
đ 3. Accessing Object Properties
Dot Notation
Bracket Notation
console.log(user["age"]);
Useful when:
- key contains spaces
- key is dynamic
đ 4. Adding / Updating Properties
Add new property
user.email = "alex@example.com";
Update existing property
đ 5. Deleting Properties
đ 6. Methods (Functions inside Objects)
const person = { name: "Leo", greet() { console.log(`Hi, I am ${this.name}`); } }; person.greet();
this refers to the current object.
đ 7. Nested Objects
const student = { name: "Nyein", address: { city: "Yangon", township: "Hlaing" } };
đ 8. Looping Through Objects
forâŚin
for (let key in user) { console.log(key, user[key]); }
Object.keys()
console.log(Object.keys(user));
Object.values()
console.log(Object.values(user));
Object.entries()
console.log(Object.entries(user));
đ 9. Copying Objects
Shallow Copy
const copy = { ...user };
Deep Copy
const deepCopy = JSON.parse(JSON.stringify(user));
đ 10. Object Destructuring
const { name, age } = user; console.log(name, age);
đ 11. Optional Chaining (?.)
Prevents errors when a property might be missing.
console.log(student.address?.city);
đ 12. Useful Built-in Methods
Object.keys(obj)â returns keysObject.values(obj)â returns valuesObject.entries(obj)â returns key/value pairsObject.assign(target, source)â merges objects
đ 13. Real-Life Example
const product = { id: 1, name: "Laptop", price: 980000, specs: { cpu: "i5", ram: "16GB" }, getInfo() { return `${this.name} - ${this.price} Ks`; } };
đ Summary
- Objects store data in key/value pairs
- Methods = functions inside objects
- Dot & bracket notation for access
- Use destructuring for cleaner code
- Objects are used everywhere in JS (React, APIs, Node.js)
Arrays
đ What is an Array?
An array is a special data structure in JavaScript used to store ordered collections of values.
const numbers = [1, 2, 3]; const mixed = ["Hello", 42, true, null];
Arrays are mutable, dynamic, and zeroâindexed.
đ Array Indexing
- Index starts from 0
const fruits = ["apple", "banana", "mango"]; console.log(fruits[0]); // apple console.log(fruits[2]); // mango
- Accessing an outâofârange index returns undefined.
đ Creating Arrays
1. Using Array literal (recommended)
2. Using new Array()
const arr = new Array(5); // creates empty array of length 5
đ Common Array Methods
đš Add & Remove
| Action | Method | Example |
|---|---|---|
| Add end | push() |
arr.push(10) |
| Remove end | pop() |
arr.pop() |
| Add start | unshift() |
arr.unshift(5) |
| Remove start | shift() |
arr.shift() |
const nums = [1,2,3]; nums.push(4); // [1,2,3,4] nums.pop(); // [1,2,3]
đš Searching
| Method | Description |
|---|---|
indexOf() |
Returns index of value |
includes() |
Returns true/false |
const colors = ["red", "blue", "green"]; colors.includes("blue"); // true
đš Transforming Arrays
map() â returns new array
[1, 2, 3].map(n => n * 2); // [2, 4, 6]
filter() â keeps only matching items
[1, 2, 3, 4].filter(n => n % 2 === 0); // [2, 4]
reduce() â accumulates to a single value
[1, 2, 3].reduce((total, n) => total + n, 0); // 6
đ Looping Through Arrays
1. for loop
for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
2. for...of
for (const item of arr) { console.log(item); }
3. forEach()
arr.forEach(item => console.log(item));
đ Array Destructuring
const [a, b] = [10, 20]; console.log(a); // 10
Skip items:
const [first, , third] = [1,2,3];
đ Spread & Rest
Spread (expand array)
const arr1 = [1, 2]; const arr2 = [...arr1, 3, 4];
Rest (collect values)
function sum(...nums) { return nums.reduce((a, b) => a + b); }
đ Useful Utility Methods
slice() â non-destructive
arr.slice(1, 3); // returns part of array
splice() â destructive
arr.splice(1, 1); // removes item at index 1
join() â convert array to string
["a","b"].join("-"); // "a-b"
sort()
[3,1,2].sort(); // [1,2,3]
reverse()
[1,2,3].reverse(); // [3,2,1]
đ Multidimensional Arrays
const matrix = [ [1, 2], [3, 4] ]; console.log(matrix[1][0]); // 3
đ When to Use Arrays?
Use arrays when you need ordered data, such as:
- lists of items
- API responses
- user inputs
- numeric operations
- loops & transformations
Asynchronous-JavaScript
đ Introduction
JavaScript is single-threaded, but it can perform non-blocking operations using asynchronous programming.
Async JS allows tasks like:
- Fetching data from a server
- Reading files
- Timers
- Events
to run without blocking the main thread.
đ Why Asynchronous JavaScript?
Without async code:
- Long operations freeze the page
- UI becomes unresponsive
- Slow APIs block execution
Async JS lets the browser handle tasks in the background.
1. The Event Loop
The Event Loop is the system that manages asynchronous operations.
JavaScript uses:
- Call Stack â executes code
- Web APIs â timers, fetch, DOM
- Callback Queue â completed tasks
- Event Loop â sends tasks to stack when it's empty
This enables async behavior even though JS has one thread.
2. Callbacks
A callback is a function passed as an argument.
function getData(callback) { setTimeout(() => { callback("Done!"); }, 1000); } getData(result => { console.log(result); });
â Callback Hell
Nested callbacks become hard to read:
a(() => { b(() => { c(() => { d(); }); }); });
3. Promises
A Promise represents a value that will be available in the future.
States:
- pending
- fulfilled
- rejected
Example
const promise = new Promise((resolve, reject) => { setTimeout(() => resolve("Success"), 1000); }); promise.then(result => console.log(result));
.catch() for errors
promise.catch(err => console.error(err));
.finally()
promise.finally(() => console.log("Done"));
4. Async / Await
Introduced in ES2017, async/await lets you write asynchronous code like synchronous code.
Example
async function loadData() { const result = await fetch("/api/data"); const data = await result.json(); console.log(data); } loadData();
Try/Catch for errors
async function run() { try { const res = await fetch("/invalid"); } catch (err) { console.log("Error:", err); } }
5. Microtasks vs Macrotasks
Microtasks
- Promise callbacks (
then,catch)
Macrotasks
setTimeoutsetInterval
Execution order:
- Call Stack
- All microtasks
- One macrotask
- Repeat
6. Common Asynchronous Functions
setTimeout
setTimeout(() => console.log("Hi"), 1000);
setInterval
setInterval(() => console.log("Tick"), 1000);
fetch
fetch("/api").then(res => res.json()).then(data => console.log(data));
7. Parallel, Sequential, and Race
Sequential
await task1(); await task2();
Parallel
await Promise.all([task1(), task2()]);
Race
Promise.race([task1(), task2()]);
8. Error Handling
Promise error
promise.catch(err => console.error(err));
Async/await error
try { await something(); } catch (err) { console.error(err); }
9. Real-World Examples
Fetching API Data
async function getUsers() { const res = await fetch("https://jsonplaceholder.typicode.com/users"); return res.json(); }
File Reading (Node.js)
const fs = require("fs/promises"); async function readFile() { const data = await fs.readFile("text.txt", "utf8"); console.log(data); }
TypeCasting
đ Introduction
JavaScript is a dynamically typed language, meaning variables can change their type at runtime. Type casting (also called type coercion) is the process of converting one data type to another.
JavaScript performs two types of type casting:
- Implicit (Automatic) Type Coercion
- Explicit (Manual) Type Conversion
1. Implicit Type Coercion (Automatic)
JavaScript automatically converts types during operations.
đš String Coercion
When one operand is a string â JS converts the other to string.
"5" + 3; // "53" 5 + "3"; // "53"
đš Number Coercion
When using -, *, /, %, JS converts both values to numbers.
"10" - 2; // 8 "6" * "2"; // 12 "20" / 5; // 4
đš Boolean Coercion
Values are converted to true/false in logical contexts.
Falsy values:
false, 0, "", null, undefined, NaN
Everything else â true
Boolean(0); // false Boolean("Hi"); // true
2. Explicit Type Conversion (Manual)
You convert types using built-in functions.
2.1 Convert to Number
Use:
Number(value)parseInt(value)parseFloat(value)- Unary
+value
Number("10"); // 10 parseInt("10px"); // 10 parseFloat("9.5"); // 9.5 +"5"; // 5
â Invalid conversions
2.2 Convert to String
Use:
String(value).toString()
String(123); // "123" (100).toString(); // "100"
2.3 Convert to Boolean
Use:
Boolean(value)!!value
Boolean(1); // true Boolean(0); // false !!"hi"; // true
3. Common Coercion Scenarios
đš With + operator
- If one operand = string â convert to string
đš With comparison ==
JavaScript tries to convert values to the same type
"5" == 5; // true true == 1; // true false == 0; // true
đš Strict comparison ===
No type coercion
4. Type Coercion Table
| Expression | Result |
|---|---|
true + 1 |
2 |
false + 1 |
1 |
"5" * 2 |
10 |
"5" + 2 |
"52" |
null + 1 |
1 |
undefined + 1 |
NaN |
5. Checking Types
typeof "hello"; // "string" typeof 50; // "number" typeof true; // "boolean" typeof null; // "object" (known JS bug) typeof [] // "object"
6. Best Practices
â Use explicit conversion instead of relying on coercion
â Avoid using loose equality (==)
â Use strict equality (===)
â Use Number() instead of parseInt() when possible
â Be careful with + â it triggers string coercion
Modules
đ Introduction
JavaScript modules allow you to split your code into reusable, maintainable files. Each module can export variables/functions/classes and another file can import them.
Modules help with:
- Better code organization
- Reusability
- Avoiding global namespace pollution
- Easier maintenance
- Cleaner architecture
Modern JavaScript uses ES Modules (ESM).
1. ES Modules (ESM)
The modern module system using:
import ... from "module"; export ...;
Supported in:
- Browsers (using
<script type="module">) - Node.js (with
.mjsor package.json type: module)
2. Exporting
Exports allow a file to expose code so other files can import it.
đš Named Exports
You can export multiple items.
// math.js export const PI = 3.14; export function add(a, b) { return a + b; }
đš Default Export
One file can have only one default export.
// greet.js export default function greet(name) { console.log(`Hello, ${name}`); }
3. Importing
đš Import Named Exports
import { PI, add } from "./math.js"; console.log(add(2, 3));
đš Import Default Export
import greet from "./greet.js"; greet("Koko");
đš Rename Imports
import { add as sum } from "./math.js";
đš Import Everything
import * as math from "./math.js"; math.add(2, 3); math.PI;
4. Mixing Exports
You can mix named + default exports.
// utils.js export default function log(msg) { console.log(msg); } export const version = "1.0.0";
import log, { version } from "./utils.js";
5. Module Execution
- A module is executed only once, even if imported multiple times.
- Imports are read before code runs (top-level scope).
- Modules always run in strict mode.
6. Using Modules in Browser
<script type="module" src="/app.js"></script>
Features:
- Modules load deferred automatically
importworks inside scripts
7. Modules in Node.js
Option 1: Use .mjs
Option 2: Add to package.json
Then use:
import { add } from "./math.js";
8. CommonJS vs ES Modules
| Feature | CommonJS | ES Modules |
|---|---|---|
| Syntax | require/export | import/export |
| Loaded | runtime | compile-time |
| File Ext | .js | .mjs or js w/ type: module |
| Default | Node.js | Browser + Node |
CommonJS Example
const fs = require("fs"); module.exports = {};
ES Module Example
import fs from "fs"; export default {};
9. Dynamic Imports
Useful for lazy loading or conditional imports.
if (true) { const module = await import("./math.js"); console.log(module.add(2, 3)); }
10. Real-World Example Structure
project/
ââ utils/
â ââ math.js
â ââ helpers.js
ââ components/
â ââ navbar.js
ââ app.js
math.js
export function multiply(a, b) { return a * b; }
app.js
import { multiply } from "./utils/math.js"; console.log(multiply(4, 5));
11. Best Practices
â Use named exports when exporting many items â Use default export when exporting a single main value â Keep file names descriptive â Group similar modules into folders â Avoid circular imports â Prefer ES Modules over CommonJS for new projects
ErrorHandling
đ Introduction
Error handling in JavaScript allows you to catch and manage errors so your program doesnât crash unexpectedly. Errors can happen due to:
- Invalid input
- Network failure
- Wrong code logic
- Unexpected API responses
- Missing files (Node.js)
JavaScript provides tools like try/catch, throw, finally, and error objects to manage these situations safely.
1. Types of Errors in JavaScript
đš Syntax Error
Code cannot run due to incorrect syntax.
console.log("Hello" // missing parenthesis
đš Reference Error
Using a variable that does not exist.
console.log(x); // x is not defined
đš Type Error
Wrong operation on the wrong data type.
const num = 5; num.toUpperCase(); // TypeError
đš Range Error
Invalid length or number range.
new Array(-2); // RangeError
đš Custom Errors (using throw)
You can throw your own custom errors.
throw new Error("Something went wrong!");
2. try / catch
Used to handle errors gracefully.
try { const result = dangerousFunction(); } catch (error) { console.log("Error happened:", error); }
3. finally Block
Runs always, whether there's an error or not.
try { console.log("Trying..."); } catch (err) { console.log("Error!"); } finally { console.log("Always runs"); }
4. Throwing Custom Errors
Use throw to trigger your own error.
function divide(a, b) { if (b === 0) { throw new Error("Cannot divide by zero"); } return a / b; }
5. The Error Object
JavaScript error objects contain useful information:
try { throw new Error("Failed to load"); } catch (e) { console.log(e.name); // "Error" console.log(e.message); // "Failed to load" console.log(e.stack); // stack trace }
Common error types:
- Error
- TypeError
- ReferenceError
- SyntaxError
- RangeError
- EvalError
6. Error Handling in Asynchronous Code
đš Callbacks
fs.readFile("test.txt", (err, data) => { if (err) return console.error(err); console.log(data); });
đš Promises
fetch("/api") .then(res => res.json()) .catch(err => console.log("Error:", err));
đš async / await with try/catch
async function loadData() { try { const res = await fetch("/api/users"); const data = await res.json(); } catch (error) { console.log("Failed to load:", error); } }
7. Global Error Handling
đš Browser
window.onerror = function(message, source, line, column, error) { console.log("Global Error: ", message); };
đš Node.js
process.on("uncaughtException", (err) => { console.log("Unhandled Exception:", err); });
8. Validation Errors
Throw custom errors when data is invalid.
function register(user) { if (!user.name) { throw new Error("Name is required"); } }
9. Error Logging (Best Practices)
â Log errors clearly â Include timestamp â Never show internal errors to users â Use monitoring tools (Sentry, LogRocket, Datadog) â Use custom error classes for clarity
10. Creating Custom Error Classes
class ValidationError extends Error { constructor(message) { super(message); this.name = "ValidationError"; } } throw new ValidationError("Invalid email format");
11. Best Practices
â Use try/catch only where needed
â Throw meaningful error messages
â Clean and consistent error structure
â Handle async errors with try/catch or .catch()
â Avoid silent error handling
â Use custom errors for validation and logic problems
OOPConpects
JavaScript supports Object-Oriented Programming (OOP) using prototypes and ES6 classes.
đ What is OOP?
OOP is a programming paradigm that organizes code into objects â each object contains data (properties) and behavior (methods).
JavaScript implements OOP using:
- Objects
- Prototypes
- Constructor functions
- Classes (ES6)
â Core OOP Concepts
1. Classes
A class is a blueprint for creating objects.
class Person { constructor(name, age) { this.name = name; this.age = age; } greet() { console.log(`Hello, my name is ${this.name}`); } } const p1 = new Person("John", 20); p1.greet();
2. Objects
Objects are instances created from classes.
const user = new Person("Alice", 25);
3. Constructor
The constructor() method initializes object properties.
class Car { constructor(brand, year) { this.brand = brand; this.year = year; } }
4. Encapsulation
Encapsulation hides internal details and protects data.
Modern JS supports private fields:
class BankAccount { #balance = 0; // private deposit(amount) { this.#balance += amount; } getBalance() { return this.#balance; } }
5. Abstraction
Abstraction shows only essential features and hides complexity.
class CoffeeMachine { start() { this._heatWater(); console.log("Coffee ready!"); } _heatWater() { // Pretend private console.log("Heating..."); } }
6. Inheritance
One class can inherit properties & methods from another.
class Animal { speak() { console.log("Animal sound"); } } class Dog extends Animal { speak() { console.log("Woof!"); } } const d = new Dog(); d.speak();
7. Polymorphism
Child classes can override parent class methods.
Example above: Dog.speak() overrides Animal.speak().
Another example:
class Shape { area() { return 0; } } class Circle extends Shape { constructor(r) { super(); this.r = r; } area() { return Math.PI * this.r * this.r; } }
8. The "this" Keyword
this refers to the current object instance.
class User { constructor(name) { this.name = name; // "this" = current object } }
9. Static Methods
Static methods belong to the class (not instances).
class MathUtils { static add(a, b) { return a + b; } } MathUtils.add(5, 3); // OK
10. Prototypes (Behind the Scenes)
Before ES6 classes, OOP in JS used prototypes.
function Person(name) { this.name = name; } Person.prototype.greet = function () { console.log("Hello " + this.name); };
đĽ Summary Table
| Concept | Description |
|---|---|
| Class | Blueprint for objects |
| Object | Instance of a class |
| Constructor | Initializes properties |
| Encapsulation | Hiding data, using private fields |
| Abstraction | Hiding complexity |
| Inheritance | Reusing parent class features |
| Polymorphism | Overriding methods |
| Static methods | Methods used on class, not object |
| Prototype | JS's underlying OOP system |
đ Real-World Example
class User { constructor(username) { this.username = username; } login() { console.log(this.username + " logged in"); } } class Admin extends User { deleteUser(user) { console.log(`Admin deleted ${user.username}`); } } const admin = new Admin("Admin1"); const user = new User("Tom"); admin.login(); admin.deleteUser(user);
JSON
JSON is one of the most important data formats in modern web development. It is used to store, exchange, and transport data between servers, APIs, and applications.
đ What is JSON?
JSON stands for JavaScript Object Notation.
It is:
- A text-based data format
- Lightweight
- Easy for humans to read
- Easy for machines to parse
- Language-independent (not only for JavaScript)
Example JSON:
{
"name": "John",
"age": 25,
"isStudent": false,
"skills": ["HTML", "CSS", "JavaScript"]
}đŚ JSON vs JavaScript Object
JSON
{
"name": "John",
"age": 25
}- Keys are always strings (double quotes)
- Cannot contain functions
- Only supports values: string, number, object, array, boolean, null
JavaScript Object
const user = { name: "John", age: 25, greet() { console.log("Hello"); } };
- Keys can be without quotes
- Can contain methods & variables
đĄ Valid JSON Data Types
| Type | Example |
|---|---|
| String | "Hello" |
| Number | 10, 2.5 |
| Boolean | true / false |
| Object | { "a": 1 } |
| Array | [1, 2, 3] |
| Null | null |
â JSON does not support:
- Functions
- Comments
- Undefined
- Date objects (must be a string)
đ Converting JSON in JavaScript
1. JSON.stringify() â Convert JS object to JSON string
const user = { name: "Alice", age: 20 }; const jsonData = JSON.stringify(user); console.log(jsonData); // "{"name":"Alice","age":20}""
This is often used when:
- Sending data to a server
- Saving data in localStorage
2. JSON.parse() â Convert JSON string to JS object
const json = '{"name":"Alice","age":20}'; const obj = JSON.parse(json); console.log(obj.name); // Alice
Used when:
- Receiving data from API
- Reading from localStorage
đĽď¸ Real API Example
fetch("https://api.example.com/user") .then(res => res.json()) // parse JSON response .then(data => console.log(data));
đ JSON in Local Storage
const user = { name: "Tom", age: 30 }; // Save localStorage.setItem("user", JSON.stringify(user)); // Read const data = JSON.parse(localStorage.getItem("user")); console.log(data.name);
đŤ Common Errors
â 1. Using single quotes in JSON
{
'name': 'John' // â invalid
}JSON requires double quotes.
â 2. Trailing commas
{
"name": "John",
"age": 30, // â invalid
}â 3. Comments not allowed
{
"name": "John" // â comments not allowed
}đ JSON.stringify Additional Options
Pretty Format
const json = JSON.stringify(user, null, 2); console.log(json);
Output:
{
"name": "Alice",
"age": 20
}đĽ Summary
| Feature | Description |
|---|---|
| JSON | Data exchange format |
| stringify() | JS â JSON string |
| parse() | JSON string â JS object |
| Data types | string, number, object, array, boolean, null |
| Used in | APIs, databases, configs, localStorage |
FetchAPI
The Fetch API is a modern, promise-based way to make HTTP requests in JavaScript. It is widely used in web development for calling APIs, sending data to servers, and retrieving JSON.
đ What is Fetch API?
fetch() is a built-in browser function that allows you to request resources over the network.
Basic syntax:
fetch(url, options?) .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error));
đ 1. Basic GET Request
fetch("https://api.example.com/users") .then(res => res.json()) .then(data => console.log(data)) .catch(err => console.log(err));
đ 2. Using Async/Await (Recommended)
async function getUsers() { try { const res = await fetch("https://api.example.com/users"); const data = await res.json(); console.log(data); } catch (err) { console.error(err); } }
đ 3. POST Request (Send Data)
async function createUser() { const newUser = { name: "John", age: 22 }; const res = await fetch("https://api.example.com/users", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(newUser) }); const data = await res.json(); console.log(data); }
đ 4. PUT Request (Update Data)
fetch("https://api.example.com/users/1", { method: "PUT", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: "Updated User" }) }) .then(res => res.json()) .then(data => console.log(data));
đ 5. DELETE Request
await fetch("https://api.example.com/users/1", { method: "DELETE" });
đ 6. Handling Errors Correctly
fetch() does NOT throw errors for HTTP status codes like 404 or 500.
You must check them manually:
async function loadData() { try { const res = await fetch("https://api.example.com/data"); if (!res.ok) { throw new Error(`HTTP Error: ${res.status}`); } const data = await res.json(); console.log(data); } catch (error) { console.error("Fetch Error:", error); } }
đ 7. Sending Headers
fetch(url, { headers: { "Authorization": "Bearer token123", "Content-Type": "application/json" } });
đ 8. Fetching Text, Blob, FormData, etc.
Text
const res = await fetch("/info.txt"); const text = await res.text();
Blob (images/files)
const res = await fetch("/image.png"); const blob = await res.blob();
FormData
const formData = new FormData(); formData.append("photo", fileInput.files[0]); await fetch("/upload", { method: "POST", body: formData });
đ 9. Abort Fetch Request
Cancel a long-running request:
const controller = new AbortController(); fetch(url, { signal: controller.signal }); controller.abort();
đ 10. Fetch Options Summary
| Option | Description |
|---|---|
| method | GET, POST, PUT, DELETE |
| headers | Additional metadata (JSON, Auth, etc.) |
| body | Request payload |
| signal | AbortController for canceling |
đ 11. Real-World Example: Pagination
async function loadPage(page) { const res = await fetch(`/api/users?page=${page}`); const data = await res.json(); console.log(data); }
đŚ 12. Fetch in Next.js (App Router)
export async function GET() { const res = await fetch("https://api.example.com/products", { cache: "no-store" }); const data = await res.json(); return Response.json(data); }
đĽ Summary
fetch()is Promise-based- Supports GET, POST, PUT, DELETE
- Use
res.json()to convert API response - Must manually check
res.ok - Supports headers, FormData, Blob, File uploads
- Works great with async/await
ES6
ES6+ refers to ECMAScript 2015 (ES6) and all versions after it. It introduced many powerful features that make JavaScript cleaner, faster, and easier to write.
đ 1. let and const
let
- Block scoped
- Can be reassigned
const
- Block scoped
- Cannot be reassigned
đ 2. Arrow Functions
Shorter, cleaner syntax.
const add = (a, b) => a + b;
Arrow functions do not have their own this.
đ 3. Template Literals
Use backticks `, variable interpolation, and multiline strings.
const name = "John"; console.log(`Hello ${name}!`);
đ 4. Default Parameters
function greet(name = "Guest") { console.log(`Hello ${name}`); }
đ 5. Destructuring
Object Destructuring
const user = { name: "Tom", age: 30 }; const { name, age } = user;
Array Destructuring
const nums = [10, 20, 30]; const [a, b] = nums;
đ 6. Spread Operator ...
Spread into arrays
const arr1 = [1,2]; const arr2 = [...arr1, 3, 4];
Spread into objects
const user = { name: "Alice" }; const newUser = { ...user, age: 22 };
đ 7. Rest Parameters
function sum(...nums) { return nums.reduce((a, b) => a + b); }
đ 8. Enhanced Object Literals
const name = "John"; const age = 20; const user = { name, age, greet() { console.log("Hello!"); } };
đ 9. Modules (import/export)
// math.js export function add(a, b) { return a + b; } // app.js import { add } from "./math.js";
đ 10. Classes
class Person { constructor(name) { this.name = name; } speak() { console.log(`${this.name} speaks`); } }
đ 11. Promises
const getData = () => new Promise((resolve) => { resolve("Done"); });
đ 12. Async/Await
Cleaner way to handle asynchronous code.
async function load() { const data = await fetch("/api"); }
đ 13. Optional Chaining ?.
Safer property access.
console.log(user?.address?.city);
đ 14. Nullish Coalescing ??
Returns right value only if left is null or undefined.
const username = input ?? "Guest";
đ 15. Map and Set
Set
const set = new Set([1,2,2,3]);
Map
const map = new Map(); map.set("name", "John");
đ 16. Iterators & for...of
for (const value of [10,20,30]) { console.log(value); }
đ 17. Symbol
Unique identifier.
đ 18. BigInt
Large integers.
const n = 12345678901234567890n;
đ 19. Dynamic Import
import("./module.js").then(module => { module.run(); });
đ 20. Promise.all, Promise.any, Promise.race
await Promise.all([p1, p2]);
đĽ Summary Table
| Feature | Description |
|---|---|
| let/const | Block-scoped variables |
| Arrow functions | Shorter, no this |
| Template literals | Backtick strings |
| Destructuring | Extract values |
| Spread/Rest | Expand or collect |
| Classes | OOP support |
| Promises | Async operations |
| Async/await | Cleaner async |
| Optional chaining | Safe access |
| Modules | import/export |
BrowserAPIs
Browser APIs (Application Programming Interfaces) are built-in features provided by web browsers that allow JavaScript to interact with the browser and the environment.
They let you:
- Manipulate the DOM
- Handle user events
- Store data
- Work with multimedia
- Access device features
- Fetch network resources
đł 1. DOM (Document Object Model) API
The DOM API lets JavaScript interact with HTML elements.
Select Elements
document.getElementById("title"); document.querySelector(".item");
Modify Elements
const title = document.querySelector("h1"); title.textContent = "Updated Title"; title.style.color = "blue";
Create & Append Elements
const div = document.createElement("div"); div.textContent = "Hello"; document.body.appendChild(div);
đŻ 2. Events API
Handle clicks, input, submit, keyboard, scroll, etc.
document.querySelector("button").addEventListener("click", () => { console.log("Button clicked!"); });
đž 3. Storage API (localStorage & sessionStorage)
localStorage
- Stores data permanently (until deleted)
localStorage.setItem("theme", "dark"); localStorage.getItem("theme");
sessionStorage
- Stores data for one tab session
sessionStorage.setItem("token", "123");
đ 4. Fetch API
Used to make HTTP requests.
fetch("/api/data") .then(res => res.json()) .then(data => console.log(data));
âąď¸ 5. Timers (setTimeout, setInterval)
setTimeout(() => { console.log("Runs once after 2 seconds"); }, 2000); setInterval(() => { console.log("Repeats every second"); }, 1000);
đĽ 6. Geolocation API
Retrieve user location (with permission).
navigator.geolocation.getCurrentPosition(pos => { console.log(pos.coords.latitude, pos.coords.longitude); });
đ¤ 7. Media Devices & Camera API
Access camera/microphone.
navigator.mediaDevices.getUserMedia({ video: true }) .then(stream => console.log(stream));
đ 8. Audio & Video API
Control audio and video elements.
document.querySelector("video").play(); document.querySelector("audio").pause();
đď¸ 9. Clipboard API
Copy text to clipboard.
navigator.clipboard.writeText("Copied!");
Paste (with permission):
navigator.clipboard.readText().then(text => console.log(text));
đźď¸ 10. Canvas API
Used for drawing graphics.
const canvas = document.getElementById("myCanvas"); const ctx = canvas.getContext("2d"); ctx.fillStyle = "red"; ctx.fillRect(10, 10, 100, 100);
đ 11. History API
Manage browser navigation.
history.pushState({ page: 1 }, "Title", "?page=1");
đ¨ 12. Web Storage API
Includes:
localStoragesessionStorageCookies(via document.cookie)
đ¸ď¸ 13. WebSocket API
Real-time communication.
const socket = new WebSocket("ws://example.com"); socket.onmessage = event => console.log(event.data);
đ 14. Notification API
Show system notifications.
Notification.requestPermission().then(() => { new Notification("Hello!"); });
đ 15. Intersection Observer API
Detect when elements enter the viewport.
const observer = new IntersectionObserver(entries => { if (entries[0].isIntersecting) { console.log("Element visible"); } }); observer.observe(document.querySelector("#target"));
đ§ 16. URL & URLSearchParams API
const url = new URL(window.location); console.log(url.searchParams.get("id"));
đĽ Summary Table
| API | Purpose |
|---|---|
| DOM API | Work with HTML elements |
| Events API | User interactions |
| Storage API | localStorage / sessionStorage |
| Fetch API | Make network requests |
| Geolocation | Get location |
| MediaDevices | Camera/Mic access |
| Canvas | Draw graphics |
| WebSocket | Real-time data |
| Notification | System notifications |
| Timers | setTimeout, setInterval |
| URL API | Parse/manipulate URLs |
Hoisting
Hoisting áááŻáᏠJavaScript áážáŹ variable áá˝áąáá˛áˇ function áá˝áąááᯠcode á run áááş
(Execution context áááşááąáŹááşáá˛áˇáĄááťáááş) memory áá˛áážáŹ ááąááŹááźááŻáá°ááŹá¸áá˛áˇ áááąáŹáááŹá¸ááźá
áşááŤáááşá
áááŻá¸áááŻá¸áážááşá¸áážááşá¸ááźáąáŹááááş áááşá variable áá
áşááŻááᯠáááźáąááŹáááş (Declare áááŻááşáááş) áĄááąáŤáşáááą áážááşá¸ááŻáśá¸áááŻááşáááşááąáŹááş
JavaScript á error ááááşá
áąáᲠvariable declaration ááᯠcode áá˛áˇ ááááşááŻáśá¸ááᯠáá˝á˛áááşáááŻááşááááŻááťááŻá¸
ááźáŻáá°ááŹááᯠááąáŤáşááŹááŤá
áá Function Hoisting
Function áá˝áąá Hoisting áážáŹ áĄáá°á¸áĄáá˝ááˇáşáĄááąá¸áááŤáááşá Function áá
áşááŻááŻáśá¸ááᯠmemory áᲠááźááŻáááşááááşá¸ááŹá¸áá˛áˇáĄáá˝ááş
áá°áˇááᯠáááąá¸áááş (áĄááąáŤáşáááą) áážááşá¸ááąáŤáşáááŻáˇ áááŤáááşá
sayHello(); // áĄááŻááşááŻááşáááş: "áááşášáááŹááŤ"
function sayHello() {
console.log("áááşášáááŹááŤ");
}
áá Variable Hoisting (var, let, const)
Variable áá˝áąáážáŹááąáŹáˇ áá°áááŻáˇááᯠááźáąááŹáá˛áˇ keyword ááąáŤáşáá°áááşááźáŽá¸ áĄááŻááşááŻááşááŻáś áá˝áŹááźáŹá¸ááŤáááşá
var: Hoisting ááźá
áşááŤáááşá ááŤááąáá˛áˇ variable áá˛áˇ áááşáááŻá¸ (value) áááŻááąáŹáˇ áááááąá¸áᲠundefined
áĄááźá
áşáᲠáážááşááŹá¸ááŤáááşá
let áážááˇáş const: áá°áááŻáˇáááşá¸ Hoisting ááźá
áşááŤáááşá ááŤááąáá˛áˇ áá°áááŻáˇááᯠmemory áá˛áážáŹ ááąááŹáá°ááŹá¸ááŻáśáá˛
áážáááźáŽá¸ code á áá°áááŻáˇáᎠáááąáŹááşáááťááşá¸ áĄááŻáśá¸ááźáŻáá˝ááˇáş áááąá¸ááŤáá°á¸á ááŤááᯠTemporal Dead Zone (TDZ) áááŻáˇ ááąáŤáşááŤáááşá
** Temporal Dead Zone (TDZ) áááŻáᏠlet áá˛áˇ const variable áá˝áąáážáŹ ááźá
áşááąáˇáážááá˛áˇ áĄááźáŻáĄáá°áá
áşááŻááŤá
variable ááᯠá
áááşááźáąáᏠ(declare) áá˛áˇ code áĄááźáąáŹááşá¸áᎠáááąáŹááşáááş áĄááąáŤáşáááą áážááşá¸ááŻáśá¸áááááş
ReferenceError áááşá
áąáá˛áˇ áááşááźáą (Area) ááᯠááąáŤáşáᏠááźá
áşááŤáááşá**
| Keyword | Hoisted ááźá áşááŹá¸ | áááşáááŻá¸ (Initial Value) | Error áááşááŹá¸ |
|---|---|---|---|
| var | ááźá áşáááş | undefined | ááááşáá°á¸(undefined ááźáááş) |
| let / const | ááźá áşáááş | ááážááá°á¸ (Uninitialized) | ReferenceError áááşáááş |
Scope
Scope áááŻáᏠJavaScript áážáŹ variable áá˝áąá functions áá˝áąáá˛áˇ objects áá˝áąáááŻ
"áááşááąááŹáááą áážááşá¸ááŻáśá¸áááŻáˇáááá˛" áááŻáá˛áˇ áĄáááŻááşá¸áĄáᏠáááŻáˇáááŻááş áááşááááááşááᯠááąáŤáşáᏠááźá
áşááŤáááşá
áááŻá¸áááŻá¸áážááşá¸áážááşá¸ááźáąáŹááááş Variable áá
áşááŻáá˛áˇ "áááşáááşá¸" áá˛áˇ "ááźááşáááŻááşá
á˝ááşá¸" (Visibility) ááᯠScope á ááŻáśá¸ááźááşááąá¸ááŹááŤá
áá Scope áĄááťááŻá¸áĄá
áŹá¸ (á) ááťááŻá¸
JavaScript áážáŹ áĄááááĄáŹá¸ááźááˇáş áĄáąáŹááşá፠Scope á áᯠáážáááŤáááş-
(á) Global Scope
áááşáááˇáş function áááŻáˇáááŻááş block áá˛áˇ áĄááźááşáááşáážáŹáááᯠááźáąááŹááŹá¸áá˛áˇ variable áá˝áąááŤá
áá°á¸ááźáŹá¸ááťááş: Code áá
áşááŻááŻáśá¸áá˛áˇ áááşááąááŹáááąáááᯠáážááşá¸ááŻáśá¸áááŻáˇáááŤáááşá
áĽáááŹ: const website = "Google"; (ááŤááᯠfunction áá˛áááąáááşá¸ áážááşá¸ááąáŤáşáááŻáˇ áááŤáááş)
(á) Function Scope (Local Scope)
Function áá
áşááŻáá˛áˇ { } áĄáá˝ááşá¸áážáŹ ááźáąááŹááŹá¸áá˛áˇ variable áá˝áąááŤá
áá°á¸ááźáŹá¸ááťááş: áĄá˛áᎠfunction áĄáá˝ááşá¸áážáŹáᲠááŻáśá¸áááŻáˇáááŤáááşá Function áĄááźááşáááşáááą áážááşá¸ááąáŤáşáááş Error áááşááŤááááˇáşáááşá
var keyword áá˛áˇ ááźáąááŹáááş Function Scope ááźá
áşááŤáááşá
(á) Block Scope
if statement, for loop áááŻáˇáááŻááş áááŻá¸áááŻá¸ curly braces { } áĄáá˝ááşá¸áážáŹ áážááá˛áˇ ááąááŹááŤá
áá°á¸ááźáŹá¸ááťááş: let áá˛áˇ const ááᯠááŻáśá¸áážáᏠBlock Scope áĄááŻááşááŻááşááŤáááşá (áĄá˛áᎠ{ } áĄááźááşáááşáážáŹ ááŻáśá¸áááŻáˇááááŤ)
áááááŹá¸áááş: var áá˛áˇ ááźáąááŹáááş block scope ááážáááŤáá°á¸ (Global áááŻáˇáááŻááş Function scope ááŽááᯠááąáŤááşáá˝ááşáá˝áŹá¸ááŤááááˇáşáááş)á
áá áážááŻááşá¸áážááşááťááş áĽáááŹ
// --- Global Scope ---
const user = "Aung Aung";
function sayHi() {
// --- Function Scope ---
const message = "Hello";
if (true) {
// --- Block Scope ---
const greeting = "Hi there";
var legacy = "I am everywhere"; // var áááş block scope ááᯠááąáŹááşáá˝ááşáááŻááşáááş
console.log(greeting); // áĄááŻááşááŻááşáááş
}
console.log(message); // áĄááŻááşááŻááşáááş
// console.log(greeting); // Error! (Block Scope áĄááźááşáááşááźá
áşááąá)
console.log(legacy); // áĄááŻááşááŻááşáááş (var ááźá
áşááąáŹááźáąáŹááˇáş)
}
sayHi();
// console.log(message); // Error! (Function Scope áĄááźááşáááşááźá
áşááąá)
áá ááŹááźáąáŹááˇáş Scope á áĄááąá¸ááźáŽá¸ááŹáá˛?
Security (ááŻáśááźáŻáśáážáŻ): Variable áá˝áąááᯠáááŻáĄááşáá˛áˇ ááąááŹáážáŹáᲠááŹá¸ááźááşá¸ááźááˇáş áĄááźáŹá¸ code áá˝áąá áááąáŹáşáá
ááŹááźááşááŹááťááŻá¸ááᯠááŹá¸ááŽá¸áááŻááşááŤáááşá
Naming Collisions (ááŹáááşáá°ááźááşá¸): Scope ááá°áááş variable ááŹáááşáá°ááąá¸áááŻáˇ áááŤáááşá
(áĽáááŹ- function A áá˛áážáŹáááşá¸ x ááŻáśá¸á function B áá˛áážáŹáááşá¸ x ááŻáśá¸áááŻáˇ áááŹááťááŻá¸)
Memory Management: Function áá
áşáᯠáĄááŻááşááźáŽá¸áá˝áŹá¸áááş áá°áˇáá˛á Local variables áá˝áąáááŻ
memory áá˛áááą ááťááşááŻááşááąá¸áá˛áˇáĄáá˝ááş memory áááşááŹá
áąááŤáááşá
áĄáážá
áşááťáŻááş
Global Scope: áá°áááŻááşá¸ ááźááşáááŻááşáá˛áˇ "áááşá¸áááąáŤáşá áááŻááşá¸ááŻááş" áááŻááťááŻá¸ááŤá
Function Scope: áĄáááşáá
áşáĄáááşáá˛áˇ "á§ááˇáşáááşá¸" áááŻááťááŻá¸ááŤá áĄáááşáá˛áááşááž ááźááşáááŤáááşá
Block Scope: áĄáááşáá˛áááž "ááąáášááŹáĄááąá¸ááąá¸" áᲠáááˇáşááŹá¸ááááŻááťááŻá¸ááŤá áĄá˛ááŽááąáášááŹááᯠáá˝ááˇáşáážáᲠááźááşáááŹááŤá
Scope Chain
Scope Chain áááŻáᏠJavaScript áážáŹ variable áá
áşááŻááᯠáážáŹáá˝áąáá˛áˇ "áážáąááŹá¸áá
áş" áááŻááťááŻá¸ á
áá
áşáá
áşáᯠááźá
áşááŤáááşá
áááşáážááážáááąáá˛áˇ ááąááŹáážáŹ variable ááᯠáážáŹáááŻáˇááá˝áąáˇáááş áá°áˇáá˛áˇ áĄááźááşáááş (Parent Scope) ááŽááᯠáĄáááˇáşáááˇáş
áááşáážáŹáá˝áŹá¸áá˛áˇ ááźá
áşá
ááşááᯠááąáŤáşááŹááŤá
áᎠconcept ááᯠááŹá¸áááşáááŻáˇ Scopes áĄááťááŻá¸áĄá
áŹá¸áá˝áąááᯠáĄáááşááááŹá¸áááŻáˇ áááŻááŤáááşá
áá Scopes áĄááťááŻá¸áĄá
áŹá¸ á ááŻ
Global Scope: Code áá
áşááŻááŻáśá¸áá˛áˇ áĄááźááşáááşááŻáśá¸ááąááŹá áááşááąááŹááááᯠáážááşá¸ááŻáśá¸áááŻáˇááááşá
Function Scope: Function áá
áşááŻáĄáá˝ááşá¸áážáŹáᲠáážááá˛áˇááąááŹá
Block Scope: if áááŻáˇáááŻááş for loop áá˛áˇ { } brackets áĄáá˝ááşá¸áážáŹáᲠáážááá˛áˇááąáᏠ(let áá˛áˇ const áĄáá˝ááşááŹ)á
áá Scope Chain áááşááᯠáĄááŻááşááŻááşááá˛?
JavaScript Engine á variable áá
áşááŻááᯠáá˝áąáˇáá˛áˇáĄá፠áĄáąáŹááşááŤáĄá
áŽáĄá
ááşáĄáááŻááşá¸ áážáŹáá˝áąááŤáááş-
Local Scope: áĄáááşááŻáśá¸ áááşáážá áĄááŻááşááŻááşááąáá˛áˇ ááąáᏠ(Current Scope) áážáŹ áážáŹááŤáááşá
Outer Scope: ááá˝áąáˇáááş áá°áˇááᯠáááşá¸ááśááŹá¸áá˛áˇ áĄááźááşáááş Scope (Parent) ááŽááᯠáá˝áŹá¸áážáŹááŤáááşá
Global Scope: áĄááźááşáááşáĄáááˇáşáááˇáşáážáŹ áážáŹáááşá¸áá˛áˇ ááąáŹááşááŻáśá¸ Global Scope áĄáá ááąáŹááşáá˝áŹá¸ááŤáááşá
áĄá˛ááŽáážáŹááž ááá˝áąáˇááąáŹáˇáá°á¸áááŻáááşááąáŹáˇ ReferenceError ááźááŤááááˇáşáááşá
áĄááąá¸ááźáŽá¸ááťááş: Scope Chain áᏠáĄáąáŹááşáááą áĄááąáŤáşáááŻáᲠáážáŹáááŻáˇáááŤáááşá áĄááąáŤáş (Global) áááą
áĄáąáŹááş (Local function) áá˛á variable ááᯠáážááşá¸áážáŹáááŻáˇ ááááŤáá°á¸á
áá Code áĽáááŹááźááˇáş ááźááˇáşááźááşá¸
const globalVar = "Global";
function outerFunction() {
const outerVar = "Outer";
function innerFunction() {
const innerVar = "Inner";
console.log(innerVar); // áá Local áážáŹáá˝áąáˇáááş -> "Inner"
console.log(outerVar); // áá Local áážáŹááá˝áąáˇáááŻáˇ Parent (outerFunction) áážáŹáá˝áŹá¸áážáŹáááş -> "Outer"
console.log(globalVar); // áá Parent áážáŹááá˝áąáˇáááŻáˇ Global áážáŹáá˝áŹá¸áážáŹáááş -> "Global"
console.log(unknown); // áá áááşáážáŹáážááá˝áąáˇáááŻáˇ -> ReferenceError
}
innerFunction();
}
outerFunction();
áá Lexical Scoping
Scope Chain áᏠLexical Scoping ááąáŤáşáážáŹ áĄááźáąááśááŤáááşá áááŻáááŻááŹá variable áá
áşááŻáá˛áˇ scope áááŻ
code ááąá¸ááááşá¸á (áááşááąááŹáážáŹ ááąá¸ááŹá¸ááá˛áááŻááŹááᯠááźááˇáşááźáŽá¸) ááŻáśá¸ááźááşáááŻááşááŹááŤá Function áááŻ
áááşááąááŹáážáŹ "ááąáŤáşááá˛" áááŻááŹáááş áááşááąááŹáážáŹ "ááąá¸ááŹá¸ááá˛" áááŻááŹá áááŻáĄááąá¸ááźáŽá¸ááŤáááşá
áĄááťááşá¸ááťáŻááş (Analogy)
áĄáááşáá
áşáĄáááşáážáŹ áá
ášá
ááşá¸áá
áşáᯠáážáŹááááŻááŤáá˛-
áááŻááˇáşáĄáááşá¸áá˛áážáŹ áĄáááşáážáŹáááş (Local Scope)á
ááá˝áąáˇáááş á§ááˇáşáááşá¸áá˛áá˝ááşáážáŹáááş (Outer Scope)á
ááá˝áąáˇáááş áĄáááşáážáąáˇáá˝ááşá¸ááźááşáá˛áážáŹ áá˝ááşáážáŹáááş (Global Scope)á
áĄááźááşáážáŹááž ááá˝áąáˇáááşááąáŹáˇ áĄá˛ááŽáá
ášá
ááşá¸ ááážááá°á¸áááŻáˇ áááşáážááşáááŻááşááŹááŤáá˛á
Lexical Scoping
JavaScript áážáŹ Lexical Scope (áááŻáˇáááŻááş Static Scope) áááŻáááşáážáŹ variable áá
áşááŻá
áááşáážááážáŻáááşáááş (Scope) ááᯠáááşá¸áĄáŹá¸ code ááąá¸ááŹá¸á
ááşá ááŹá¸áážááá˛áˇááąáŹ ááąáᏠááąáŤáşáá°áááşá
áááşáážááşááźááşá¸áááŻáááŻáááŻááŤáááşá
áááŻá¸áááŻá¸áážááşá¸áážááşá¸ááźáąáŹááááş "Function áá
áşááŻáᏠáá°áˇáá˛áˇ áĄááźááşáááş (Parent) áážáŹáážááá˛áˇ Variable áá˝áąááᯠáážááşá¸ááźááşáááŻááşáááş"
áááŻááŹááŤáá˛á
function outer() {
const name = "Aung Aung";
function inner() {
// inner function áá˛áážáŹ 'name' ááážáááąáá˛áˇ
// áá°áˇáá˛áˇ lexical parent ááźá
áşáá˛áˇ outer ááŽá variable ááᯠáážááşá¸ááŻáśá¸áááŻáˇááááş
console.log(name);
}
inner();
}
outer(); // Output: Aung Aung
ááŽááąááŹáážáŹ inner() function ááᯠouter() áá˛áˇ áĄáá˛áážáŹ ááąá¸ááŹá¸áá˛áˇáĄáá˝ááş inner áá˛áˇ lexical environment
áá˛áážáŹ outer áá˛áˇ variable áá˝áą ááŤáááşááąáᏠááźá
áşááŤáááşá
áĄááá áĄááťááşááťáŹá¸
áĄáá˛áááą áĄááźááşáááŻáᲠááźááşááááş: Function áĄáááşááąá¸áá˝áąá áá°áááŻáˇááᯠáááşá¸ááśááŹá¸áá˛áˇ áĄááźááşáááş
(Parent) scope áá˝áąááᯠáážááşá¸ááźááşáááŻááşááąáá˛áˇá áĄááźááşáááşá function áááąáŹáˇ áĄáá˛á function áá˛á variable
áá˝áąááᯠáážááşá¸áááźááşáááŻááşááŤáá°á¸á
Static ááźá
áşáááş: Function ááᯠáááşááąááŹáážáŹ "ááąáŤáşááá˛" (Call-site) áááŻááŹá áĄááąá¸áááźáŽá¸ááŤáá°á¸á
áááşááąááŹáážáŹ "ááźáąááŹáá˛áˇááá˛" (Definition-site) áááŻááŹááᲠáĄááąá¸ááźáŽá¸ááŤáááşá
Lexical Scoping vs Dynamic Scoping
JavaScript áᏠLexical Scoping ááᯠááŻáśá¸ááŤáááşá áááťááŻáˇ ááŹááŹá
ááŹá¸áá˝áąáážáŹ ááŻáśá¸áá˛áˇ Dynamic Scoping áá˛áˇ ááá°ááŤáá°á¸á
JavaScript
const x = 10;
function a() {
console.log(x);
}
function b() {
const x = 20;
a(); // x á áááşááąáŹááşáá˝ááşááá˛?
}
b();
Lexical Scoping (JS): áĄááźáąá 10 áá˝ááşááŤáááşá ááŹáááŻáˇáá˛áááŻááąáŹáˇ a() ááᯠááźáąááŹáá˛áˇáá˛áˇ
ááąááŹáá˛áˇ áĄááźááşáááşáážáŹ x = 10 áᲠáážááááŻáˇááŤá
Dynamic Scoping: áĄááźáąá 20 áá˝ááşááŤááááˇáşáááş (ááŹáááŻáˇáá˛áááŻááąáŹáˇ a() ááᯠááąáŤáşáááŻááşáá˛áˇ ááąááŹáážáŹ x á 20 ááźá
áşááąáááŻáˇááŤ)á
ááŤááąáá˛áˇ JS á ááŤááťááŻá¸ áĄááŻááşáááŻááşááŤáá°á¸á
Lexical Scoping ááᯠ"ááťááŻá¸áááŻá¸ááŽá" ááᯠáážááşááŹá¸áááŻááşááŤáááşá áááşáᏠáááˇáşááááá˝áąááŽá áĄáá˝áą (Variables) áá˝áąááᯠááááŻááşáá˝ááˇáşáážáááŤáááşá
áááş áááşááźááŻáˇáááŻáᲠááąáŹááşáá˝áŹá¸ááąáŹááşáá˝áŹá¸ (Function ááᯠáááşáážáŹáᲠááąáŤáşááąáŤáş)á áááˇáşáá˛áˇ áááá áááşáá°áá˛áááŻáᏠ(Lexical Parent) áááźáąáŹááşá¸áá˛áá˛áˇáĄáá˝ááş áĄá˛ááŽáĄáá˝áąáá˝áąááᯠáááş áááşááźáŽá¸ ááŻáśá¸á
á˝á˛áá˝ááˇáş áážáááąáážáŹ ááźá
áşááŤáááşá
Closure
JavaScript áážáŹ Closure áááŻááŹá Function áá
áşááŻáᏠáá°áˇáá˛áˇáĄááźááşáááş scope (outer function scope)
á variable áá˝áąááᯠáá°áááŻááşáááŻááşááźáŽá¸ááŻáśá¸áá˝áŹá¸áááşááąáŹááş áážááşááááąááźáŽá¸ ááźááşááŻáśá¸áááŻááşáá˛áˇ á
á˝ááşá¸áááş ááᯠááąáŤáşááŹááźá
áşááŤáááş.
áááŻá¸áážááşá¸áážááşá¸ ááźáąáŹááááş "Function áá
áşááŻá áá°áˇááᯠáááşááŽá¸áá˛áˇáá˛áˇ áááşáááşá¸ááťááş (Outer Scope) áážáŹáážááá˛áˇ Variable áá˝áąááᯠáĄááźá˛áááşá¸ áážááşááááąááźááşá¸" ááᯠááąáŤáşááŹááŤá
ááŻáśáážááşáĄáŹá¸ááźááˇáş Function áá
áşááŻá áĄááŻááşááŻááşááźáŽá¸áá˝áŹá¸áááş áá°áˇáá˛á variable áá˝áąáᏠmemory áá˛áááą ááťáąáŹááşáá˝áŹá¸ááážáŹááŤá
ááŤááąáá˛áˇ Closure ááźáąáŹááˇáş áĄá˛áᎠvariable áá˝áąááᯠáááşááźáŽá¸ ááááşá¸ááŹá¸áááŻááşáᏠááźá
áşááŤáááşá
áá Closure áááşááᯠááźá
áşááąáŤáşááŹááá˛?
Function áá
áşááŻáĄáá˝ááşá¸áážáŹ ááąáŹááşáááş Function áá
áşáᯠ(Inner Function) ááᯠáááşááąá¸ááźáŽá¸ áĄá˛áᎠInner function áááŻ
áĄááźááşááᯠreturn ááźááşááŻááşáááŻááşáá˛áˇáĄá፠Closure ááźá
áşááąáŤáşááŹááŤáááşá
function outerFunction() {
let outerVariable = "I am outside!";
function innerFunction() {
console.log(outerVariable); // innerFunction á outerVariable ááᯠááŻáśá¸ááąáááş
}
return innerFunction; // function áááŻááźááşááŻááşáááŻááşáááş
}
const myClosure = outerFunction();
myClosure(); // Output: "I am outside!"
ááŹááźá
áşáá˝áŹá¸ááŹáá˛?
outerFunction() áĄááŻááşááŻááşááźáŽá¸ááŻáśá¸áá˝áŹá¸ááąáááˇáş myClosure() ááᯠááąáŤáşáááŻááşáá˛áˇáĄááťáááşáážáŹ outerVariable áá˛áˇ áááşáááŻá¸ááᯠáááşáážááşááááąáá˛ááźá
áşááŤáááş.
áĄááŻááşááŻááşááŻáś áĄáááˇáşáááˇáş (Execution Context áĄá)
Creation: outerFunction ááᯠááąáŤáşáááŻááşáá˛áˇáĄá፠áá°áˇáĄáá˝ááş Memory ááąááŹáá
áşáᯠáááŹááŤáááşá
Returning: áá°á innerFunction ááᯠááźááşááąá¸áááŻááşáá˛áˇáĄá፠áĄá˛áᎠinner function áá˛áˇáĄáá° áá°áˇáá˛áˇ
Scope Chain á፠ááŤáá˝áŹá¸ááŤáááşá
Persistence: Closure á count variable ááᯠGarbage Collector áááą áááťááşáá
áşáĄáąáŹááş
ááŹá¸ááŽá¸ááŹá¸áááŻááşááŤáááşá ááŤááźáąáŹááˇáş counter() ááᯠááąáŤáşáááŻááşá¸ count áááşáááŻá¸á áááşáážáááąááŹááŤá
áá áááááŹá¸áááşáĄááťááş
Closures áá˝áąá variable áá˝áąááᯠmemory áá˛áážáŹ áááşááááşá¸ááŹá¸áá˛áˇáĄáá˝ááş áĄááŻáśá¸ááááŻáᲠáĄááťáŹá¸ááźáŽá¸
ááŻáśá¸áááş Memory Leak (Memory ááąááŹáá˝ááş áááťááşááąáŹáˇááźááşá¸) ááźá
áşáááşááŤáááşá áĄááŻááşááźáŽá¸áá˝áŹá¸áááş reference
ááᯠnull ááźááşááŻááşááąá¸áááŻáˇ áááŻáĄááşáááş áááŻáĄááşááŤááááˇáşáááşá
áĄáážá
áşááťáŻááş (Analogy)
Closure áááŻáᏠ"ááťáąáŹáááŻá¸áĄáááş" áá˛áˇ áá°ááŤáááşá Function á áá
áşááąááŹááᯠáááŽá¸áá˝ááşáá˝áŹá¸áá˛áˇáĄááŤ
(Return ááźááşáá˛áˇáĄááŤ) áá°áˇáĄáááşáážáŹáážááá˛áˇ áá
ášá
ááşá¸áá˝áąááᯠááťáąáŹáááŻá¸áĄáááşáᲠáááˇáşáá°áá˝áŹá¸ááááŻááŤáá˛á áĄá˛áᎠáá
ášá
ááşá¸áá˝áą
(Variables) ááᯠáá°ááąáŹááşáá˛áˇááąááŹáááŻááşá¸áážáŹ ááźááşááŻááşááŻáśá¸áááŻáˇ áááąááŹááťááŻá¸ ááźá
áşááŤáááşá