Javascript Arrays
Tags: javascript, tutorial, beginners, webdev
Published: 2020-11-15 19:39:46

This guide will assume you already have some type of experience with javascript and know how to create functions and define data types with variables. 
Array data structures, the way developers display data onto the user's screen. This might sound like a boring topic, but this is one of the fundamental ways to provide webpage information and also makes life as a developer a lot easier.

>Do not pray for an easy life, pray for the strength to endure a difficult one. 
Bruce Lee

It makes it easier for us to pass data around our code with a single variable. It also helps us from doing our code in a way as they call **DRY** Don’t Repeat Yourself! Typically it’s not a required thing to do when I say store all of the data onto one variable. Hopefully, by the end of this article, you learned how to access and store data using arrays alongside some array properties and methods. 

## Contents 
1. Array Intro
2. Item Accessing
3. Assignments
4. Array Methods


### Array Introduction

If we wanted to keep track of certain *data* we would simply store it inside a *variable*. The majority of the time when working with data, we want to display a collection of data of either the same type of data or different types. Creating arrays is pretty straight forward. We define an array by declaring a **variable** and assigning it some square brackets like so. 

``` 
var colors = ['red', 'blue', 'green', 'purple']
```

Now that we know how to declare an `array` we can add as many data types as we want and have the ability to access these with `index` numbers. We will learn more about the `array index` numbers in just a bit. 


## Item Accessing

Accessing data from an array is one of the most common things you will be doing as a developer. This is why it is very important to learn the fundamentals of how to work with arrays to allow us to create more efficient code. In order to do this, we need to simply call the item by its position inside the array. This is where the `index` numerical position comes into play. Array's always start off at 0, so the first item in the array is always going to be 0, the second index in the array will be 1, and the third index will be 2, and so on. Look at the code below for an example. 


```
const array = ['red', 'blue', 'green', 'purple']
                 0,      1,      2,        3
```

In order for us to access items inside the `array`, we simply type in the name of the variable that is storing our data followed by some brackets containing the `index` number that is assigned in the array. 

```
const array = ['red', 'blue', 'green', 'purple']

console.log(array[1]) // output = blue 
``` 

If we don't know the size of the array, we can still access the last item of the `array` with some logic inside of the brackets. By returning the length of the `property - 1`. This will always return the last item of the array, how you ask? Well, the start of the `array` is always `zero`, so when we subtract 1 from the index number and start at 0, the index numerical number will go to the end of the `array`. I know it sounds confusing at first, but once you start playing with the logic more it will make more sense at times. 

``` 
const array = ['red', 'blue', 'green', 'purple']

console.log(array[array.length - 1]) // output = 'purple' 
```

## Assignment 

Arrays allow us to change our data as well, we do this by reassigning the index number with the data you want to replace with. We do this by using the square brackets and index number with the `=` sign. The following code might show it a bit clearer. 

```
const array = ['red', 'blue', 'green', 'purple']

array[1] = 'orange' 

console.log(array) // output ['orange', 'blue', 'green', 'purple']
``` 

## Array Methods 

If you are familiar with `string` methods then you can get familiar with `array` methods. There will most likely be a time when you have to change data inside an `array`. This is where methods come into play that allows us to do this type of manipulation. 

#### .length

We used the `.length` method earlier but didn't talk about what it was actually doing. Just like when checking the length of characters in a `string`, we can also check the number of items inside an `array` where items are the `index` number. 

```
const array = ['red', 'blue', 'green', 'purple']

console.log(array.length) // output 4
```

#### .push & pop

Another two beneficial `array methods` that are helpful are `push` and `pop.` They sound pretty straight forward if you ask me, they refer to **adding** and **removing** items from the array, only after its initial declaration. 

```
const colors ['red', 'blue', 'green', 'purple']

colors.push('orange')

conosole.log(colors) = ['red', 'blue', 'green', 'purple', 'orange']
```

`.push` adds the item inside the parameters at the end of the array and also *increments* the length of the array by `1`

```
const colors ['red', 'blue', 'green', 'purple'];

colors.pop();

conosole.log(colors) = ['red', 'blue', 'green'];
```

When we want to remove something from the end of the list we use `pop()`, which also decrements the length of the array by 1. 

#### .unshift & .shift

Now that we have learned how to add and remove stuff to the *end* of the `array`, we can now dig into adding and removing items at the start of the `array`. Let's go ahead and take a look at how we do this.

```
const colors ['red', 'blue', 'green', 'purple'];


colors.unshift('orange') 

console.log(colors) = ['orange','red', 'blue', 'green', 'purple'];

colors.shift();

console.log(colors) = ['red', 'blue', 'green']

colors.shift();

console.log(colors) = ['blue', 'green']
```

##Conclusion 

I hope by the end of this article you managed to learn how to create and understood what is going on in every line of code. It is very important to understand how your code fully works, not only does it help you become a better developer but can also help you use the tools you are working with more efficient.

These articles are mostly intended for personal use on becoming a better programmer, writer, and grow my programming skills. Feel free to drop any feedback or corrections that you believe should be made to help me and others. Thank you for your time in sticking this far!

Feel free to give me a follow on [Twitter](https://twitter.com/CleverOscarDev) and get connected on [LinkedIn](https://www.linkedin.com/in/clever-oscar/).