Javascript inbuilt Array Methods:
A number of built-in properties, operators and methods for manipulating arrays are available in JavaScript.
Some of them are :
Array.isArray(), Array.length, reverse(), join(), toString(), split(), push(), pop(), shift(), unshift(), concat(), slice(), splice(), delete and flat().
Here is an explanation of a few such methods:
Array.isArray(value):
This method checks whether a given value is an array or not. It returns true if value
is array else return false if not array. The value in below syntax is what we check.
Example :
Array.isArray(value)
Illustrations showing the usage are:
Array.isArray([]); // true
Array.isArray([1, 2, 3]); // true
Array.isArray(new Array()); // true
Array.isArray('hello'); // false
Array.isArray(42); // false
Array.isArray({}); // false
Array.isArray(null); // false
Array.length:
This property gives the length of an array.
Example :
const fruits = ['apple', 'banana']; const leng = fruits.length; console.log(leng); // Output: 2
reverse():
Reversing the order of the elements in an array is possible using JavaScript's built-in reverse() method.
The syntax and example:
Example :
// syntax array.reverse() // Example const fruitList = ['cherry', 'apple', 'banana', 'date']; fruitList.reverse(); console.log(fruits); // Output: ['date', 'banana', 'apple', 'cherry']
Conversion from array to string and string to array:
This is one of the very important concept in javascript and we have 3 methods for that purpose.
join(), toString() and split()
toString() and join() converts an array to a string.
join() method joins the elements of array with a specified delimiter and that we can not
do in toString() method.
Please note that toString() method can convert any data type into string.
Example :
// toString method usecase
const array = [1, 2, 3, 4, 5];
const arrayString = array.toString();
console.log(arrayString); // Output: "1,2,3,4,5"
// join method usecase
const array = [1, 2, 3, 4, 5];
const arrayString = array.join('-');
console.log(arrayString); // Output: "1-2-3-4-5"
split() converts a string into an array of substrings based on a specified delimiter.
Example :
const arrayString = "1,2,3,4,5";
const array = arrayString.split(','); // separate based on comma
console.log(array); // Output: [ '1', '2', '3', '4', '5' ]
const arrayString = "gooday";
const array = arrayString.split(''); // separate character by character
console.log(array); // Output: [ 'g', 'o', 'o', 'd', 'a', 'y' ]Major array methods widely used in javascript:
push(element1, element2, ..., elementN):
This method increases the length of an array by one or more elements and returns the new length.
Example :
const fruits = ['apple', 'banana'];
const length = fruits.push('orange', 'kiwi');
console.log(fruits); // Output: ['apple', 'banana', 'orange', 'kiwi']
console.log(length); // Output: 4
pop():
The final element in an array is removed using this method, and it is then returned.
Example :
const fruits = ['apple', 'banana', 'orange']; const lastFruit = fruits.pop(); console.log(fruits); // Output: ['apple', 'banana'] console.log(lastFruit); // Output: 'orange'
shift():
The first element of an array is eliminated using this procedure, and all subsequent element are moved to a lower index. The deleted element is returned.
Example :
const fruits = ['apple', 'banana', 'orange']; const firstFruit = fruits.shift(); console.log(fruits); // Output: ['banana', 'orange'] console.log(firstFruit); // Output: 'apple'
unshift(element1, element2, ..., elementN) :
This method adds one or more elements to the beginning of an array and shifts existing elements to higher indexes. It returns the new length of the array.
Example :
const fruits = ['banana', 'orange'];
const length = fruits.unshift('apple', 'kiwi');
console.log(fruits); // Output: ['apple', 'kiwi', 'banana', 'orange']
console.log(length); // Output: 4
concat(array1, array2, ..., arrayN) :
This technique creates a new array by joining several arrays or values. The original arrays are left alone.
Example :
const fruits = ['apple', 'banana']; const moreFruits = ['orange', 'kiwi']; const allFruits = fruits.concat(moreFruits); console.log(allFruits); // Output: ['apple', 'banana', 'orange', 'kiwi']
slice(start, end) :
Using this technique, a portion of an existing array is extracted to generate a new array. While the end index is exclusive, the start index is inclusive. The extraction extends to the end of the array if end is left out.
Example :
const fruits = ['apple', 'banana', 'orange', 'kiwi']; const citrus = fruits.slice(1, 3); console.log(citrus); // Output: ['banana', 'orange']
splice(startIndex, deleteCount, item1, item2, ...) :
The splice() method in JavaScript is used to add, remove, or replace elements within an array. It modifies the original array and returns an array containing the removed elements.
startIndex: The index where the alteration starts. It may be an integer that is positive or negative. 1 means the first index, and 2 means the second index. In the same way, -1 designates the final element and -2 means the second last element.
deleteCount (optional):
The optional deleteCount parameter specifies how many entries from the array should be deleted, starting at startIndex. If deleteCount is not supplied or if its value is more than the number of items from startIndex to the end of the array, all the elements starting with startIndex will be erased.
item1, item2, ... (optional): item1, item2,... (optional) are the elements that should be added to the array at the startIndex. These elements are added to the array in place of the ones that were deleted.
Let's look at some examples to understand the splice() method:
Removing Elements:
const array = [1, 2, 3, 4, 5]; const removedElements = array.splice(2, 2); console.log(array); // Output: [1, 2, 5] console.log(removedElements); // Output: [3, 4]
In this example, splice(2, 2) starts at index 2 and removes two elements (3 and 4) from the array. The resulting array is [1, 2, 5], and the removed elements are [3, 4].
Adding Elements:
const array = [1, 2, 3, 4, 5]; array.splice(2, 0, 'a', 'b'); console.log(array); // Output: [1, 2, 'a', 'b', 3, 4, 5]
In this example, splice(2, 0, 'a', 'b') starts at index 2 and removes 0 elements. Instead, it adds 'a' and 'b' at index 2. The resulting array is [1, 2, 'a', 'b', 3, 4, 5].
Replacing Elements:
const array = [1, 2, 3, 4, 5]; const replacedElements = array.splice(2, 2, 'a', 'b', 'c'); console.log(array); // Output: [1, 2, 'a', 'b', 'c', 5] console.log(replacedElements); // Output: [3, 4]
In this example, splice(2, 2, 'a', 'b', 'c') starts at index 2 and removes two elements (3 and 4). Then it inserts 'a', 'b', and 'c' in their place. The resulting array is [1, 2, 'a', 'b', 'c', 5], and the removed elements are [3, 4].
It's important to note that the splice() method modifies the original array. If you don't want to modify the original array, you can make a copy of it using the slice() method before using splice().
delete :
By utilizing the delete JavaScript operator, array elements can be removed.
The array has holes that are undefined after using remove.
Instead, use pop() or shift().
Example :
const names = ["Andy", "Robert", "Murdocht", "jane"]; delete names[0]; console.log(names[0]); // Output: undefined
flat() :
The flat() method is a built-in JavaScript array method that is used to flatten a nested array structure. It creates a new array that is a flattened version of the original array, which means it removes any nested arrays and returns a single-level array containing all the elements.
Here's the syntax for the flat() method:
array.flat([depth])
The flat() function's optional depth argument specifies the flattening depth. The depth will only flatten down one level because it is typically set to 1. No matter how deeply the array is nested, you can completely flatten it by passing Infinity as the depth option.
For an explanation of how the flat() method functions, consider the following examples:
const numericArr = [1, 2, [3, 4, [5, 6]]]; const flattenedArray = numericArr.flat(); console.log(flattenedArray); // Output: [1, 2, 3, 4, [5, 6]] const deeplyNestedArray = [1, [2, [3, [4, [5]]]]]; const completelyFlattenedArray = deeplyNestedArray.flat(Infinity); console.log(completelyFlattenedArray); // Output: [1, 2, 3, 4, 5]
We have an array called numericArr in the first illustration that contains nested arrays. The flat() function flattens the array by one if a depth parameter is not provided.
In the second example, we have a deeply nested array deeplyNestedArray. By passing Infinity as the depth parameter, the flat() method flattens the array completely, resulting in a single-level array with all the elements flattened.
It's important to note that the flat() method does not modify the original array; instead, it returns a new array with the flattened structure.
Some of the other methods to consider are
with(), of(), group(), every(), at(). I will not explain these here but to study it, you can
go to the Official website and search other functions also there.