JavaScript Array is also like a data type that is used to store one or more than one value of a similar type together. It’s like a container which is used to store values in a single variable. We can use an array to store values of string type, or integer type, or an object or any other valid data type in JavaScript. But the type of all the values stored in an array should be the same.
An array in JavaScript is “not” provided contiguous memory locations to store its values. In JavaScript, we do not have to provide the length of the array while declaring an array, yes, we can simply declare an empty array and then add as many elements in it as we want. Arrays are list-like objects which have many built-in functions defined in its prototype for accessing elements, adding elements, array traversal, etc.
JavaScript does not have a specific array datatype for defining arrays. But, there is a predefined Array object and its methods to work with arrays. Arrays also have properties in JavaScript like length which is not a function but a property.
We can create JavaScript array either by using the new keyword or using the array literal notation i.e. [](square brackets).
JavaScript Array using Literal Notation
We can also create an array using array literal notation. An Array literal notation is a comma-separated list of items enclosed within square brackets.
Syntax to create an Array using Array Literal notation:
Creating an array using the array literal notation is simple than creating array using new keyword.
var arr = [ ]; // empty array
var fruits = ["mango","apple","orange","guava"]; // Array having elements
Let’s take an example to see how we can create a simple array using array literal notation.
<script>
var arr = ["Yamaha","Honda","KTM"];
console.log(arr.length)
</script>
3
As you can see in the above code example, we have used the length property of array to print the count of elements present in it. The length property of array is used very frequently while traversing an array.
JavaScript Array using new
- We create an empty Array whenever we don’t know the exact number of elements to be inserted in the Array.
- An empty array can be created using the
new keyword. - We can then use the
push() method to add elements at the end of the array, or use the unshift() method to add to the front of the array. There are many different ways of adding data to an array in JavaScript.
Syntax to create an Array:
Following is the syntax for creating an array using the new keyword.
let arr = new Array(); // empty array
let arr = new Array(10); // array of 10 elements size
let arr = new Array("Java","C","C++"); // array with 3 values
Now, let’s take a simple example to see this in action.
<script>
let fruits = new Array("mango","apple","banana","guava");
console.log(fruits);
</script>
[“mango”, “apple”, “banana”, “guava”]
JavaScript Array: Accessing Elements
We can access array elements by using index value of the stored data elements. Ever data element stored in an array is stored at an index. The array index starts from 0 and goes upto the value (Array.length – 1). So, the first element will be stored at index value 0 and the last element is stored at index value (Array.length – 1)
let fruits = ["mango","apple","orange","guava"]; // Array having elements
console.log(fruits[0]); // Accessing element
console.log(fruits[1]); // Accessing element
console.log(fruits[fruits.length-1]); // Accessing element
mango apple guava
JavaScript Array: Traversal or Iteration
Since an array is an object, we can iterate over its elements using for loop. We have already covered JavaScript for Loop in one of our previous tutorials. We have used the for-of loop in the below example, but you can use the simple for loop as well.
let fruits = ["mango", "apple", "orange", "guava"]; // Array having elements
for(f of fruits) // Traversing array
document.wrtie(f + " ");
mango apple orange guava
For the beginners, let’s see one example of array traversal using the basic for loop as well,
let fruits = ["mango", "apple", "orange", "guava"]; // Array having elements
// Traversing array
for(let i=0; i < fruits.length; i++)
{
document.write(fruits[i] + " ");
}
Array forEach Function:
To loop over an array, we can also use the Array function forEach which is defined in its prototype definition. Let’s see an example for that,
let bikes = ["Honda", "KTM", "Yamaha"];
// using forEach function
bikes.forEach(function(item, index, array) {
document.write(item, index);
})
Honda 0 KTM 1 Yamaha 2
JavaScript Array Object Methods
Below we have specified some of the popular methods that are used for performing various operations on array in JavaScript like adding a new element, removing an element, searching an index of an element, etc.
1. concat(): Joins two or more arrays and returns the joined array.
2. join(): Join all the elements of an array into a string.
3. pop(): Removes the last element of an array and returns that element.
4. reverse(): Reverse the order of a list of elements in an array.
5. shift(): Removes the first element of an array and returns that element.
6. slice(): Selects a part of an array and return that part as a new array.
7. sort(): Sort the elements of an array.
8. push(): Adds new element as the last element and returns the length of the new array.
9. unshift(): Adds new elements to the array and returns the new length.
10. splice(): Adds or removes elements of an array.
11. fill(): Fill the elements into an array with static values.
12. every(): It determines whether all elements of an array are satisfying the provided function conditions.
13. isArray(): To check if the value is an array or not.
14. indexOf(): To find the index of an element in the array.
15. forEach(): To loop over the array values.
Apart from these, there are many more Array prototype functions available. Let’s see a few of these functions in action:
1. Add an element as the Last Element of Array
let bikes = ["Honda", "KTM", "Yamaha"];
bikes.push("Triumph");
console.log(bikes);
[“Honda”, “KTM”, “Yamaha”,”Triumph”]
2. Add an element as the First Element of Array
let bikes = ["Honda", "KTM", "Yamaha"];
bikes.unshift("Triumph");
console.log(bikes);
[“Triumph”,”Honda”, “KTM”, “Yamaha”]
3. Find the index of an Array Element
let bikes = ["Honda", "KTM", "Yamaha"];
// use console.log or document.write for output
console.log(bikes.indexOf("KTM");
1
4. Reverse the Array
let bikes = ["Honda", "KTM", "Yamaha"];
console.log(bikes.reverse());
[“Yamaha”,”KTM”,”Honda”]
Similarly, you can try various functions in the live terminal given below.
JavaScript Array Live Example:
Now let’s see some JavaScript Array code live in action. In the terminal below, we have declared an array, and have implemented a loop to traverse the array. Now, please try using the above mentioned functions to see how they work. Practicing code will help you grasp the concepts faster.
Array Live Example
Array Example:
var bikes = new Array(“Yamaha”,”KTM”,”Triumph”,”Honda”);
for(i=0;i<bikes.length;i++)
{
document.write("
“+bikes[i]);
}
document.write(“
Reverse order: ” + bikes.reverse() + “
“);
In this topic, we explained JavaScript Array and its functions along with various operations that are commonly performed on Array. We have covered multiple code examples to help you understand the concept.
learngram.wordpress.com 