JavaScript Array Methods
Tags: Javascript Tips, Javascript Development, JavaScript, Arrays, Array Methods

Array Methods

Now that we have declared our array, let’s dive into Array methods:

map()

This method creates a new array with the results of calling a function for every array element. It calls the provided function once for each element in an array, in order.

Example:

const numbers = [5, 10, 15, 20];

const numbersMap = numbers.map(element => element * 5);

console.log(numbersMap); //[25, 50, 75, 100];

2. concat()

This method is used to join two or more arrays. It does not change the existing arrays, but returns a new array, containing the values of the joined array.

Example:

const arr1 = [1,2,3];

const arr2 = [4,5,6];

const arr3 = arr1.concat(arr2);

console.log(arr3); //[1,2,3,4,5,6]

3. copyWithin()

This method copies array elements to another position in the array, overwriting the existing values.

This method will never add more items to the array.

Example:

const numbers = [1,2,3,4];

const numbersCopy = numbers.copyWithin(2,0);

console.log(numbersCopy); // [1,2,1,2];

4. every()

This method checks every element in the array that passes the condition, returning true or false as appropriate.

If it finds an array element where the function returns a false value, every() returns false (and does not check the remaining values).

If no false occur, every() returns true.

Example:

const numbers = [1,2,3,4];

const isGreaterThanFive = numbers.every(num => num > 5);

console.log(isGreaterThanFive); // false const isLessThanFive = numbers.every(num => num < 5);

console.log(isLessThanFive); // true

5. fill()

This method fills the specified elements in an array with a static value. We can specify the position of where to start and end the filling. If not specified, all the elements will be filled.

This method overwrites the original array.

Example:

const withoutStartEnd = [1,2,3,4];

withoutStartEnd.fill(5);

console.log(withoutStartEnd); //[5,5,5,5] const withoutEnd = [1,2,3,4];

withoutEnd.fill(5,2);

console.log(withoutEnd); //[1,2,5,5] const withStartEnd = [1,2,3,4];

withStartEnd.fill(5,1,2);

console.log(withStartEnd); //[1,5,3,4]

6. filter()

This method creates an array filled with all array elements that passes a condition inside the provided function.

Example:

const numbers = [1,2,3,4];

const filtered = numbers.filter(element => element === 2);

console.log(filtered); //[2]

7. find()

This method returns the value of the first element in an array that passes a condition. It executes the function once for each element present in the array.

Example:

const numbers = [10,20,30,40];

const findNumber = numbers.find(element => element < 30);

console.log(findNumber); // 10

8. findIndex()

This method returns the index of the element in an array that passes a condition. It executes the function once for each element present in the array.

If the condition fails, it simply returns -1.

Example:

const numbers = [1,2,3,4];

const indexFound = numbers.findIndex(element => element === 3);

console.log(indexFound); //2 const indexNotFound = numbers.findIndex(element => element === 5);

console.log(indexNotFound); // -1

9. indexOf()

This method searches the array for the specified item, and returns it’s position. The search will start at the specified position, or at the beginning if no start position is specified, and end the search at the end of the array.

If the item is not found, it simply returns -1.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

const indexFound = fruits.indexOf('Mango');

console.log(indexFound); // 1 const indexNotFound = fruits.indexOf('Pineapple');

console.log(indexNotFound); // -1

10. includes()

This method determines whether an array contains a specified element. If the array contains the element, it returns true, and false if not.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

const fruitsInclude = fruits.includes('Mango');

console.log(fruitsInclude); // true

11. shift()

This method removes the first element of an array, and returns the new length. It changes the original array.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

fruits.shift();

console.log(fruits); // ['Mango','Orange','Banana']

12. unshift()

This method adds new items to the beginning of an array, and returns the new length. It changes the original array.

Example:

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

fruits.unshift('Pineapple');

console.log(fruits); // ['Pineapple', 'Apple', 'Mango', 'Orange', 'Banana']

13. splice()

This method adds/remove items to/from an array, and returns the removed item(s).

Example: Add items to array.

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

fruits.splice(2, 0, "Lemon", "Kiwi");

console.log(fruits); // ['Apple', 'Mango', 'Lemon', 'Kiwi', 'Orange', 'Banana']

Example: Remove item from array

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

fruits.splice(2, 1);

console.log(fruits); // ['Apple', 'Mango', 'Banana']

14. slice()

This method returns the selected elements in an array, as a new array object.

This method selects the elements starting at the given start argument, and ends at, but does not include, the given end argument.

const fruits = ['Apple', 'Mango', 'Orange', 'Banana'];

const newFruits = fruits.slice(1, 3);

console.log(newFruits); // ['Mango', 'Orange']

15. sort()

This method sorts the items of an array. The sort order can be either alphabetic or numeric, and either ascending or descending.

By default, this method sorts the values as string in alphabetical and ascending order.

Example: