Javascript Arrays – Learn How To Store Multiple Values In One Variable

What are Javascript Arrays?

Javascript Arrays are the variables which store multiple values. Each value in the array is called as an element and each element has a numeric position. We call that position as an array index.

Why do we need to use Arrays over variables?

The Problem with variables are, you can store only one value per one variable. Then what to do if you want to store multiple values at a single variable.

For example, you need to store all the names of your classmates. You have 100 members in your class. How do you do that? If you use variables, you need to create 100 variables.

But, It’s not a good programming strategy.

So, what to do? To overcome this type of scenario Javascript arrays were introduced.

An Array is a collection of elements. Where the elements are the javascript values. The Elements can be any type.

How to create Javascript Arrays?

To create an array write all the elements within the square brackets and each element should be separated with a comma (,) operator.

Syntax:

var array_name = [element1,element2,element3.....elementn];

For Example, Let’s create an array to store 5 numbers.

var my_arr = [1,2,3,4,5];

Note: Don’t put a comma (,) after the last element.

In traditional programming languages, array elements are strictly typed. Means you can only store one type of values per array.

But In javascript, Array elements are un-typed. You can store different types of values per array.

See the example below.

var my_arr = ['Joovin',23,true];

console.log(my_arr); 

//output  ['Joovin',23,true];

In the above example, I created an array and added 3 different types of values such as string, number, boolean.

Creating an Array object.

In javascript, You can also create an array using Array( ) constructor.
Syntax: 
var array_name = new Array( );

Have a look at on below example.

var my_arr = new Array();

The above example will create an array with no elements.

To create an array with elements using array constructor, you need to pass elements as arguments through the Array( ) constructor.

See the example below.

var my_arr = new Array(1,2,3,4,5);

console.log(my_arr);

//output [1,2,3,4,5]

The above example will create an array with 5 elements.

Accessing Array elements

Before going to access array elements you need to know array indexing.

For example, you create an array with 5 elements.

var my_arr = [1,2,3,4,5];

In the above example, each and every element is specified by a numeric position called as an index. The array index is zero-based means it stores index from zero.

In the above example, element 1 has an index 0, and element 2 has an index 1, element 3 has an index 2 and element 5 has an index 4.

See the picture below for better understanding

javascript arrays - array indexing

Hoping, now you understand the array indexing.

Now, let’s discuss how to access an array element. To access array element follow the below syntax.

array_name[array_index]

To access an array element, you have to specify an index of the array within the square brackets with a prefix of array_name.

See the example below

var my_arr = [1,2,3,4,5];
console.log(my_arr[0]); // will return the the first element of the array

console.log(my_arr[1]); // will return the second element of the array

Iterating Array Elements

There is a special looping statement in javascript to iterate(i.e, displaying all the elements of the array) the arrays and that is for/in loop.

for/in loop is helpful for reading all the elements of an array at once.

Let’s check the syntax below.

for ( var index in array_name ) {
        console.log(index);
}

The for/in loop iterates the array elements including index.

See the example below for better understanding.

var marks = [60,65,50,90,70];
for( var temp in marks ){
        console.log("marks" + " " + marks[temp]);
}

In the above example, the variable temp doesn’t store the value of the iterated element. It just stores the index of the iterated element.

Output for the above example is

marks 60
marks 65
marks 50
marks 90
marks 70

Hoping! Now you understand the concept of arrays. In later articles, we will learn about array methods.

Try other javascript tutorials on my blog.

  1. Javascript operators
  2. Variables in Javascript
  3. Strings in Javascript
  4. String Methods in Javascript
  5. Objects in Javascript

If you like this article, please share with your friends. And if you have any doubts feel free to comment below.

Thanks for reading.

Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes1
No0
Powered by Pixelbart

Leave a Reply

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