- Published on
Javascript Array Methods With Example
- Authors
- Name
- Harendra Kumar Kanojiya
- @harendraverma2
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:
- What exactly are arrays?
- 1. concat()
- 2. copyWithin()
- 3. every()
- 4. fill()
- 5. filter()
- 6. find()
- 7. findIndex()
- 8. forEach()
- 9. includes()
- 10. join()
- 11. map()
- 12. push()
- 13. reverse()
- 14. slice()
- 15. some()
- 16. sort()
- 17. splice()
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.