Skip to content

ayush-sleeping/Learning_Javascript

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

60 Commits
.vscode
.vscode
 
 
00. Practice Codes
00. Practice Codes
 
 
01. JavaScript Basics
01. JavaScript Basics
 
 
02. DataTypes
02. DataTypes
 
 
03. Conditional Statements
03. Conditional Statements
 
 
04. Operators
04. Operators
 
 
05. Type Coercion
05. Type Coercion
 
 
06. Objects and Arrays
06. Objects and Arrays
 
 
07. Loops
07. Loops
 
 
08. Functions and Hoisting
08. Functions and Hoisting
 
 
09. Document Object Model (DOM)
09. Document Object Model (DOM)
 
 
10. Browser Object Model
10. Browser Object Model
 
 
11. Regular Expressions
11. Regular Expressions
 
 
12. OOPs in JS
12. OOPs in JS
 
 
13. HTTP Requests
13. HTTP Requests
 
 
14. jQuery Basics
14. jQuery Basics
 
 
15. ES6 for ReactJS
15. ES6 for ReactJS
 
 
Advanced of JS that matters the most
Advanced of JS that matters the most
 
 
Basics of JS that matters the most
Basics of JS that matters the most
 
 
Intermediate of JS that matters the most
Intermediate of JS that matters the most
 
 
Problem Solving
Problem Solving
 
 
Readme.md
Readme.md
 
 

Repository files navigation

Learning_Javascript

This repository is my personal collection of JavaScript notes, practice code snippets, and web development examples. It's built to help beginners and intermediate learners understand how JavaScript powers the web, and apply it in real-world scenarios like DOM manipulation, events, API handling, and more.

Explore this repo to learn, revise, and build your frontend development skills 💻✨

Table of content:





Quick Overview : :

