Array in Javascript, Things Worth Remembering

I love javascript Array. Throughout my whole development career, with the help of arrays, I have solved numerous problems.

Javascript is improving day by day, so does the features of an array.

The number of predefined properties that an array supports are huge and It’s not always possible to remember each and every property.

So, here I have mentioned few selective properties and usage of an array that comes in handy at times!

Syntax

Copy
let arr = [14, 'hello', null];
let arr = new Array(14, 'hello', null);

Parameters

Copy
[elem1, elem2, ...elemN]

Declaration and initialization of array in javascript

Declaration

Copy
var myArray = new Array();
var myArray = [];

Initialization

Copy
var myArray = [];
myArray = [10, 20, 30]; // [30, 20, 30]
myArray[0] = 28; // [28, 20, 30]
myArray.push(78); // [28, 20, 30, 78]

Using 'new' keyword to create an array

There is a very slight difference while using the ‘new’ keyword to create an array.

If we use a single numeric parameter, it creates an array in javascript with that many empty blocks. Which results in array length to be the same as the number passed. But the entire array will be empty in this case.

Copy
let arr = new Array(14);
console.log(arr); //[empty × 14]

If we pass a single parameter of any type other than an integer, then the array will be initialized with that single element.

Copy
let arr = new Array('fourteen');
console.log(arr); // ["fourteen"]

In the case of multiple parameters, the array will be created with all the parameters initialized as it’s elements.

Copy
let arr = new Array(13, 14, 15);
console.log(arr); //13, 14, 15

Accessing array elements

Accessing array elements is very easy. An array stores all its elements with a numeric index reference. Hence, to access any particular element we have to use the index like below.

Copy
let arr = new Array(13, 14, 15);
console.log(arr[1]); // 14

Determining array length in javascript

In javascript, array has an inbuilt property named ‘length’. It holds the length of an array or the number of indexed elements in an array.

Copy
let arr = new Array(13, 14, 15);
console.log(arr.length); //3

Here are some facts related to array. length that may create confusion for any new developer.

Associative array elements don’t effect array length.

Yes, that’s true! see the below example.

Copy
let arr = new Array(13, 14, 15);
console.log(arr.length); // 3
arr['element1'] = 40;
arr['element2'] = 60;
console.log(arr.length); // 3

Confusing? not really. Because associative indexes are assigned as an array’s property. So we can access them using a ‘.’ operator.

Continuing the above example, we can access associative values like below:

Copy
console.log(arr['element2']);

or

Copy
console.log(arr.element2);

Now, why this ‘.’ operator works with an array? Because arrays are one type of object. And by using ‘.’ operator we are doing nothing but accessing an object property. Check below code.

Copy
let arr = new Array(13, 14, 15);
console.log( typeof(arr.length)); // Object

How to check if a variable is an array or object

Sometimes it is necessary to know what type of variable we are using. So that, dynamically we can utilize inbuilt properties. Properties such as ‘length’, which returns the length of an array but not of an object.

For such purposes, there two methods which we use to determine whether a variable is an array or object.

Copy
let arr = [1,2,3];
// method 1
console.log(Array.isArray(arr)); //true
// method 2
console.log(arr instanceof Array); //true

How to remove an element from array in javascript

There are many ways of removing elements from an array. Each of these methods has different use cases.

Array pop

Removes and returns an element from the end of an array.

Copy
var arr = [10, 20, 30, 40, 50, 60];
arr.pop(); // returns 60
console.log( arr ); // [10, 20, 30, 40, 50]

Array shift

Removes and returns an element from the beginning of an array.

Copy
var arr = [10, 20, 30, 40, 50, 60];
arr.shift(); // returns 10
console.log( arr ); // [20, 30, 40, 50, 60]

Array splice

Removes an element from any specified position of an array.

Copy
var arr = [10, 20, 30, 40, 50];
var removed = arr.splice(3,1);
// the first parameter is the index position where to start
// ther second parameter is the number of elements to be deleted
console.log(arr); // [10, 20, 30, 50]

**Splice can be used to add elements in an array as well.

Array delete

Deletes the specified index element value of an array and assigns undefined to that index. Hence the length of array never changes.

Copy
var arr = [10, 20, 30, 40];
delete arr[2]; // delete element with index 2
console.log( arr ); // [10, 20, undefined, 40]

Sparse array in javascript

First, let’s look at the below example.

Copy
var arr = [10, 20, , , 50];
console.log(arr); // [10, 20, empty × 2, 50]
console.log(arr.length); // 5

In the above code snippet, the array contains 3 elements but it reserves space for 5 elements. This type of array is called a sparse array where the length and number of elements don’t match.

In conclusion, array functions are very useful. And combined with other javascript functions, one can do pretty much everything using an array.