Javascript array method in detail – Part 1

What is Javascript array method?

A JavaScript array method is a function that can be used to manipulate and work with arrays in JavaScript. Array methods provide a way to perform various operations on an array such as adding, removing, or modifying elements. Some of the most commonly used array methods in JavaScript are push(), pop(), shift(), unshift(), splice(), slice(), concat(), join(), and sort(). Each method has a specific purpose and can be used to achieve a specific task when working with arrays. These methods allow developers to easily and efficiently manipulate arrays without having to write custom code for each operation.

toString()

In JavaScript, the toString() method is used to convert an array to a string. The method converts each element of the array to a string and concatenates them, separated by commas.

The syntax for the toString() method is as follows:

Here, array is the array to be converted to a string.

Here is an example of using the toString() method to convert an array to a string:

In this example, the toString() method is called on the array1 array. The resulting string is ‘1,2,3,4,5’.

The toString() method is useful for converting arrays to strings when you don’t need any specific formatting. If you need to customize the formatting of the resulting string, you can use other methods such as join() or toLocaleString().

join()

In JavaScript, the join() method is used to convert an array to a string, with each element separated by a specified separator.

The syntax for the join() method is as follows:

Here, array is the array to be joined, and separator is the string to be used as the separator between the array elements. If the separator is not specified, a comma will be used by default.

Here is an example of using the join() method to concatenate the elements of an array into a string separated by hyphens:

In this example, the join() method is called on the array1 array with the hyphen character as the separator. The resulting string is ‘apple-banana-orange’.

If you omit the separator argument, the join() method will use a comma as the default separator:

In this example, the join() method is called on the array1 array with no separator argument. The resulting string is ‘apple,banana,orange’.

The join() method is useful for formatting arrays as strings, for example, when constructing URLs or other structured data.

pop()

In JavaScript, the pop() method is used to remove the last element from an array and return that element. The original array is modified as a result.

The syntax for the pop() method is as follows:

Here, array is the array from which you want to remove the last element.

Here is an example of using the pop() method to remove the last element from an array:

In this example, the pop() method is called on the array1 array, and the result is assigned to the lastElement variable. The value of lastElement is 5, which is the last element of the original array. The pop() method also modifies the array1 array, removing the last element and leaving [1, 2, 3, 4].

The pop() method is useful when you need to remove the last element from an array and don’t need to access it later. If you want to remove an element from a specific position in the array, you can use the splice() method.

push()

In JavaScript, the push() method is used to add one or more elements to the end of an array. The method modifies the original array and returns the new length of the array.

The syntax for the push() method is as follows:

Here, array is the array to which you want to add the elements, and element1, element2, …, elementN are the elements to add.

Here is an example of using the push() method to add an element to the end of an array:

In this example, the push() method is called on the array1 array with the argument 5. The result is assigned to the newLength variable, which is 5, the new length of the array. The push() method also modifies the array1 array, adding 5 to the end and leaving [1, 2, 3, 4, 5].

You can also use the push() method to add multiple elements to an array:

In this example, the push() method is called on the array1 array with the arguments 5, 6, and 7. The result is assigned to the newLength variable, which is 7, the new length of the array. The push() method also modifies the array1 array, adding 5, 6, and 7 to the end and leaving [1, 2, 3, 4, 5, 6, 7].

The push() method is useful when you need to add elements to the end of an array. If you need to add elements to a specific position in the array, you can use the splice() method.

shift()

In JavaScript, the shift() method is used to remove the first element from an array and return that element. The method modifies the original array.

The syntax for the shift() method is as follows:

Here, array is the array from which you want to remove the first element.

Here is an example of using the shift() method to remove the first element from an array:

In this example, the shift() method is called on the array1 array, and the result is assigned to the firstElement variable. The value of firstElement is 1, which is the first element of the original array. The shift() method also modifies the array1 array, removing the first element and leaving [2, 3, 4, 5].

The shift() method is useful when you need to remove the first element from an array and don’t need to access it later. If you want to remove an element from a specific position in the array, you can use the splice() method.

unshift()

In JavaScript, the unshift() method is used to add one or more elements to the beginning of an array. The method modifies the original array and returns the new length of the array.

The syntax for the unshift() method is as follows:

Here, array is the array to which you want to add the elements, and element1, element2, …, elementN are the elements to add.

Here is an example of using the unshift() method to add an element to the beginning of an array:

In this example, the unshift() method is called on the array1 array with the argument 1. The result is assigned to the newLength variable, which is 5, the new length of the array. The unshift() method also modifies the array1 array, adding 1 to the beginning and leaving [1, 2, 3, 4, 5].

You can also use the unshift() method to add multiple elements to an array:

In this example, the unshift() method is called on the array1 array with the arguments 1, 2, and 3. The result is assigned to the newLength variable, which is 5, the new length of the array. The unshift() method also modifies the array1 array, adding 1, 2, and 3 to the beginning and leaving [1, 2, 3, 4, 5].

The unshift() method is useful when you need to add elements to the beginning of an array. If you need to add elements to a specific position in the array, you can use the splice() method.

delete(operator)

In JavaScript, the delete operator is used to remove a property from an object or an element from an array.