# Topic Summary
1 JavaScript Basics Core syntax, comments, variable declarations (var, let, const), and environment setup (Browser, Node.js, VS Code).
2 Data Types Primitive (String, Number, Boolean, Null, Undefined, Symbol, BigInt) and Non-Primitive (Object, Array, Function, Map, Set, JSON).
3 Conditional Statements if, else if, else, switch statements; logical operators used in decision-making.
4 Operators Arithmetic, Assignment, Comparison, Logical, Bitwise, Ternary, typeof, delete, and precedence rules.
5 Type Coercion Implicit vs Explicit conversion; avoid bugs using === and type conversion functions.
6 Objects and Arrays Object literals, methods, array operations (push, map, filter, reduce), Map, Set, JSON structures.
7 Loops for, while, do...while, for...in, for...of; control flow using break, continue.
8 Functions and Hoisting Function declaration/expression, arrow functions, scope (global, block, function), hoisting, closures, IIFE.
9 Document Object Model (DOM) Selecting and manipulating HTML elements, addEventListener, event bubbling, capturing, delegation.
10 Browser Object Model (BOM) Interacting with browser APIs: window, location, navigator, history, screen.
11 Regular Expressions Pattern matching using test, exec, match, replace for string validation and search.
12 OOP in JavaScript Objects, constructors, prototypes, ES6 classes, inheritance, encapsulation, polymorphism.
13 HTTP Requests (AJAX, Fetch, Promises) Sending/receiving data using XMLHttpRequest, fetch(), Promises, async/await, and error handling.
14 jQuery Basics DOM selection, manipulation, event handling, and AJAX with simplified syntax and cross-browser support.
15 ES6+ for ReactJS let/const, arrow functions, destructuring, template literals, spread/rest, modules, Promises, async/await.
16 Asynchronous JavaScript Event loop, task queue, callbacks, Promises, async/await, and proper error handling.
17 Advanced Function Concepts this keyword, call, apply, bind, closures, higher-order functions, IIFE.
18 Design Patterns Reusable solutions like Singleton, Module, Observer, Factory for structuring scalable applications.
19 Functional Programming in JS Pure functions, immutability, first-class functions, higher-order functions, function composition.
20 Code Quality and Best Practices "use strict", linting tools, debugging, testing practices to write reliable, maintainable code.
21 Tooling npm, Babel, Webpack, Parcel, Prettier, ESLint, and testing frameworks like Jest, Mocha.
22 Project Structure and Architecture Modular folder structure, dependency management, scalability, separation of concerns.
23 Web APIs Local Storage, Session Storage, IndexedDB, Web Workers, Service Workers, Notifications.
24 Performance Optimization Reducing DOM manipulation, debouncing/throttling, lazy loading, profiling with DevTools.
25 Event Handling & Types Click events: click, dblclick, contextmenu, mousedown, mouseup. Total 15+ mouse events, 13+ keyboard events, 8+ form events, 6+ window events.
26 JavaScript Engine & Execution V8 engine, Call Stack, Memory Heap, Event Loop phases (Call Stack → Web APIs → Callback Queue → Event Loop).
27 Scope and Context Global, Function, Block scope. Lexical scoping, this binding (implicit, explicit, new, arrow), execution context creation.
28 Memory Management Garbage Collection, Memory leaks, Stack vs Heap memory, Reference counting, Mark-and-sweep algorithm.
29 Error Handling try-catch-finally, Error types (SyntaxError, ReferenceError, TypeError), Custom errors, Promise error handling.
30 Prototype and Inheritance Prototype chain, __proto__, Object.create(), Constructor functions, ES6 classes, super keyword.
31 Array Methods (Advanced) map, filter, reduce, forEach, find, some, every, flatMap, reduceRight. Method chaining patterns.
32 String Methods (Advanced) slice, substring, substr, split, replace, match, search, Template literals, Tagged templates.
33 JSON and Serialization JSON.parse(), JSON.stringify(), Circular reference handling, Custom toJSON methods, Data transformation.
34 Modules and Imports ES6 modules (import/export), CommonJS (require/module.exports), AMD, UMD, Dynamic imports.
35 Timing Functions setTimeout, setInterval, clearTimeout, clearInterval, requestAnimationFrame, Debouncing vs Throttling.
36 Data Structures in JS Map, Set, WeakMap, WeakSet differences, Symbol usage, Iterator protocol, Generator functions.
37 Security in JavaScript XSS prevention, CSRF, Content Security Policy, Input validation, Secure coding practices.
38 Browser Storage localStorage vs sessionStorage vs cookies. Storage events, Storage limits, IndexedDB for large data.
39 Network and HTTP HTTP methods, Status codes, CORS, Request/Response headers, REST API patterns, GraphQL basics.
40 Testing JavaScript Unit testing (Jest), Integration testing, Mocking, Test-driven development, Code coverage.
41 Closures and Scope Chain Advanced closure patterns, module pattern, private variables, scope pollution prevention, lexical environment chains.
42 Event Loop Deep Dive Microtasks vs Macrotasks, Promise queue, setTimeout vs setImmediate, process.nextTick, task prioritization.
43 Proxy and Reflect API Object interception, meta-programming, property access control, validation, data binding patterns.
44 Symbols and Well-known Symbols Symbol.iterator, Symbol.asyncIterator, Symbol.toPrimitive, creating private properties, preventing name collisions.
45 WeakMap and WeakSet Use Cases Memory management, private data storage, DOM node association, preventing memory leaks in large applications.
46 Intersection Observer API Lazy loading images, infinite scrolling, viewport detection, performance optimization for large lists.
47 Mutation Observer API DOM change detection, react to dynamic content, monitoring element modifications, debugging DOM changes.
48 Custom Elements (Web Components) Creating reusable components, Shadow DOM, HTML templates, encapsulation, framework-agnostic components.
49 File API and Blob Handling File upload, reading files, creating downloads, image processing, drag-and-drop file handling.
50 Canvas and WebGL Basics 2D graphics, image manipulation, data visualization, basic game development, drawing operations.
51 Geolocation and Device APIs GPS location, device orientation, camera access, microphone, notification permissions.
52 WebSocket and Real-time Communication Live chat, real-time updates, server-sent events, bidirectional communication, connection management.
53 TypeScript Fundamentals Type annotations, interfaces, generics, strict mode, migration from JavaScript, better IDE support.
54 Build Tools and Module Bundlers Webpack configuration, Vite, Rollup, code splitting, tree shaking, hot module replacement.
55 Progressive Web Apps (PWA) Service workers, manifest files, offline functionality, app-like experience, push notifications.
56 HTTP Caching Strategies Cache headers, ETags, cache validation, CDN usage, browser caching, performance optimization.
57 Authentication and JWT Token-based auth, refresh tokens, secure storage, OAuth flows, session management.
58 Form Validation and Accessibility Custom validation, ARIA attributes, screen reader support, keyboard navigation, semantic HTML.
59 Internationalization (i18n) Multi-language support, date/number formatting, locale-specific content, RTL languages.
60 Performance Monitoring Core Web Vitals, FCP, LCP, CLS, FID, performance.mark(), User Timing API, real user monitoring.




