Advance Angular v.

17
1. Array Functions - 1

ITERATION FUNCTIONS
Iteration functions in Angular are methods that allow you to traverse through each element of an array
and perform some operation on each element.
1) forEach():
When you need to perform an action on each element of an array without creating a new array:
forEach() is appropriate when you want to iterate over the elements of an array and perform some
operation on each element, such as logging, updating variables, or invoking a function for each
element.
Eg:
Suppose you have an array of user objects, and you want to send a personalized email to each
user. You can use forEach() to iterate over the array and send an email to each user individually.
methodForEach() {
let users = [{ name: 'Haley', email: '[email protected]' }, {
name: 'Joy', email: '[email protected]' }];

users.forEach(user => {
console.log("User Mail:", user.email);
console.log("Greetings!", `Hello ${user.name}, Welcome to
CFH!`);
});
}

a) We start with an array named users containing multiple user objects. Each user object has two
properties: name and email. These properties represent the name and email address of each
user, respectively.
b) The forEach() method is called on the users array. This method iterates over each element of
the array, which in this case are the user objects.
For each user object in the array, the provided callback function is executed.
c) The forEach() method continues iterating over each user object in the users array until all
users have been processed.
Once all user objects have been processed, the execution of the methodForEach() function
completes.

2) map():
When you need to transform each element of an array and create a new array with the
transformed values: map() is useful when you want to apply a function to each element of an
array and collect the results into a new array.

Eg:
Suppose you have an array of numbers representing temperatures in Celsius, and you want to
convert them to Fahrenheit.

1
 Advance Angular v.17
1. Array Functions - 1

methodMap() {
let temperaturesInCelsius = [20, 25, 30, 35, 40];
let temperaturesInFahrenheit = temperaturesInCelsius.map(celsius
=> {
let fahrenheit = celsius * 9 / 5 + 32;
return fahrenheit; // Return the converted temperature
});
console.log("Temperatures", temperaturesInFahrenheit);
}

Use map() when you want to transform each element of an array and create a new array with the
transformed values.
a) We start by defining an array temperaturesInCelsius containing temperatures in Celsius.
b) We use the map() method to iterate over each temperature in the temperaturesInCelsius
array. For each temperature, we apply the conversion formula (celsius * 9 / 5 + 32) to convert
it to Fahrenheit. Inside the map() function, we define an arrow function that takes each
temperature in Celsius as an argument (celsius).
Within this arrow function:
I. We calculate the corresponding temperature in Fahrenheit using the conversion
formula.
II. We store the result in a variable fahrenheit.
III. We return the calculated Fahrenheit temperature from the arrow function.
c) The map() method collects all the returned Fahrenheit temperatures and creates a new array
called temperaturesInFahrenheit.
3) filter ():

methodFilter() {
let examScores = [75, 85, 60, 90, 55, 95];
let passingScores = examScores.filter(score => {
return score >= 85;
});
console.log("Passing Scores:", passingScores);
}
In this scenario, filter () is used because we want to selectively retain elements from the
examScores array based on a condition (in this case, whether they are passing scores or not),
thereby creating a new array (passingScores) containing only the passing scores.
a) We start by defining an array examScores containing the exam scores.

b) We use the filter () method to iterate over each element in the examScores array. For each
score, we check if it meets the condition of being equal to or greater than the passing
threshold (in this case, 85).
Inside the filter () function, we define an arrow function that takes each score as an argument.
Within this arrow function:

2
 Advance Angular v.17
1. Array Functions - 1
c) We evaluate whether the score meets the condition for passing (score >= 85).
If the condition is met (i.e., the score is greater than or equal to 85), we return true, indicating
that this score should be included in the filtered array.
If the condition is not met (i.e., the score is below 85), we return false, indicating that this
score should be excluded from the filtered array.
The filter () method collects all the elements for which the condition evaluates to true and
creates a new array called passingScores, containing only the passing scores.

SEARCH FUNCTIONS
Search functions in Angular are methods that allow you to find specific elements within an array based on
certain criteria.
1) find():

methodFind() {
let students = [
{ id: 1, name: "Alie" },
{ id: 2, name: "Leo" },
{ id: 3, name: "Charlie" },
{ id: 4, name: "Prince" }
];

let targetStudentId = 3;
let foundStudent = students.find(student => {
return student.id === targetStudentId;
});
console.log("Found Student:", foundStudent);
}

In this scenario, find () is used because we want to search through an array of objects (students)
to find a specific element based on a condition (in this case, finding a student with a particular
ID).

a) We start by defining an array students containing objects representing students, each with an
id and a name. We specify the targetStudentId that we want to find within the student
array.
b) We use the find () method to search through the student array. The find () method returns the
first element in the array that satisfies the provided testing function.
c) Inside the find () function, we define an arrow function that takes each student object as an
argument.
Within this arrow function:
I. We check if the id of the current student matches the targetStudentId.
II. If the condition is met (i.e., the id matches the targetStudentId), we return true,
indicating that this student is the one we are looking for.

3
 Advance Angular v.17
1. Array Functions - 1
III. If the condition is not met (i.e., the id does not match the targetStudentId), we
return false, indicating that this student is not the one we are looking for.
IV. The find () method returns the first student object that satisfies the condition (i.e., the
student with the matching ID).

2) findIndex ():

methodFindIndex() {
let students = [
{ id: 1, name: "Alice" },
{ id: 2, name: "Bob" },
{ id: 3, name: "Charlie" },
{ id: 4, name: "David" }
];

let targetStudentId = 3;
let indexOfTargetStudent = students.findIndex(student => {
return student.id === targetStudentId;
});
console.log("Index of Target Student:", indexOfTargetStudent);
}
In this scenario, findIndex () is used because we want to search through an array of objects
(students) to find the index of a specific element based on a condition (in this case, finding a
student with a particular ID).

a) We start by defining an array students containing objects representing students, each with an
id and a name. We specify the targetStudentId that we want to find within the student
array.
b) We use the findIndex () method to search through the student array. The findIndex() method
returns the index of the first element in the array that satisfies the provided testing function.
c) Inside the findIndex () function, we define an arrow function that takes each student object
as an argument.
Within this arrow function:
I. We check if the id of the current student matches the targetStudentId.
II. If the condition is met (i.e., the id matches the targetStudentId), we return true,
indicating that this student is the one we are looking for.
III. If the condition is not met (i.e., the id does not match the targetStudentId), we
return false, indicating that this student is not the one we are looking for.
IV. The findIndex() method returns the index of the first student object that satisfies the
condition (i.e., the student with the matching ID). If no matching student is found, it
returns -1.