[freeCodeCamp] Basic JavaScript - Arrays
Tags: javascript, freecodecamp, webdev, dailylearning
Published: 2020-06-06 10:19:38

Hey, y'all! I believe you all are doing excellent. This is in continuation of my previous post on [strings](https://dev.to/gutsytechster/freecodecamp-basic-javascript-strings-3i9k) and my JavaScript learning from [freeCodeCamp](https://www.freecodecamp.org/). This time, I acquired some knowledge about arrays in JavaScript.

Let's begin without any delay!

# <u>Defining JavaScript Arrays</u>

When we want to store multiple related values sequentially, we make use of arrays. Instead of creating multiple variables for each value, we can assign all those values to an array.

An array in JavaScript in enclosed in `[]` i.e. square brackets with multiple values separated by comma(`,`). Let's see an example

```
var myArray = ["butter", "cheese", "milk"]
```

`myArray` is now an array.  It can contain values of different data types as well.

One can also nest array within other arrays. These are called multi-dimensional arrays. For e.g.

```
var myArray = [["John", 12], ["Maxwell", 18]]
```

Here you can see, we have defined multiple arrays within an array. This is what we refer to as nested arrays.

## <u>Accessing array elements</u>

We can access array elements in the same way we deal with string i.e. using indexes.

> Indexes in JavaScript starts with 0

For e.g.

```
myArray[0]; // returns the first element of an array
```

## <u>Modifying Array elements</u>

Unlike strings, arrays are mutable i.e. you can change the values that exist within an array. For e.g.

```
var myArray = [5, 4. 7, 2]; 
myArray[2] = 3; // now the array looks like [5, 4, 3, 2]
```

## <u>Accessing Nested Array elements</u>

Accessing nested array elements can be achieved by using multiple brackets where first pair of brackets refers to the outermost array and subsequent pairs would access the subsequent nested arrays. Let's clear it with an example from freeCodeCamp itself.

```
var arr = [
  [1,2,3],
  [4,5,6],
  [7,8,9],
  [[10,11,12], 13, 14]
];
arr[3]; // equals [[10,11,12], 13, 14]
arr[3][0]; // equals [10,11,12]
arr[3][0][1]; // equals 11
```

## <u>Manipulating Arrays</u>

- <h3>`push()` method</h3>

JavaScript provides `push()` method to append a value to the end of an array. Let see its usage with a short example

```
var arr = [1, 2];
arr.push(3); // arr is now [1, 2, 3]
arr.push([4, 5]); // arr is now [1, 2, 3, [4, 5]]
```

- <h3>`pop()` method</h3>

`pop()` method works, just as opposed to `push()` i.e. it pops out or removes the last element of an array and returns that element. When I say, return an element, it means we can store the value returned by `pop()` in case we want.

Considering the above updated array as an example

```
arr.pop(); // Returns [4, 5], now array will be [1, 2, 3]
arr.pop(); // Returns 3 as it is the last element of updated array
```

- <h3>`shift()` method</h3>

We know that `pop()` removes the last element of an array. But what if we want the first element to be removed? Well, we can use `shift()` for that. It removes the first element and returns that.

```
var arr = [1, 2, 3];
arr.shift(); // Returns 1, now array will be [2, 3]
```

- <h3>`unshift()` method</h3>

`unshift()` works just like `push()` but instead of adding an element to the end, it adds an element to the starting of array.  Let's see an example

```
var arr = [2, 3];
arr.unshift(1); // arr is now [1, 2, 3]
```

# <u>Conclusion</u>

In this post, we got familiar with the fundamentals of arrays in JavaScript and how to manipulate and access them.

# <u>References</u>

- [Introduction to JavaScript](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/)
- [Conquering freeCodeCamp – Basic JavaScript (Part 1) – Live Stream #11](https://www.youtube.com/watch?v=ZCZ2u14xsS4&list=PLgBH1CvjOA62oNEVgz-dECiCZCE_Q3ZFH&index=12&t=0s)

I am keeping this post short for easy grasping of concepts. I will be talking about other JavaScript fundamentals in the next post. Till then, be curious and keep learning! :)