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 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 in Java, or 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 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, syntax is more concise:

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

If functional programming is your jam, and 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 , 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 method to enqueue an item and 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 and 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, method adds an item at the end of the array. If you want to append another array to the end of the current array, 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?

method can be used to add an item at the beginning of the array. 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 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

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?

Software developer