JavaScript Summary : :



1. Basics

  • JavaScript is a high-level, interpreted programming language.
  • Runs in the browser and can interact with the DOM.
  • Used for client-side and (with Node.js) server-side scripting.

Key Concepts:

  • Syntax, Statements, and Comments
  • Variables: var, let, const
  • Running JS: Browser, Node.js
  • Environment Setup: Node.js, npm, VS Code
  • Role of JS: Client-side, Server-side, Web Standards

Syntax, Statements, and Comments

Click to expand example 
// This is a single-line comment

/*
 This is a
 multi-line comment
*/

console.log("Hello, JavaScript!");

Variables: var, let, const

Click to expand example 
var city = "Mumbai"; // function scoped
let name = "Ayush";  // block scoped
const age = 23;      // block scoped and can't be reassigned

Running JS: Browser vs Node.js

Click to expand example

In Browser:

<script>
  alert("Running in the browser!");
</script>

In Node.js:

// Save this in a file named app.js
console.log("Running in Node.js");
// Run: node app.js

Environment Setup: Node.js, npm, VS Code

Click to expand setup
  1. Download and install Node.js
  2. Use npm to install packages: 
    npm install express
  3. Use Visual Studio Code as your code editor.

Role of JavaScript

Click to expand explanation
  • Client-side: Form validations, UI interactivity, AJAX requests.
  • Server-side (Node.js): APIs, backend logic, database interactions.
  • Web Standards: JavaScript is a core part of HTML/CSS/JS stack.

2. DataTypes

Primitive Types:

  1. String - "hello"
  2. Number - 42, 3.14
  3. Boolean - true or false
  4. Undefined - variable declared but not assigned
  5. Null - intentionally empty value
  6. Symbol (ES6)
  7. BigInt - large integers beyond 2^53-1

Non-Primitive Types:

  • Objects: { key: value }
  • Arrays: [1, 2, 3]
  • Functions
  • JSON
  • Maps and Sets

3. Conditional Statements

- `if`, `else if`, `else`
- `switch`
- Logical Operators in Conditions

if (score > 90) {
    console.log("Excellent");
} else {
    console.log("Keep trying");
}

4. Operators

- **Arithmetic**: `+`, `-`, `*`, `/`, `%`
- **Assignment**: `=`, `+=`, `-=`, etc.
- **Comparison**: `==`, `===`, `!=`, `!==`, `>`, `<`
- **Logical**: `&&`, `||`, `!`
- **Bitwise**,
- **Ternary (`? :`)**,
- **typeof**,
- **delete**
- Operator Precedence and Grouping

5. Type Coercion

- Implicit vs Explicit Coercion
- JS automatically converts types when needed.
- `"5" + 2` → `'52'`
- `"5" - 2` → `3`
- Best Practices (`===`, `parseInt()`, `Boolean()`)

6. Objects and Arrays

- Object Literals, Properties, Methods
- Arrays and Array Methods: `map`, `filter`, `reduce`
- Maps and Sets
- JSON as Data Structure

Objects:

let user = {
  name: "Ayush",
  age: 23,
  greet: function() {
    return `Hello, ${this.name}`;
  }
};

Arrays:

let colors = ["red", "blue", "green"];
colors.push("yellow");

7. Loops

- for, while, do...while, for...in, for...of
- Loop Control: `break`, `continue`

for (let i = 0; i < 5; i++) {
    console.log(i);
}

8. Functions and Hoisting

