JavaScript Data Structure Pt 1: Array
Tags: javascript, beginners, programming, tutorial
Published: 2023-02-11 06:49:55

## Table of contents 
  * [What is an Array](#array)
  * [Arrays used for](#def)
  * [Creating Array](#create)
  * [Using Array](#using)
  * [Conclusion](#conclusion)

## What is an Array? <a name="array" />


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9c93vtvsbxz8lo61p6b.jpg)

There are many ways to store information when working with `data` on the web. An `Array` is the simplest way to store a collection of `data` and exists in every programming language. It’s commonly used as a base for most data structures due to its widely used `methods`. An `Array` also contains two different `types` of values we are working with, which would be considered the `element` and then the assigned `index` __number__ that is much referring to our `element`.

_____ 

## Array used for? <a name="def" />

When it comes to an `Array`, we want to ensure that any `data` stored is similar or has some relationship with it. So if we have an `Array` of movie names, we wouldn’t want to keep music names in that same collection of `data`. We want to create a separate collection.

_Example given_

```jsx
var movies = [ "incredibles", "toy story", "cars" ];

var artist = [ "James Brown", "Justin Timberlake", "Dadft Punk"];

var fruits = ["apples", "oranges", "pineapples"];
```

_____

## Creating an Array <a name="create" />

We have two ways to create an array, using the `Array` constructor or using `[]` square brackets


**Array constructor**

```jsx
var arr = new Array(); // we can initiate an array with the Array Constructor
```

**Square brackets**

```jsx
var arr = []; // we can initiate an array with square brackets
```

_____

## Using Array <a name="using" />

There are numerous ways to manipulate an `Array`. We will be diving into the most *commonly* used `method`s with the `Array`. There are tons of built-in `method`s that the engineers have created for us to use.

### Adding an element to an Array

If we want to add an `element` to the end of our `Array`, we can use one of the built-in `methods` that come with the `Array` once initiated. 

**basic syntax**

`arr.push()`

`push()` 

```jsx
var arr = [];

arr.push(2);
arr.push(5);
arr.push(25);

console.log(arr) // output [2,5,25]
```

_____

### Removing an element from an Array

The `pop()` method allows us to remove an `element` from the `Array` 

**basic syntax**

`arr.pop()`

```jsx
var arr [2,5,25]

arr.pop();

console.log(arr) // output [2,5]
```

_____

### Accessing an element from an Array

If we wanted to access elements in an array, we could use the **square bracket notation** and the `index` of the `element` we want to retrieve. 

**basic syntax**

`arr.[0]`

```jsx
var arr = [2,5,25]

console.log(arr[0]) // 2
console.log(arr[1]) // 5
console.log(arr[2]) // 25
```

_____

### Sorting an Array

If we wanted to **sort** our `elements` within an `Array`, we could do so with the `sort` method. By **default,** the elements are sorted out **ascending.** Comparing the sequence of UTF-16 code unit values.

`arr.sort()`

```jsx
var arr = [5,3,8,2,1,6,4];

arr.sort()

console.log(arr)
```

_____


### Reversing an Array

We can also **reverse** the `Array` in place and return a reference to the same `Array` . 

In other words, the `Array` is mirrored to the original. 

**basic syntax**

`arr.reverse()`

```jsx
var arr = [5,3,8,2,1,6,4];

arr.reverse();

console.log(arr) // output [4, 6, 1, 2, 8, 3, 5]
```

<aside>
💡 With these few methods, we can see the usefulness of the `Array` **Data Structure** and how helpful it can be in cases of manipulating `data`

</aside>


_____


### Retrieving certain elements from an Array

We could retrieve more than one `element` instead of accessing it individually with the **square bracket notation. U**sing the `slice` method, we can have a __starting index__ & __ending index__ that will return a **copy** of the `Array` elements. The original `Array` will not be manipulated. 

**basic syntax**

`arr.slice(starting_index, ending_index)`

```jsx
const myArray = [1, 2, 3, 4, 5];
const extractedArray = myArray.slice(1, 4); // [2, 3, 4]
```

_____

### Conclusion <a name="conclusion" />

By the end of this article, I hope you can see the power `Array` **data structures** have when it comes to data collection. This is one of the primary key concepts in the Javascript programming language, as it’s a primary basis for many other **data structures.**  Like **Stack** or **Queue** which we will be learning about throughout this series. 

<aside>
💡 If we want to learn more about the other `method`s, check out the [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)

</aside>