javascript-Array.ppsx

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.

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.

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

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]

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

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

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.

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.

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)

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.

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'];

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

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

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];

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

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];

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.

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);

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.

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 } ];

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.

javascript-Array.ppsx

More Related Content

Similar to javascript-Array.ppsx

Recently uploaded

javascript-Array.ppsx