Introduction To JavaScript Arrays

This post will give you a quick overview of what JavaScript Arrays are and how we can utilize them to store data.

What is an Array?

An array is a numerically indexed map of values or in short, an array is a way of storing a list of data. A JavaScript array is simply an enhanced object with a unique constructor and literal syntax. All properties and methods are inherited from Array.prototype object.

Creating JavaScript Arrays

Let say, we want to store a group of cities without using arrays. Here is how we have to define all cities in JavaScript.

const city1 = 'London';
const city1 = 'Paris';
const city1 = 'Berlin';
const city1 = 'Milan';
const city1 = 'Vienna';

As you can see in the above code, we have to define all cities separately which makes our code WET (Write Everything Twice) which is not a good practice of writing code. We want to make our code DRY (Don’t Repeat Yourself), we can achieve that with the help of arrays by grouping the cities into a single array like below:

const cities = ['London', 'Paris', 'Berlin', 'Milan', 'Vienna'];

Much simple and short isn’t.

There are different ways of defining an array, you can first define an empty array or start with an array with data, just like below:

// empty array
const cities = [];

// with data
const cities = ['London', 'Paris', 'Berlin', 'Milan', 'Vienna'];

Using New Constructor Method

You can also create an array using the constructor method by passing the number of elements want in the array like below:

// Creating a new array by defining it's elements
const cities = new Array(4);

cities.length; // 4

Adding Data to Array

There are two ways of adding data into an array:

1. Using bracket notation
2. Using array methods

Bracket Notation

As I said earlier, arrays are numerically indexed map of values, so index of cities = []; start from 0. We can pass the indexed value to variable and then start adding the values like below:

const cities = [];

// Add first item
cities[0] = 'London';
// Add second item
cities[1] = 'Paris';
// output the values of array
console.log(cities); // ['London', 'Paris']

Array Methods

To add values to any existing array, we can use the unshift() and push() method. Unshift method is used to add a value right at the beginning of an array.

const cities = ['London', 'Paris'];
cities.unshift('Berlin');

console.log(cities); // ['Berlin', 'London', 'Paris']

Push method is used to add a value to an array which will be placed after the last element of an array. Like below:

const cities = ['London', 'Paris'];
cities.push('Berlin');

console.log(cities); // ['London', 'Paris', 'Berlin']

Data Types Support for Arrays

You can store any object or primitive type data in an array. Multiple types of data can co-exist in the same array.

const data = [1, 'Jhon Mike', ['Developer','Some Company', null], undefined];

As you can see in above code, we can use all type of data in an array and also arrays can have nested arrays.

Accessing Array Values

Array elements are simply object properties and are accessed in the same way we use an object. As property identifier in an object is a string so the index of an array is also a string, not a number.

We can use the bracket notation to access the value of an array like below:

const cities = ['London', 'Paris', 'Berlin', 'Milan', 'Vienna'];

cities['3']; // Milan
cities[1]; // Paris

Updating Array Value

We can use the bracket notation to update value of an array like below:

const cities = ['London', 'Paris', 'Berlin', 'Milan', 'Vienna'];

cities[1] = 'Manchester'; // replace Paris with Manchester

console.log(cities); // ['London', 'Manchester', 'Berlin', 'Milan', 'Vienna']

Final Words

That’s all for now. There is a lot of things to cover in JavaScript Arrays which I will cover in the coming posts. If you have any question, please leave it in the comments box below.