Array
In JavaScript Array is container object that holds the number of values of any type. Yes, it is.
JavaScript Array is much more different than any other programming languages.
Because JavaScript array can be store the any number of values, It’s length is not fixed, it’s length is dynamic, so we can store any number of values and it’s extended automatically unlike the C# or Java.
Also in JavaScript array we can store any type of the values, yes we can store the string, number, object, array, function in a single array, unlike C# and Java, Because in Java if we created the array of integer than we only have to store the integer.
Let’s create the array
// Empty array var emptyArray = []; // Array with value var array = ["a", "b", "c", "d", "e"];
Create the array of multiple types values
var object = {
FirstName: "James",
LastName: "Bond"
};
// Array of the multiple types values
var array = ["String", 1, 2.3, object];
As you seen in above example, I store the multiple type value in the array single array.
Length of the Array
JavaScript Array comes with the length property, which provides the length of the array. It means length property property provides the count of the values in the array.
// Empty array var emptyArray = []; alert(emptyArray.length); // 0 // Array with value var array = ["a", "b", "c", "d", "e"]; alert(array.length); // 5
Length property always return the last index + 1 value.
Array() class
Array() class is vary rarely used by the programmers to create the Array, because most of the programmer uses the [] braces to create array because it is shorter way to create an array.
One drawback is that if we passed the one single number value than it create the array to the length of that number with the undefined values.
var array = new Array(3); alert(array.length); // 3 alert(array); // ,, alert(array[0]); // undefined
It’s work fine, if we pass the more than two number or single string or multiple string to the Array().
var array = new Array(3, 4);
alert(array.length); // 2
alert(array); // 3, 4
array = new Array("a", "b", "c");
alert(array); // a, b, c
pop() Method
pop() method will remove the last value of the array.
pop() method is always worked at the last index of the array, so it will always remove the last item of the array.
pop() method will return the last value of the array and remove that value from the array.
var array = ["a", "b", "c", "d"];
alert(array); // a, b, c, d
var removedValue = array.pop();
alert("Removed value is: " + removedValue); // Removed value is: d
alert(array); // a, b, c
push() Method
push() method will add the value at the last of the array.
push() method is always worked at the last index of the array. So it will always add the new value at the end of the array.
push() method will return the length of the array after adding the value to the array.
var array = ["a", "b", "c", "d"];
alert(array); // a, b, c, d
var Count = array.push("e");
alert("Now the length of the array is: " + Count);
alert(array); // a, b, c, d, e
shift() Method
shift() will remove the first value of the array.
shift() method is always worked at the 0 (Zero) index of the array, So it will always remove the first value of the array.
var array = ["a", "b", "c", "d"]; alert(array); // a, b, c, d array.shift(); alert(array); // b, c, d
unshift() Method
unshift() method will add the value at the start of the array or at the index of 0 (Zero).
unshift() method is always worked at the 0 (Zero) index of the array, So it will always add the value at the start of the array.
var array = ["a", "b", "c", "d"]; alert(array); // a, b, c, d array.unshift(0); alert(array); // 0, a, b, c, d
Note: push() and pop() method always worked at the last index of the array and shift() and unshift() method always worked at the first index of the array.
Add value using index
We can also add the value to the array using the index of it.
var array = []; alert(array.length); // 1 array[0] = "a"; array[1] = "b"; alert(array.length); // 2
Add multiple values to the Array
We can us the push() method and unshift() method to add the multiple values to the array.
var array = ["a", "b"];
alert(array); // a, b
array.push("PUSH 1", "PUSH 2");
array.unshift("UNSHIFT 1", "UNFSHIFT 2");
alert(array); // UNSHIFT 1, UNSHIFT 2, a, b, PUSH 1, PUSH 2
indexOf() Method – Find the value inside the array
We can find the value inside the array using the indexOf() method.
indexOf() method will return the index of the value if the value was found in the array, otherwise it will return the -1.
var array = ["a", "b", "c", "d"];
alert(array.indexOf("a")); // 0
alert(array.indexOf("d")); // 3
alert(array.indexOf("e")); // -1
Iterating over array
We can iterate over the array using the loop, We can use the for loop, for…in loop and for…of loop.
var array = ["a", "b", "c", "d"];
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
// a
// b
// c
// d
var array = ["a", "b", "c", "d"];
for (var index in array) {
alert(array[index]);
}
// a
// b
// c
// d
var array = ["a", "b", "c", "d"];
for (var value of array) {
alert(value);
}
// a
// b
// c
// d
join() Method
join() method is helpful to convert the array values into the string. Yes join() method will join the all the values of the array into the single string.
var array = ["a", "b", "c", "d"];
var string = array.join();
alert(string); // a, b, c, d
string = array.join("|");
alert(string); // a|b|c|d
join() method is put the default ,(comma) delimiter between the values of the array while convert it into the string. But we can able to put any any delimiter by passing it into the join() method.
split() method
split() method can convert the string into the array by separating the value from the string from the specific delimiter.
We have to pass the delimiter into the split() method, the default delimiter is ,(comma).
var string = "a|b|c|d|e|f|g|h|i|j";
var array = string.split("|"); // ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"]
alert(array); // a, b, c, d, e, f, g, h, i, j
alert(array.length); // 10
Trim an Array using the length property
We can also remove the values of the array from the last using the length property. If we decrease the value of the length than the JavaScript will remove that number of values from the last of the array.
var string = ["a", "b", "c", "d"]; alert(string); // a, b, c, d string.length = 2; alert(string); // a, b
Sparse Array
Let’s see the magic in the JavaScript’s Array.
var array = []; array[2] = "a"; array[4] = "b"; array[6] = "c"; alert(array); // ,,a,,b,,c alert(array.length); // 7
In above array there is only three elements, but it’s length is 7. Because I directly store the value at the 6th index. But array does not takes the memory of 7 elements, it simply takes the memory of the 3 elements.
It is happen because the JavaScript internally store the array as the object, in the key-value pair.
Remove values from the array
We can easily delete the values from the array using the delete statement.
var array = ["a", "b", "c"]; alert(array); // a, b, c delete array[array.length - 1]; alert(array); // a, b
But it is not good practice to remove the value from the array using the delete statement because the delete statement only remove the value don’t the key. Yes it is right let’s see an example:
var array = ["a", "b", "c"];
// Length, before remove the value: 3
alert("Length, before remove the value: " + array.length)
delete array[array.length - 1];
// Length, after remove the value: 3
alert("Length, after remove the value: " + array.length);
for (var i = 0; i < array.length; i++) {
alert(array[i]);
}
// a
// b
// undefined
As you seen in above example, I create the array with the 3 element and after that I remove the last element of the array, but the length of the array is same before the remove the element and after remove the element. It is because delete statement only remove the value from the array, but it does not manipulate the array and the array still have the key.
splice() method
splice() method can delete the elements and replace the elements as well as add the elements at the specific index.
Syntax:
array.splice(start[, deleteCount[, item1[, item2[, ...]]]]);
start:
Index at which to start changing the array (with origin 0). If greater than the length of the array, actual starting index will be set to the length of the array. If negative, will begin that many elements from the end of the array.
deleteCount:
An integer indicating the number of old array elements to remove. If deleteCount is 0, no elements are removed.
item1, item2, …
The elements to add to the array, beginning at the start index. If you don’t specify any elements, splice() will only remove elements from the array.
Remove elements using splice() Method
var array = ["a", "b", "c", "d", "e"]; alert(array); // a, b, c, d, e array.splice(2, 1); // It will remove the 1 element from the index 2 // So 'c' will be removed. alert(array); // a, b, d, e array.splice(0, 2); // It will remove the 2 element from the index 0 // So 'a' and 'b' will be removed. alert(array); // d, e
In above example, I passed the start index and deleteCount so it only remove the number element from the start index.
Replace elements using splice() Method
var array = ["a", "b", "c", "d", "e"]; alert(array); // a, b, c, d, e array.splice(2, 1, "F"); // It will first remove the 1 value from the // index 2 so the 'c' will be removed. // 'F' will be added at the index 2 alert(array); // a, b, F, d, e array.splice(0, 2, 'G'); // It will first remove the two values from the // index 0 to 2 so the 'a' and 'b' removed. // 'G' will be added at the index 0. alert(array); // G, F, d, e array.splice(2, 2, 'A', 'B', 'C', 'D'); // It will first remove the two values from the // index 2, so the 'd' and 'e' will be removed // and 'A', 'B', 'C' and 'D' will be added at the index // from 2 alert(array); // G, F, A, B, C, D
For replace the element we have to pass the element in splice method after the start index and deleteCount arguments. So splice method will remove the old values from the that index and add the new value to that index.
Add elements using splice() Method
We can also add the elements to the array at the any index using the splice() method. Yep it so easy.
So for that we have to pass the start index, where we want to add the element into the array, after that we have to pass the deleteCount as 0 (Zero) so the none of the element will be remove, and after that we have to pass the elements to add into the array.
var array = ["a", "b"]; alert(array); // a, b array.splice(0, 0, 1, 2, 3); // It will add the three elements to the array // from the index 0, alert(array); // 1, 2, 3, a, b array.splice(array.length, 0, 'c', 'd', 'e', 'f'); // It will add the four elements to the array // at the end of the array alert(array); // 1, 2, 3, a, b, c, d, e, f array.splice(5, 0, "A", "B", 4); // It will add the three elements in the between of the array // at the index of 5 it start the adding the value. alert(array); // 1, 2, 3, a, b, A, B, 4, c, d, e, f
While adding the value into the array using the splice() method, we pass the start index where we want to add the element, If the start index has already have an value so it just shift that value to the it’s next index at put the new value at the start index.
splice() method internally renumber all the elements of the array.
slice() method
slice() method is helpful us to get the portion of the array.
slice() method does not change the old array, it just return the new array.
It has the two arguments.
start:
From where we want to start the copy array
end:
To till we want to copy the array. But it does not include the end index it self. It means if you pass the 5 as the end value than it will give the array till the 4 index.
var array = ["a", "b", "c", "d", "e"]; alert(array); // a, b, c, d, e var new_array = array.slice(2, array.length); alert(new_array); // c, d, e
As you seen in above example, I pass the start index 2 so the array copy will start from the index 2 is ‘c’, But when you see I pass the end index is length of the array, But as we know there is no element at the array.length index in the array and the slice() method is not include the ending value it self.
reverse() method
JavaScript also provides the reverse() to reverse the array.
var array = ["a", "b", "c", "d", "e"]; alert(array); // a, b, c, d, e array.reverse(); alert(array); // e, d, c, b, a
sort() method
sort() method will sort the array in the ascending order.
sort() method internally convert the all the elements into the string and after that it will sort the array.
var array = ["y", "c", "d", "e", "d", "b", "z", "a"]; alert(array); // y, c, d, e, d, b, z, a array.sort(); alert(array); // a, b, c, d, d, e, y, z
Let’s see the magic by sorting the number array
var array = [11, 1, 2, 3, 22, 33]; alert(array); // 11, 1, 2, 3, 22, 33 array.sort(); alert(array); // 1, 11, 2, 22, 3, 33
You see that, what’s happens? Yes sort method can not sort the number array properly. Because the sort() method first convert the elements of the array into the string and after that, it sort the array. So as per the string 1 comes first after that 11 and after 2 and so on.
So for the sorting number array, we have to create the our own function and passed to the sort() method as the arguments.
sort() method will call that function every time by passing the two value and in that function we have to check that value and have to return the result.
The result must be the 1 or -1 or 0 (Zero).
function CheckNumber(num1, num2) {
if (num1 > num2) {
return 1;
}
else if (num1 < num2) {
return -1;
}
else {
return 0;
}
}
var array = [11, 1, 2, 3, 22, 33];
alert(array); // 11, 1, 2, 3, 22, 33
array.sort(CheckNumber);
alert(array); // 1, 2, 3, 11, 22, 33
Multidimensional arrays
As we know, JavaScript array can be store the any type of value, so we can also able to store the array inside the array.
var Multidimensional_Array = [
[1, 2, 3],
["a", "b", "c"],
[4, 5, 6]
];
alert(Multidimensional_Array); // 1, 2, 3, a, b, c, 4, 5, 6
alert(Multidimensional_Array[1]); // a, b, c
alert(Multidimensional_Array[1][1]); // b