Arrays in JavaScript

What is an array?

Javascript array is an object which is used to store a collection of values or items in a single variable. Arrays in javascript are a very important concept. You will learn the following key points with the help of this tutorial:

how to create an array
how to access items of an array
perform different operations on arrays in javascript with the help of properties and methods

Create an Array:

Syntax:
var array_name = [item1, item 2, item3, item 4, item5, …];

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];

You can also create an array using new keyword from javascript.

var names = new Array(“Bill”, “Steve”, “Tim”, “Mark”);

**Note:

Don’t create an array by using a new keyword. It’s bad practice and also it produces unexpected results sometimes.

Accessing items in an array:

You can access items in an array by their index numbers.

Example1:

var firstItem = names[0];

Explanation: First value of the array will be accessed by names[0] and will be assigned to variable firstItem. Bill will be assigned as firstItem as result.

Example2:

var lastItem = names[3];

Explanation: Last value of the array will be accessed by names[3] and will be assigned to variable lastItem. Mark will be assigned as lastItem as result.

You can also access the full array by its variable name.

Example:

var allItems = names;

Explanation: names array will be assigned to allItems variable.

Properties and methods:

Javascript offers built-in different properties and methods to perform various operations on arrays.

You can use array property by array_name.property
You can use array method by array_name.method()

1) length property:

You can use the length property to know the length of an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
console.log(names.length);
// Output: 4
// will return 4 as length.

2) push method:

You can use the push method for adding an item at the end of the array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
names.push(‘Jeff’);
console.log(names);
// Output: [“Bill”, “Steve”, “Tim”, “Mark”, “Jeff”]
// Now names array will be [“Bill”, “Steve”, “Tim”, “Mark”, “Jeff”]

3) pop method:

You can use the pop method to remove an item from the end of an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
names.pop();
console.log(names);
// Output: [“Bill”, “Steve”, “Tim”]
// Now names array will be [“Bill”, “Steve”, “Tim”]

4) unshift method:

You can use unshift method to add an item to the front i.e as the first item of an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
names.unshift(“Jeff”);
console.log(names);
// Output: [“Jeff”, “Bill”, “Steve”, “Tim”, “Mark”]
// Now names array will be [“Jeff”, “Bill”, “Steve”, “Tim”, “Mark”]

5) shift method:

You can use the shift method to remove an item from the front of an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
names.shift();
console.log(names);
// Output: [“Steve”, “Tim”, “Mark”]
// Now names array will be [“Steve”, “Tim”, “Mark”]

6) reverse method:

You can use reverse method to reverse the order of items from the array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
names.reverse();
console.log(names);
// Output: [“Mark”, “Tim”, “Steve”, “Bill”]
// Now names array will be [“Mark”, “Tim”, “Steve”, “Bill”]

7) indexOf method:

You can use the indexOf method to find the index of an item from an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
var position = names.indexOf(“Mark”);
console.log(position);
// Output: 3

8) slice method:

You can use the slice method to slice out pieces of an array into a new array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
var newNames = names.slice(2);
console.log(newNames);
// Output: [“Tim”, “Mark”]
/*
Now newNames array will be assigned values like [“Tim”, “Mark”].
That means above slice method will slice out piece of array starting from index 2.
*/

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
var newNames = names.slice(1,3);
console.log(newNames);
// Output: [“Steve”, “Tim”]
/*
Now select method will take start and end arguments to splice the piece of an array.
So, now starting arguments will be 1st index and ending argument will be 3nd index.
After slicing names array, newNames will contain values like [“Steve”, “Tim”]
*/

9) toString method:

You can use the toString method to get a comma-separated string of an array.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
var str = names.toString();
console.log(str);
// Output: Bill,Steve,Tim,Mark
/*
Now str variable will contain comma-separated string like Bill,Steve,Tim,Mark
*/

10) join method:

join method is useful to join the elements into a string.
A string can be a comma-separated or specified separator.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
console.log(names.join());
// Output: Bill,Steve,Tim,Mark

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
console.log(names.join(‘-‘));
// Output: Bill-Steve-Tim-Mark

10) concat method:

concat method is useful to join two arrays.

Example:

var names = [“Bill”, “Steve”, “Tim”, “Mark”];
var newNames = [“Sundar”, “Elon”];
var allNames = names.concat(newNames);
console.log(allNames);
// Output: Bill,Steve,Tim,Mark,Sundar,Elon