3 Things You Don’t Know About JavaScript Arrays

Arrays are a widely-used underline of programming languages; they are special variables that can be used to store mixed values during a same time. However when it comes to JavaScript, as easy as it is to learn, there’s always some-more to explore.

In this post, we’ll have a demeanour during 3 reduction obvious nonetheless critical facilities of JavaScript arrays we competence not have famous before.

1. Add Custom Properties to Arrays

If we were to scour a Internet looking for a consummate clarification of JavaScript arrays, we will find that roughly each source though destroy will list array as what it really is, an object.

In fact, roughly all we understanding with in JavaScript will turn out to be an object. There are dual kinds of information forms in JavaScript, primitives and objects, though primitives are always wrapped adult inside objects.

Array, Function, Date, etc. are predefined JavaScript objects that have built-in methods, properties and their possess standardised syntax.

JavaScript arrays can have three conflicting forms of properties:

  1. Indices of an array are also properties
  2. Built-in properties
  3. Custom properties we can supplement by yourself

The initial dual are some-more well-known, we competence use them each day, though let’s see them fast before jumping into how we can supplement your possess tradition skill to an array.

Indices as Properties

JavaScript arrays use a square joint syntax, such as var ary = ["orange","apple","lychee"];.

Indices of array elements are fundamentally properties where a property names are always non-negative integers.

The index-element pair of an array is identical to a key-value pair of an object.

Indices are a singular underline of a Array object, and distinct a other built-in properties, they can be set with a brackets syntax alone, such as ary[3] = "peach";.

Built-in Properties

Arrays also have built-in properties, such as array.length. The length skill carries an integer value that denotes a length of an array.

In general, built-in properties can be frequently found in predefined JavaScript objects like arrays. Along with a built-in methods, they assistance customize general objects so that a objects are fit for conflicting needs.

Built-in properties can be accessed with possibly a object.key or a object["key"] syntax. So we can also write ary["length"] to entrance a length of an array.

Create Custom Properties for a Array Object

Now, let’s pronounce about adding your possess properties to arrays. Arrays are predefined objects that store conflicting forms of values during conflicting indices.

There’s customarily not many need to supplement tradition properties to an array; this is one of a reasons beginners are customarily not taught about this feature. In fact, if we wish to provide an array like a normal intent by adding key-value pairs to it, we competence as good use a normal intent for your purpose. But, this doesn’t meant that there aren’t special cases where we can make use of a fact that an array is an object, by adding one or some-more tradition properties to it.

For example, we can supplement a tradition skill to an array that identifies a “kind” or a “class” of a elements, like we can see it in a instance below.

var ary = ["orange","apple","lychee"];
ary.itemClass = "fruits";

console.log(ary + " are " + ary.itemClass);
// "orange,apple,lychee are fruits"

Note that a tradition skill we supplement to an array is enumerable, that means it will be picked adult by loops such as a for…in statement.

2. Loop by Array Elements

You substantially contend “I know that already”, that is many expected true, we do already know how to go by array elements. But it is also loyal that observant “loop by array elements” is a bit abstract, as what we indeed loop by are a indices of a array.

Since array indices are usually finished adult of non-negative integers, we iterate an integer value typically starting from 0 and finale during a full length of a array, afterwards use that iterated value to entrance a array component during a given index.

However given ECMAScript6, there’s a approach to directly loop by array values though bothering with indices, and that can be finished by regulating a for…of loop.

In an array, a for...of loop will loop by a array elements in a sequence of indices, in other difference it will take caring of iterating over a indices and removing an existing array value during a given index. This loop is ideal if we usually wish to loop by all a array elements, and work with them.

var ary = ["orange","apple","lychee"];

for (let object of ary){
  console.log(item);
}
// "orange", "apple", "lychee"

For comparison, with a unchanging for loop, we get a indices instead of a values as output.

var ary = ["orange","apple","lychee"];

for (var object = 0; object  ary.length; item++){
  console.log(item);
}
// 0, 1, 2

3. The Number of Elements Is Not Its Length

Typically, when we pronounce about a length of an array, we consider that it’s possibly a series of value an array holds, or a length we have given to a array manually. However in reality, a length of an array depends on the largest existent index inside of it.

Length is a very stretchable property. Whether you’ve already bound a length of an array previously or not, if we keep adding values to a array, a length keeps augmenting accordingly.

var ary = [];
ary.length = 3;
console.log(ary.length);
// 3

ary[5] = "abcd";
console.log(ary.length);
// 6

In a instance above, we can see that we gave a array usually one value during index 5, and a length becomes 6. Now, if we consider that by adding a value during index 5 , a array combined a indices of 0 to 4 automatically, afterwards your arrogance is incorrect. There are unequivocally no existent indices from 0 to 4 in that array. You can check this regulating a in operator.

var ary = [];
ary.length = 3;
console.log(ary.length);
// 3

ary[5] = "abcd";
console.log(ary.length);
// 6

console.log(0 in ary);
// false

The array ary is what we call a “sparse” array, an array where a indices aren’t combined continuously, and have gaps. The conflicting of a “sparse” array is a “dense” array where indices exist invariably in a array, and a series of elements are a same as a length.

The length skill is also able of truncating an array, creation certain a top index benefaction in a array is always less than itself, as length is always numerically larger than a top index by default.

In a instance below, we can see how we remove a component during index 5 by dwindling a length of a ary array.

var ary = [];
ary.length = 3;
console.log(ary.length);
// 3

ary[5] = "abcd";
console.log(ary.length);
// 6

ary.length = 2;
console.log(ary.length);
// 2

console.log(ary[5]);
// undefined

Further Reading

Add Comment