JavaScript 101 – Lesson 06 – Digging into Arrays

JS101

Welcome back in JavaScript 101 series. In this lesson I’m going to talk about arrays.

The Array is a very important concept in any programming language, same here for JavaScript! So, I decided to write a full lesson on this data type.

The array is a built in data type in JavaScript, like String, Boolean, etc. The purpose of the array is to store a collection of values or sequence of values, obviously similar type values. An array can have any type of values, we can also mix them in a single array if we want. But in general, we use the same type of values in a single array.

We can create an Array in the same way like we created an Object in the previous lesson. We can create an empty array as below –

var myArray = new Array();

We can also pass values of the array to Array() constructor, like –

var myArray = new Array(10, 11, 12, 13);

 

We just created an array object with 4 values – 10, 11, 12 and 13. We can access array elements by using index number. Please note, array index starts with ‘0’, so here, myArray[0] = 10 and myArray[3] = 13.

We can use them as alert( myArray[0] );
 

We can find the length of an array by using ‘length‘ property of array object.

var lengthOfArray = myArray.length;

 

So, we can combine above code statements as below –

var myArray = new Array(10, 11, 12, 13);

var lengthOfArray = myArray.length;

alert( lengthOfArray ); //length of myArray

alert( myArray[0] ); //First Element of myArray

 

We can set or overwrite values of an array by using index number also. The index should always be used sequentially, it’s a best practice. Like –

myArray[4] = 22; //Setting new value of 5th element 
myArray[0] = 8; //Setting updated value of 1st element 

 

The above format was just for the basics of arrays. Now I’m going to write about Array Literal Syntax which is much like object literal notation. The array literal syntax is a more efficient format of creating an array we have been using now a days in JavaScript coding.

Array literal syntax starts with an opening square bracket ‘[‘ and ends with a closing square bracket ‘]‘.

For example:

var myArray = []; //We've just created an empty array!

We can set values as below –

var myArray = [10, 11, 12, 13];
var studentName = ['Kamal', 'Abir', 'Jannat', 'Salim'];

alert( myArray[2] ); //12
alert( studentName[1] ); //"Abir"

We can always add/overwrite array value by using the index number. Like –

var studentName = ['Kamal', 'Abir', 'Jannat', 'Salim'];
studentName[4] = "Rahat"; //Adding a new string value
studentName[5] = "Rifat";
studentName[studentName.length] = "Kabir"; //Dynamically Setting value to last element
studentName[0] = "Ashraf"; //Overwriting or updating a value

alert( studentName.length ); //It should be 6
alert( studentName[4] ); //It should be "Rahat"
alert( studentName ); //Printing the full array structure
alert( studentName.toString() ); //Structure of our array as a string
alert( studentName.join('\n') ); //Joining array elements, separating with newline, and printing it

 

We can also use mix type of values in a single array. For example:

//Declaring Mixed Array
var mixArrVal = ["Kadir", 26, true, "Senior Programmer"];

//Assigning Elements to Specific Variables
var name = mixArrVal[0]; //Kadir, a string
var age  = mixArrVal[1]; //26, an Intiger
var blackHair = mixArrVal[2]; //true, a boolean
var designation = mixArrVal[3]; //Senior Programmer, a string

//Checking Values
alert( name );
alert( age );
alert( blackHair );
alert( designation );

We can easily add a new element at the last position of the array by using ‘push()‘ method.

mixArrVal.push("Love to Travel");

var hobby = mixArrVal[ mixArrVal.length - 1 ]; //Checking the last element

alert( hobby );

 

Joining Arrays:

The ‘concat()‘ method can be used to connect/concatenate multiple arrays to a single one. For example:

var name = ["Kadir", "Rafiq"],
	name2 = ["Almas", "Rubel"];
	name3 = ["Hasan", "Sumon"];

var person = name.concat( name2 );
var person2 = name.concat( name2, name3 ); //We can concat as many as we want
alert( person2 ); //Should be 6 elements

The ‘join()‘ method concat array elements and separate them by our specified separator. Like –

var names = ["Hasan", "Sumon"];

var joinedOutput = names.join(' - '); 

alert( joinedOutput ); //Hasan - Sumon

 

Reversing Array Elements:

We can reverse the order of array elements by using the’reverse()‘ method.

var names = ["Hasan", "Sumon"];

var reverseOutput = names.reverse(); 

alert( reverseOutput ); //Sumon,Hasan

 

Sorting Array Elements:

We can sort array elements alphabetically by using ‘sort()‘ method as below –

var names = ["Hasan", "Sumon", "Abir", "Jahid"];
var numbers = [22, 9, 58, 27, 15, 25];
var sortedNames = names.sort(); 
var sortedNumbers = numbers.sort(); 
alert( sortedNames ); //Abir,Hasan,Jahid,Sumon
alert( sortedNumbers ); //9,15,22,25,27,58

 

We reached at the end point of this lesson. Thanks for reading!

Leave a Comment.