adds initial content

README.md

@@ -1 +1,91 @@
-# Learn Javascript - The easy way
+# Learn Javascript - The Easy Way
+
+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.
+
+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!)
+
+## Table of Contents
+
+1. [Variables](chapters/00_variables.js)
+2. [Data Types](chapters/01_data_types.js)
+3. [Type Conversion](chapters/02_type_conversion.js)
+4. [Type Coercion](chapters/03_type_coercion.js)
+5. [Operators](chapters/04_operators.js)
+6. [Control Flow](chapters/05_control_flow.js)
+7. [Loops](chapters/06_loops.js)
+8. [Arrays](chapters/07_arrays.js)
+9. [Strings](chapters/08_strings.js)
+10. [Functions](chapters/09_functions.js)
+11. [Scope](chapters/10_scope.js)
+12. [Closure](chapters/11_closure.js)
+13. [Objects](chapters/12_objects.js)
+14. [Inheritance in Objects](chapters/13_inheritance_objects.js)
+15. [Classes](chapters/14_classes.js)
+16. [Inheritance in Classes](chapters/15_inheritance_classes.js)
+17. [Destructuring](chapters/16_destructuring.js)
+18. [Spread and Rest](chapters/17_spread_rest.js)
+19. [This](chapters/18_this.js)
+20. [Call, Apply, and Bind](chapters/19_call_apply_bind.js)
+21. [Error Handling](chapters/20_error_handling.js)
+22. [Debugging](chapters/21_debugging.js)
+23. [Callbacks](chapters/22_callbacks.js)
+24. [Promises](chapters/23_promises.js)
+25. [Asynchronous Programming](chapters/24_asynchronous.js)
+26. [DOM Manipulation](chapters/25_dom_manipulation.js)
+27. [Events](chapters/26_events.js)
+28. [Storage](chapters/27_storage.js)
+29. [IndexedDB](chapters/28_indexed_db.js)
+30. [Symbols](chapters/29_symbol.js)
+31. [Fetch API](chapters/30_fetch.js)
+32. [Modules](chapters/31_modules.js)
+33. [Template Literals](chapters/32_template_literals.js)
+34. [Date and Time](chapters/33_date_time.js)
+35. [Math](chapters/34_math.js)
+36. [Bitwise Operations](chapters/35_bitwise.js)
+37. [Regular Expressions](chapters/36_regex.js)
+38. [Performance Optimization](chapters/48_performance.js)
+39. [Navigator API](chapters/49_navigator.js)
+40. [User Timing API](chapters/50_user_timing_api.js)
+41. [Navigation Timing API](chapters/51_navigation_timing.js)
+
+## Additional Topics (To Be Added)
+
+-   `setTimeout()` and `setInterval()`
+-   `clearTimeout()` and `clearInterval()`
+-   `JSON.stringify()` and `JSON.parse()`
+-   `Map()`
+-   `Set()`
+-   `WeakMap()` and `WeakSet()`
+-   Generators
+-   Iterators
+-   `async/await`
+-   BigInt
+-   Web APIs (Window, Document)
+-   Canvas API
+-   Drag and Drop API
+-   File and Blob
+-   WebSockets
+-   Web Workers
+-   Service Workers
+-   Custom Events
+-   WebRTC
+-   LocalStorage, SessionStorage, and Cookies
+-   Data Attributes in HTML
+-   FormData
+-   Dynamic Import
+-   Decorators
+-   Proxy
+-   Reflect
+-   Memory Management
+
+## More chapters (on demand)
+
+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.
+
+---
+
+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!
+
+---
+
+**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

