JavaScript Array: tips, tricks etc
By: Sabbir Hossain
Tags: Javascript Arrays, Programming, JavaScript, Arrays, Js

The Array is one of the most used features in any programming language. In JS, it is also the same. But arrays in js are not the same as in other programming languages. In the abstract view, it is the same, but there are some differences between the JS and other programming languages’ arrays. Here I’m trying to explain some of the tips and tricks that I have learned while using arrays.

Array is used to store multiple values in a single variable. Array is a special type of object, where all the index positions of the array are keys, values of indexes are of that key’s value. And there is another key which is length and it’s value will be sizeof array.

const arr = [1, 2,3]; console.log(arr);

/*

{

0: 1,

1: 2,

2: 3,

length: 3

}

*/

So main difference between array and object is, array’s key are positive integers and object’s key are string. Array has additional key which is length. Object has additional property which is __proto__.

How do we initialize an empty array?

const arr = [];

const arr1 = new Array();

const arr2 = Array();

Now we can add values into the array by using following method:

const arr=[]; | const arr=[5, 6, 7]; | const arr=new Array();

arr[0] = 1; | arr[3] = 8; | arr[0] = 1;

arr.push(2); | arr.push(9); | arr.push(2)

console.log(arr);| console.log(arr); | console.log(arr); /*

[ 1, 2 ] | [5, 6, 7, 8,9 ] | [ 1, 2 ]

*/ /*****************************************************************/

const arr = new Array(5, 6, 7); arr[3] = 8; arr.push(9);

console.log(arr); /* [5, 6, 7, 8, 9 ] */

But what will happen, if we use the following method:

const arr = new Array(3);

arr[0] = 1;

arr[1] = 2;

arr.push(3);

console.log(arr);



/*

1, 2, undefined, 3

*/

const arr = new Array(3); means, we are create an array with size of 3 where all initial values are undefined. Next 2 line, we re-assign value. And when we use arr.push(3); it will push value at index 3 (after last index). so arr[2] will remain undefined

Let’s drive into little bit deeper.

create a new array const arr = [1, 2, 2, 4, , 5]; as you can see, at index 4, it is empty, It is valid. JS engine just set undefined value at index 4. Here array length is 6. Now let update the array length. arr.length = 8; So if we log, we will get the following result.

const = [1, 2, 2, 4, , 5]; //index 4 value will be undefined, and length will be 5 arr.length = 8; // valid

for(let i=0; i<arr.length; i++)

console.log(arr[i]) // this will execute 8 times // 1, 2, 2, 4, undefined, 5, undefined, undefined for( const number of arr)

console.log(number) // this will execute 8 times // 1, 2, 2, 4, undefined, 5, undefined, undefined

As you can see, JS array can be most any value, they might have undefined values. If we do some calculation inside loop, it is better to check data is valid or not. But there are some better way. Like following

arr.forEach( (number) {

console.log(number) // 1, 2, 2, 4, 5,

});

forEach, map, find, findIndex, filter, reduce, reduceRight will check null or undefined validation. It might help us to avoid some errors

As we already know, the JS array is also an object. Is it possible that we can save object key-value in array. Yes, it is possible. But there will be some consequence.

const arr = [ 1, 2, 2, 4]; console.log(typeof arr); // object

arr['some-key'] = "any-value"; // valid for(const number of arr) { console.log(number) } // 1, 2, 2, 4 // 'some-key' value will be omitted arr.forEach( number => {

console.log(number)

}) // 1, 2, 2, 4

If we want to get all values of arr, there are multiple ways

const arr = [ 1, 2, 2, 4];

arr['some-key'] = "any-value"; // method 1:

for(let key in arr) {

console.log(arr[key]); // 1, 2, 2, 4, "any-value"

} // method 2:

Object.keys(arr).forEach((key) => {

console.log(arr[key]); // 1, 2, 2, 4, "any-value"

}) // method 3:

Object.values(arr).forEach((value) => {

console.log(value); // 1, 2, 2, 4, "any-value"

}) // method 3:

for(const [key, value] of Object.entries(arr)) {

console.log(value); // 1, 2, 2, 4, "any-value"

}

Here is one last interesting things, in the array, the index will be a positive integer starting from 0. But in the object, the key will be a string. So if you look closely

for(const [key, value] of Object.entries(arr)) {

console.log("key: ${key}, typeof: ${typeof key}");

// key: 0, typeof: string

// key: 1, typeof: string

}

If we ever face this kind of situation, make sure to always convert the key from string to number.

Thats it for now. I will write more details in next article.