JavaScript Array Methods

What is Array in JavaScript?

The Array is the object which enables the collection of multiple items under a single variable name. We can perform array operations using different inbuilt methods in JavaScript. JavaScript arrays can mix different data types.

Arrays index starts from zero, first element of array is at index 0,then second element is at 1 and so on.

How to Declare Array in JavaScript?

• Basic Way to Declare (literal notation):

let hashnode = ["hash", "node", "2022"];
console.log(hashnode);          //returns [ 'hash', 'node', '2022' ]
console.log(hashnode[0]);       //  hash
console.log(hashnode[1]);       // node
console.log(hashnode[2]);      // 2022
console.log(hashnode[3]);     // undefined

• Array constructor with a single parameter

Arrays can be created using a constructor with a single number parameter. An array with its length property set to that number and the array elements are empty slots.

let hashnode = new Array(2);
console.log(hashnode[0]); // undefined

• Array constructor with multiple parameters

If more than one argument is passed to the constructor, a new Array with the given elements is created.

const hashnode = new Array("Hash", "Node");
console.log(hashnode[0]); // "Hash"

Array Methods :

- Array length() Method:

We use the length() method to find out the length of the array. The syntax of length property is: arrayName.length

Example:

let hashnode = ["hash", "node", 2022];
console.log(hashnode.length); // return 3

- Array push() Method:

The push() method adds elements to the end of an array and returns the new length of the array. The syntax of the push() method is: arrayName.push(element1, element2, ..., elementN)

Example:

let hashnode = ["hash", "node", 2022];
console.log(hashnode.push("learn", 2020)); // return 5
console.log(hashnode); // [ 'hash', 'node', 2022, 'learn', 2020 ]

- Array pop() Method:

The pop() method removes the last element from an array and returns that element. The syntax of the pop() method is arrayName.pop()

Example:

let hashnode = ["hash", "node", 2022];
console.log(hashnode.pop()); // return 2022
console.log(hashnode); // [ 'hash', 'node' ]

- Array fill() method:

The fill() method returns an array by filling all elements with a specified value returns the modified array.The syntax of the fill() method is arrayName.fill(value, start, end)

Example:

let hashnode = ["hash", "node", 2022];
// replacing element of array from index 1 to 2 by 10
console.log(hashnode.fill(10, 1, 2)); // [ 'hash', 10, 2022 ]
// replacing element of array from index 0 to 1 by "code"
console.log(hashnode.fill("code", 0, 1)); // [ 'code', 10, 2022 ]

- Array reverse() method:

The reverse() method returns the array in reverse order and returns a reference to the same array.The syntax of the reverse() method is arrayName.reverse()

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.reverse()); // [ 'writeathon', 2022, 'node', 'hash' ]

- Array sort() method:

The sort() method sorts the items of an array in a specific order (ascending or descending) and returns a reference to the same array. The syntax of the reverse() method is arrayName.sort(compareFunction)

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.sort()); // [ 2022, 'hash', 'node', 'writeathon' ]
let number = [20, 5, 12, 200, 56, 75, 1, 54];
console.log(number.sort()); // [1, 12, 20, 200, 5, 54, 56, 75]
// Descending sort in number
console.log(
  number.sort(function (a, b) {
    return b - a;
  })
); // [200, 75, 56, 54, 20, 12, 5, 1]

- Array join() method:

The join() method returns a new string by concatenating all of the elements in an array, separated by a specified separator. Returns a String with all the array elements joined by a separator, separator is optional. The syntax of the join() method is arrayName.join(separator)

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.join(" - ")); // hash - node - 2022 - writeathon

- Array toString method:

The toString() method returns a string formed by the elements of the given array separated by commas. The syntax of the toString() method is arrayName.toString()

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.toString()); // hash,node,2022,writeathon

- Array shift method:

The shift() method removes the first element from an array and returns that element. If the array is empty, undefined is returned and the array is not modified. The syntax of the shift() method is arrayName.shift()

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.shift()); // hash
console.log(hashnode); // [ 'node', 2022, 'writeathon' ]

- Array unshift method:

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array. The syntax of the unshift() method is arrayName.unshift(element1, element2, ..., elementN)

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.unshift("First", 2)); //6
console.log(hashnode); // [ 'First', 2, 'hash', 'node', 2022, 'writeathon' ]

- Array concat method:

The concat() method returns a new array by merging two or more values or arrays. The syntax of the concat() method is arrayName.concat(value1, value2, ..., valueN) Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
let lco = ["hitesh", "chaudhary", "murtuza"];
console.log(lco.concat(hashnode));
// output:  ['hitesh','chaudhary','murtuza','hash','node',2022,'writeathon']
console.log(lco.concat(2022)); //[ 'hitesh', 'chaudhary', 'murtuza', 2022 ]

- Array splice method:

The splice() method returns an array by changing (adding/removing) its elements in place. It returns an array containing the elements that were deleted. The syntax of the splice() method is arrayName.splice(start, deleteCount, item1, ..., itemN) or arrayName.splice(startIndex, HowManyItemsToDelete, NewItemToAdd);

Example:

let hashnode = ["hash", "node", 2022, "writeathon"];
console.log(hashnode.splice(2, 2, "splice")); // [ 2022, 'writeathon' ]
console.log(hashnode); // [ 'hash', 'node', 'splice' ]

- Array lastIndexOf method

The lastIndexOf() method returns the index of the last occurrence of a specified element in the array. The syntax of lastIndexOf() is arrayName.lastIndexOf(searchElement, fromIndex)

Example:

let hashnode = ["hash", "node", 2022, "node", "writeathon"];
console.log(hashnode.lastIndexOf("node")); //3

- Array indexOf method:

The indexOf() method returns the first index of occurrence of an array element, or -1 if it is not found. The syntax of lastIndexOf() is arrayName.indexOf(searchElement, fromIndex)

Example:

let hashnode = ["hash", "node", 2022, "node", "writeathon"];
console.log(hashnode.indexOf("node")); // 1

- Array slice method:

The slice() method returns a shallow copy of a portion of an array into a new array object. Ending index of the selection (exclusive). If not provided, the selection ends at the index of the last element. The syntax of slice() method is arr.slice(start, end)

Example:

let hashnode = ["hash", "node", 2022, "node", "writeathon"];
console.log(hashnode.slice(2, 4)); // [ 2022, 'node' ]

- Array filter method:

The filter() method returns a new array with all elements that pass the test defined by the given function, it does not change the original array. The syntax of filter() method is arrayName.filter(callback(element), thisArg)

Example:

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
// function to check even numbers
function checkEven(number) {
  if (number % 2 == 0)
    return true;
  else
    return false;
}
// create a new array by filter even numbers from the numbers array
let evenNumbers = numbers.filter(checkEven);
console.log(evenNumbers);
// Output: [ 2, 4, 6, 8, 10 ]

- Array map method:

The map() method creates a new array with the results of calling a function for every array element. The syntax of the map() method is arrayName.map(callback(currentValue), thisArg)

Example:

let numbers = [2, 4, 6, 8, 10];
// function to return the square of a number
function square(number) {
  return number * number;
}
// apply square() function to each item of the numbers list
let square_numbers = numbers.map(square);
console.log(square_numbers);
// Output: [ 4, 16, 36, 64, 100 ]

- Array forEach Method:

The forEach() method executes a provided function for each array element, does not change the original array.The syntax of forEach() method is arr.forEach(callback(currentValue), thisArg)

callback - The function to execute on every array element.

currentValue - The current element being passed from the array.

thisArg (optional) - Value to use as this when executing callback. By default, it is undefined.

Example:

let numbers = [1, 3, 4, 9, 8];
// function to compute square of each number
function computeSquare(element) {
  console.log(element * element);
}
// compute square root of each element
numbers.forEach(computeSquare);
/* Output:
1
9 
16
81
64
*/

- Array copyWithin() method:

The copyWithin() method copies array elements from one position to another in the given array. The syntax of copyWithin() method arr.copyWithin(target, start, end)

target - The index position to copy the elements to.

start (optional) - The index position to start copying elements from. If omitted, it will copy from index 0.

end (optional) - The index position to stop copying elements from (end element not included). If omitted, it will copy until the last index.

Example:

let words = ["apple", "ball", "cat", "dog"];
// copies element from index 0 to index 3 
words.copyWithin(3, 0);
// modifies the original array 
console.log(words);
// Output: 
// [ ''apple'', ''ball'', ''cat'', ''apple'' ]

Thanks everyone for reading this Article. Hope you like it.

#iwritecode #learncodeonline