@@ -0,0 +1,104 @@
+/**
+ * The `variables` function demonstrates various aspects of variable declaration
+ * and scoping in JavaScript, which include:
+ * - Global Scope
+ * - Function Scope (`var`)
+ * - Block Scope (`let`, `const`)
+ * - Hoisting
+ * - Temporal Dead Zone (TDZ)
+ * - Variable Shadowing
+ * - Variable Redeclaration
+ */
+
+/**
+ * ========================
+ * Global Scope
+ * ========================
+ * Variables declared outside of any function or block are in the "global scope."
+ * They can be accessed and modified from any part of the code.
+ */
+let globalVar = "I am a global variable";
+console.log(`Global Scope: globalVar = ${globalVar}`);
+
+function variables() {
+    /**
+     * ========================
+     * 'var' Declaration
+     * ========================
+     * Variables declared with 'var' are function-scoped. Their visibility is
+     * limited to the function where they are declared.
+     *
+     * Hoisting:
+     * ---------
+     * Variables and function declarations are moved, or "hoisted," to the top
+     * of their containing scope during the compilation phase.
+     */
+    console.log(`Hoisting with 'var': a = ${a}`); // Output: undefined due to hoisting
+    var a = 10;
+    console.log(`'var' Declaration: a = ${a}`);
+
+    /**
+     * ========================
+     * 'let' Declaration
+     * ========================
+     * Variables declared using 'let' are block-scoped. They are only accessible
+     * within the block in which they are contained.
+     *
+     * Temporal Dead Zone (TDZ):
+     * -------------------------
+     * 'let' and 'const' declarations are not initialized, so accessing them
+     * before their declaration results in a ReferenceError.
+     */
+    // console.log(`TDZ with 'let': c = ${c}`); // Uncommenting this will result in a ReferenceError
+    let c = 30;
+    console.log(`'let' Declaration: c = ${c}`);
+
+    /**
+     * ========================
+     * 'const' Declaration
+     * ========================
+     * Variables declared using 'const' are block-scoped and cannot be reassigned
+     * after they are initialized.
+     *
+     * Note:
+     * -----
+     * 'const' makes the variable itself immutable, but if it points to an object,
+     * the object's properties can still be modified.
+     */
+    const e = 50;
+    console.log(`'const' Declaration: e = ${e}`);
+    const obj = { key: "value" };
+    // obj = {}; // Uncommenting this line will result in an error
+    obj.key = "new_value"; // Allowed
+    console.log(`'const' object modification: obj.key = ${obj.key}`);
+
+    /**
+     * ========================
+     * Variable Shadowing
+     * ========================
+     * Variables can "shadow" an outer variable by having the same name.
+     * The inner variable will "overshadow" the outer one within its scope.
+     */
+    {
+        let c = 60;
+        const e = 70;
+        console.log(`Shadowing: Inner scope: c = ${c}, e = ${e}`);
+    }
+    console.log(`Shadowing: Outer scope: c = ${c}, e = ${e}`);
+
+    /**
+     * ========================
+     * Variable Redeclaration
+     * ========================
+     * Variables declared with 'var' can be redeclared in the same scope.
+     * However, 'let' and 'const' cannot be redeclared in the same scope.
+     */
+    var a = 80; // Allowed
+    // let c = 90; // Uncommenting this line will result in an error
+    // const e = 100; // Uncommenting this line will result in an error
+}
+
+variables();
+
+// Demonstrating globalVar is accessible outside the function as well.
+console.log(`Global Scope: Accessing globalVar outside function: ${globalVar}`);

chapters/01_data_types.js

@@ -0,0 +1,119 @@
+/**
+ * The `dataTypes` function illustrates the variety of data types in JavaScript:
+ * - Undefined
+ * - Null
+ * - Boolean
+ * - Number
+ * - BigInt
+ * - String
+ * - Symbol
+ * - Object
+ * - Function
+ * - Array
+ */
+
+function dataTypes() {
+    /**
+     * ========================
+     * Undefined
+     * ========================
+     * An "undefined" type represents a variable that has been declared but not yet
+     * initialized with a value.
+     */
+    let undefinedVar;
+    console.log(`Undefined: ${undefinedVar}, typeof: ${typeof undefinedVar}`);
+
+    /**
+     * ========================
+     * Null
+     * ========================
+     * The "null" type signifies the intentional absence of a value.
+     * Note: typeof null will return 'object', which is a longstanding bug in JavaScript.
+     */
+    let nullVar = null;
+    console.log(`Null: ${nullVar}, typeof: ${typeof nullVar}`);
+
+    /**
+     * ========================
+     * Boolean
+     * ========================
+     * The "boolean" type has two possible values: true or false.
+     */
+    let bool = true;
+    console.log(`Boolean: ${bool}, typeof: ${typeof bool}`);
+
+    /**
+     * ========================
+     * Number
+     * ========================
+     * The "number" type can represent both integers and floating-point numbers.
+     */
+    let num = 42;
+    let float = 42.42;
+    console.log(`Number: ${num}, typeof: ${typeof num}`);
+    console.log(`Floating-Point Number: ${float}, typeof: ${typeof float}`);
+
+    /**
+     * ========================
+     * BigInt
+     * ========================
+     * The "BigInt" type can represent integers of arbitrary length.
+     */
+    let bigInt = 42n;
+    console.log(`BigInt: ${bigInt}, typeof: ${typeof bigInt}`);
+
+    /**
+     * ========================
+     * String
+     * ========================
+     * The "string" type represents textual data.
+     */
+    let str = "Hello";
+    console.log(`String: ${str}, typeof: ${typeof str}`);
+
+    /**
+     * ========================
+     * Symbol
+     * ========================
+     * The "Symbol" type represents a unique value that's not equal to any other value.
+     */
+    let sym = Symbol("description");
+    console.log(`Symbol: ${String(sym)}, typeof: ${typeof sym}`);
+
+    /**
+     * ========================
+     * Object
+     * ========================
+     * The "object" type represents a collection of key-value pairs.
+     */
+    let obj = { key: "value" };
+    console.log(`Object: ${JSON.stringify(obj)}, typeof: ${typeof obj}`);
+
+    /**
+     * ========================
+     * Function
+     * ========================
+     * Functions in JavaScript are objects with the capability of being callable.
+     */
+    function func() {}
+    console.log(`Function: ${func}, typeof: ${typeof func}`);
+
+    /**
+     * ========================
+     * Array
+     * ========================
+     * Arrays are specialized objects used to store multiple values in a single variable.
+     */
+    let arr = [1, 2, 3];
+    console.log(`Array: ${arr}, typeof: ${typeof arr}`);
+
+    /**
+     * ========================
+     * Nuances
+     * ========================
+     * Null is a falsy value but it's not the boolean 'false'.
+     */
+    console.log(`Nuances: Null is falsy but not false: ${Boolean(nullVar) === false && nullVar !== false}`);
+}
+
+dataTypes();