The wonder of Javascript’s array

Array is one of the most important and elegant features in Javascript. Developers, especially those coming from statically typed languages like Java or C# tend to overlook the built-in methods of Javascript’s array.

Photo by Junsheng Chen on Unsplash

There are two main ways to create an array in Javascript.

Using Array class:

let a = new Array
let b = new Array(1, 2, 3)

and using [] syntax:

let c = []
let d = ['a', 'b', 'c']

Javascript is a dynamically typed language, so each item in the array can be of a different type. Think of it as an ArrayList in Java, or List<object> in C#.

let a = [1, '🐓', '🥚', () => {}]
console.log(typeof a[0]) //number
console.log(typeof a[1]) //string
console.log(typeof a[2]) //string
console.log(typeof a[3]) //function

Four ways to loop through an array

There are more ways to traverse an array than the four methods listed here, but they are the ones I find most useful.

Traditional for loop:

const a = ['🐓', 'and', '🥚']
for (let i = 0; i < a.length; i++) {
  console.log(a[i])
}
//🐓
//and
//🥚

If you don’t need the index and just want to have access to the value of each item, for of syntax is more concise:

const a = ['🐓', 'and', '🥚']
for (const item of a) {
  console.log(item)
}
//🐓
//and
//🥚

If functional programming is your jam, map and forEach are higher order functions that were introduced with ES6.

const a = ['🐓', 'and', '🥚']
const b = a.map((item, index) => {
  console.log(index, item)
  return index
})
//0 🐓
//1 and
//2 🥚
console.log(b)
//[0, 1, 2]

Similar to map, forEach traverses each item in the array. However, it does not return any value. Any return value inside the arrow function will just be ignored.

const a = ['🐓', 'and', '🥚']
a.forEach((item, index) => {
  console.log(index, item)
  return item //legal syntax, but will be ignored
})
//0 🐓
//1 and
//2 🥚

Using array as queue

A queue is defined as

In computer science, a queue is a collection of entities that are maintained in a sequence and can be modified by the addition of entities at one end of the sequence and the removal of entities from the other end of the sequence.

In short, a queue allows data to be accessed in a First-In-First-Out (FIFO)manner. Many programming languages have a dedicated data structure for a queue. An array would suffice in Javascript, with push method to enqueue an item and shift method to dequeue an item.

const a = []
a.push('🥚') //a = ['🥚']
a.push('🐣') //a = ['🥚', '🐣']
a.push('🐓') //a = ['🥚', '🐣', '🐓']
let item = a.shift() 
//item = '🥚'
//a = ['🐣', '🐓']
item = a.shift()
//item = '🐣'
//a = ['🐓']
item = a.shift()
//item = '🐓'
//a = []

Using array as stack

Stack is a data structure that supports First-In-Last-Out access principle. It is defined as:

In computer science, a stack is an abstract data type that serves as a collection of elements, with two main principal operations: Push, which adds an element to the collection, and. Pop, which removes the most recently added element that was not yet removed.

Javascript’s Array does have push and pop methods that do exactly what it says on the tin.

const a = []
a.push('🥚') //a = ['🥚']
a.push('🐣') //a = ['🥚', '🐣']
a.push('🐓') //a = ['🥚', '🐣', '🐓']
let item = a.pop() 
//item = '🐓'
//a = ['🥚', '🐣']
item = a.pop()
//item = '🐣'
//a = ['🥚']
item = a.pop()
//item = '🥚'
//a = []

Inserting items

As we have seen from the examples above, push method adds an item at the end of the array. If you want to append another array to the end of the current array, concat is what you need.

const a = [1, 2, 3]
const b = [10, 11]
a.concat(b)
console.log(a)
//[1, 2, 3, 10, 11]

What’s about inserting an item at the other end?

unshift method can be used to add an item at the beginning of the array. unshift returns the length of the array after the item has been inserted.

const a = [1, 2, 3]
const length = a.unshift(0)
console.log(a)
//[0, 1, 2, 3]
console.log(length)
//4

Inserting an item in the middle of an array is also possible using splice method:

const a = [1, 2, 3]
a.splice(1, 0, 1.4) // a = [1, 1.4, 2, 4]
a.splice(2, 0, 1.5) // a = [1, 1.4, 1.5, 2, 4]

Removing items

splice(index, howMany) will do the job.

const a = [1, 2, 3, 4]
a.splice(1,2)
console.log(a)
//[1, 4]

Conclusion

This article only scratches the surface of the wonder of Javascript’s array. Make sure you checkout the documentation for more in-depth information. What is your favourite feature of Javascript’s array?