DEV Community

Cover image for Javascript Array Methods
Shubham Tiwari
Shubham Tiwari

Posted on

Javascript Array Methods

Hello guys today i will be giving a quick overview of javascript Array methods with examples.

Let's get started...

Reverse() method -

It is used to reverse the array-

const array = [1,2,3,4,5]
console.log(array.reverse())
// [ 5, 4, 3, 2, 1 ]
Enter fullscreen mode Exit fullscreen mode

Sort() method -

It is used to sort the array and it also has some exceptions which we will discuss as well.

const array1 = [5,4,3,2,1]
console.log(array1.sort())
// [ 1, 2, 3, 4, 5 ]

// Exception
const array2 = [5,4,10,3,2,1]
console.log(array2.sort())
// [ 1, 10, 2, 3, 4, 5 ]

const exceptionSort = array2.sort((a,b) =>  a - b)
console.log(exceptionSort)
// [ 1, 2, 3, 4, 5, 10 ] - fixed
Enter fullscreen mode Exit fullscreen mode

Join -

It is used to create a string of arrays elements by joining them with a separator. You will understand this by seeing the example.

const array1 = [5,4,3,2,1]

const hypherSeparator = array1.join("-")
const commaSeparator = array1.join(",")
console.log(hypherSeparator)
console.log(commaSeparator)
// 5-4-3-2-1
// 5,4,3,2,1
Enter fullscreen mode Exit fullscreen mode

toString() method -

It is used to give string reprentation of array elements separated by comma.

const array1 = [5,4,3,2,1]
const array2 = [5,4,10,3,2,1]

console.log(array1.toString())

// 5,4,3,2,1
Enter fullscreen mode Exit fullscreen mode

Push() and pop() method -

Push method is used to insert element at the end of the array and pop method is used to remove the last element from the array.

const array1 = [5,4,3,2,1]
const array2 = [5,4,10,3,2,1]

array1.push(6,7,8)
console.log(array1)
// [5, 4, 3, 2, 1, 6, 7, 8]

array1.pop()
console.log(array1)
// [5, 4, 3, 2, 1, 6, 7]
Enter fullscreen mode Exit fullscreen mode

Shift() and unshift() method -

Shift method is used to remove first element from the array and unshift method is used to insert an element at the start of the array.

const array1 = [5,4,3,2,1]
const array2 = [5,4,10,3,2,1]

array1.unshift(6,7,8)
console.log(array1)
// [6, 7, 8, 5, 4, 3, 2, 1]

array1.shift()
console.log(array1)
// [7, 8, 5, 4, 3, 2, 1]
Enter fullscreen mode Exit fullscreen mode

Concat() method -

It is used to merge two or more arrays together.

const array1 = [5,4,3,2,1]
const array2 = [5,4,10,3,2,1]
const array3 = ["A","B","C","D","E"]

const mergedArray = array1.concat(array2,array3)
console.log(mergedArray)
// [
//   5,   4,   3,   2,   1, 5,
//   4,   10,  3,   2,   1, 'A',
//   'B', 'C', 'D', 'E'
// ]
Enter fullscreen mode Exit fullscreen mode

Splice() method -

  • splice method is used to remove all or any number of elements from any index in array, insert any number of elements at any index in array, replace elements at any index with any number of elements.
  • The main thing is that it makes changes to original array so be careful while using this method.
const array1 = [1,2,3,4,5];

// remove all elements starting from index 2(inclusive)
const removeAll = array1.splice(2);
// output - [1,2]

// remove two elements starting from index 1 (inclusive)
const removeTwo = array1.splice(1,2)
// output - [1,4,5]

// remove 0 elements and insert two elements before index 2
const removeAndInsert = array1.splice(2,0,99,100)
// output - [1,2,99,100,3,4,5]

// remove two elements and insert four elements before index 2
const removeTwoAndInsert = array1.splice(2,2,101,102,103,104);
// output - [1,2,101,102,103,104,5]

// remove all elements from negative Index -2 means 2nd element from last
const negativeIndexing = array1.splice(-2)
// [1,2,3]

