Game with Arrays in JavaScript (JavaScript Arrays)
Tags: webdev, javascript, programming, beginners
Published: 2021-01-08 15:27:33

You probably know that in JavaScript we use arrays to store several values in one variable.

In a JavaScript array for each element there is a number(Index),where an index of an array starts from zero and goes up by one, i.e 0,1,2,3 and so on. The index is basically the identifier of the items in the same array.

So in this short tutorial we will look at basic methods that will help you understand arrays in JavaScript at a basic level.

## 1. How to create an array in JavaScript ?
You can use the [] markup to create an array in JavaScript
```javascript
var cars = ['Tesla', 'GTR', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars)
// ['Tesla', 'GTR', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']
```
## 2. How to check the number of items in a JavaScript array ?
You can check the total numbers of items in the array(array length) using the method shown below.
```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars.length)
// 8
```
## 3. How to access the JavaScript array using the index number ?

You can use a specific number to access an item in the array.
```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[0])
// Tesla

console.log(cars[4])
// Ford

console.log(cars[6])
// Nissan
```
## 4. How to access the last item in the JavaScript array ?
The last item in the array can be accessed using the method shown below.
```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

console.log(cars[cars.length - 1])
// Porsche
```
## 5. How to loop an array in JavaScript ?
This is the best and most modern way to loop on a javaScript array.

```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

cars.forEach(function(arrayItem, index){
  console.log(arrayItem, index)
})

// Tesla 0
// Toyota 1
// BMW 2
// Honda 3
// Ford 4
// Hyundai 5
// Nissan 6
// Porsche 7
```
## 6. How to add an item to the beginning of a JavaScript array ?
You can add an item to the beginning of an array as follow.

```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// unshift() method adds 'Mercedes' to the starting of 'cars' array
var newArray = cars.unshift('Mercedes')

console.log(cars)

// New cars array
// [ 'Mercedes', 'Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]
```
## 7.How to remove an item from beginning of a JavaScript array?
```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// shift() method removes the first item from the array
var newArray = cars.shift()

console.log(cars)

// New cars array
// Tesla has been removed from the array
// [ 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche' ]
```
## 8. How to find the index of an item in a JavaScript array ?
The index number of a particular item in the array can be found as follows.
```javascript
var cars = ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche'];

// indexOf() method returns the index number of an item in an array
var getBMWIndex = cars.indexOf('BMW');
var getHyundaiIndex = cars.indexOf('Hyundai');
var getPorscheIndex = cars.indexOf('Porsche');

console.log(getBMWIndex)
// 2

console.log(getHyundaiIndex)
// 5

console.log(getPorscheIndex)
// 7
```

## Conclusion
In this tutorial I have described the basic features and methods of an array in JavaScript. We learned to create an array, access items in an array, find the location of an item, remove and add an item to an array and even loop on an array in JavaScript.

You can find more information about [JavaScript arrays in MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array).