\
Arrays in Javascript are a simple, one-dimensional way to store simple sets of data. Arrays are non-unique, which means they can store duplicates (unlike sets). They also follow typical prototype inheritance, as with other Javascript types. That just means that all arrays inherit a certain set of specific methods, like `length`, some(), every(), concat(), any many more.

## Making a Javascript Array

The most straightforward way to create an array is by putting items in square brackets. 

\
Each comma-separated item is an array element, and the square brackets dictate where the array begins and ends:

```javascript
let myArray = [ 1, 2, 3, 4, 5, 6 ]
```

\
Although this is a common way to define an array, you can also use `new Array()`:

```javascript
let myArray = new Array(1, 2, 3, 4, 5, 6)
```

\
Above we have defined a simple array of 6 items, those being all the numbers from 1 to 6. We have now stored our data in the array format. Similarly, we can also store strings or other standard Javascript types;

```javascript
let myArray = [ 'hello', 'world' ]
let mySecondArray = [ (hi) => { console.log(hi) }, { some: "Object" }, 1, 2, 3, new Set([1, 2, 3, 4, 4]) ]
```

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
```

## Getting the length of an array

As mentioned before, all arrays have a standard set of methods that work on them. 

\
The most commonly used is perhaps `lngth`, which we can use to get the size of an array:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length; // Returns 5, since there are 5 items.
```

## Accessing properties in an array

Arrays are basically objects in Javascript, where every element is indexed by a number. As such, we can access array elements using the `obj[key]` method as we do in objects, where `key` will always be a number.

\
As with other languages, we usually start counting at 0, so the first item has an index of 0, and as such, the second item has an index of 1. <strong>To access the second item, we may do this:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray[1] // Returns 🍊
```

### Getting the last element of an array

Since we know the length of an array, we can use that information to get the last element in an array. That looks a bit like this:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getArrayLength = myArray.length // Returns 5, since there are 5 items.
let getOrange = myArray[getArrayLength-1] // Returns 🍠
```

\
Another easy way to do this is to just use the `at` method:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let getOrange = myArray.at(-1) // Returns 🍠
```

## Iterating over an array

Another important feature of arrays is they are **iterable**. That means they work with any function expecting an iterable, or within for loops. Using `for` loops is an easy way to iterate over every item in an array. 

\
In the below example, we will console log every array item:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i = 0; i < myArray.length; ++i) {
    // Since i changes +1 every time, the below line will be run for every array item
    // Thus every array item will be console logged for us.
    console.log(myArray[i])
}
```

\
You may also see this written like this, which turns `i` into the array element itself:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i of myArray) {
    console.log(i)
}
```

\
**One more loop** which you might find useful is in the form `let i in myArray`, which instead of returning the array element returns the key for that array element:

```javascript
let myArray = [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
for(let i in myArray) {
    console.log(myArray[i])
}
```

## Turning strings into arrays

If we have a string separated by a specific character, we can split it into an array. 

\
Imagine we have all of our fruit and vegetables in a string separated by '-'. If we apply the `split`function to that string, we will get an array:

```javascript
let myString = "🍅-🍊-🥬-🍓-🍠";

// Returns [ '🍅', '🍊', '🥬', '🍓', '🍠' ]
let myArray = myString.split('-');
```

## Manipulating existing arrays

Since arrays can be modified after they are created, we have a number of methods and operators available to modify them. 

\
For example, using [the three dots operator](https://hackernoon.com/decoding-the-three-dots-or-spread-operator-in-javascript) we can easily merge two arrays:

```javascript
let array1 = [ '🍅', '🍊' ]
let array2 = [ '🍅', '🍊' ]
let array3 = [ ...array1, ...array2 ] // [ '🍅', '🍊', '🍅', '🍊' ]
```

\
To add or remove elements from each end of an array, we have 4 methods - `push`, `pop`, `shift` and `unshift`.

### push

We can also add new items to an array using the `push` method, which adds one item at the end of an array:

```javascript
let array = [ '🍅', '🍊' ]
array.push('🥬')
console.log(array) [ '🍅', '🍊', '🥬' ]
```

### pop

If we wanted to instead remove the last element of an array, we can use `pop()`:

```javascript
let array = [ '🍅', '🍊' ]
array.push('🥬')
array.pop()
console.log(array) // [ '🍅', '🍊', '🥬' ]
```

### unshift

Similarly, we can add items to the start of an array using `unshift`. This is slower than `push`, since it requires moving everything to one side as well as inserting an item.

```javascript
let array = [ '🍅', '🍊' ]
array.unshift('🥬')
console.log(array) [ '🥬', '🍅', '🍊' ]
```

### shift

If `unshift` is to `push`, then `pop` is to `shift` - we can use `shift` to remove the first element of an array:

```javascript
let array = [ '🍅', '🍊' ]
array.shift()
console.log(array) [ '🍊' ]
```

## Conclusion

Arrays are really important in Javascript. Understanding how they work is crucial in understanding Javascript. 

\
Although they can seem daunting, the important things to remember are:

* Javascript arrays can be defined with square brackets `[]` or `new Array()`
* Arrays can contain any standard Javascript types, for example - functions, objects, or sets.
* Arrays are essentially objects - each array element is given a numbered index allowing us to access it with `obj[key]` notation
* Arrays are iterable, meaning they can be iterated on in for loops.
* Arrays have a number of standard methods and properties, for example - `split()`, `concat()`, `some()`, `pop()`, `shift()` and length.

\

---

Also published [here.](https://fjolt.com/article/javascript-arrays) 

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

A Review of Arrays in Javascript 

A Review of Arrays in Javascript

Too Long; Didn't Read

@smpnjn

RELATED STORIES