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
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.
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.
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.
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.
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.
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?
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.
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.
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.