Arrays | Beginner | Mysterious Topics of Js | #2
Tags: javascript, beginners, webdev, programming
Published: 2022-03-30 13:20:41

Hi folks 👋
I hope you all are doing great.
In this post, we will be learning about JavaScript Arrays and how they work.

So before Arrays, we use to store data in variables, and it was good if we are not working on a large scale. But think of a situation where we have a class of 30 students, and we have to store the names of 30 students, therefore we have to create 30 different variables, and also we have to maintain it, which is very inefficient so that's where we use arrays.

## Arrays
In JavaScript, an Array is a container that can store multiple values of different data types. An array holds an ordered list of values known as elements of that Array. Each element in the Array has a specific index through which it can be accessed later on. 

### Creating JavaScript Arrays
There are two ways to create arrays:

- Using Array constructor
- Using array literal notation 

#### Using Array Constructor
The array constructor is used to create arrays.

```
let fruits = new Array(2);
console.log(fruits.length); // 2
console.log(fruits[0]);     // undefined
```

When we pass only one positive integer value to the Array constructor, it will create an array of length, and each element would have an undefined value.
You'll rarely use the `Array()` constructor to create an array in practice.

#### Using array literal notation
The array literal form uses the square brackets `[]` to wrap a comma-separated list of elements.

```
let arrayName = [element1, element2, element3, ...];
```

### Declaring and Initialising arrays
**Declaring empty arrays:**

```
let emptyArray = []; 
```

**Initializing arrays:**

```
let fruits = ['Apple', 'Banana'];
```

We can also add values of different data types

```
let values = ['hello', 432, true];
```

### Accessing Values
To access an element in an array, you specify an index in the square brackets `[]`. The first element of an array starts at index `0`, the second element begins at index `1`, and so on.

```
let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits[0]); // 'kivi'
```
 

### Updating Values
To update the value of an element, you assign that value to the element like this:

```
let fruits= ['kivi', 'mango', 'banana']; 
fruits[1] = 'watermelon';
console.log(fruits[1]); // 'watermelon'
```

### Length of Array
To get the Array's length, we use the `.length` property, and it is a read-only property which means we can not interact with it.

```
let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.length); // 3
```

### Basic Array Operations

#### Add elements

To add the elements to the **end**, we use the `.push()` method. We can add a list of elements in the parenthesis that are added in the Array.

```
let fruits= ['kivi', 'mango', 'banana']; 
fruits.push('watermelon');
console.log(fruits); // ['kivi', 'mango', 'banana', 'watermelon']
```

To add the elements to the **beginning**, we use the `.unshift() `method.

```
let fruits= ['kivi', 'mango', 'banana']; 
fruits.unshift('watermelon');
console.log(fruits); // ['watermelon', 'kivi', 'mango', 'banana']
```

#### Remove elements
To remove an element from the **end**, we use the `.pop()` method. It removes only one element at a time.

```
let fruits= ['kivi', 'mango', 'banana']; 
fruits.pop();
console.log(fruits); // ['kivi', 'mango']
```

To remove an element from the **beginning**, we use the `.shift()` method.

```
let fruits= ['kivi', 'mango', 'banana']; 
fruits.shift();
console.log(fruits); // ['mango', 'banana']
```

#### Check the index of an element:
To get the position of an element in the array, we use the `.indexOf()` method.

```
let fruits= ['kivi', 'mango', 'banana']; 
console.log(fruits.indexOf('mango')); // 1
```

## Wrapping up
That's all for this post, if you find any mistakes, or want to share more information leave it in the comments.
Thanks for reading!

Moazam Ali
Front-End Developer