Javascript Arrays
Tags: javascript, webdev, beginners, programming
Published: 2020-12-09 22:34:09

I know i made an earlier tutorial about some some useful JavaScript array methods that makes working with JavaScript arrays easier, if you missed that , this is the link to it <a href="https://dev.to/kalashin1/useful-javascript-array-methods-39op">Useful JavaScirpt array Methods</a>
So i realized that i didnt introduce JavaScript arrays and i thought that i should make a proper intro to JavaScript arrays.

## **What Are Arrays**
Arrays are objects that can be used to store a collection of related or unrelated items. Every language has its own implementation of arrays and JavaScript is no different. Think of arrays like a cart where you can put things inside. The items that you put inside of your shopping cart when you go get groceries can be related, or they can be very much unrelated. Say you can put only vegies inside your cart like a carrot, onion, cabbage or you could put vegies, candies and cookies but you get the point now right. Lets look into how JavaScript implements arrays.

## **JavaScript Arrays**
In JavaScript arrays have a proto of object; that is to say that arrays in JavaScript are also objects, however JavaScript arrays have a Symbol.iterator function that sets it out, it is because of this function that we are able to use loop through an array, and we will also look at *looping* through an array later. 

**NOTE** It is not only arrays that have this Symbol.iterator function in JavaScipt, other objects also have this Symbol.iterator function e.g NodeList and Iterators etc *Dont worry about iterators if you dont understand them and Symbol.iterator for now*.

## Declaring an Array
We can declare an array using the following syntax, 

```javascript
var myArray = []; //you can name the 
//array anything you feel like

```

it is totally okay to initalize an array to contain no objects like above and then we add objects to the array using an index like below 

```javascript
var myArray = [];
myArray[0] = 2;
myArray[1] = 4;
myArray[2] = 6;

// please note you can store 
//anytype of object in array
myArray[3] = 'Foo';
console.log(myArray) 
//prints out [2, 4, 6, 'foo']
```

### **What is an index**
An index is a key that we use to access an item in the array. we can't just put items inside our shopping cart lackadasically, we have to arrange them right. So an index allows you to either put an item in a position in an array or retrieve an item at a paticular position from the array. The index of an array is the position of item inside an array, every item has its own index and no two items inside one array can have the same index. The example above uses index to put items inside the array we created. We use square brackets notation to specify the index of an item in an array, The name of the array, followed by square brackets without any space between the name of the array and the square brackets, inside the square bracket is a number that represents the index of the item in the array.  we can also do this.


```javascript
var myArray = [];
myArray[0] = 2;
myArray[1] = 4;
myArray[2] = 6;

let itemOne = myArray[0];
console.log(itemOne) //prints out 2
```

We used the index to store the the first item in the array in our variable and output that variable to the console. However you might be wondering: Why are we starting from zero. JavaScript uses a zero based index to identify the items in the array, i.e The first item in the array is stored at index 0. you remember base 10 right, starts from zero. so anytime you are working with arrays just remeber that the first item in the array has an index of zero. And you always thought zero was useless right? who is laughing now..
We can also initialize an array and set the items inside the arrays when we create the array.

```javascript

let myArray = [2, 4, 6, 'foo']; 
//this is also okay too and i 
//suggest you do this rather
// than the first method, 
//however separate different 
//items from each other using 
//a comma, do not forget
//if you dont separate them 
//with a comma, it will result in an error
let itemOne = myArray[0];
 //The first item is still 
//stored at index 0
console.log(itemOne); 
//prints out 2
```

## **Finding Items in an array**
What if we don't know the index of an item we have in our array and we want to somehow get the index of that item because our code depends on it.. we can use a very useful method that all arrays possess, which is **indexOf()** 

## **Index Of An Item**
we use indexOf() to get the position of an item inside of an array. The function accepts a parameter which is the item we want to get it's index. If the item exists inside of the array, it will return the index of that item as a number however if the item does not exist inside of the array it will return -1. let's see an example

```javascript
//SYNTAX
array.indexof(item)

var myArray = [2, 3, 4, 'foo', 'bar'];

//let's get the index of foo
var fooIndex = myArray.indexOf('foo');
console.log(fooIndex) //returns 3

// let's get the index of 3
var threeIndex = myArray.indexOf(3);
console.log(threeIndex) //returns 1 
// this proves the zero 
//indexing i was talking 
//about, three is the second
// item, yet it's index is 1

// let's see what happens if
// we try to find something
// that doesnt exist in the array
var nonExistent = myArray.indexOf('unavialable');
console.log(nonExistent) //returns out -1 because the
// item doesnt exist in the
// array
```

## **Length Of An Array**
Normally when we go shopping and we are putting stuffs inside of our cart, we need to keep count of the number of things we have kept inside of our cart right. Similarly we can also keep track of the length of an array i mean we can keep count of the nummber of things we have inside of our array. This is possible because all array have a property called ## **length**. The number of items in the array is the length of the array and it doesn't follow the zero rule, it starts counting from 1
**NOTE** the index of the last item of an array is the length of that array - 1. lets see some exapmle

```javascript
//SYNTAX
array.length

var myArray = [2, 4, 6, 'foo', 'bar'];
var arrayLength = myArray.length;
console.log(arrayLength) //returns 5 because we have 5
// items in the array

var lastIndex = myArray.length -1
console.log(myArray[lastIndex]) //prints out bar
// This length property is 
//useful for looping through the array using a for loop
```
## Pushing items inside of an array
Arrays have a method that make adding items inside of an array easier. It is called..... tada! **push()**
This method allows us to add a new item to an array. It accepts a parameter which is the item to add to the array, it takes that item and then it adds it after the last element in the array. This method mutates and array, after this method is done excuting, the length of array is updated to account for the item we pushed inside of the array. let's see some examples

```javascript
//SYNTAX
array.push(item)

var myArray = [2, 4, 6, 8];
console.log(myArray) //[2, 4, 6, 8]
console.log(myArray.length) //prints out 4
console.log(myarray.length - 1) //prints out 8
myArray.push(10)
console.log(myArray) //prints out [2, 4, 6, 8, 10]
console.log(myArray.length) //prints out 5
console.log(myArray.length - 1) //prints out 10
```

## **Unshifting Items in an** array
We can also add items to the start of an array instead of the end of the array. We use..... **unshift()** to add a new item to the beginning of an array. This method accepts a parameter which is the item we want to add to the start of the array. This method also mutates an array and updates the length of the array.


```javascript
//SYNTAX
array.unshift(item)

var myArray = [4, 6, 8, 10];
console.log(myArray) //[4, 6, 8, 10]
console.log(myArray.length) //prints out 4
console.log(myarray[0]) //prints out 4
myArray.unshift(2)
console.log(myArray) 
//prints out [2, 4, 6, 8, 10]
console.log(myArray.length) //prints out 5
console.log(myArray[0]) //prints out 10
```

## **Last Words**
Arrays in Javascript arrays are refrence type. That is to say that if we have a first variable an array and we have another variable that is equal to the array. any manipulation on the second variable will also change the first array. Let's see

```javascript
var myArray = [1,3,4]
var newArray = myArray

console.log(newArray) 
//prints out [1, 3, 4]
console.log(myArray) 
//prints out [1, 3, 4]

newArray.unshift(0)

console.log(newArray) 
//prints out [0, 1, 3, 4]
console.log(myArray) 
//prints out [0, 1, 3, 4]
```
Do well to stay tuned as i will still continue our discussions on array, don't forget to hit the follow button and please drop any question, thoughts and recommendations in the comment section, thank you and have a nice day