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 ]
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
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
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
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]
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]
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'
// ]
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)
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 } ]
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
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
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
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
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 ]
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)