Javascript Array Methods With Example

Every programming language contains a set of key characteristics that allow programmers to construct large-scale projects. One of them is data types. Regrettably, JavaScript isn't known for its ability to handle a wide range of complicated data types. Arrays, objects, symbols, sets, and maps are the only things it has. Even if it isn't much, it may be sufficient to develop a large-scale solution. In practise, developers have been able to overcome all concerns using merely JavaScript Arrays in the majority of situations. As a result, it is one of those topics that everyone should be well-versed in.

What exactly are arrays?

Arrays are high-level, sophisticated list-like objects that have a length attribute. They may act like lists, but they are not lists; they are objects. They have integer indexes and a plethora of useful ways for handling the items.

You will learn:

1. concat()

Returns a new array that is this array joined with other array(s) and/or value(s).

const letters =  ['a',  'b',  'c'];
const numbers =  [1,  2,  3];  const newArray = letters.concat(numbers);
// newArrat is ['a', 'b', 'c', 1, 2, 3]

2. copyWithin()

Copies a sequence of array elements within the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.copyWithin(2, 0);

3. every()

Returns true if every element in this array satisfies the testing function.

const age=  [2,7,12,17,21]; 
age.every((person)=> person>18); //false

4. fill()

Fills all the elements of an array from a start index to an end index with a static value.

const fill =  new  Array(5).fill(0)
console.log(fill)  // [ 0,0,0,0,0]

5. filter()

Returns a new array containing all elements of the calling array for which the provided filtering function returns true.

var words =  ['spray',  'limit',  'elite',  'exuberant',  'destruction',  'present'];
const result = words.filter(word  => word.length  >  6);
console.log(result);

6. find()

Returns the found element in the array, if some element in the array satisfies the testing function, or undefined if not found.

let arr = [
    { name:"string 1", value:"this", other: "that" },
    { name:"string 2", value:"this", other: "that" }
];

let obj = arr.find(o => o.name === 'string 1');

console.log(obj);

7. findIndex()

Returns the found index in the array, if an element in the array satisfies the testing function, or -1 if not found.

const array1 = [5, 12, 8, 130, 44];
const search = element => element > 13;
console.log(array1.findIndex(search));
// expected output: 3

const array2 = [
  { id: 1, dev: false },
  { id: 2, dev: false },
  { id: 3, dev: true }
];
const search = obj => obj.dev === true;
console.log(array2.findIndex(search));
// expected output: 2

8. forEach()

Calls a function for each element in the array.

const products =  [  
	{ name:  'Laptop', price:  32000, brand:  'Lenovo', color:  'Silver'  },  
	{ name:  'Phone', price:  700, brand:  'Iphone', color:  'Golden'  },  
	{ name:  'Watch', price:  3000, brand:  'Casio', color:  'Yellow'  },  
	{ name:  'Aunglass', price:  300, brand:  'Ribon', color:  'Blue'  },  
	{ name:  'Camera', price:  9000, brand:  'Lenovo', color:  'Gray'  },
]; 
products.forEach(product  =>  console.log(product.name));  //Output: Laptop Phone Watch Aunglass Camera

9. includes()

Determines whether the array contains a value, returning true or false as appropriate.

var colors =  ["red",  "blue",  "green"];  
var hasRed = colors.includes("red");  //true  
var hasYellow = colors.includes("yellow");  //false

10. join()

Joins all elements of an array into a string.

let array =  [0,  1,  2,  3,  4,  5];  
var string = array.join("");  
console.log(string);  // -> 012345

11. map()

Returns a new array containing the results of calling a function on every element in this array.

const array =  [2,  5,  9];
let squares = array.map((num)  => num * num);
console.log(array);  // [2, 5, 9]  
console.log(squares);  // [4, 25, 81]

12. push()

Adds one or more elements to the end of an array, and returns the new length of the array.

//the array comes here  
var numbers =  [1,  2,  3,  4];  //here you add another number 
numbers.push(5);  //or if you want to do it with words  
var words =  ["one",  "two",  "three",  "four"];  //then you add a word 
words.push("five")

13. reverse()

Reverses the order of the elements of an array in place.

var arr =  [1,2,3,4]; 
arr.reverse();  
console.log(arr); // 4,3,2,1

14. slice()

Extracts a section of the calling array and returns a new array.

let numbers =  [1,  2,  3,  4,  5,  6,  7,  8,  9,  10];  
let newArray = numbers.slice(4,8);  
console.log("The sliced arrays is:", newArray)  
// Output: The sliced arrays is: [ 5, 6, 7, 8 ]

15. some()

Returns true if at least one element in this array satisfies the provided testing function.

const age=  [2,7,12,17,21]; 
age.some(function(person){  
	return person >  18;
});  //true

16. sort()

Sorts the elements of an array in place and returns the array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];  
fruits.sort(); //Apple,Banana,Mango,Orange

17. splice()

Adds and/or removes elements from an array.

const fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");
// Banana,Orange,Lemon,Kiwi,Apple,Mango

If you liked this article, be sure to ❤️ it.