Starting With JavaScript Array

Starting With JavaScript Array

Q. What is an Array in JavaScript?

Ans. It is a special variable that can store multiple same or different types of values at a time.

For understanding, if we are having 5 different types of colors,

var colour_1: "Red"; 
var colour_2: "Blue"; 
var colour_3: "Green";
var colour_4: "Black";
var colour_3: "White";

Now, what if we want to go through all the colors and find a specific one, form the list of not only 5 colors but maybe 100s? that's is the case when we are using Array.

var colors = ["Red","Blue","Green","Black","White"];
// 0R
var colors = [
{colour_1: "Red"},
{colour_2: "Blue"},
{colour_3: "Green"},
{colour_4: "Black"},
{colour_5: "White"}
];

Now, each element of the array is having an index position, and by that, we can easily find our require color.
Examples

var numArray = [1,22,13,34,205,63,19], here numArray is an array of some Integer

var nameArray = ['Hermione', 'Ron', 'Ginny' , 'Harry' ], here nameArray is an array of some String

var ArrayOfAll = ['snape', {name:'sirius', age:55}, 454, 'dobby', ], here nameArray is an array of some Integer, String as well as object

Q. How do we create Array in JS?

Ans. We can create an Array in multiple ways.

1st and most common way

in this way we can just declare a variable and assign elements in that variable surround by [ ]

var newArray = [element_1, elemen_2, element_3, ..., element_n];

another way to create an Array is using the new keyword and as per requirement, at the same time, we can assign the values to it. Example :

var colors = new Array("Red", "Blue", "Green", "Black","White");

Q. How do we can access the elements of Array in JS?

Ans. We can access the elements of Array by referring to its index number

array's index number starts with 0. Simply, we can think that the very first element of an array will be having an index(0) and it will iterate incrementally till the last element of that array.

var colors = new Array("Red", "Blue", "Green", "Black","White");
console.log(colors[0]); // Red
console.log(colors[1]); // Blue
console.log(colors[2]); // Green
console.log(colors[3]); // Black
console.log(colors[4]); // White

template.jpg

In this way, if want to access the last element of an array then we have to access 1 index less to the full array's length. Example

var colors = new Array("Red", "Blue", "Green", "Black","White");
console.log(colors[colors.length -1]);
// => White

Q. What are the length of an Array and its usages?

Ans. The length of an array is nothing but the total number of elements are presenting in that array

to get an array's length simply we can use array.length which will return the length in integer

Example

var colors = new Array("Red", "Blue", "Green", "Black","White");
console.log(colors.length);
// => 5

this is the reason we use array.length - 1 to get the last element of an array

var colors = new Array("Red", "Blue", "Green", "Black","White");
console.log(colors[4]); // => "White"
console.log(colors[colors.length -1]); // => "White"

Q. Can we add elements in an array by its index number? if so then how?

Ans. Yes, we can add elements in an array by their index number.

when we create or use an existing array it is having its index number, to add elements we have to mention array[*index_number*] = *value*;

// adding in new empty array
var cars = [];
console.log(cars); => [] // an empty Array
// now adding elements in this empty array.
cars[0]="BMW";
cars[1]="Creta";
cars[2]="Safari";
cars[3]="Benz";
console.log(cars); => ["BMW", "Creta","Safari","Benz"] 
// Returning an 4 elements array

Q. What will be the output array if we add an element in index 6 in the cars array?

Ans. Well, this is a bit tricky. In Javascript, if we skip any index and add elements to the array after some index it will add those elements to the given or specified index, and the index we skipped will be empty(undefined). The index of the last element of this array is 10. It will be very good if we look into some example:

var cars = ["BMW", "Creta", "Benz", "Audi"];
cars[6] = "Ford";
cars[10] =  "Chevrolet";
console.log(cars); 
// output:  => ["BMW", "Creta", "Benz", "Audi", empty × 2, "Ford", empty × 3, "Chevrolet"]
0: "BMW"
1: "Creta"
2: "Benz"
3: "Audi"
6: "Ford"
10: "Chevrolet"

Now if we try to access the element at 4th or 5th position of 8th position it will Return undefined because in that index no element is there

console.log(cars);
=> ["BMW", "Creta", "Benz", "Audi", empty × 2, "Ford", empty × 3, "Chevrolet"];
console.log(cars[3]) // => Audi;
console.log(cars[4]) // => `undefined`;
console.log(cars[5]) // => `undefined`;
console.log(cars[8) // => `undefined`;

Now the question is What will be the length or this new cars Array?

The length of this new array will be 11 which contain 6 elements typeOf String and 5 elements typeOf Undifined

console.log(cars.length);
// => 11;
console.log(typeof(cars[0])); // => string 
console.log(typeof(cars[1])); // => string
console.log(typeof(cars[2])); // => string
console.log(typeof(cars[3])); // => string
console.log(typeof(cars[4])); // => undefined
console.log(typeof(cars[5])); // => undefined
console.log(typeof(cars[6])); // => string
console.log(typeof(cars[7])); // => undefined
console.log(typeof(cars[8])); // => undefined
console.log(typeof(cars[9])); // => undefined
console.log(typeof(cars[10])); // => string

Did you find this article valuable?

Support Bibhas by becoming a sponsor. Any amount is appreciated!