JavaScript Arrays
Tags: javascript, node, tutorial, codenewbie
Published: 2021-02-28 11:37:29

<a href="https://www.datacamp.com?tap_a=82040-4385c0&tap_s=1301289-aaa316" target="_BLANK" rel="nofollow"><img src="https://static.tapfiliate.com/5f922766d7ec0196634518.png?a=82040-4385c0&s=1301289-aaa316" border="0"></a>

---

An array is the collection of ordered items. These ordering collections make array index zero-based.

---
### Creating and Accessing an Array
#### Creating an Array
Arrays are created as an object. See the syntax below:

```
array = new Array(item1, item2, ...,itemN);
```

The above syntax can be rewritten as shown below:

```
array = [ item1, item2, ...,itemN ];
```

The items, `item1, item2, ...,itemN` are of any data type.

See the example below:

```js
// const arr = new Array(true, "Bob", 34, 7n);
const arr = [ true, "Bob", 34, 7n  ];
```

Alternatively, you can append elements to an element.

```js
const arr = [];

arr[0] = true;
arr[1] = "Bob";
arr[2] = 34,
arr[3] = 7n

console.log(arr); // [ true, "Bob", 34, 7n  ]
```

---
### Accessing an Array
Arrays items are in order or numbered starting from zero (`0, 1, ..., N`).

See the example below:

```js
const arr = [ true, "Bob", 34, 7n  ];

console.log( arr[0] ) // true
console.log( arr[1] ) // Bob
console.log( arr[2] ) // 34
console.log( arr[3] ) // 7n
```

The `length` number property determines the number of items in an array.

See the example below:

```js
const arr = [ true, "Bob", 34, 7n  ];

arr.length; // 4
```

The example above shows the array's last item index is `arr.length - 1`.

See the example below:

```js
const arr = [ true, "Bob", 34, 7n  ];

arr[arr.length - 1]; // 7n
```

#### Trailing comma
An array, just like an object, may end with a comma:

```js
const arr = [
  'Melon', 
  { name: 'Bello' }, 
  true, 
  function() { 
    console.log('Hello World!'); 
  } 
];

console.log( arr[1].name ); // Bello

arr[3](); // Hello World!
```

> Array is an object and thus behaves like an object.

```js
typeof arr; // object
```

---
### Array queue
In computer science, ordered collection of elements supports two operations:
- `push`
- `shift`

#### *push*
The `push` method appends an item to an array.

See the example below:

```js
const fruits = [ "Apple", "Orange" ];

fruits.push("Melon");

console.log( fruits ); // [ 'Apple', 'Orange', 'Melon' ]
```

The above example can be rewritten as shown below:

```js
const fruits = [ "Apple", "Orange" ];

fruits[fruits.length] = "Melon";

console.log( fruits ); // [ 'Apple', 'Orange', 'Melon' ]
```

#### *shift*
Opposite to the `push` method, an item can be removed (and returned) at the beginning of an array. 

```js
const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.shift() ); // Apple => returned removed item

console.log( fruits ); // [ 'Orange', 'Melon' ]
```

---
### Array stack
In computer science, ordered collection of elements supports two operations:
- `push`
- `pop`

#### *pop*
The `pop` method removes the last element of the array and returns it:

```js
const fruits = [ "Apple", "Orange", "Melon" ];

console.log( fruits.pop() ); // Melon => returned removed item

console.log( fruits ); // [ 'Apple', 'Orange' ]
```

The `shift` method removes an element from the beginning of an array; while the `pop` method removes an element from the end of an array.

See the example below:

```js
const fruits = [ "Apple", "Orange", "Melon" ];

fruits.shift();

console.log(fruits); // [ "Orange", "Melon" ]
```

The example above is the same as below:

```js
const fruits = [ "Apple", "Orange", "Melon" ];

fruits[0] = fruits[1]; // [ 'Orange', 'Orange', 'Melon' ]
fruits[1] = fruits[fruits.length-1]; // [ 'Orange', 'Melon', 'Melon' ]
fruits[fruits.length-1] = fruits[fruits.length]; 
// [ 'Orange', 'Melon', undefined ]

console.log( fruits.pop() ); // undefined

console.log(fruits); // [ "Orange", "Melon" ]
```

> Methods `push/pop` run fast, while `shift/unshift` are slow.

> For stacks the principle is based on LIFO (Last-In-First-Out) while queues, FIFO (First-In-First-Out) principle. In computer science, the data structure that allows this is called [deque](https://en.wikipedia.org/wiki/Double-ended_queue).

#### unshift
The `unshift` method is the opposite of `push`, it adds an element to the beginning of an array.

```js
const fruits = [ "Orange", "Melon" ];

fruits.unshift("Apple");

console.log(fruits) // [ Apple, "Orange", "Melon" ]
```

**Happy coding**

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614517560333/MdxvdcE-X.png)](https://www.buymeacoffee.com/techstackmedia)

---

[![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1614517221619/rY3RLnJWC.png)](https://skillshare.eqcm.net/c/2680282/300216/4650)