Array Methods In JavaScript

Array Methods In JavaScript

Array Manipulation Methods in JavaScript

Array

An array is an object in JavaScript, it enables us to store different elements under one variable name and it has different methods to perform common operations on arrays.

Characteristics Of Arrays (In the Context Of JavaScript)

1. In JavaScript, arrays are described as an object not primitive or any data types.

2. Arrays are resizable and contain a mix of different data types.

3. Array's element can only be accessed by non-negative integers as indexes of an array.

4. Arrays in JavaScript are zero-indexed, which means the counting of the elements in arrays, starts from zero, not from one.

Syntax

A pair of Square Brackets( [ ] ) is used to symbolize an array in JS. The elements are separated by commas(,) and there are no restrictions about data types, you can use different data types like boolean, string, number, object, etc. in a single array.

const arrayName=["element1", "element2", "element3",......, "elementN"];

Example of an Array

const fruitName=["Apple", "Banana", "Watermelon", "Kiwi", "Oranges"];
console.log(fruitName);

// ["Apple", "Banana", "Watermelon", "Kiwi", "Oranges"] (output)

Using Array Construction Method to Create Array

It is just another way to create an array, you can achieve the same thing from both methods.

Syntax

const arrayName = new Array('a', 'b' , 'c', 'd');
console.log(arrayName);

// [ 'a', 'b' , 'c', 'd' ] (output)

Array Methods

1. push()

The push() method is used to insert an element in an array, it adds the new element at the end of an array. This method doesn't create a new array, it just updates the existing(original) array.

EXAMPLE

const ourArray=["me", "you", "yours","their"];
ourArray.push("here");
console.log(ourArray);

// ["me", "you", "yours", "their", "here"](output)

2. unshift()

The unshift() method is used to insert an element in an array, from the beginning. This method doesn't create a new array, it just updates the existing(original) array.

EXAMPLE

const ourArray=["me", "you", "yours", "their"];
ourArray.unshift("here");
console.log(ourArray);

// [ "here", "me", "you", "yours", "their"]  (output)

3. pop()

The pop() method is used to delete an element in an array, from the end. This method also updates the existing (original) array, not create another one.

EXAMPLE

const ourArray=["me", "you", "yours", "their"];
ourArray.pop();
console.log(ourArray);

// ["me", "you", "yours"]  (output)

4. shift()

The shift() method deletes the first element of an array , it just updates the original array by deleting the first element.

EXAMPLE

const ourArray=["me", "you", "yours", "their"];
ourArray.shift();
console.log(ourArray);

// ["you", "yours", "their"]  (output)

5. slice()

The slice() method slices out the part of the array, always remember it does not change the original array. You can create a new array of the sliced part. slice(a,b) method has two parameters, a will define the starting point ( by default it is 0 ) and b will define the ending point and b is not included in a new array.

EXAMPLE

const ourArray=["me", "you", "yours", "their"];
const newArray=ourArray.slice(1,3);
console.log(newArray);

// ["you", "yours"]  (output) 
//There is no change in ourArray

6. splice()

The splice() method is used to add/ delete the elements of an array. The splice() method overwrites the original array. splice(a,b, "add1", "add2"...), it basically has 2 parameters, a which defines the starting point, b defines how many elements are to be deleted and parameters after a, and b is elements to be added in original arrays.

EXAMPLE

const ourArray=["me", "you", "yours", "their"];
ourArray.splice(1,2,"to","from");
console.log(ourArray);

// ["me", "to", "from", "their"](output)

7. concat()

The concat() method merges one and more arrays and returns a merged array. It does not change the original or existing arrays.

EXAMPLE

const intSetOne=[1,2,3,4,5];
const intSetTwo=[6,7,8,9];
const intSet=intSetOne.concat( intSetTwo);
console.log(intSet);

// [1, 2, 3, 4, 5, 6, 7, 8, 9](output)

8. toString()

The toString() method is used internally by JavaScript when an object needs to be displayed as a text (like in HTML), or when an object needs to be used as a string. This method automatically covert arrays in comma-separated strings and then the console logs it.