The syntax for the delete operator is as follows:

Here, object is the object from which you want to remove a property, property is the name of the property you want to remove, array is the array from which you want to remove an element, and index is the index of the element you want to remove.

Here is an example of using the delete operator to remove a property from an object:

In this example, the delete operator is used to remove the age property from the person object. The resulting object has only two properties: name and city.

Here is an example of using the delete operator to remove an element from an array:

In this example, the delete operator is used to remove the element at index 2 from the array1 array. The resulting array still has five elements, but the value at index 2 is now undefined.

Note that using the delete operator on an array element only removes the element itself, but does not change the length of the array. To remove an element and change the length of the array, you can use the splice() method.

In general, the delete operator should be used with caution because it can have unintended consequences, such as leaving holes in arrays or removing inherited properties from objects. It is recommended to use array methods like splice() or object methods like Object.deleteProperty() instead, as they provide more predictable behavior.

concat()

In JavaScript, the concat() method is used to merge two or more arrays into a new array. The method returns a new array that contains all the elements of the original arrays, in the order they were passed as arguments. The original arrays are not modified.

The syntax for the concat() method is as follows:

Here, array1 is the array to which you want to concatenate the other arrays, and array2, array3, …, arrayN are the arrays you want to concatenate.

Here is an example of using the concat() method to concatenate two arrays:

In this example, the concat() method is called on the array1 array with the array2 array as an argument. The resulting array newArray contains all the elements of array1 and array2, in the order they were passed as arguments.

You can also use the concat() method to concatenate more than two arrays:

In this example, the concat() method is called on the array1 array with the array2 and array3 arrays as arguments. The resulting array newArray contains all the elements of array1, array2, and array3, in the order they were passed as arguments.

The concat() method is useful when you need to combine two or more arrays into a single array, without modifying the original arrays. It is often used in functional programming to create a new array that is a concatenation of several smaller arrays.

sort()

In JavaScript, the sort() method is used to sort the elements of an array in place, meaning that the original array is modified. The sort() method arranges the elements of an array alphabetically or numerically, depending on the data type of the elements.

The syntax for the sort() method is as follows:

Here, array is the array to be sorted, and compareFunction is an optional function that specifies the order of the elements. If compareFunction is not provided, the elements are sorted alphabetically by default.

Here is an example of using the sort() method to sort an array of strings:

In this example, the sort() method is called on the fruits array. The resulting array is sorted alphabetically in ascending order.

Here is an example of using the sort() method to sort an array of numbers:

In this example, the sort() method is called on the numbers array. The resulting array is sorted alphabetically, which is not what we want. To sort the array numerically, we need to provide a compareFunction that compares the numbers as numbers, not as strings:

In this example, the sort() method is called on the numbers array with a compareFunction that subtracts b from a. This sorts the array in ascending order numerically.

The sort() method is useful when you need to sort an array of elements in place. However, it is important to note that the sort() method modifies the original array, so you should make a copy of the array if you need to preserve the original order. Also, be careful when sorting arrays of objects, as the sort() method may not produce the desired result if you do not provide a compareFunction that correctly compares the objects.

splice()

In JavaScript, the splice() method is used to change the contents of an array by removing or replacing existing elements and/or adding new elements.

The syntax for the splice() method is as follows:

Here, array is the array to be modified, start is the index at which to start changing the array, deleteCount is the number of elements to remove from the array, and item1, item2, etc. are the elements to be added to the array at the specified index.

Here is an example of using the splice() method to remove elements from an array:

In this example, the splice() method is called on the fruits array with a start value of 1 and a deleteCount value of 2. This removes two elements starting at index 1, which is the element ‘orange’ and the element ‘banana’. The resulting array is [“apple”, “grape”].

Here is an example of using the splice() method to replace elements in an array:

In this example, the splice() method is called on the fruits array with a start value of 1, a deleteCount value of 2, and two elements to add, ‘mango’ and ‘papaya’. This removes two elements starting at index 1, which is the element ‘orange’ and the element ‘banana’, and adds two new elements, ‘mango’ and ‘papaya’. The resulting array is [“apple”, “mango”, “papaya”, “grape”].

Here is an example of using the splice() method to add elements to an array:

In this example, the splice() method is called on the fruits array with a start value of 2, a deleteCount value of 0, and two elements to add, ‘mango’ and ‘papaya’. This adds two new elements starting at index 2, which is the element ‘banana’. The resulting array is [“apple”, “orange”, “mango”, “papaya”, “banana”, “grape”].

The splice() method is a powerful tool for modifying the contents of an array. It allows you to remove, replace, and add elements to an array in a single operation. However, it is important to note that the splice() method modifies the original array, so you should make a copy of the array if you need to preserve the original contents.

slice()

In JavaScript, the slice() method is used to extract a section of an array and return a new array containing the selected elements.

The original array is not modified. The syntax for the slice() method is as follows:

Here, array is the array to be sliced, start is the index at which to start extracting elements (inclusive), and end is the index at which to stop extracting elements (exclusive). If end is not specified, all elements from start to the end of the array will be included.

Here is an example of using the slice() method to extract a section of an array:

In this example, the slice() method is called on the fruits array with a start value of 1 and an end value of 3. This extracts two elements starting at index 1, which is the element ‘orange’ and the element ‘banana’. The resulting array is [“orange”, “banana”].

Here is an example of using the slice() method to extract a section of an array without specifying an end index:

In this example, the slice() method is called on the fruits array with a start value of 2 and no end value specified. This extracts all elements starting at index 2, which is the element ‘banana’ and the element ‘grape’. The resulting array is [“banana”, “grape”].

Here is an example of using the slice() method to make a copy of an array:

In this example, the slice() method is called on the fruits array with no start or end values specified. This creates a copy of the entire array, which is assigned to the copiedFruits variable. The resulting array is [“apple”, “orange”, “banana”, “grape”].

The slice() method is a useful tool for extracting a section of an array without modifying the original array. It can also be used to create a copy of an array.

reverse()

In JavaScript, the reverse() method is used to reverse the order of elements in an array. The first element becomes the last and the last becomes the first. The original array is modified and the reversed array is returned.

The syntax for the reverse() method is as follows:

Here, array is the array to be reversed.

Here is an example of using the reverse() method to reverse an array:

In this example, the reverse() method is called on the fruits array. This reverses the order of the elements in the array. The resulting array is [“grape”, “banana”, “orange”, “apple”].

Note that the reverse() method modifies the original array. If you do not want to modify the original array, you can make a copy of it before calling the reverse() method:

In this example, the slice() method is called on the fruits array to create a copy of the array. The reverse() method is then called on the copy, which returns a new array with the elements in reverse order. The original fruits array is not modified. The resulting reversedFruits array is [“grape”, “banana”, “orange”, “apple”] and the original fruits array is [“apple”, “orange”, “banana”, “grape”].

The reverse() method is a useful tool for manipulating arrays in JavaScript. It can be used to reverse the order of elements in an array, which can be helpful for sorting or reordering arrays.

isArray()

In JavaScript, the isArray() method is used to determine whether a given value is an array or not. The method returns true if the value is an array, and false otherwise.

The syntax for the isArray() method is as follows:

Here, value is the value to be checked.

Here is an example of using the isArray() method to check whether a value is an array or not:

In this example, the isArray() method is called on the fruits array. The method returns true because fruits is an array. The isArray() method is also called on the number variable, which is not an array. The method returns false because number is not an array.

The isArray() method is useful for checking the type of a value before manipulating it as an array. This can help prevent errors that can occur when trying to use an array method on a non-array value. Here’s an example:

In this example, the sumArray() function takes an array as an argument and returns the sum of its elements. The isArray() method is used to check whether the argument passed to the function is an array. If the argument is not an array, the function returns an error message instead of trying to calculate the sum.

indexOf()

In JavaScript, the indexOf() method is used to find the index of a specified value in an array. The method returns the index of the first occurrence of the specified value in the array, or -1 if the value is not found.

The syntax for the indexOf() method is as follows:

Here, array is the array in which to search, searchValue is the value to search for, and fromIndex is an optional parameter that specifies the starting index for the search. If fromIndex is not specified, the search starts at index 0.

Here is an example of using the indexOf() method to find the index of a specified value in an array:

In this example, the indexOf() method is called on the fruits array to find the index of the value ‘banana’. The method returns 2 because ‘banana’ is located at index 2 in the array. The method is also called with the value ‘grape’, which is not found in the array. The method returns -1 in this case.

If the fromIndex parameter is specified, the search starts at that index instead of index 0. Here’s an example:

In this example, the indexOf() method is called on the numbers array to find the index of the value 2, starting the search at index 3. The method returns 3 because the first occurrence of 2 after index 3 is located at index 3.

The indexOf() method is useful for finding the index of a value in an array, which can be used to access or manipulate the value at that index. It can also be used to check whether a value is present in an array, by checking whether the method returns a value other than -1.

lastIndexOf()

The lastIndexOf() method in JavaScript is used to find the last occurrence of a specified value in an array. It is similar to the indexOf() method, but it searches the array from right to left, starting from the end of the array.

The syntax for the lastIndexOf() method is as follows:

Here, array is the array in which to search, searchValue is the value to search for, and fromIndex is an optional parameter that specifies the starting index for the search. If fromIndex is not specified, the search starts at the last index of the array.

Here is an example of using the lastIndexOf() method to find the last occurrence of a specified value in an array:

In this example, the lastIndexOf() method is called on the numbers array to find the last index of the value 2. The method returns 5 because the last occurrence of 2 in the array is located at index 5. The method is also called with the value 6, which is not found in the array. The method returns -1 in this case.

If the fromIndex parameter is specified, the search starts at that index instead of the last index of the array. Here’s an example:

In this example, the lastIndexOf() method is called on the numbers array to find the last index of the value 2, starting the search at index 4. The method returns 3 because the last occurrence of 2 before index 4 is located at index 3.

The lastIndexOf() method is useful for finding the last occurrence of a value in an array, which can be used to access or manipulate the value at that index. It can also be used to check whether a value is present in an array, by checking whether the method returns a value other than -1.