JavaScript Holy Grail — Part 1 : Arrays
One stop article providing all information related to the JavaScript Arrays :- classification of array methods, De-structuring assignment and usage of Spread operator for arrays
Introduction :-
To initialize the array,
let arrayName = [ ];
arrayName.length — to find the number of elements in the array (it is a property not a method)
Adding new values to Existing Array -
arrayName.push(…items) : —
The push method adds one or more elements to the end of an existing array.
It returns the length of the modified array.
arrayName.unshift(…items) : —
The unshift method adds one or more elements at the beginning of an existing array.
It returns the length of the modified array.
arrayName.concat(…items) : —
The concat method adds one or more elements or merges N numbers of arrays to the given array,
This method does not mutate the original array but instead returns a new array.
Removing values from Existing Array -
arrayName.pop( ) : —
The pop method removes an element from the end of the array.
It returns the element removed from the array and also mutates the existing array.
arrayName.shift( ) : —
The shift method removes an element from the beginning of the array.
It returns the element removed from the array and also mutates the existing array.
Checking conditions on Array elements -
arrayName.includes( searchElement , fromIndex ) : —
The include method returns true if the search value is present in the array, else, it would return false.
The second parameter specifies the index from which the search should start. It is an optional parameter with the default value being the array length.
arrayName.every( callbackFn, thisValue ) : —
The every method returns a Boolean value true if all the elements in the given array return a truthy value on the callback function, else it would return false.
arrayName.some( callbackFn, thisValue ) : —
The some method returns a Boolean value true if at least one element in the array returns a truthy value on the callback function, else it would return false.
arrayName.filter( callbackFn, thisValue ) : —
The filter method returns a new array containing all the elements of the current array that returns a truthy value on the callback function.
Finding a particular element or its index in Array -
arrayName.indexOf( searchElement[, fromIndex] )
The indexOf method returns the first index at which the provided search element is present in the given array, or -1 if it is not present.
The second parameter specifies the index from which the search should start. It is an optional parameter with the default value being the array length.
arr.lastIndexOf( searchElement[, fromIndex] ) : —
The lastIndexOf method returns the last index at which a provided search element is present in the given array, or -1 if it is not present.
The second parameter specifies the index at which the search should end. It is an optional parameter with the default value being the array length.
arrayName.find( callbackFn, thisValue) : —
The find method returns the value of the first element in the array that returns a truthy value on the callback function.
If no such value is present, it returns undefined.
arrayName.findIndex( callbackFn, thisValue) : —
The findIndex method returns the index of the first element in the array that returns a truthy value on the callback function.
If no such value is present, it returns -1.
Extracting Data From the Existing Array -
arrayName.map( callbackFn, thisValue) : —
The map method returns a new array containing the return value of invoking the callback function on every array element.
arrayName.slice(startIndex, endIndex) : —
The slice method returns a new sub-array starting from startIndex to (endIndex — 1).
The second parameter is an optional parameter with the default value being the array length.
arrayName.join(separator) : —
The join method returns a new string by concatenating all the array elements separated by a specified separator string.
The separator is an optional parameter with the default value being a comma (,).
If an element is undefined, null, or an empty array [ ], it is converted to an empty string.
Rearranging the Array -
arrayName.reverse( ) : —
The reverse method reverses an array mutating the provided array.
It returns the reversed array.
arrayName.sort( ) : —
The sort method sorts an array in place (mutating the original array).
However, while sorting an array containing numbers, the normal sort function won’t work as the elements are first converted to strings and then compared.
In such scenarios, a compare function is provided according to which elements are compared.
De-structuring Arrays -
ES6 de-structuring assignment allows extracting elements of an array into individual variables.
The first element equals variable x, the second element equals the variable y, and the third element equals the variable z. The rest of the array values are ignored.
● To simply skip one value in the array,
The second element skips while assigning value to variables.
● Assigning Default Values,
In such cases, z will be undefined. Such situations are avoided by providing default values for the variables.
Spread Operator -
ES6 spread operator allows to return individual elements from an array.
- Useful in adding elements to an array.
- Useful in merging 2 or more arrays.
- Passing elements of an array as function arguments.
