This document provides information on JavaScript arrays. It discusses how arrays allow storing multiple values in a variable, unlike variables declared with var or let which can only store one value. The document covers traversing arrays, and performing CRUD (create, read, update, delete) operations on arrays using methods like push(), pop(), splice(), etc. It also explains how to use array methods like map(), filter() and reduce() to transform or filter array elements. Finally, it provides examples of using these methods to process product data from an array of objects.

1. JAVASCRIPT-ARRAY

2. JavaScript - ARRAY
• When we use var, let we can stored only one
value at a time.
– var friend1 = ‘john’;
– var friend2 = ‘smith’;
– var friend3 = ‘peter’;
• When we feel like storing multiple values in one
variable then instead of var or let, we will use an
Array.

3. JavaScript - ARRAY
• var Names= [‘John’,’Smith’,’Peter’,’David’];
• First Element of an array known as Lower
Index/ Lower Boundary.
• Last Element of an array known as Upper
Index/ Upper Boundary.

4. JavaScript - ARRAY

5. What we will do
• Traversal of an Array
• How to insert, Add, Replace and Delete
Elements in Array(CRUD)
• Map(), Reduce(), filter()

6. Traversal in array
• if we want to get the single data at a time.
arrayVarName[indexNumber]
• Traverse the Last Element of an Array
arrayVarName[arrayVarName.length-1]

7. Loops to Traverse Array
• For loop
• For in loop
• For of loop
• forEach

8. Perform CRUD on Array
• Push()
– The push() method adds one or more elements to the
end of an array and returns the new length of the
array.
• Unshift()
– The unshift() method adds one or more elements to
the beginning of an array and returns the new length
of the array

9. Perform CRUD on Array
• Pop()
– The pop() method removes the last element from an
array and returns that element. This method changes
the length of the array
• Shift()
– The shift() method removes the first element from an
array and returns that removed element. This method
changes the length of the array.

10. Perform CRUD on Array
• Splice()
– The splice() method of Array changes the contents
of an array by removing or replacing existing
elements and/or adding new elements in place.

11. Perform CRUD on Array
• Splice()
– The General Syntax
splice(start)
splice(start, deleteCount)
splice(start, deleteCount, item0)
splice(start, deleteCount, item0, item1)
splice(start, deleteCount, item0, item1, /* …, */ itemN)

12. Perform CRUD on Array
• Splice(start): Parameters
– Start: Zero-based index at which to start changing
the array
– deleteCount : An integer indicating the number of
elements in the array to remove from start
– item0, …, itemN: The elements to add to the array,
beginning from start.

13. Task of the Day
1. Add Dec at the end of an array?
2. What is the return value of splice method?
3. update march to March (update)?
4. Delete June from an array?
const months = ['Jan', 'march', 'April', 'June', 'July'];

14. Map()
• Returns a new array containing the results of
calling a function on every element in this
array.
• It return new array without mutating the
original array

15. Map() vs forEach()
• The returning value
• Ability to chain other methods
• Mutability
Click here to read more

16. Example
• Find the square root of each element in an
array?
let arr = [25, 36, 49, 64, 81];
• Multiply each element by 2 and return only
those elements which are greater than 10?
let arr = [2, 3, 4, 6, 8];

17. Filter()
• The filter() method creates a new array with
all elements that pass the test implemented
by the provided function.
• It returns a new array containing only the
elements for which the function returns true

18. Example
• In the following array return only those
elements which are greater than 5?
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

19. Map() vs filter()
• map() is used when you want to transform each
element of an array and create a new array with the
transformed values.
• filter() is used when you want to create a new array
that contains only the elements that meet a certain
condition.
• Keep in mind that both methods do not modify the
original array; they create new arrays based on the
transformation or filtering criteria.

20. Reduce()
• The reduce() method executes a reducer
function (that you provide) on each element
of the array, resulting in single output value.
array.reduce(function(accumulator,currentValue,currentIndex,array)
{
// Your reducer logic here
}, initialValue);

21. Task: Data Processing with Map,
Filter, and Reduce
• You have an array of objects representing
different products. Each object contains
information about the product's name, price,
and quantity. Your task is to perform various
operations on this data using the map(),
filter(), and reduce() methods.

22. Array of an Object
const products = [
{ name: 'Laptop', price: 1000, quantity: 5 },
{ name: 'Phone', price: 600, quantity: 10 },
{ name: 'Tablet', price: 300, quantity: 7 },
{ name: 'Headphones', price: 150, quantity: 20 },
{ name: 'Monitor', price: 300, quantity: 3 }
];

23. Array of an Object
• Task 1: Use map() to create an array of product
names.
• Task 2: Use filter() to get products with a price
greater than $200
• Task 3: Use reduce() to calculate the total value
of all products
• Task 4 : Return only Names of the product with
price greater than $200.

24. THANKS