Skip to content

Commit ca5897c

Browse files
AnkitKumarMishra5AnkitKumarMishra5
committed
JavaScript: Array Higher Order Methods
1 parent 1be24ab commit ca5897c

1 file changed

Lines changed: 300 additions & 0 deletions

File tree

‎JavaScript/ArrayHOMs.html‎

Lines changed: 300 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,300 @@
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>Array Higher Order Methods</title>
7+
</head>
8+
<body>
9+
<script>
10+
/*
11+
# Array Higher Order Methods:
12+
- Methods which use callback syntax
13+
14+
1. forEach() ***
15+
- Syntax:
16+
arr.forEach((element, index) => {
17+
// Code which executes for each element
18+
})
19+
- Iterate through the elements of the array and execute callback for each element
20+
- Callback parameters:
21+
- 1st parameter: Element
22+
- 2nd parameter: Index
23+
- Does not return anything (undefined)
24+
*/
25+
26+
// Example 1: Simple iteration
27+
// const arr = [100, 150, 200, 250, 300]
28+
// arr.forEach((element, index) => {
29+
// console.log(index, element)
30+
// })
31+
32+
/* --------------- */
33+
// Example 2: Calculate sum of elements of an array
34+
// const arr = [129, 346666, 2044034, 1238042]
35+
// let sum = 0
36+
// arr.forEach((element, index) => {
37+
// sum += element
38+
// })
39+
// console.log(sum)
40+
41+
/* --------------- */
42+
// Example 3: Find the largest number in the array
43+
// const arr = [250, 150, 600, 450, 300]
44+
// let max = 0
45+
// arr.forEach((element) => {
46+
// if(element > max) {
47+
// max = element
48+
// }
49+
// })
50+
// console.log(max)
51+
52+
/* --------------- */
53+
// Example 4: Filter even numbers from an array
54+
// const arr = [100, 97, 86, 91, 75]
55+
56+
// const result = []
57+
// arr.forEach((element) => {
58+
// if(element % 2 == 0) {
59+
// result.push(element)
60+
// }
61+
// })
62+
// console.log(result)
63+
64+
/* --------------- */
65+
// Example 5: Return an array which has elements multipled by 2
66+
// Expected O/P: [4, 6, 10, 14, 18]
67+
// const arr = [2, 3, 5, 7, 9]
68+
69+
// const result = []
70+
// arr.forEach(element => {
71+
// result.push(element * 2)
72+
// })
73+
// console.log(result)
74+
75+
/*
76+
2. filter() ***
77+
- Syntax:
78+
arr.filter((element, index) => {
79+
return "condition"
80+
})
81+
- Iterate through the elements of the array and execute callback for each element
82+
- Callback parameters:
83+
- 1st parameter: Element
84+
- 2nd parameter: Index
85+
- Returns a filtered array based on the condition provided. For each element, a boolean value is returned by the callback, if true - value is added to the filtered array, else skipped
86+
- Does not modify the original array
87+
- Additional pointers
88+
- If "true" boolean value is returned by the callback, filtered array will have all the elements
89+
- If "false" boolean value is returned by the callback, filtered array will be an empty array
90+
- filteredArray.length <= originalArray.length
91+
*/
92+
93+
/* --------------- */
94+
// Example 1: Filter even numbers from an array
95+
// const arr = [100, 97, 86, 91, 75]
96+
97+
// const result = arr.filter(element => {
98+
// return element % 2 == 0
99+
// })
100+
// console.log(result)
101+
102+
/* --------------- */
103+
// Example 2: Filter student names which have exactly 5 characters
104+
// const students = ['Kelly', 'Kayla', 'Jeff', 'Madeline', 'Sonal']
105+
// const result = students.filter(student => {
106+
// return student.length == 5
107+
// })
108+
// console.log(result)
109+
110+
// const arr = [3, 6, 2, 5, 1]
111+
// const result = arr.filter(e => {
112+
// return false
113+
// })
114+
// console.log(result)
115+
116+
/*
117+
3. map() ***
118+
- Syntax:
119+
arr.map((element, index) => {
120+
return [modifiedElement]
121+
})
122+
- Iterate through the elements of the array and execute callback for each element
123+
- Callback parameters:
124+
- 1st parameter: Element
125+
- 2nd parameter: Index
126+
- Returns a modified array based on return value provided. For each element, a modified value can be returned which will be the element at that index in the returned array
127+
- Does not modify the original array
128+
- Additional pointers
129+
- mappedArray.length = originalArray.length
130+
- If nothing is returned, undefined is the value at that index
131+
*/
132+
133+
/* --------------- */
134+
// Example 1: Return an array which has elements multipled by 2
135+
// Expected O/P: [4, 6, 10, 14, 18]
136+
// const arr = [2, 3, 5, 7, 9]
137+
// const result = arr.map(element => {
138+
// return element * 2
139+
// })
140+
// console.log(result)
141+
142+
/* --------------- */
143+
// Example 2: Return an array with square of elements in the input array
144+
// Expected O/P: [4, 49, 9, 36, 25]
145+
// const arr = [2, 7, 3, 6, 5]
146+
// const result = arr.map(e => {
147+
// return e ** 2
148+
// })
149+
// console.log(result)
150+
151+
/* --------------- */
152+
// Example 3: Return an array with full name of users
153+
// Expected O/P: ['Yaritza Hernandez', 'Madeline WG', 'Mary Moreno']
154+
// const users = [
155+
// {
156+
// firstName: 'Yaritza',
157+
// lastName: 'Hernandez'
158+
// },
159+
// {
160+
// firstName: 'Madeline',
161+
// lastName: 'WG'
162+
// },
163+
// {
164+
// firstName: 'Mary',
165+
// lastName: 'Moreno'
166+
// },
167+
// {
168+
// firstName: 'Kelly',
169+
// lastName: 'Cook'
170+
// }
171+
// ]
172+
173+
// const fullNames = users.map(user => {
174+
// return `${user.firstName} ${user.lastName}`
175+
// })
176+
// console.log(fullNames)
177+
178+
/* --------------- */
179+
// Example 4: Return an array with another field "votingEligibility" in the user object, with value as "ELIGIBLE"/ "NOT ELIGIBLE"
180+
// const users = [
181+
// {
182+
// firstName: 'Yaritza',
183+
// lastName: 'Hernandez',
184+
// age: 17
185+
// },
186+
// {
187+
// firstName: 'Madeline',
188+
// lastName: 'WG',
189+
// age: 21
190+
// },
191+
// {
192+
// firstName: 'Mary',
193+
// lastName: 'Moreno',
194+
// age: 19
195+
// },
196+
// {
197+
// firstName: 'Kelly',
198+
// lastName: 'Cook',
199+
// age: 18
200+
// }
201+
// ]
202+
203+
// const result = users.map(user => {
204+
// user.votingEligibility = user.age >= 18 ? "ELIGIBLE" : "NOT ELIGIBLE"
205+
// return user
206+
// })
207+
208+
// const result = users.map(user => {
209+
// const newUser = { ...user }
210+
// newUser.votingEligibility = user.age >= 18 ? "ELIGIBLE" : "NOT ELIGIBLE"
211+
// return newUser
212+
// })
213+
214+
// console.log(result)
215+
216+
/* --------------- */
217+
// Example 5: Return an array with "EVEN/ODD" string fir given set of input elements in the array
218+
// Expected O/P: ['EVEN', 'ODD', 'EVEN', 'EVEN', 'ODD']
219+
// const arr = [2, 5, 8, 10, 11]
220+
// const result = arr.map(e => e % 2 == 0 ? "EVEN" : "ODD")
221+
// console.log(result)
222+
223+
/*
224+
4. some()
225+
- Syntax:
226+
arr.some((element, index) => {
227+
return condition
228+
})
229+
- Iterate through the elements of the array and execute callback for each element
230+
- Callback parameters:
231+
- 1st parameter: Element
232+
- 2nd parameter: Index
233+
- Returns a true/false based on the condition provided if there exists "at least one element" that satisfies the condition
234+
*/
235+
236+
// const arr = [3, 5, 9, 1, 7]
237+
// const result = arr.some(e => {
238+
// return e % 2 === 0
239+
// })
240+
// console.log(result)
241+
242+
/*
243+
5. every()
244+
- Syntax:
245+
arr.every((element, index) => {
246+
return condition
247+
})
248+
- Iterate through the elements of the array and execute callback for each element
249+
- Callback parameters:
250+
- 1st parameter: Element
251+
- 2nd parameter: Index
252+
- Returns a true/false based on the condition provided if "all the elements" satisfy the condition
253+
*/
254+
255+
// const arr = [8, 2, 4, 6, 10]
256+
// const result = arr.every(e => {
257+
// return e % 2 === 0
258+
// })
259+
// console.log(result)
260+
261+
/*
262+
6. find()
263+
- Syntax:
264+
arr.find((element, index) => {
265+
return condition
266+
})
267+
- Iterate through the elements of the array and execute callback for each element
268+
- Callback parameters:
269+
- 1st parameter: Element
270+
- 2nd parameter: Index
271+
- Returns the first element that matches the condition. If none of the elements match the condition, then undefined is returned
272+
*/
273+
274+
// const arr = [99, 97, 85, 91, 75]
275+
// const result = arr.find(element => {
276+
// return element % 2 == 0
277+
// })
278+
// console.log(result)
279+
280+
/*
281+
7. findIndex()
282+
- Syntax:
283+
arr.findIndex((element, index) => {
284+
return condition
285+
})
286+
- Iterate through the elements of the array and execute callback for each element
287+
- Callback parameters:
288+
- 1st parameter: Element
289+
- 2nd parameter: Index
290+
- Returns the index of the first element that matches the condition. If none of the elements match the condition, then -1 is returned
291+
*/
292+
293+
// const arr = [99, 97, 85, 91, 75]
294+
// const result = arr.findIndex(element => {
295+
// return element % 2 == 0
296+
// })
297+
// console.log(result)
298+
</script>
299+
</body>
300+
</html>

0 commit comments

Comments
 (0)