Introduction

In this article, we shall do a quick intro to Arrays in JavaScript. Let’s jump right in!

JavaScript Array

JavaScript offers array-like objects that offer more flexibility and work a little different compared to other languages like Java and C++ Elements are stored in a contiguous manner(in a row version) and are zero-indexed, the first element is number 0...n in that fashion.

1. Declaring and initializing an Array

// an empty array
let fruits = []

// with elements
let carBrands = ['Audi', 'Benz', 'Toyota']

Arrays can hold different types and are not restricted to a single type, say Strings or Numbers

let mixed = [0x80, 'Tuesday', 2, [], {}]

2. Accessing an Array element using the index position

To access an element in an array we use the index position of the element, for example:

let fruits = ['banana', 'orange', 'avocado', 'mango']

// first element
let banana = fruits[0] // arrays are zero-indexed, first element is numbered from zero-th position
let orange = fruits[1] // second element

3. Getting the length of an Array

Array object provides a length property for determining the size of the array, this represents the number of elements stored in a given array.

let fruits = ['banana', 'orange', 'avocado', 'mango']
console.log(fruits.length) // Prints 4

4. Looping over Array

In most instances, we would like to loop over each element in the array and use the element in our programs. The good old for...loop can be used but recent improvements provide a forEach method to loop over array elements which are safer and more readable than the former.

let fruits = ['banana', 'orange', 'avocado', 'mango']

// with traditional for...loop
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]) // access each element by its index
}
// with for-each
fruits.forEach((fruit, index) => {
  console.log(`${fruit} at position: ${index}`)
})

5. Array operations

a. Adding an element to the end of an array:

Array object provides push method. This method appends(adds to the end of an array) a new element(s) to the end of the array.

let fruits = ['banana', 'orange', 'avocado', 'mango']
fruits.push('Guava')
console.log(fruits) // ['banana', 'orange', 'avocado', 'mango', 'Guava']

b. Add elements at the end of an array

unshift method adds elements at the first position of an array

let points = [0.1, 0.2, 0.4, 0.4]
poinst.unshift(0.5, 0.9, 1.0)
console.log(points) //[0.5, 0.9, 1.0, 0.1, 0.2, 0.4, 0.4]

We could also use the spread operator to copy an array to form a new Array. For example:

let points = [1, 2, 4,3,3,]
let new points = [...points, 12, 2, 4, ,3] // becomes [1, 2, 4, 3, 3, 12, 2, 4, 3]
c. Joining two arrays

concat() method enables us to join existing arrays. When we join two arrays, we copy over the other elements into the array we are joining with: example:

let animals = ['cats', 'dogs', 'birds', 'fish']
let insects = ['cockroaches', 'mosquitos', 'ants']

animals.join(insects) // [cats', 'dogs', 'birds', 'fish', 'cockroaches', 'mosquitos', 'ants']

d. Remove the first element in an array

shift() method enables use to remove the first item from an array and return the element, for example:

let animals = ['cats', 'dogs', 'birds', 'fish']
let cats = animals.shift() // remove the first element in the array, alters the original array
// the `animals` array:
console.log(animals) // ['dogs', 'birds', 'fish']

e. Remove multiple items

splice() method enables to remove several items at the beginning of an array and the splice() method takes: position to start deleting from and a count of the number of elements to delete.

let animals = ['cats', 'dogs', 'birds', 'fish']
animals.splice(0, 2)
// the `animals` array:
console.log(animals) // ['birds', 'fish']

Other useful array methods included: find() method, use to find an element based on the given criteria filter() method, filters an array based on a given criteria map() method, transforms each element in an array based on a given criteria

Summary

  • Arrays help us store/group elements under one variable and access each of the elements based on the zero-th index
  • Array methods provide useful ways to perform operations and manipulations on an array, such as removing, adding elements