Using Arrays in JS

5 Min. Read
Oct 16, 2019

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