How to Play with Arrays in JavaScript Like a Pro?

Rawat Digamber /  Read Time: 3 minutes

Arrays in Javascript

I am going to share with you How you can play with Arrays in JavaScript like a pro?

We use arrays in JavaScript to store multiple values in a single variable. Arrays are widely used Data structure, it is very helpful when we required to store a list of variables and access them by their variable name.

In JavaScript array, every element has an index number, Array index number starts from zero, and increases to 0,1,2,3 and so on. Every index number is the identity of an item in an array in JavaScript.

This tutorial will tell you about the basic methods that will help you to understand arrays in JavaScript from basic. I will cover the following topics.

1. How to Create an Array in JavaScript?

You can use ‘[ ] symbol’ to create an array in JavaScript.

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

console.log(cars)
// ['Tesla', 'Toyota', 'BMW', 'Honda', 'Ford', 'Hyundai', 'Nissan', 'Porsche']

2. How to Check Array Length in JavaScript?

You can check total numbers of items defined in an array by using the method below.

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

console.log(cars.length)
// 8

3. How to Access Array Item using Index Number in JavaScript?

You can use the specific number to access the item in an array, like given below.

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 an Array in JavaScript?

You can access the last item of an array by using the below method.

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

console.log(cars[cars.length - 1])
// Porsche

5. How to Run a Loop Over an Array in JavaScript?

Best and modern way to loop through an Array item in 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 Starting of an Array in JavaScript?

You can add an item at the starting point of an array.

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 the Starting of an Array in JavaScript?

You can also remove an item from the starting point of an array.

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 an Array in JavaScript?

You can find the index number of a particular item in an array.

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 article, I have discussed the basic features and methods of an array in javascript. We learn to create an array, access the item, find out the position of an item, remove an item, add an item and run a loop over an array. In this tutorial, I’ve covered the basics of an array. I’ll talk about more advanced methods in the near future or you can visit MDN Web Docs to explore more. Meanwhile, If I’ve left something then do let me know, it’ll help me to improve this topic. Thanks in advance.

Written by Digamber

I am passionate about solving real-world problems through algorithms and functional design. I create digital products that make the user’s life easy using the latest programming languages and frameworks. e.g Angular 2+, Firebase Real-time Database, JavaScript, TypeScript, RxJS, Bootstrap, HTML5, CSS3, WordPress etc...