EXAMPLE

const set=[1,2,3,4,5];
set.toString();

// '1,2,3,4,5' (output)

9. join()

The join() method also joins all array elements into the string but here we can specify the separator. The default separator is a comma(,).

EXAMPLE

const set=[1,2,3,4,5];
set.join("@");

// '1@2@3@4@5' (output)

10. includes()

The includes() method in an array determines the presence of the element, If the element is found, the method returns true, and false otherwise.

EXAMPLE

const numberSet=[121,43,56,77,09];
numberSet.includes(43);

// true (output)

11. indexOf()

The indexOf() method is used to determine the index position of the element in an array . It returns the index of the first occurrence of an element in the array. If an element is not found, the indexOf() method returns -1.

EXAMPLE

const numberList=[1,3,5,7,9,];
numberList.indexOf(1);        // 0 (output) 
numberList.indexOf(11);       // -1(output)

12. lastIndexOf()

The lastIndexOf() helps you find the index of the last occurrence of an element in the array , it returns -1 if the element is not found.

EXAMPLE

const set=[1,67,2,1,45,76,1];
set.indexOf(1);           //   0  (output) 
set.lastIndexOf(1);      //   6  (output)

13. reverse()

The reverse() method is used to reverse the order of elements in an array.

EXAMPLE

const alpha=['a','b','c','d','e'];
alpha.reverse();

// ['e', 'd', 'c', 'b', 'a']  (output)

14. sort()

The sort() method sorts the array's elements alphabetically.The default sorting order is ascending. This method overwrites the original array and changes it.

EXAMPLE

onst names = ['tom', 'alex', 'bob'];

names.sort(); // returns ["alex", "bob", "tom"]

15. map()

The map() method creates a new array populated with the results of calling a provided function on every element in the calling array.

EXAMPLE

const num = [1, 2, 3, 4];
const numSqr=num.map(x => x**2 );
console.log(numSqr);

// [1, 4, 9, 16] (output)

16. filter()

The filter() method filters down the elements from the given array which satisfy the given filter condition.

EXAMPLE

const list=["abc" , "defg" , "hijkl", "mnopqr", "stuvwxy"];
const filterList = list.filter(word=> word.length>=5);
console.log(filterList);

// ['hijkl', 'mnopqr', 'stuvwxy'] (output)

17. reduce()

The reduce() method applies a reducer function on each of the array elements and returns an output value.

EXAMPLE

const list = [1, 2, 3, 4,7,9];
const initialSum=0;
const totalSum= list.reduce(
  (accumulator, currentValue) => accumulator + currentValue,initialSum);
console.log(totalSum);

// 26 ( 1+2+3+4+7+9)

18. every()

The every() method tests whether all elements in the array pass the test implemented by the provided function. It returns a Boolean value.

EXAMPLE

const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));

// true (output)

19. find()

This method returns the first element in the provided array that satisfies the provided testing function. If no values satisfy the testing function, undefined is returned.

EXAMPLE

const numList = [85, 512, 38, 3130, 3344];

const found = numList.find(element => element > 1000);

console.log(found);

// 3130 (output)

20. findIndex()

The findIndex() method returns the index of the first element in an array that satisfies the provided testing function. If no elements satisfy the testing function, -1 is returned. EXAMPLE

const numList = [85, 512, 38, 3130, 3344];

const found = numList.findIndex(element => element > 1000);

console.log(found);

// 3 (output)

21. findLast()

The findLast() method iterates the array in reverse order and returns the value of the first element that satisfies the provided testing function. If no elements satisfy the testing function, undefined is returned.

EXAMPLE

const numList = [85, 512, 38, 3130, 3344];

const found = numList.findLast(element => element > 1000);

console.log(found);

// 3344 (output)

22. at()

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

EXAMPLE

const numList=[1,3,5,7,9,11,13];

numList.at(1) ; // 3
numList.at(-1) ; // 13
numList.at(-4); // 7

That's the wrap, hope you enjoyed it. One thumbs up for your and my effort.

Thank You!