// remove one element from negative Index -2 
// means 2nd element from last and insert 3 elements there
const negativeIndexingRemove = array1.splice(-2,1,10,11,12)
// output - [1,2,3,10,11,12,5]


// if we try to change the values inside function
// it will still change the original array 
const changeArray = (arr) => {
  return arr.splice(1,1)
}
changeArray(array1)
Enter fullscreen mode Exit fullscreen mode

Slice() method -

Slicing is used to slice and returns a particular part of the array using index number for start and end position of slicing.

const array = [1,2,3,4,5,6,7,8,9]

const objectArray = [
  {
    name:"shubham",age:21
  },
  {
    name:"shivam",age:25
  },
  {
    name:"abhishek",age:22
  },
]

// only start index and it will slice the array from index 2
// upto last element of the array
const sliceStart = array.slice(2)
// [3, 4, 5, 6, 7, 8, 9]

// start and end index
const sliceStartEnd = array.slice(2,4)
// [3, 4, 8, 9]

// negative index
const negativeSlice = array.slice(-2)
// [8, 9]

// negtive end index with positive start index
const negativeSliceStartEnd = array.slice(1,-2)
// [ 2, 3, 4, 5, 6, 7 ]


// slicing object array
const objectArraySlicing = objectArray.slice(1,3)
// [ { name: 'shivam', age: 25 }, 
// { name: 'abhishek', age: 22 } ]
Enter fullscreen mode Exit fullscreen mode

indexOf() method -

The indexOf() method returns the position of the first occurrence of a value in a array or string.

const array = [1,2,3,4,5,6,7,8,9]
const str = "hello"

console.log(str.indexOf("l"))
// 2

console.log(array.indexOf(4))
// 3
Enter fullscreen mode Exit fullscreen mode

Find() method -

Find method executes a testing function for each value in the array and returns the first element that passes the test

const array = [3, 10, 18, 20];

function checkNumber(num) {
  return num > 10;
}

console.log(array.find(checkNumber))
// 18 
Enter fullscreen mode Exit fullscreen mode

includes() method -

It returns true if an array contains the value we are trying to find.

const array = [3, 10, 18, 20];

console.log(array.includes(18))
// true 

console.log(array.includes(19))
// false
Enter fullscreen mode Exit fullscreen mode

Some() and every() method -

  • Some() method checks every element in the array for a particular condition provided and even if one elements passes the test , it returns true.
  • Every() method checks every element in the array for a particular condition provided and returns true only if all the elements in the array passes that test.
const array = [3, 10, 18, 20];

function checkNumber(num) {
  return num >= 10;
}

console.log(array.some(checkNumber))
// true

console.log(array.every(checkNumber))
// false
Enter fullscreen mode Exit fullscreen mode

Flat() method -

Flat method is used to flatten the array into 1-dimensional array from 2 or more dimensional array.We can also specify the dimension like upto how many dimension the array should flatten it. Like if there is 3-d array inside array then we need to pass 3 as depth in flat() parameter otherwise it will only flatten the array upto 2-dimension.

const arr1 = [10, 19, 24, [34, 43],[[[13, 41]]]];

console.log(arr1.flat());
// [ 10, 19, 24, 34, 43, [ [ 13, 41 ] ] ]

console.log(arr1.flat(3));
// [ 10, 19, 24, 34, 43,  13, 41 ]
Enter fullscreen mode Exit fullscreen mode

NOTE - SOMETIMES THESE METHODS BEHAVE DIFFERENTLY WHILE USING IN SOME EXCEPTIONAL CASES , SO TRY TO DO EXPERIMENT WITH THESE METHODS TO FIND OUT THOSE EXCEPTIONAL BEHAVIOUR😎

THANK YOU FOR CHECKING THIS POST

You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com

^^You can help me by some donation at the link below Thank you👇👇 ^^
☕ --> https://www.buymeacoffee.com/waaduheck <--

Also check these posts as well
https://dev.to/shubhamtiwari909/js-push-and-pop-with-arrays-33a2/edit

https://dev.to/shubhamtiwari909/tostring-in-js-27b

https://dev.to/shubhamtiwari909/join-in-javascript-4050

https://dev.to/shubhamtiwari909/going-deep-in-array-sort-js-2n90

Top comments (0)