JavaScript Arrays

JavaScript array; In this tutorial, you will learn everything about JavaScript arrays [] with the help of examples.

JavaScript Array

In JavaScript, an array is a variable and it can hold different data type elements in it. Different types of data mean, it may contain elements of different data types. An element data type can be numbers, strings, and objects, etc.

Declaration of an Array

JavaScript provides you with two ways to declare an array.

Using `Array` constructor

Using array() constructor, define arrays.

See the following examples:

let arr = new Array();

The arr array is empty i.e. it holds no element.

To define an array with elements in js, you pass the elements as a comma-separated list in the Array() constructor.

See the following example:

let arr = new Array(9,10,8,7,6);

Using `[]` notation

Using literal [] notation, define arrays.

See the following examples:

let arr = [element1, element2, element3];

The array literal form uses the square brackets [] to wrap a comma-separated list of elements.

See the following example, to creates num array:

let num = [4, 3, 2];

If you want to create an empty array by using square brackets.

See the following example:

let arr = [];

An array with different type elements

As we mentioned above, an array can hold different data types of elements in it.

See the following examples:

var arr = ["hello", 520, "test", 960, true];

Access elements in an array

You can easily access the elements of an array using their index position. An array index always starts with 0.

First, of defining an array with elements in javascript, you can see the following example:

var arr = ["hello", 520, "world"];

In this example shows, how to access the elements of the arrarray.

console.log(arr[0]); // 'hello'
console.log(arr[1]); // 520
console.log(arr[2]); // 'world'

To modify the value of an element in the array. You can assign a new value of the element with their index.

arr[1] = 'my';

Length of an array

Want to find the length of an array in js, use the length property of it. It returns the length of an array.

See the following example:

var arr = ["hello", 520, "world"];  
console.log(arr.length); // 3

The javascript array length property is writable. It’s very good benefit to you. For what?, So you can add or remove elements in an array by changing the value of the length property.

For examples,

Change the length property of the arr array to 5 to add one new element with an initial value of undefined at the end of the array.

// add 1 element
var arr = ["hello", 520, "world"];  
arr.length = 5;
console.log(arr[3]); // undefined

Likewise, To remove elements from an array in js, define the length property of the arrarray to 3 to remove the last two elements of the array.

Then. to access the third element of the array, it returns undefined.

// remove the last 3 elements
var arr = ["hello", 520, "world"];  
arr.length = 3;
console.log(arr[3]); // undefined

Using the length property of array, you can access the last array element.

See the following exmaples:

var arr = ["hello", 520, "world"];  
console.log(arr[arr.length - 1]); // 'world'

This array length property [arr.length – 1] return the last index of an array and this becomes arr[index(numeric position of last element)].

An array with JavaScript methods

When you can use typeof operator method with an array in javascript, it returns object as shown in the following example:

let arr = ['hello', 'my', 'world'];
console.log(typeof arr); // object

Check if variable is array javascript, you use Array.isArray() method.

See the following example:

console.log(Array.isArray(arr)); // true

Iterate array elements one by one in javascript using the for loop.

See the following example:

let arr = ['hello', 'my', 'world'];

for (let i = 0; i < arr.length; i++) {
  document.write('Element :- ' + arr[i] + '<br>');
}

//Element :- hello
//Element :- my
//Element :- world

Javascript Array Manipulation

If you want to add the elements of beginning and end from an array and remove elements of beginning and end from an array, you can use the following methods in js:

push(...items) adds items to the end.
pop() removes the element from the end and returns it.
shift() removes the element from the beginning and returns it.
unshift(...items) adds items to the beginning.
splice removes from a specific Array index.

Conclusion

In this tutorial, you have learned about javascript arrays and it’s important methods. Which is used to manipulate javascript arrays.