JavaScript Arrays
JavaScript Array is a single variable that is used to store elements of different data types. JavaScript arrays are zero-indexed. Javascript Arrays are not associative in nature.
Declaration of an Array
There are basically two ways to declare an array.
1. Creating an array using array literal:
let arrayName = [value1, value2, ...];
Javascript
// Initializing while declaringlet courses = ["HTML", "CSS", "Javascript", "React"];console.log(courses) |
[ 'HTML', 'CSS', 'Javascript', 'React' ]
2. Creating an array using the JavaScript new keyword:
let arrayName = new Array();
javascript
// Initializing while declaringlet arr1 = new Array(3)arr1[0] = 10arr1[1] = 20arr1[2] = 30console.log("Array 1: ", arr1)// Creates an array having elements 10, 20, 30, 40, 50let arr2 = new Array(10, 20, 30, 40, 50);console.log("Array 2: ", arr2)// Creates an array of 5 undefined elementslet arr3 = new Array(5);console.log("Array 3: ", arr3)// Creates an array with one elementlet arr4 = new Array("1BHK");console.log("Array 4: ", arr4) |
Array 1: [ 10, 20, 30 ] Array 2: [ 10, 20, 30, 40, 50 ] Array 3: [ <5 empty items> ] Array 4: [ '1BHK' ]
Note: Both the above methods do exactly the same. Use the array literal method for efficiency, readability, and speed.
Accessing Elements of an Array
Any element in the array can be accessed using the index number. The index in the arrays starts with 0.
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log(courses[0])console.log(courses[1])console.log(courses[2]) |
HTML CSS Javascript
Change elements from a pre-defined array
Example : In the given example, we have changed the value of the first element that is ‘CSS’ to ‘GeeksforGeeks’
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log(courses)courses[1]= "GeeksforGeeks"console.log(courses) |
[ 'HTML', 'CSS', 'Javascript' ] [ 'HTML', 'GeeksforGeeks', 'Javascript' ]
Convert an Array to String:
Example : In the given example, we have an in-built method toString() in Javascript that converts an array to a string.
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log(courses.toString()) |
HTML,CSS,Javascript
Increase and decrease the length of an array :
Example : In the given example, We have increased and decreased the length of an array using the Javascript’s length property.
Javascript
const courses = ["HTML", "CSS", "Javascript"];courses.length = 5 // Increasing array length to 5console.log("Array after increased length: " ,courses)courses.length = 2 // Decreasing array length to 2console.log("Array after decreased length: " ,courses) |
Array after increased length: [ 'HTML', 'CSS', 'Javascript', <2 empty items> ] Array after decreased length: [ 'HTML', 'CSS' ]
We can also update an array after initialization :
javascript
const courses = ["HTML", "CSS", "Javascript"];courses.length = 5 // Increasing array length to 5console.log("Array after increased length: " ,courses)courses[3] = 'PhP'courses[4] = 'React'console.log("Array after initializing: ", courses) |
Array after increased length: [ 'HTML', 'CSS', 'Javascript', <2 empty items> ] Array after initializing: [ 'HTML', 'CSS', 'Javascript', 'PhP', 'React' ]
Loop through Javascript Array Elements :
Example : In the given example, We have looped through the elements of a Javascript array using the for loop:
Javascript
const courses = ["HTML", "CSS", "Javascript"];for (let i = 0; i < courses.length; i++) { console.log(courses[i])} |
HTML CSS Javascript
This can also be done by using the Array.forEach() function of Javascript.
Javascript
const courses = ["HTML", "CSS", "Javascript"];courses.forEach(myfunc);function myfunc(elements) { console.log(elements);} |
HTML CSS Javascript
Adding new elements to JavaScript Array :
Example : In the given example, We have used the Javascript in-built push() method we can add new elements to an array.
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log("Original Array: ",courses)courses.push("React")console.log("Array after adding an element: ",courses) |
Original Array: [ 'HTML', 'CSS', 'Javascript' ] Array after adding an element: [ 'HTML', 'CSS', 'Javascript', 'React' ]
We can also add a new element to a Javascript array using the length property.
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log("Original Array: ",courses)courses[courses.length] = "React"console.log("Array after adding an element: ",courses) |
Original Array: [ 'HTML', 'CSS', 'Javascript' ] Array after adding an element: [ 'HTML', 'CSS', 'Javascript', 'React' ]
Arrays are Objects :
Example : In the given example, The Javascript typeof operator returns “object” for arrays.
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log(typeof courses) |
object
Difference between Javascript arrays and objects
- Javascript arrays use indexes as numbers
- objects use indexes as names.
When to use JavaScript Arrays and Objects?
- Arrays are used when we want element names to be numeric.
- Objects are used when we want element names to be strings.
JavaScript new Array() :
- JavaScript has a built-in array constructor
new Array(). - [] can also be used.
These two different statements both create a new empty array named points:
const points = new Array();
const points = [];
Recognizing a JavaScript Array
There are two methods by which we can recognize a JavaScript array:
- By using Array.isArray() method
- By using instanceof method
Below is an example showing both approaches:
Javascript
const courses = ["HTML", "CSS", "Javascript"];console.log("Using Array.isArray() method: ",Array.isArray(courses))console.log("Using instanceof method: ",courses instanceof Array) |
Using Array.isArray() method: true Using instanceof method: true
A common error is faced while writing the arrays:
const numbers = [5]
// and
const numbers = new Array(5)
Javascript
const numbers = [5]console.log(numbers) |
[ 5 ]
The above two statements are not the same.
Output: This statement creates an array with an element ” [5] “.
[5]
Javascript
const numbers = new Array(5) console.log(numbers) |
[ <5 empty items> ]
For commonly used Array methods refer to the links below.
- JavaScript Array Functions – Part 1
- JavaScript Array Functions – Part 2
- JavaScript Array Functions – Part 3
We have a complete list of Javascript Array methods, to check those please go through this Javascript Array reference article.
We have a Cheat Sheet on Javascript where we covered all the important topics of Javascript to check those please go through Javascript Cheat Sheet-A Basic guide to JavaScript.
.png)
Please Login to comment...