Hey Welcome Techies👋🏼

Namaste Hi GIF

Namaste, I'm Aryan Sharma, I hope you're doing well.

This Javascript blog article is all about Array Methods.

You can find my other blogs on JavaScripthere↗️

For this time, Let's start this amazing ⭐ blog on Array Methods in JS.

Array Methods

You know about Arrays, arrays are linear data structures that are collections of elements of similar data type and have contiguous memory locations, right?

then what are their methods?

So, we need a lot of methods while executing the features on our website.

We decide how to use the methods to get our desired result.

I will write about these methods in such a way that you did not find difficulty understanding them.

And also I could revisit them and learn from them.

For Adding items:

`push()`

push method adds one or more elements to the end of an array and returns the new array.

It adds the element in the array from the end.

const names = ['Aryan', 'Mandeep', 'Narendra'];
names.push('Agrim');

console.log(names); // Output: ['Aryan', 'Mandeep', 'Narendra', 'Agrim'];

`unshift()`

unshift method adds one or more elements to the beginning of an array and returns the new array.

It adds the element in the array from the beginning.

const names = ['Aryan', 'Mandeep', 'Narendra'];
names.unshift('Agrim');

console.log(names); // Output: ['Agrim', 'Aryan', 'Mandeep', 'Narendra'];

For removing items:

`pop()`

The pop() method removes the last element from an array and returns that element.

It removes the element in the array from the end.

const cars = ['Mercedes', 'Ferrari', 'Porsche'];
cars.pop();

console.log(cars); // Output: ['Mercedes', 'Ferrari']

`shift()`

The shift() method removes the first element from an array.

const cars = ['Mercedes', 'Ferrari', 'Porsche'];
cars.shift();

console.log(cars); // Output: ['Ferrari', 'Porsche']

We use so many of the array methods in our JS code.

`splice()`

splice method is a super method as it can delete, and replace elements in an array.

Understand carefully:
splice method has 3 properties/arguments-

1st one tells where to start deleting or removing in an array.

2nd one tells how many elements need to be deleted,

The 3rd one gives elements that need to be replaced in place of those we deleted.

Let's try to visualize:

Code:

Output:

Now, let's understand by breaking the code

Step 1: Define the array

const names= ["Aryan", "Agrim", "Ballu"];

Step 2: Start deleting elements from the starting index
(Here we are starting with a 0 index) - First element of the array

names.splice("0");

Step 3: Define how many elements you need to replace or remove in an array.

names.splice("0","2");

For this step, let's get the output

console.log(names) // Output: Ballu

2 is the number of elements we are removing.

Step-4: Now, give elements you want to replace in the place of elements we removed in step-2 and step-3

names.splice("0","2","Bholu"); 
// we are replacing 2 elements starting from 0th index with Bholu

Hope, you understand Splice otherwise give it another read!

`slice()`

It sounds similar to splice, but it is much simpler than it.

syntax is:

arr.slice([start], [end])

It returns a new array copying to it all items from the index start to end (not including end).

For instance:

let arr = ["t", "e", "s", "t"];

alert( arr.slice(1, 3) ); // e,s (copy from 1 to 3 not including 3)

alert( arr.slice(-2) ); // s,t (copy from -2 till the end)

`concat()`

concat() method merges two or more arrays, creating a new array without modifying the existing arrays.

const arr1 = ['apple', 'banana'];

const arr2 = ['carrot', 'tomato'];

const new_Array = arr1.concat(arr2);


console.log(new_Array); // Output: ['apple', 'banana', 'carrot', 'tomato']

Iterate elements

`forEach()`

forEach method allows to run of a function for every element of the array.

It has 3 arguments, never talked about

item, index, array

Code :

const numbers = [1, 2, 3];
numbers.forEach((num) => console.log(num));

// Output:
// 1
// 2
// 3

`filter()`

filter() method creates a new array with all elements that pass the test implemented by the provided function.

const numbers = [1, 2, 3, 4, 5];
const evenNum = numbers.filter((num) => num % 2 === 0);

console.log(evenNum); // Output: [2, 4]

Transform array

`map()`

The map() method creates a new array with the results of calling a provided function on every element in the array.

const numbers = [1, 2, 3];
const DoubleNumbers = numbers.map((num) => 2 * num);

console.log(squaredNumbers); // Output: [2, 4, 6]

`reduce()`

This is similar to the forEach, map function method. reduce are used to calculate a single value based on the array.

syntax :

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

The function is applied to all array elements one after another and “carries on” its result to the next call.

Arguments:

accumulator – is the result of the previous function call.
item – is the current array item.
index – is its position.
array – is the array.

Understand using an Example:

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

alert(result); // 15

On the first run, sum is the initial value (the last argument of reduce), equals 0, and current is the first array element, equals 1. So the function result is 1.
On the second run, sum = 1, we add the second array element (2) to it and return.
On the 3rd run, sum = 3 we add one more element to it, and so on…

https://dev.to/muafalah/list-of-javascript-array-methods-2f4

https://javascript.info/array-methods

`reverse()`

It reverses the order of elements in an array.

let fruits = [Apple, Mango, Grapes];
fruits.reverse();

alert( fruits ); // Output: [Apple, Mango, Grapes];

`sort()`

sort is used to sort the elements in ascending or descending order.

// For more info. refer javascript.info

let arr = [ 1, 0, 5 ];


arr.sort();

alert( arr );  // Output: 0,1,5

What Are Javascript Array Methods