Skip to content

Commit e2d0838

Browse files
ishtmsishtms
committed
adds initial content
1 parent cc2da24 commit e2d0838

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+5175
-1
lines changed

‎README.md

+91-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,91 @@
1-
# Learn Javascript - The easy way
1+
# Learn Javascript - The Easy Way
2+
3+
This guide is designed to provide you with a thorough understanding of JavaScript, from the basics to advanced topics. Whether you're a beginner or an experienced developer, this repository will guide you through the world of JavaScript using clear explanations and well-commented code examples.
4+
5+
You may also check out my other repository - [Learn Node.js - The Hard Way](https://github.com/ishtms/learn-nodejs-hard-way) that takes you on a deep journey into Node.js. We build a completely functional and production ready backend framework and a logging/tracing library - all with 0 dependencies (no npm install!)
6+
7+
## Table of Contents
8+
9+
1. [Variables](chapters/00_variables.js)
10+
2. [Data Types](chapters/01_data_types.js)
11+
3. [Type Conversion](chapters/02_type_conversion.js)
12+
4. [Type Coercion](chapters/03_type_coercion.js)
13+
5. [Operators](chapters/04_operators.js)
14+
6. [Control Flow](chapters/05_control_flow.js)
15+
7. [Loops](chapters/06_loops.js)
16+
8. [Arrays](chapters/07_arrays.js)
17+
9. [Strings](chapters/08_strings.js)
18+
10. [Functions](chapters/09_functions.js)
19+
11. [Scope](chapters/10_scope.js)
20+
12. [Closure](chapters/11_closure.js)
21+
13. [Objects](chapters/12_objects.js)
22+
14. [Inheritance in Objects](chapters/13_inheritance_objects.js)
23+
15. [Classes](chapters/14_classes.js)
24+
16. [Inheritance in Classes](chapters/15_inheritance_classes.js)
25+
17. [Destructuring](chapters/16_destructuring.js)
26+
18. [Spread and Rest](chapters/17_spread_rest.js)
27+
19. [This](chapters/18_this.js)
28+
20. [Call, Apply, and Bind](chapters/19_call_apply_bind.js)
29+
21. [Error Handling](chapters/20_error_handling.js)
30+
22. [Debugging](chapters/21_debugging.js)
31+
23. [Callbacks](chapters/22_callbacks.js)
32+
24. [Promises](chapters/23_promises.js)
33+
25. [Asynchronous Programming](chapters/24_asynchronous.js)
34+
26. [DOM Manipulation](chapters/25_dom_manipulation.js)
35+
27. [Events](chapters/26_events.js)
36+
28. [Storage](chapters/27_storage.js)
37+
29. [IndexedDB](chapters/28_indexed_db.js)
38+
30. [Symbols](chapters/29_symbol.js)
39+
31. [Fetch API](chapters/30_fetch.js)
40+
32. [Modules](chapters/31_modules.js)
41+
33. [Template Literals](chapters/32_template_literals.js)
42+
34. [Date and Time](chapters/33_date_time.js)
43+
35. [Math](chapters/34_math.js)
44+
36. [Bitwise Operations](chapters/35_bitwise.js)
45+
37. [Regular Expressions](chapters/36_regex.js)
46+
38. [Performance Optimization](chapters/48_performance.js)
47+
39. [Navigator API](chapters/49_navigator.js)
48+
40. [User Timing API](chapters/50_user_timing_api.js)
49+
41. [Navigation Timing API](chapters/51_navigation_timing.js)
50+
51+
## Additional Topics (To Be Added)
52+
53+
- `setTimeout()` and `setInterval()`
54+
- `clearTimeout()` and `clearInterval()`
55+
- `JSON.stringify()` and `JSON.parse()`
56+
- `Map()`
57+
- `Set()`
58+
- `WeakMap()` and `WeakSet()`
59+
- Generators
60+
- Iterators
61+
- `async/await`
62+
- BigInt
63+
- Web APIs (Window, Document)
64+
- Canvas API
65+
- Drag and Drop API
66+
- File and Blob
67+
- WebSockets
68+
- Web Workers
69+
- Service Workers
70+
- Custom Events
71+
- WebRTC
72+
- LocalStorage, SessionStorage, and Cookies
73+
- Data Attributes in HTML
74+
- FormData
75+
- Dynamic Import
76+
- Decorators
77+
- Proxy
78+
- Reflect
79+
- Memory Management
80+
81+
## More chapters (on demand)
82+
83+
If you would like to see more chapters on any specific topic, please feel free to open an issue or create a discussion. I will be happy to add more chapters to this repository.
84+
85+
---
86+
87+
I am committed to providing you with the best content, with easy-to-understand explanations and well-organized code snippets. If you have any questions or suggestions, please feel free to open issues, create a discussion or submit pull requests. Happy learning!
88+
89+
---
90+
91+
**Note:** This README serves as an index for the chapters available in the repository. You can click on the chapter titles to access the corresponding JavaScript files for learning.

‎chapters/00_variables.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
/**
2+
* The `variables` function demonstrates various aspects of variable declaration
3+
* and scoping in JavaScript, which include:
4+
* - Global Scope
5+
* - Function Scope (`var`)
6+
* - Block Scope (`let`, `const`)
7+
* - Hoisting
8+
* - Temporal Dead Zone (TDZ)
9+
* - Variable Shadowing
10+
* - Variable Redeclaration
11+
*/
12+
13+
/**
14+
* ========================
15+
* Global Scope
16+
* ========================
17+
* Variables declared outside of any function or block are in the "global scope."
18+
* They can be accessed and modified from any part of the code.
19+
*/
20+
let globalVar = "I am a global variable";
21+
console.log(`Global Scope: globalVar = ${globalVar}`);
22+
23+
function variables() {
24+
/**
25+
* ========================
26+
* 'var' Declaration
27+
* ========================
28+
* Variables declared with 'var' are function-scoped. Their visibility is
29+
* limited to the function where they are declared.
30+
*
31+
* Hoisting:
32+
* ---------
33+
* Variables and function declarations are moved, or "hoisted," to the top
34+
* of their containing scope during the compilation phase.
35+
*/
36+
console.log(`Hoisting with 'var': a = ${a}`); // Output: undefined due to hoisting
37+
var a = 10;
38+
console.log(`'var' Declaration: a = ${a}`);
39+
40+
/**
41+
* ========================
42+
* 'let' Declaration
43+
* ========================
44+
* Variables declared using 'let' are block-scoped. They are only accessible
45+
* within the block in which they are contained.
46+
*
47+
* Temporal Dead Zone (TDZ):
48+
* -------------------------
49+
* 'let' and 'const' declarations are not initialized, so accessing them
50+
* before their declaration results in a ReferenceError.
51+
*/
52+
// console.log(`TDZ with 'let': c = ${c}`); // Uncommenting this will result in a ReferenceError
53+
let c = 30;
54+
console.log(`'let' Declaration: c = ${c}`);
55+
56+
/**
57+
* ========================
58+
* 'const' Declaration
59+
* ========================
60+
* Variables declared using 'const' are block-scoped and cannot be reassigned
61+
* after they are initialized.
62+
*
63+
* Note:
64+
* -----
65+
* 'const' makes the variable itself immutable, but if it points to an object,
66+
* the object's properties can still be modified.
67+
*/
68+
const e = 50;
69+
console.log(`'const' Declaration: e = ${e}`);
70+
const obj = { key: "value" };
71+
// obj = {}; // Uncommenting this line will result in an error
72+
obj.key = "new_value"; // Allowed
73+
console.log(`'const' object modification: obj.key = ${obj.key}`);
74+
75+
/**
76+
* ========================
77+
* Variable Shadowing
78+
* ========================
79+
* Variables can "shadow" an outer variable by having the same name.
80+
* The inner variable will "overshadow" the outer one within its scope.
81+
*/
82+
{
83+
let c = 60;
84+
const e = 70;
85+
console.log(`Shadowing: Inner scope: c = ${c}, e = ${e}`);
86+
}
87+
console.log(`Shadowing: Outer scope: c = ${c}, e = ${e}`);
88+
89+
/**
90+
* ========================
91+
* Variable Redeclaration
92+
* ========================
93+
* Variables declared with 'var' can be redeclared in the same scope.
94+
* However, 'let' and 'const' cannot be redeclared in the same scope.
95+
*/
96+
var a = 80; // Allowed
97+
// let c = 90; // Uncommenting this line will result in an error
98+
// const e = 100; // Uncommenting this line will result in an error
99+
}
100+
101+
variables();
102+
103+
// Demonstrating globalVar is accessible outside the function as well.
104+
console.log(`Global Scope: Accessing globalVar outside function: ${globalVar}`);

‎chapters/01_data_types.js

+119
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
/**
2+
* The `dataTypes` function illustrates the variety of data types in JavaScript:
3+
* - Undefined
4+
* - Null
5+
* - Boolean
6+
* - Number
7+
* - BigInt
8+
* - String
9+
* - Symbol
10+
* - Object
11+
* - Function
12+
* - Array
13+
*/
14+
15+
function dataTypes() {
16+
/**
17+
* ========================
18+
* Undefined
19+
* ========================
20+
* An "undefined" type represents a variable that has been declared but not yet
21+
* initialized with a value.
22+
*/
23+
let undefinedVar;
24+
console.log(`Undefined: ${undefinedVar}, typeof: ${typeof undefinedVar}`);
25+
26+
/**
27+
* ========================
28+
* Null
29+
* ========================
30+
* The "null" type signifies the intentional absence of a value.
31+
* Note: typeof null will return 'object', which is a longstanding bug in JavaScript.
32+
*/
33+
let nullVar = null;
34+
console.log(`Null: ${nullVar}, typeof: ${typeof nullVar}`);
35+
36+
/**
37+
* ========================
38+
* Boolean
39+
* ========================
40+
* The "boolean" type has two possible values: true or false.
41+
*/
42+
let bool = true;
43+
console.log(`Boolean: ${bool}, typeof: ${typeof bool}`);
44+
45+
/**
46+
* ========================
47+
* Number
48+
* ========================
49+
* The "number" type can represent both integers and floating-point numbers.
50+
*/
51+
let num = 42;
52+
let float = 42.42;
53+
console.log(`Number: ${num}, typeof: ${typeof num}`);
54+
console.log(`Floating-Point Number: ${float}, typeof: ${typeof float}`);
55+
56+
/**
57+
* ========================
58+
* BigInt
59+
* ========================
60+
* The "BigInt" type can represent integers of arbitrary length.
61+
*/
62+
let bigInt = 42n;
63+
console.log(`BigInt: ${bigInt}, typeof: ${typeof bigInt}`);
64+
65+
/**
66+
* ========================
67+
* String
68+
* ========================
69+
* The "string" type represents textual data.
70+
*/
71+
let str = "Hello";
72+
console.log(`String: ${str}, typeof: ${typeof str}`);
73+
74+
/**
75+
* ========================
76+
* Symbol
77+
* ========================
78+
* The "Symbol" type represents a unique value that's not equal to any other value.
79+
*/
80+
let sym = Symbol("description");
81+
console.log(`Symbol: ${String(sym)}, typeof: ${typeof sym}`);
82+
83+
/**
84+
* ========================
85+
* Object
86+
* ========================
87+
* The "object" type represents a collection of key-value pairs.
88+
*/
89+
let obj = { key: "value" };
90+
console.log(`Object: ${JSON.stringify(obj)}, typeof: ${typeof obj}`);
91+
92+
/**
93+
* ========================
94+
* Function
95+
* ========================
96+
* Functions in JavaScript are objects with the capability of being callable.
97+
*/
98+
function func() {}
99+
console.log(`Function: ${func}, typeof: ${typeof func}`);
100+
101+
/**
102+
* ========================
103+
* Array
104+
* ========================
105+
* Arrays are specialized objects used to store multiple values in a single variable.
106+
*/
107+
let arr = [1, 2, 3];
108+
console.log(`Array: ${arr}, typeof: ${typeof arr}`);
109+
110+
/**
111+
* ========================
112+
* Nuances
113+
* ========================
114+
* Null is a falsy value but it's not the boolean 'false'.
115+
*/
116+
console.log(`Nuances: Null is falsy but not false: ${Boolean(nullVar) === false && nullVar !== false}`);
117+
}
118+
119+
dataTypes();

0 commit comments

Comments
 (0)