- Function Declaration, Expression, Arrow Functions
- Hoisting: Functions vs Variables
- Scope: Global, Function, Block
- Lexical Scope and Closures
- IIFE (Immediately Invoked Function Expressions)

  • Function Declaration
function greet() {
  return "Hello";
}
  • Function Expression
const greet = function() { return "Hello"; };
  • Arrow Functions (ES6)
const greet = () => "Hello";
  • Hoisting: Function declarations are hoisted, expressions are not.

9. Document Object Model (DOM)

- DOM Selectors: `getElementById`, `querySelector`
- DOM Manipulation: `innerText`, `innerHTML`, `classList`, `style`
- Event Listeners: `addEventListener()
- Event Propagation: Bubbling, Capturing, Delegation

document.getElementById("btn").addEventListener("click", () => {
  alert("Clicked!");
});

10. Browser Object Model (BOM)

- `window`, `location`, `navigator`, `screen`, `history`

console.log(window.innerHeight);
console.log(location.href);

11. Regular Expressions

- Patterns: Literals, Ranges, Groups
- Methods: `test()`, `exec()`, `match()`, `replace()`

let pattern = /[A-Z]/g;
let result = "Ayush".match(pattern);  // ['A']

12. Object-Oriented Programming (OOP) in JS

- Object Literals, Constructor Functions
- Prototypes and Prototypal Inheritance
- Classes (ES6)
- Encapsulation, Inheritance, Polymorphism

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hi ${this.name}`;
  }
}

13. HTTP Requests

- AJAX using `XMLHttpRequest`
- Fetch API
- Promises and `async/await`
- Error Handling: `try/catch`, `.catch()`, `finally`

AJAX (Asynchronous JavaScript and XML)

let xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(JSON.parse(xhr.responseText));
  }
};
xhr.send();

Fetch API (Modern Way)

fetch("data.json")
  .then(res => res.json())
  .then(data => console.log(data));

14. jQuery Basics

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
$(document).ready(function() {
  $("#btn").click(function() {
    $("p").text("Button clicked");
  });
});
- Uses `$()` as a shorthand for document selection
- Event HandlingHandling
- AJAX
- Cross-browser compatibility
- DOM Selection, traversal, manipulation, animations, and AJAX

15. ES6 for ReactJS

- `let`, `const`, Arrow Functions
- Template Literals
- Destructuring
- Spread and Rest Operators
- Modules: `import/export`
- Promises, async/await
- Classes and Inheritance

const user = { name: "Ayush", age: 23 };
const { name, age } = user;
const sum = (...nums) => nums.reduce((a, b) => a + b, 0);

16. Asynchronous JavaScript

- Event Loop
- Callbacks, Promises, async/await
- Error Handling with async code

17. Advanced Function Concepts

- `this` Keyword
- `call`, `apply`, `bind`
- Closures and IIFE
- Higher-Order Functions

18. Design Patterns

- Singleton
- Observer
- Module
- Factory

19. Functional Programming

- Pure Functions
- Immutability
- Higher-Order Functions
- Function Composition

20. Code Quality and Best Practices

- `"use strict"`
- Linting
- Debugging Tools
- Testing with Frameworks

21. Tooling

- npm, Babel, Parcel
- Webpack, Linters, Prettier
- Testing Frameworks (Jest, Mocha)

22. Project Structure and Architecture

- Modular Code Organization
- Dependency Management
- Folder Structure Best Practices

23. Web APIs

- Local Storage & Session Storage
- IndexedDB
- Web Workers & Service Workers

24. Performance Optimization

- Profiling with DevTools
- Reducing DOM Manipulations
- Debouncing and Throttling
- Lazy Loading and Efficient Selectors


Resources (From where I am learning JS most of the time) :

Certificate that I have earned during learning JS :

  • From Udemy Cource :
    • JavaScript - Basics to Advanced ES6 step by step [2022] : Issue date - December 2022
      Credential ID - UC-0382127f-523a-4c7f-b966-ba33426153be
      Certificate

About

Core concepts, problem-solving, and web development. Learning JavaScript from Basic to Advanced ...

Topics

javascript javascript-core

Resources

Readme
Activity

Stars

0 stars

Watchers

1 watching

Forks

0 forks
Report repository

Languages