JavaScript Array ( With Examples )

In this JavaScript Array tutorial, you will learn about JavaScript Array. The array is one of the most important concepts of the JavaScript scripting language.
Array provides a facility to store more than one value in a single variable. In the previous tutorial, we have to see JavaScript Number and Number Methods.

In this guide you will learn all about JavaScript array and their uses using appropriate example.

JavaScript Array

JavaScript array is used to store multiple values in single variable.

Before Array, If you had a list of items ( a list of laptop names ), Then you were storing that name in a single variable that looked like this.

Example

var name1 = "Lenovo";
var name2 = "HP";
var name3 = "Dell";
var name4 = "Asus";

This will raise problem, when you will have thousands of items. To solve this problem you can use JavaScript array. Array in JavaScript is capable of storing all the items inside single variable name.

Example

var laptops = ['Lenovo', 'HP', 'Dell', 'Asus'];

As you can see in the above example the languages variable stores an array of languages. If you have list of items then you can use array to store all the items at a time.

Creating An Array

• To creating array in JavaScript, use array literal.

Syntax

var array_name = [item1, item2, item3,...];

Example

var languages = ['PHP', 'Python', 'jQuery', 'JavaScript'];

Space and line breaks not important.

Example:

var languages = [
'PHP', 
'Python', 
'jQuery', 
'JavaScript'
];

• You can create array in JavaScript using new keyword as well.

Example:

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');
console.log(languages);

Changing Array Element

You can change the array element by using index number.

Example

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');
languages[1] = "C++";
console.log(languages);

Access Full Array.

To access the full array you can use array name.

Example:

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');
console.log(languages);

Array is Object

typeof operator return the data type of for array.

Example

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');
// data type of array
console.log(typeof languages); // object

Array Property and Methods

JavaScript array provide lots of properties and methods.

The Length property

To get the length of an array use length property.

Example

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');
// length of the array
console.log(languages.length); // 4

The sort() Method

To sort the array elements, use sort() method.

Example

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');

// Sort the array
console.log(languages.sort());

Accessing First Array Element

To access first array element you have to use 0 Index number.

Example

var languages = new Array('PHP', 'Python', 'jQuery', 'JavaScript');

// first item of the array
console.log(languages[0]);

Accessing Last Array Element

To access last array element you have to use last ( total length -1 ) Index number.

Example

var fruits = new Array('Banana', 'Apple', 'Mango', 'Orange');

// Last array element
console.log(languages[lanaguages.length - 1]);

Looping JavaScript Array Elements.

You can loop through array in JavaScript using for loop.

example

var fruits = new Array('Banana', 'Apple', 'Mango', 'Orange');
// length of the array
flen = fruits.length;
for ( var 0; i < flen; i++ )
{
console.log(fruits[1]);
};

Adding Array Elements.

• The easiest way to adding new to an array is using the JavaScript push() method.
  
  Example

var fruits = ['Banana', 'Apple', 'Mango', 'Orange'];
// adding new element to an array.
fruits.push('Lemon');
console.log(fruits);

• You can use length property to add new element to an array.

Example

var fruits = ['Banana', 'Apple', 'Mango', 'Orange'];

// adding new element to an array.
fruits[fruits.length] = "Lemon";
console.log(fruits);

Remove element from the array

You can use the JavaScript pop() method to remove the last item from an array. The pop() method also return deleted item.

Example

var fruits = ['Banana', 'Apple', 'Mango', 'Orange'];

// Remove last item from the array
console.log(fruits.pop());

// Display array after deleted last item.
console.log(fruits);

JavaScript Methods

• concate():- Join two or more array and returns a result.
• indexOf():- Search an element to an array returns its position.
• forEach():- call a function for each array element.
• includes():- Check a array contains specific element.
• push():- Adds a new element to the array and returns a new length array.
• pop():- Remove the last item of an array and returns deleted.
• shift():- Remove the first item of an array and returns the removed item.
• sort():- Sort the array element alphabetically in a string in ascending order.
• slice():- select the part of an array and returns the new array.

Example: JavaScript Array Methods

var fruits = ['Banana', 'Apple', 'Mango', 'Orange'];
var newitem = 'Lemon';


// sort the array.
console.log(fruits.sort());

// add item to an array.
cosole.log(fruits.push(newitem));

// remove item from an array.
console.log(fruits.pop());

// sclicing an array.
console.log(fruits.slice(1));


// concatenate two arrays.

let newArray = fruits.concate(newitem);
console.log(newArray);

// Finding the index position of the string.
console.log(fruits.indexOf('Mango'));

How to recognize an array

This is the most common question is that, How do I know a variable is array or not.

• Using isArray() function.

To check a variable is JavaScript array or not, use isArray() function.

let arr = [];
console.log(Array.isArray(arr));

• Using instanceof

You can check a variable is JavaScript array or not, using instanceof operator.

let arr = [];
console.log(Array.instanceof(arr));

Summary

So in this article, we have seen all about JavaScript array with the help of the exmaples. Array in JavaScript plays a most important role when you want store more than one value inside the single variable name.

JavaScript array provides various JavaScript methods that are useful to manipulate arrays in JavaScript.

When will work with a real-life JavaScript project, Then the array will very useful for you because the array is capable of the store a large amount of data into a single name. And you can access any element or item according to your need.

If this article helpful for you, please share and keep visiting for further JavaScript tutorial.