JavaScript Array

Arrays are used to store multiple values in a single variable.

Creating array

We can use one of the two ways to create a new array: [] or new Array().

The [] is called the array literal notation:

var arr = [1,2,3];
console.log(arr[0]); // 1
console.log(arr[1]); // 2
console.log(arr[2]); // 3

The new Array() is the Array constructor. The new array and new Array are not the same as JavaScript is case-sensitive.

If we pass only a single integer, it creates a new array with the specific size.

var arr1 = new Array(3);
console.log(arr1); // [empty x 3]
console.log(arr1.length); // 3

In any other case it initialized the array with the given values:

var arr2 = new Array(1,2,3);
console.log(arr2[0]); // 1
console.log(arr2[1]); // 2
console.log(arr2[2]); // 3

Array and data types

You can mix different data types in the same array, and it is still correct:

var arr = [22,"abc", true];
console.log(arr[0]); // 22
console.log(arr[1]); // "abc"
console.log(arr[2]); // true

instanceof

No matter which way we use to create a new array, both return an instance of Array:

var arr1 = [1,2,3];
console.log(arr1 instanceof Array); // true
var arr2 = new Array(4,5,6);
console.log(arr2 instanceof Array); // true

typeof

No matter if we use the Array constructor or the array literal notation, typeof always returns object.

var arr1 = new Array(1,2,3);
var arr2 = [1,2,3];
console.log(typeof arr1); // object
console.log(typeof arr2); // object

Getting value

In JavaScript array indexes start with 0 and if we try to get a value from the index that doesn't exist we get undefined.

var arr = [5,10,15];
console.log(arr[0]); // 5
console.log(arr[1]); // 10
console.log(arr[2]); // 15
console.log(arr[3]); // undefined

Getting index

The indexOf() returns the first index at which a given element can be found in the array, or -1 if it is not present.

var arr = ["red", "green", "blue"];
console.log(arr.indexOf("red")); // 0
console.log(arr.indexOf("blue")); // 2
console.log(arr.indexOf("purple")); // -1

Getting size

To get information about the size of the array, we use the property length:

console.log(["John", "Sam", "Kate"].length); // 3

Changing size

You can extend the size of an array by assigning any value (even undefined) to the new highest index of an array:

array = [];
array[2] = undefined;
console.log(array); // [empty x 2, undefined]

You can use the length property to reduce or increase the size of an array.

var arr1 = [1,2,3];
arr1.length = 2;
console.log(arr1); // [1,2]
console.log(arr1.length); // 2

adding value

The push() method adds one or more elements to the end of an array and returns the new length of the array.

var arr = [10];
var len = arr.push(5, 20);
console.log(arr); // [10,5,20]
console.log(arr.length); // 3
console.log(len); // 3

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

var arr = [1,2,3]; 
var len = arr.unshift(6);
console.log(arr); // [6,1,2,3]
console.log(arr.length); // 4
console.log(len); // 4

updating value

Updating values is very simple. The only thing we need to know is the index of value that we want to update.

var arr = [5];
console.log(arr[0]); // 5
arr[0] = 10;
console.log(arr[0]); // 10

removing value

The JavaScript delete operator allows removing a property from an object/array.

var arr = [1,2,3,4];
delete arr[2];
console.log(arr); // [1,2,empty,4]

The pop() method removes the last element from an array and returns that element.

var arr = [1,3,7,2];
arr.pop();
console.log(arr); // [1,3,7]
console.log(arr.length); // 3
console.log(len); // 3

The shift() method removes the first element from an array and returns that removed element.

var arr = [7,9,3];
var len = arr.shift();
console.log(arr); //[9,3]
console.log(arr.length); // 2
console.log(len); // 2

sorting

By default, the sort() method sorts the values as strings in alphabetical and ascending order.

console.log([5,4,50,40].sort()); // [4, 40, 5, 50]