JavaScript Notes

JavaScript ke comprehensive notes ke liye yaha pe har topic ka concise explanation aur use case diya gaya hai. Aapko har ek section ka detail padhne ke liye isse reference le kar apne pace pe study karna hoga.

1. JavaScript Basics

Introduction: JavaScript ek client-side scripting language hai jo web pages ko interactive banata hai. Ye HTML aur CSS ke sath use hoti hai.
Features:

Lightweight
Cross-platform
Prototype-based object-oriented

Variables:
var x = 10; // Function-scoped

let y = 20; // Block-scoped

const z = 30; // Constant

Data Types:

Primitive: string, number, boolean, null, undefined, symbol, bigint
Non-Primitive: Object, Array, Function

2. Operators

Arithmetic: +, -, *, /, %
Comparison: ==, ===, !=, <, >
Logical: &&, ||, !
Assignment: =, +=, -=

Example:
let a = 5;

console.log(a + 3); // 8

3. Control Statements

Conditional:
if (x > 10) {

console.log("Greater");

} else {

console.log("Smaller");

}

Loops:

for, while, do-while

Example:
for (let i = 0; i < 5; i++) {

console.log(i);

}

4. Functions

Declaration:
function add(a, b) {

return a + b;

}

Arrow Functions:
const multiply = (a, b) => a * b;

Anonymous Functions:
let greet = function() {

console.log("Hello!");

};

5. Arrays

Definition: Ordered collection of elements.
Methods:

push(), pop(), shift(), unshift(), map(), filter(), reduce()

Example:
let arr = [1, 2, 3];

arr.push(4); // [1, 2, 3, 4]

6. Objects

Definition: Key-value pairs.

Example:
let person = {

name: "John",

age: 30,

greet: function() {

console.log("Hello!");

}

};

person.greet(); // Hello!

7. DOM Manipulation

Access Elements:
let element = document.getElementById("id");

let elements = document.querySelectorAll(".class");

Manipulate Elements:
element.innerHTML = "New Content";

element.style.color = "red";

8. Events

Common Events:

onclick, onmouseover, onkeydown, onchange

Event Listener:
document.getElementById("btn").addEventListener("click", function() {

alert("Button clicked!");

});

9. ES6+ Features

Template Literals:
let name = "John";

console.log(`Hello, ${name}`);

Destructuring:
let [a, b] = [10, 20];

console.log(a); // 10

Spread/Rest:
let arr1 = [1, 2];

let arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

10. Async JavaScript

Promises:
let promise = new Promise((resolve, reject) => {

if (true) resolve("Success");

else reject("Error");

});

promise.then(console.log).catch(console.error);

Async/Await:
async function fetchData() {

let data = await fetch("url");

console.log(data);

}

11. Error Handling

Try-Catch:
try {

throw new Error("Something went wrong");

} catch (e) {

console.log(e.message);

}

12. JSON

Parse and Stringify:
let json = '{"name": "John"}';

let obj = JSON.parse(json);

console.log(obj.name); // John

let str = JSON.stringify(obj);

console.log(str); // '{"name":"John"}'

13. Local Storage

Methods:

localStorage.setItem(key, value)
localStorage.getItem(key)

Example:
localStorage.setItem("name", "John");

console.log(localStorage.getItem("name")); // John

14. Modules

Export/Import:
// module.js

export const greet = () => console.log("Hello");

// main.js

import { greet } from './module.js';

greet();

15. Fetch API

Example:
fetch("https://api.example.com/data")

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error(error));

16. Frameworks and Libraries

Popular Choices:

React: Component-based UI library.
Angular: Full-fledged framework for web apps.
Vue.js: Progressive framework.

17. Best Practices

Use let and const instead of var.
Always handle errors in asynchronous operations.
Follow modular coding practices.
Write comments for complex logic.

In-depth study of each topic will ensure you cover the complete syllabus effectively. Aap is list ko apne study plan ke hisaab se follow karein aur practice zaroor karein.

Advertisement