Arrays in Javascript
Tags: javascript, beginners, programming, array
Published: 2022-10-27 13:53:20

## TOC
  * [What is an Array?](#what-is-an-array?)
  * [Nature of Javascript Arrays](#nature-of-javascript-arrays)
  * [Creating Arrays](#creating-arrays)
  * [Reading and Writing Array Elements](#reading-and-writing-array-elements)
  * [Sparse Array](#sparse-array)
  * [Empty Array](#empty-array)

&nbsp;
____________________________________________________________
&nbsp;

### What is an Array? [](what-is-an-Array?)

Arrays are an ordered collection of values where each value is called an element. The index number allows us to refer to each element in the array.


![Element of an Array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hiyo1juo50b1473sspi0.png)

&nbsp;
____________________________________________________________
&nbsp;

### Nature of Javascript Arrays [](nature-of-javascript-arrays)

- JavaScript arrays are Zero-based, so the index starts at zero.

- JavaScript arrays can contain any number of different values. It could contain a number, string, boolean, object or even another array.

```javascript
const array = [12, "hello", true, { age: 28 }, [2, 4]];
```

- JavaScript arrays are dynamic, so we can add and remove elements from an array at any time.

- The total number of elements inside an array can be get or set by the length property.

```javascript
const array = [12, 23, 43];
array.length // 3
```

- Elements of an array can be empty, **_an array with empty elements is called Sparse array_**. 

&nbsp;
____________________________________________________________
&nbsp;

[](creating-arrays)
### Creating Arrays 
&nbsp;
There are various method to create Javascript Arrays. The preferred method is to use an array literal.
&nbsp;

**1. Array Literal - []** (preferred method)

```javascript
const arr1 = []; // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = [10, 20, 32]; // Creating an array with values
console.log(arr2.length); // 3

const arr3 = [,,,,,]; // Creating a sparse array - [empty × 5]
console.log(arr3.length); // 5
```

**2. Array Constructor - new Array()**

```javascript
const arr1 = new Array(); // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = new Array(10, 20, 32); // Creating an array with values
console.log(arr2.length); // 3

const arr3 = new Array(5); // Creating a sparse array - [empty × 5]
console.log(arr3.length); // 5
```

> **_Note_** - If the only argument passed to the Array constructor is an integer between 0 and 232 - 1 (inclusive), this returns a new JavaScript array with its length property set to that number. [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array) 

> 😇 Still scratching your head then use `Array.of()` Static method. Remember these are alternative method so don't worry much about it.

**3. Array.of()**

```javascript
const arr1 = Array.of(); // Creating an array with no value
console.log(arr1.length); // 0

const arr2 = Array.of(10, 20, 32); // Creating an array with values
console.log(arr2.length); // 3
```

**4. Array.fill()**

Array.fill() will let us create the array at the same time include a value that will be in every single position/index.

**For example :-**

```javascript
const arr1 = Array.(5).fill(1); // [1, 1, 1, 1, 1]
```

We can also use `fill()` method on already created arrays.
**For example :-**

```javascript
const arr2 = [1, 2, 3, 4,,,,].fill(2); // [2, 2, 2, 2, 2, 2, 2]
```

We can pass 3 arguments to `fill()` method.
- fill(value) - 
- fill(value, start)
- fill(value, start, end) 

> - value to fill the array with
> - `start` and `end` index is optional arguments. 
> - `start` is inclusive. Default 0
> - `end` is exclusive, Default array.length

**For example :-**

```javascript
const arr3 = [1, 2, 3, 4, 5,,,,].fill(6, 0, 3); // [6, 6, 6, 4, 5, empty × 3]
```

&nbsp;
____________________________________________________________
&nbsp;

[](reading-and-writing-array-elements)
###Reading and Writing Array Elements 
&nbsp;

**1.Reading elements from an array**
&nbsp;

- Array Literal

```javascript
const arr = [22, 32, 42, 92, 52]
console.log(arr[2]); // 42
```

- **at()** method (ECMAScript 2022)

The at() method takes an integer value and returns the item at that index, allowing for positive and negative integers. Negative integers count back from the last item in the array.

```javascript
const arr1 = [22, 32, 42, 92, 52]
console.log(arr1.at(0)); // 22
console.log(arr1.at(-1)); // 52
```


**2. Writing elements in an array**
&nbsp;
- Within the length of the array.

```javascript
const arr1 = [22, 32, 42, 92, 52]

arr1[3] = "javascript";

console.log(arr1); // [22, 32, 42, "javascript", 52];
console.log(arr1.length); // 5;

arr1[5] = "tom";

console.log(arr1); // [22, 32, 42, "javascript", 52, "tom"];
console.log(arr1.length); // 6;
```

- Beyond the length of the array - It creates an empty array in between. 

```javascript
arr1[8] = 67;

console.log(arr1); // [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9
```

&nbsp;
____________________________________________________________
&nbsp;

[](sparse-array)
###Sparse Array 
&nbsp;

**What is Sparse Array?**
&nbsp;
A sparse array is an an array with empty elements, we can call it holes in the array. 
index of the empty element will log `undefined` in Chrome because as Javascript doesn't have a value for the hole.  
&nbsp;
**Ways to create Sparse Array**
&nbsp;
- **Example 1**

In the below example, we are assigning a value to an index number of 8 and there was nothing assigned to the index numbers between 5 and 8 which 6 and 7. 

So 6 and 7 became empty elements and therefore we have sparse array right now.

```javascript
arr1[8] = 67;

console.log(arr1); 
// [22, 32, 42, 'javascript', 52, 'tom', empty × 2, 67]
console.log(arr1.length); // 9
console.log(arr1[6]) // undefined
console.log(arr1[7]) // undefined
```

- **Example 2**

We can create a sparse array by simply putting commas(,). Every time there is a comma that creates a new element but there is nothing in those element so it creates holes in the array. 

```javascript
let arr2 = [,,,,,,]; 
console.log(arr2); // [empty × 6]
console.log(arr2.length); // 6
console.log(arr2[2]) // undefined
```

- **Example 3**

Assigning value(as number) to the length of an array and if that value is greater than the actual length of the array can create a sparse array.


```javascript
let arr2 = [2,3,5,8]; 
console.log(arr2.length); // 4

// Setting a new length which is greater than actual 
// length of the array which is 4 in our case
arr2.length = 10;

console.log(arr2) // [2, 3, 5, 8, empty × 6]
console.log(arr2.length); // 10
```

- **Example 4** (using `delete` operator on Arrays)

`delete` doesn't modify the length of the array, it just creates the sparse array(hole in the array).

```javascript
let arr1 = [1,2,3,4,5,6,7]; 
delete arr1[5];

console.log(arr1); // [1, 2, 3, 4, 5, empty, 7]
```
&nbsp;
____________________________________________________________
&nbsp;

###Empty Array [](empty-array)
&nbsp;

**Two simple ways to empty and array.**
&nbsp;

**1. - Reassigning original array to an empty array.**


```javascript
let arr1 = [1, 2, 3, 4, 5, 6];

arr1 = [];
```
This technique is not emptying the array but assigns a new empty array to it.
&nbsp;
See the below example where `arr2` still references the original array.

```javascript
let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1 = [];

console.log(arr1); // []
console.log(arr2); // [1, 2, 3, 4, 5, 6]
```

&nbsp;

**Notice** - The above approach will not work with `const` keyword because variables assigned with `const` keyword can not be re-assigned. 
&nbsp;

**2. Setting array `length` property to zero.**

&nbsp;
With this technique, we will empty the original array and we can see in the below example that even `arr2` is logging as an empty array.

&nbsp;
```javascript
let arr1 = [1, 2, 3, 4, 5, 6];

arr2 = arr1;

arr1.length = 0;

console.log(arr1); // []
console.log(arr2); // []
```

&nbsp;

This is it, now you can go for a coffee break. If I have missed something along the way, do point it out in the comment box. 

Upcoming articles on Javascript Arrays:

- How to iterate Arrays
- Working with Array-like collections
- Array Methods
- Multidimensional Arrays

Till then, Keep Learning! 🤘