Introduction

In this Article I will cover all important Array methods. We’ll go through a small theory 👩‍💻 intro and will jump next to a more hands-on 👋 exercise to practice what we learned.

What is Array 🤔?

An Array is special variables, which can hold more than one value at a time. In other words Array is used to store multiple elements in a single variable. It is often used when we want to store a list of elements and access them by a single variable.

For Example

const cars = ["Saab", "Volvo", "BMW"];

length

it is return total count of elements in array

let listemoji=['😍','😂','😎','🤣', '😆'];

let length = listemoji.length;

console.log(length);

Concat

Create a new array by concatenating existing arrays:

let listemoji=['😍','😂','😎','🤣', '😆'];

let listemojitwo=['🙄','😏','🥱','😥', '😑'];

let concatArr = listemoji.concat(listemojitwo)


console.log(concatArr);

Join

Joins all elements of an array into a string.

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

let result=list.join(','); 

console.log(result)

Slice

Return copy of array from start and end from arguments

let listemoji=['😍','😂','😎','🤣', '😆'];

let sliceArray=listemoji.slice(0,1)

console.log(sliceArray)

IndexOf

Returns the first index at which a given element can be found in the array, or -1 if it is not present.

let listemoji=['😍','😂','😎','🤣', '😆'];

let indexOfArray1=listemoji.indexOf('😍')
let indexOfArray2=listemoji.indexOf('😴')


console.log(indexOfArray1)
console.log(indexOfArray2)

LastIndexOf

Returns the last index at which a given element can be found in the array, or -1 if it is not present. The array is searched backwards, starting at fromIndex.

let listemoji=['😍','😂','😎','🤣', '😆'];

let indexOfLastArray1=listemoji.lastIndexOf('😆')


console.log(indexOfLastArray1)

Includes

Returns true if the given element is present in the array.

let listemoji=['😍','😴','😁','😡', '😆'];

let result=listemoji.includes('😆')


console.log(result)

Pop

Removes the last element from an array and returns that element.

let listemoji=['😍','😴','😁','😡', '😆'];

let result=listemoji.pop('😆')


console.log(result)
console.log(listemoji)

Push

The method adds one or more elements to the end of an array

let listemoji=['😍','😴','😁','😡', '😆'];

let result=listemoji.push('💂‍♀️')


console.log(result)
console.log(listemoji)

Shift

Removes the first element from an array

let listemoji=['🍕','🍔','🍟', '🥂','🍻'];

let result=listemoji.shift()


console.log(result)
console.log(listemoji)

Unshift

Adds new elements to the beginning of an array, and returns the new length.

let listemoji=['🍕','🍔','🍟', '🥂','🍻'];

let result=listemoji.unshift('🍺')


console.log(result)
console.log(listemoji)

Splice

The method changes the contents of an array by removing or replacing existing elements and/or adding new elements in place.

let listemoji=['🍕','🍔','🍟', '🥂','🍻'];

let result=listemoji.splice(3,4)


console.log(result)
console.log(listemoji)

Reverse

Reverses the order of the elements in an array.

let listemoji=['🍕','🍔','🍟', '🥂','🍻'];

let result=listemoji.reverse()


console.log(result)

I know you guys are wondering when this will end. Don't worry I'm trying to finish😝.

Sort

Sorts the elements of an array in place and returns the array. The default sort order is according to string Unicode code points.

let listemoji=['😂','🍔','🥱', '🥂','😂','🥱'];

 let result=listemoji.sort()

// Another Example
console.log(result)
let array =[ 2,1,10,4,15];
 const resultOne = array.sort((a,b) => (a-b))

 let arrayTwo =[ 8,1,10,7,45];

const resultTwo= arrayTwo.sort((a,b) => -(a-b))

console.log(resultOne);
console.log(array)
console.log(resultTwo);
// OR

let alphaArray=['shanu','apple','zer','ball']
let newresult = alphaArray.sort((a,b) => (a-b))//let results = alphaArray.sort() both are same
console.log(newresult)

Map

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

let listemoji=['😂','🍔','🥱', '🥂','😂','🥱'];

 let result=listemoji.map((el) => ('🎊'))
 console.log(result)

// Another Example
let listNumber=[1,4,5,6,7]

let newResult=listNumber.map(el=>el*4)

console.log(newResult)

Filter

Returns a new array with all elements that pass the test implemented by the provided function.

let listemoji=['😂','🍔','🥱', '🥂','😂','🥱'];

 let result=listemoji.filter((el) => el === '😂')
 console.log(result)

// Another Example
let listNumber=[1,4,5,6,7,,9,10,12,10]

let newResult=listNumber.filter(el=>el==10)

console.log(newResult)

👉 Resources

Check out some of these resources for a more in-depth:- JS Cheetsheetgeeksforgeeks MDN

In closing

I hope that you've found this Blog helpful..! If you have any question or feedback, feel free to leave a comment below.

I write web development articles on my blog @richak.hashnode.dev and post development-related content.

That's all for today!😊