How to Create an Arrays in JavaScript

JavaScript

Today I will explain how to create an arrays in JavaScript. In previous article we explained how to create object in JavaScript. In JavaScript array is also type of object but they have little bit difference. Basically object is a collection of data in the form of key/value pair but Array doesn’t have key/value pair.

An array is a collection of data i.e we can store multiple value (strings, numbers, objects, functions, and even other arrays) in single variable. The value in an array is called an element, and position of each element is called index. The index of array starts from zero i.e. first element at zero index position.

We can create array inside another array i.e. called multidimensional array.

There are 3 ways to construct array in JavaScript

  1. Array literal
  2. Create instance of Array
  3. Array constructor

Create an array using array literal

This is the easiest way to create an array in JavaScript. In this way, we use square bracket [ ] to create an array.

let array = []
array[0] = 'Web Study Point'
array[1] = 'www.webstudypoint.com'
console.log(array) 
// Output - ['Web Study Point', 'www.webstudypoint.com']

=================================================================

// Single dimensional array
let array = ['Web Study Point', true, 10]
console.log(array[0]) // Output - Web Study Point
console.log(array[1]) // Output - true
console.log(array[2]) // Output - 10

=================================================================

// Multidimensional array (array of arrays)
let array = ['Web Study Point', true, 10, ['HTML', 'JavaScript']]
console.log(array[0])    // Output - Web Study Point
console.log(array[1])    // Output - true
console.log(array[2])    // Output - 10
console.log(array[3])    // Output - ['HTML', 'JavaScript']
console.log(array[3][0]) // Output - HTML
console.log(array[3][1]) // Output - JavaScript

Create an array using instance of array

In this way we will use new keyword to create an array in JavaScript.

let array = new Array(); // create an array
array[0] = 'Web Study Point' // assign or add value
array[1] = 10
array[2] = true
array[3] = ['HTML', 'JavaScript']
console.log(array) 
// Output - ["Web Study Point", 10, ["HTML", "JavaScript"]]

Create an array using array constructor

In this way we will use also new keyword. We need to create instance of array by passing arguments in constructor.

let array = new Array('Web Study Point', true, 10, ['HTML', 'JavaScript']) // create an array
console.log(array[0])    // Output - Web Study Point
console.log(array[1])    // Output - true
console.log(array[2])    // Output - 10
console.log(array[3])    // Output - ['HTML', 'JavaScript']
console.log(array[3][0]) // Output - HTML
console.log(array[3][1]) // Output - JavaScript

Find Length of an Array

If you want to find the length of an array then we can use length property which returns the total number of elements from an array.

let array = ['Web Study Point', true, 10, ['HTML', 'JavaScript']] // create an array
console.log(array.length) // Output - 4

In the above you have seen the length of an array is 4 because there are 4 elements and their index position is 0 to 3.

Access elements of an Array using loop

We can access the elemnet of an array using loop. Which are as follows:

// Using for loop with a numeric index
let array = ['JavaScript', 'HTML', 'CSS']
for(var i = 0; i < array.length; i++) { 
  console.log(array[i]) // Print array element
}

==================================================

// Using for-of loop 
let array = ['JavaScript', 'HTML', 'CSS']
for(let item of array) { 
  console.log(item) // Print array element
}

==================================================

// using for-in loop
let array = ['JavaScript', 'HTML', 'CSS']
for(var item in array) { 
  console.log(array[item]) // Print array element
}

==================================================

// Using forEach
let array = ['JavaScript', 'HTML', 'CSS']
array.forEach(function(item){
  console.log(item) // Print array element
})

==================================================

//Using map
let array = ['JavaScript', 'HTML', 'CSS']
array.map(item => {
  console.log(item) // Print array element
})

Conclusion

So using this article anyone can easily understand how to create an arrays in JavaScript. In this article I have explained what is an array, create an array, find length of an array and access the elements of an array using loop.

Points to be remember

  • An array is a type of object that stores multiple values in single variable.
  • An array can store different data types.
  • Array literal syntax: let array = [“element1”, “element2”, “element3”]
  • Array constructor or instance of array syntax: let array = new Array(3)
  • The first element of an array on zero position e.g. array[0].
  • The length property to find number of elements from an array.

If you want to improve or find anything wrong/error in this article then please leave a message using below comment box.

Leave a Reply

Your email address will not be published. Required fields are marked *

five × three =