This document is a comprehensive guide to JavaScript array methods, detailing their functionalities and usage. It covers common methods such as .push(), .pop(), .filter(), .map(), .reduce(), and others, explaining how they manipulate and transform array data. The guide emphasizes the importance of understanding these methods for writing efficient and clean code.
This document is a comprehensive guide to JavaScript array methods, detailing their functionalities and usage. It covers common methods such as .push(), .pop(), .filter(), .map(), .reduce(), and others, explaining how they manipulate and transform array data. The guide emphasizes the importance of understanding these methods for writing efficient and clean code.
This document is a comprehensive guide to JavaScript array methods, detailing their functionalities and usage. It covers common methods such as .push(), .pop(), .filter(), .map(), .reduce(), and others, explaining how they manipulate and transform array data. The guide emphasizes the importance of understanding these methods for writing efficient and clean code.
This document is a comprehensive guide to JavaScript array methods, detailing their functionalities and usage. It covers common methods such as .push(), .pop(), .filter(), .map(), .reduce(), and others, explaining how they manipulate and transform array data. The guide emphasizes the importance of understanding these methods for writing efficient and clean code.
that allow you to store multiple values in a single variable.
Arrays come with a rich set of built-in methods
that make it easy to manipulate, search, and transform data.
Understanding these methods is key to writing
efficient and clean code.
Divyansh Tripathi Common Array methods
.push() .filter() .every()
. pop() .reduce() .split()
.shift() .find() .reverse()
.unshift() .findIndex() .join()
.slice() .includes()
.splice() .concat()
.forEach() .sort()
.map() .some()
Divyansh Tripathi .push() & .pop() .push(): Adds one or more elements to the end of an array and returns the new length of the array.
orange gets added to the array
.pop(): Removes the last element from an array
and returns that element.
Divyansh Tripathi .shift() & .unshift() .shift(): Removes the first element from an array and returns that element.
apple removed from the beginning of the array
.unshift(): Adds one or more elements to the
beginning of an array and returns the new length of the array.
mango added to the beginning of the array
Divyansh Tripathi .slice()
.slice(): Returns a shallow copy of a portion of
an array into a new array object. It does not modify the original array.
The first argument specifies the starting index,
and the second argument specifies the ending index (not included in the result).
Divyansh Tripathi .splice()
.splice(): Changes the contents of an array by
removing, replacing, or adding elements.
The first argument specifies the index at which to
start changing the array, the second argument specifies the number of elements to remove, and the subsequent arguments specify the elements to add.
Divyansh Tripathi .forEach()
.forEach(): Executes a provided function once
for each array element.
This method doesn't return anything; it's mainly
used for iterating over arrays.
Divyansh Tripathi .map() .map(): creates a new array by applying a provided function to each element of an existing array. It does not change the original array; instead, it returns a new array where each element is the result of the function applied to the corresponding element in the original array.
Returns a new array, leaving the original array
unchanged. This is particularly useful when you need to transform every element in an array.
Divyansh Tripathi .filter() .filter(): Creates a new array filled with elements that pass a test provided by a function. It iterates over each element in the original array, applying the test (callback function) to each element.
callback: A function that is called for each
element in the array. It takes up to three arguments: element: The current element being processed in the array. index (optional): The index of the current element being processed. array (optional): The array filter() was called upon. newArray: The new array containing the elements that passed the test. Divyansh Tripathi Example:
In this example, the filter() method is used to create
a new array, evenNumbers, containing only the even numbers from the original numbers array.
The callback function checks if each number is
divisible by 2 (number % 2 === 0).
If the condition is true, the number is included in
the evenNumbers array.
Divyansh Tripathi .reduce() .reduce(): Executes a reducer function on each element of the array, resulting in a single output value. Syntax:
Example:
The reduce() method sums up all the elements in
the numbers array. The accumulator starts at 0 (provided as the initialValue), and each element is added to this accumulator until all elements have been processed.
Divyansh Tripathi .find() & .findIndex() .find(): Returns the value of the first element in the array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.
.findIndex(): Returns the index of the first
element in the array that satisfies the provided testing function. If no values satisfy the testing function, -1 is returned.
Divyansh Tripathi .includes() & .concat() .includes(): Determines whether an array includes a certain value among its entries, returning true or false.
.concat(): Merges two or more arrays into one. It
does not change the existing arrays but instead returns a new array.
Divyansh Tripathi .sort() .sort(): Sorts the elements of an array in place and returns the array. The default sort order is built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values.
To sort numbers correctly, you often need to provide a
compare function:
Divyansh Tripathi .reverse(), .join(), .split() .reverse(): Reverses the order of the elements in an array in place and returns the array.
.join(): Joins all elements of an array into a string and
returns this string. You can specify a separator to insert between the elements.
.split(): Splits a string into an array of substrings, and
returns the new array. This method is the opposite of join().
Divyansh Tripathi .some() .some(): Checks if at least one element in the array passes a test (provided as a function). If it finds an element for which the provided function returns true, it immediately returns true and stops. Otherwise, it returns false.
In this example, some() checks if there are any even
numbers in the numbers array. Since 2 and 4 are even, it returns true. This is particularly useful when you want to know if any element in an array meets a particular condition.
Divyansh Tripathi .every() .every(): Checks if all elements in the array pass a test (provided as a function). If all elements pass the test, it returns true. If any element fails the test, it returns false and stops.
In this example, every() checks if all the numbers in the
array are even. Since they are, it returns true.
This is particularly useful when you want to know if all
element in an array meets a particular condition.
Divyansh Tripathi Combining Array Methods for Powerful Data Manipulation Array methods can be chained together to perform complex data manipulations with minimal code.
Here is an example: You have an array named products that contains objects representing different products. Each product has a name, price, and inStock status.
Divyansh Tripathi Explanation:
The filter() method is used to create a new array
that only includes products that are both in stock (inStock: true) and have a price greater than $50 (price > 50).
The reduce() method then takes the filtered array
and sums up the prices of the remaining products. The acc variable accumulates the total price, starting at 0.
The totalPrice variable will hold the sum of the
prices of the products that passed the filter. In this case, the Laptop ($999) and Monitor ($150) are both in stock and cost more than $50, so their prices are added together.
Divyansh Tripathi I hope you found this material useful and helpful.
Remember to:
Like
Save for future reference
& Share with your network, be helpful to someone 👌 Divyansh Tripathi Hi There! Thank you for reading through Did you enjoy this knowledge?
