Using Arrays in JS
Introduction
Arrays are list of objects that can be manipulated in various ways. They can be any type of objects. The elements of an array can accessed through the indexing. Arrays can be declared using the keyword let or const. let is for variable and const is for arrays that doesn’t change. For e.g:
1
2
let arr = [1,2,3];
const arr2 = [1,2,3];
Another way to create an array is the new keyword, like this:
1
2
let names = new Name() ;
Array('Ram', 'Shyam', 'Hari');
Array Methods
There are various methods available in js to manipulate the array. Some of them are explained below:
Array.forEach
Array.forEach method will iterate through the each collection of an array. We cannot return a value from it. It takes a callback function where we can execute the code.
1
2
3
4
5
6
var fruits = ["apple", "orange", "cherry"];
fruits.forEach(fruit);
function fruit(item, index) {
document.querySelector(".demo").innerHTML += index + ":" + item + "<br>";
}
Output: 0:apple 1:orange 2:cherry
Array.find
Array.find method will return the element in the array withe the given condition. For e.g
1
2
3
4
5
6
7
8
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.querySelector(".demo").innerHTML = ages.find(checkAdult);
}
Output: 18
Array.findIndex
The findIndex() method returns the index of the first element in an array that pass a test (provided as a function). It executes the function once for each element present in the array.
1
2
3
4
5
6
7
8
9
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.querySelector(".demo").innerHTML = ages.findIndex(checkAdult);
}
Output: 2
Array.filter
Array.filter() will return an array of items that meet the given condition. It does not execute the function for array elements without values.
1
2
const array = [1,2,3];
const numArray = array.filter(a => a ==2);
Output: 2
Array.inlcudes
Array.includes mehod checks if item exists in an array. This method returns true if the array contains the element, and false if not.
1
2
const array = [1,2,3];
const includesTwo = array.includes(2);
Output: true
Array.some
Array.some method checks if some items meet the condition given. some() does not execute the function for array elements without values.
1
2
3
4
5
6
7
8
9
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.querySelector(".demo").innerHTML = ages.some(checkAdult);
}
Output: true
Array.every
Array.every method checks if every items meets the condition given. This method checks if all elements in an array pass a test (provided as a function).
1
2
3
4
5
6
7
8
9
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.querySelector(".demo").innerHTML = ages.every(checkAdult);
}
Output: false
Array.isArray
Array.isArray method check if an object given is an array. It is a convenient way to check if an element is an array.
1
2
3
4
5
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.querySelector(".demo");
x.innerHTML = Array.isArray(fruits);
}
Output: true
Array.slice
The slice() method returns the selected elements in an array, as a new array object. It returns a new array form startIndex to endIndex -1 .
1
2
3
const arr = [1,2,3,4,5];
const newArr = arr.slice(0,2);
console.log(newArr);
Output: [1,2]
Array.join
Array.join will return a string by concatenating the entries after they are converted to string with separator between each entry. It work best with string and number arrays.
1
2
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join();
Output: Banana,Orange,Apple,Mango
Array.push(newElement) Arrray.push adds a new element to an array.
1
2
3
let arr = [1.2.3];
arr.push(4);
console.log(arr)
Output: [1,2,3,4]
Array.pop
Array.pop method removes the last element of the array.
1
2
3
let arr = [1,2,3,4];
arr.pop();
console.log(arr);
Output: [1,2,3]
Array.map
Array.map method returns a new array which transforms the existing array’s element by calling the mapFunction. It takes one argument, which is the array element.
1
2
3
4
var numbers = [4, 9, 16, 25];
var x = numbers.map(Math.sqrt);
document.querySelector(".demo").innerHTML = x;
Output:
2,3,4,5