Skip to content

Commit 94ef286

Browse files
ShivamMaurya2002ShivamMaurya2002
authored
Add files via upload
1 parent 91dd211 commit 94ef286

61 files changed

Lines changed: 6035 additions & 0 deletions

File tree

Some content is hidden

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

‎JS/Array-methods.html‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Common Array Methods in JavaScript</title>
7+
<style>
8+
body {
9+
line-height: 1.3;
10+
font-size: 16px;
11+
margin: 20px;
12+
background-color: #eaedf0;
13+
}
14+
pre {
15+
background-color: #dbdfe3;
16+
padding: 15px;
17+
border-radius: 5px;
18+
overflow-x: auto;
19+
}
20+
code {
21+
22+
color: #000000;
23+
}
24+
h1, h2 {
25+
color: #343a40;
26+
}
27+
h3 {
28+
color: #495057;
29+
}
30+
.example {
31+
color: #f52222;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<h1>Common Array Methods in JavaScript</h1>
37+
<p>
38+
JavaScript arrays come with many built-in methods that allow you to manipulate, access, and modify the array elements efficiently. Below are some common array methods:
39+
</p>
40+
41+
<h2>1. forEach()</h2>
42+
<p>
43+
The <code>forEach()</code> method executes a provided function once for each array element.
44+
</p>
45+
<pre><code>
46+
const numbers = [1, 2, 3, 4];
47+
numbers.forEach(num => console.log(num * 2));
48+
</code></pre>
49+
<p class="example">Output:
50+
2
51+
4
52+
6
53+
8</p>
54+
55+
<h2>2. map()</h2>
56+
<p>
57+
The <code>map()</code> method creates a new array with the results of calling a provided function on every element in the array.
58+
</p>
59+
<pre><code>
60+
const numbers = [1, 2, 3, 4];
61+
const doubled = numbers.map(num => num * 2);
62+
console.log(doubled);
63+
</code></pre>
64+
<p class="example">Output: [2, 4, 6, 8]</p>
65+
66+
<h2>3. filter()</h2>
67+
<p>
68+
The <code>filter()</code> method creates a new array with all elements that pass the test implemented by the provided function.
69+
</p>
70+
<pre><code>
71+
const numbers = [1, 2, 3, 4, 5];
72+
const evenNumbers = numbers.filter(num => num % 2 === 0);
73+
console.log(evenNumbers);
74+
</code></pre>
75+
<p class="example">Output: [2, 4]</p>
76+
77+
<h2>4. reduce()</h2>
78+
<p>
79+
The <code>reduce()</code> method applies a function to reduce the array to a single value (e.g., sum, product, etc.).
80+
</p>
81+
<pre><code>
82+
const numbers = [1, 2, 3, 4];
83+
const sum = numbers.reduce((acc, num) => acc + num, 0);
84+
console.log(sum);
85+
</code></pre>
86+
<p class="example">Output: 10</p>
87+
88+
<h2>5. find()</h2>
89+
<p>
90+
The <code>find()</code> method returns the first element that satisfies the provided testing function.
91+
</p>
92+
<pre><code>
93+
const numbers = [1, 2, 3, 4, 5];
94+
const firstEven = numbers.find(num => num % 2 === 0);
95+
console.log(firstEven);
96+
</code></pre>
97+
<p class="example">Output: 2</p>
98+
99+
<h2>6. some()</h2>
100+
<p>
101+
The <code>some()</code> method tests whether at least one element in the array passes the provided function.
102+
</p>
103+
<pre><code>
104+
const numbers = [1, 2, 3, 4];
105+
const hasEven = numbers.some(num => num % 2 === 0);
106+
console.log(hasEven);
107+
</code></pre>
108+
<p class="example">Output: true</p>
109+
110+
<h2>7. every()</h2>
111+
<p>
112+
The <code>every()</code> method tests whether all elements in the array pass the provided function.
113+
</p>
114+
<pre><code>
115+
const numbers = [2, 4, 6, 8];
116+
const allEven = numbers.every(num => num % 2 === 0);
117+
console.log(allEven);
118+
</code></pre>
119+
<p class="example">Output: true</p>
120+
121+
<h2>8. sort()</h2>
122+
<p>
123+
The <code>sort()</code> method sorts the elements of an array in place and returns the sorted array.
124+
</p>
125+
<pre><code>
126+
const numbers = [4, 1, 3, 2];
127+
numbers.sort((a, b) => a - b);
128+
console.log(numbers);
129+
</code></pre>
130+
<p class="example">Output: [1, 2, 3, 4]</p>
131+
132+
<h2>Conclusion</h2>
133+
<p>
134+
These are just a few of the many array methods in JavaScript. They allow for easy manipulation of arrays, making JavaScript programming more efficient and intuitive.
135+
</p>
136+
</body>
137+
</html>

‎JS/Arrow Functions in JS.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Arrow Functions in JavaScript</title>
7+
<style>
8+
body {
9+
line-height: 1.3;
10+
font-size: 16px;
11+
margin: 20px;
12+
background-color: #eaedf0;
13+
}
14+
pre {
15+
background-color: #dbdfe3;
16+
padding: 15px;
17+
border-radius: 5px;
18+
overflow-x: auto;
19+
}
20+
code {
21+
22+
color: #000000;
23+
}
24+
h1, h2 {
25+
color: #343a40;
26+
}
27+
h3 {
28+
color: #495057;
29+
}
30+
.example {
31+
color: #f52222;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<h1>Arrow Functions in JavaScript</h1>
37+
<p>
38+
Arrow functions, introduced in ES6, provide a more concise way to write function expressions in JavaScript. They have a simpler syntax and automatically bind the <code>this</code> value based on the surrounding context.
39+
</p>
40+
41+
<h2>1. Syntax of Arrow Functions</h2>
42+
<p>
43+
The syntax of an arrow function is shorter than a regular function expression. Here's the basic syntax:
44+
</p>
45+
<pre><code>
46+
const functionName = (parameters) => {
47+
// function body
48+
};
49+
</code></pre>
50+
51+
<h3>Example: Simple Arrow Function</h3>
52+
<pre><code>
53+
const greet = () => {
54+
console.log("Hello, World!");
55+
};
56+
greet();
57+
</code></pre>
58+
<p class="example">Output: Hello, World!</p>
59+
60+
<h2>2. Single Expression Arrow Function</h2>
61+
<p>
62+
If the function body consists of a single expression, the return keyword is implicit, and the curly braces are optional.
63+
</p>
64+
<pre><code>
65+
const add = (a, b) => a + b;
66+
console.log(add(2, 3));
67+
</code></pre>
68+
<p class="example">Output: 5</p>
69+
70+
<h2>3. Arrow Function with No Parameters</h2>
71+
<p>
72+
Arrow functions can also be written without parameters. In such cases, you use empty parentheses.
73+
</p>
74+
<pre><code>
75+
const sayHello = () => console.log("Hello!");
76+
sayHello();
77+
</code></pre>
78+
<p class="example">Output: Hello!</p>
79+
80+
<h2>4. Arrow Function with Multiple Parameters</h2>
81+
<p>
82+
Arrow functions can accept multiple parameters, just like regular functions.
83+
</p>
84+
<pre><code>
85+
const multiply = (x, y) => x * y;
86+
console.log(multiply(4, 5));
87+
</code></pre>
88+
<p class="example">Output: 20</p>
89+
90+
<h2>5. Arrow Function and <code>this</code> Binding</h2>
91+
<p>
92+
One of the most notable differences between arrow functions and regular functions is that arrow functions do not have their own <code>this</code>. Instead, they inherit <code>this</code> from the surrounding context.
93+
</p>
94+
<pre><code>
95+
function Person(name) {
96+
this.name = name;
97+
this.greet = () => {
98+
console.log(`Hello, my name is ${this.name}`);
99+
};
100+
}
101+
102+
const person = new Person("Alice");
103+
person.greet();
104+
</code></pre>
105+
<p class="example">Output: Hello, my name is Alice</p>
106+
107+
<h2>6. Comparison with Regular Functions</h2>
108+
<p>
109+
While both arrow functions and regular functions allow you to define functions, arrow functions have a shorter syntax and do not have their own <code>this</code>.
110+
</p>
111+
<pre><code>
112+
const regularFunction = function() {
113+
console.log(this);
114+
};
115+
116+
const arrowFunction = () => {
117+
console.log(this);
118+
};
119+
</code></pre>
120+
121+
<p class="example">In regular function, <code>this</code> refers to the object calling the function. In an arrow function, <code>this</code> refers to the surrounding context where the function was created.</p>
122+
123+
<h2>Conclusion</h2>
124+
<p>
125+
Arrow functions provide a cleaner and more concise way to write functions, especially for simple expressions. They are particularly useful in situations where the function needs to inherit the <code>this</code> context from its surrounding scope.
126+
</p>
127+
</body>
128+
</html>

‎JS/Async-Await.html‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Async/Await in JavaScript</title>
7+
<style>
8+
body {
9+
line-height: 1.3;
10+
font-size: 16px;
11+
margin: 20px;
12+
background-color: #eaedf0;
13+
}
14+
pre {
15+
background-color: #dbdfe3;
16+
padding: 15px;
17+
border-radius: 5px;
18+
overflow-x: auto;
19+
}
20+
code {
21+
22+
color: #000000;
23+
}
24+
h1, h2 {
25+
color: #343a40;
26+
}
27+
h3 {
28+
color: #495057;
29+
}
30+
.example {
31+
color: #f52222;
32+
}
33+
</style>
34+
</head>
35+
<body>
36+
<h1>Async/Await in JavaScript</h1>
37+
<p>
38+
<strong>Async/Await</strong> is a modern way to handle asynchronous operations in JavaScript. It allows developers to write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain.
39+
</p>
40+
41+
<h2>Async Functions</h2>
42+
<p>
43+
An <code>async</code> function is a function that always returns a <code>Promise</code>. It allows the use of the <code>await</code> keyword inside it to pause execution until the promise resolves or rejects.
44+
</p>
45+
<pre><code>
46+
// Example of an Async Function
47+
async function fetchData() {
48+
return "Data fetched successfully!";
49+
}
50+
51+
fetchData().then(result => console.log(result));
52+
</code></pre>
53+
<p class="example">Output: Data fetched successfully!</p>
54+
55+
<h2>Await Keyword</h2>
56+
<p>
57+
The <code>await</code> keyword is used inside an <code>async</code> function to wait for a promise to resolve or reject before moving to the next line of code.
58+
</p>
59+
<pre><code>
60+
// Example of Async/Await
61+
async function getData() {
62+
let promise = new Promise((resolve, reject) => {
63+
setTimeout(() => resolve("Data loaded!"), 2000);
64+
});
65+
66+
let result = await promise; // Waits for the promise to resolve
67+
console.log(result);
68+
}
69+
70+
getData();
71+
</code></pre>
72+
<p class="example">Output (after 2 seconds): Data loaded!</p>
73+
74+
<h2>Error Handling with Try/Catch</h2>
75+
<p>
76+
<code>Async/await</code> supports error handling using the <code>try/catch</code> block, making it easy to manage errors in asynchronous operations.
77+
</p>
78+
<pre><code>
79+
// Example with Error Handling
80+
async function fetchData() {
81+
try {
82+
let promise = new Promise((resolve, reject) => {
83+
setTimeout(() => reject("Error loading data"), 2000);
84+
});
85+
86+
let result = await promise; // Waits for the promise to resolve or reject
87+
console.log(result);
88+
} catch (error) {
89+
console.error(error); // Handles the rejection
90+
}
91+
}
92+
93+
fetchData();
94+
</code></pre>
95+
<p class="example">Output (after 2 seconds): Error loading data</p>
96+
97+
<h2>Advantages of Async/Await</h2>
98+
<ul>
99+
<li>Simplifies writing and reading asynchronous code.</li>
100+
<li>Improves error handling with <code>try/catch</code>.</li>
101+
<li>Reduces the need for chaining <code>.then()</code> and <code>.catch()</code>.</li>
102+
</ul>
103+
104+
<h2>Conclusion</h2>
105+
<p>
106+
<code>Async/await</code> is a powerful feature that enhances JavaScript's asynchronous programming capabilities, making it more intuitive and easier to work with complex code.
107+
</p>
108+
</body>
109+
</html>

0 commit comments

Comments
 (0)