JavaScript #14 — Arrays

These JavaScript articles are written for people who are interested in coding and are meant to provide an introduction to the programming world.

You are going to learn what are arrays in programming in this article.

Array

An array is a special type of variable that can hold multiple values.

Imagine you need to store a list of values but you don’t know how many values exactly it is because those values might be coming from a user or other sources of data. That means you cannot dynamically create multiple variables to hold all the values, like this:

let name1 = "John"
let name2 = "Jimmy"

But you need to use an array. Let’s explore how the arrays are defined in the next chapter.

It is possible to store 0 to 4 294 967 296 (which is equal to 2³²) items into an array in JavaScript.

Syntax

The values in an array (a.k.a list) need to be surrounded by [ and ].

Let’s start from the beginning. An empty array is defined as follows.

let names = []

An array with a single value looks like this.

let names = ["John"]

An array with multiple values looks like this. It is a comma-separated list of values.

let names = ["John", "Jimmy"]

An array can be filled in with values of any type.

let active = [true, false]
let ages = [12, 25]
let placeholders = [undefined, undefined]

It is also possible to mix different types in a single array.

let values = [true, "Jimmy", 25]

An array can contain another array.

let values = [ 
  [true, "Jimmy", 25],
  [true, "John", 29]
]

Try to print out the whole array to see how it is represented in the web browser console. It is very useful for debugging, figuring out what is going on with code when running the code.

<script>
  let values = [true, "Jimmy", 25]
  console.log(values)
</script>

Accessing values

The arrays in programming languages are indexed. That means that it is possible to access any value by its index, which starts from a zero.

let values = [true, "Jimmy", 25]
let isActive = values[0]
let name = values[1]
let age = values[2]
console.log(isActive)
console.log(name)
console.log(age)

If an attempt to get a value by a non-existing index is made, undefined is returned.

let values = [true, "Jimmy", 25]
let value = values[3]
console.log(value)

It is needed to check how many items are in the array (what is the length of an array) to prevent getting values from non-existing indexes. The array type contains a variable length that always contains the number of items there are.

let values = [true, "Jimmy", 25]
if (values.length > 2) {
  let value = values[3]
  console.log(value)
}

The length variable of an array can be used to get the last field.

let values = [true, "Jimmy", 25]
let last = values[values.length - 1]
console.log(last)

Adding values

An array provides many functions that are used to manipulate its values. One of the functions is to add a value into an array is a push function. The push function takes a value that is sent to it and adds it to the array.

If the array is empty, it is going to add the value on the first (0th) position. If there would be a value already, it would be added behind the existing value, on 1st position.

That means push function always add a value at the end of the array.

let values = []
values.push("Jimmy")
values.push("John")
console.log(values)

There is another function named unshift that adds the element as the first element, moving all the other elements by one spot.

let values = []
values.unshift("Jimmy")
values.unshift("John")
console.log(values)

Changing values

The values in an array can be changed by re-assigning the value on a specified index.

let values = []
values.push("Jimmy")
values.push("John")
console.log("values before:",values)
values[0] = "Ashley"
console.log("values after:",values)

Removing values

There is a function shift that removes the first value from an array and also returns the removed item.

let values = []
values.push("Jimmy")
values.push("John")
console.log(values)
let removedItem = values.shift()
console.log(removedItem)
console.log(values)

There is also a function to remove and return the last item, called pop.

let values = []
values.push("Jimmy")
values.push("John")
console.log("values before:", values)
let removedItem = values.pop()
console.log("removed items:", removedItem)
console.log("values after:", values)

We need to also know how to remove a value on any index (position). The following code is showing how to remove an item on specified index.

let values = ["Jimmy", "John", "Ashley"]
console.log("values before:", values)
let removedItems = values.splice(1)
console.log("removed items:", removedItems)
console.log("values after:", values)

It is possible to define a range of indexes that should be removed from the array. The first parameter of splice function is the index of the removed array. The second parameter is saying how many items to remove.

let values = ["Jimmy", "John", "Ashley"]
console.log("values before:", values)
let removedItems = values.splice(1, 2)
console.log("removed items:", removedItems)
console.log("values after:", values)

Check if a value exists in an array

If the code needs to check whether a value is contained in an array, the array has a function called includes for it.

let values = ["Jimmy", "John", "Ashley"]
let hasJohn = values.includes("John")
console.log(hasJohn)

Final words

Congrats, you have learned something new today! The next step is to learn how to work with the arrays.

Next Step

Work in progress: JavaScript #15 — Loops