Understanding Javascript Array Series I - What is an Array?

What is an Array? 💁

In computer programming, a variable is a storage location which holds some known or unknown quantity of data(information) often called value. An array is a special variable which can hold more than one value at a time. Same goes for arrays in Javascript and any other programming language. These values can be of different data-types.

Assuming you want to store a couple of names in different variables, you would do something like this:

 const player1 = 'Messi';
 const player2 = 'Ronaldo';
 const player3 = 'Kante';
 const player4 = 'Dembele';

To access these names, we would have to call these variables individually which can be tedious in a case where we have about 100 names, but if we were to store our names with an array, we could easily access them with a for ... loop.

 const players = ['Messi', 'Ronaldo', 'Kante', 'Dembele'];

Arrays are a special type of objects. The difference is that arrays use indexes to access the items in it while objects use their keys. Javascript follows the zero-index notation where every element in an array is assigned an index starting from 0 when they are added to the array. Some other languages follow one-index notation, where elements are assigned index starting from one.

 // indexes     0         1           2       3
 const arr = ['Nedy', 'Javascript', 'Tech', 'soccer'];

 //            key     value            key            value
 const obj = {name: 'Nedy Udombat', profession: 'Software Developer'};

How do we create an Array?

In Javascript, an array can be created in various ways:

• Using Array Literals: This is the easiest and most common way of creating an array in Javascript. This involves declaring a variable and initialising it with the values to be stored in a square bracket. Let's create some arrays below:

 // empty array
 const emptyArray = [];

 const players = ['Messi', 'Ronaldo', 'Kante', 'Dembele'];

 // arrays can have values of different data types in them.
 const arr = [1, '1', undefined, NaN, true, {name: 'Nedy'}];

 // arrays can even consist of other arrays and functions in them.
 const arrInArray = [1, [ '1', 2], function() { console.log('Hey Nedy'); }];

• Using The New Keyword: This allows you the set extra options like the length of the array during declaration.

 // specifying the length of the array during the declaration
 const lengthyArray = new Array(8)

 console.log(lengthyArray) // []
 console.log(lengthyArray.length) // 8

 const players = new Array('Messi', 'Ronaldo', 'Kante', 'Dembele');

While creating an array it is important to note that if there are more than one items at the point of initializing an array, these items should be separated by a comma.

How do we access the items in our Array?

We can access the elements in our array by placing their indexes in a square bracket appended to the array variable arr[index].

 const players = ['Messi', 'Ronaldo', 'Kante', 'Dembele'];

 console.log(players[0]) // Messi
 console.log(players[1]) // Ronaldo

At this point, you should have a basic understanding of what an array is in Javascript and how to create one. This is the first part of my Javascript array series. Follow me get updated when the next series comes out.

Here is the link to the other articles on this Array series written by me:

• Alternate ways of Creating an Array
• Array Properties

Comments

[Hashim Warren]

Solids, solid introduction. Thanks

[Nedy Udombat]

You re welcome @hashimwarren

[KhoPhi]

Looking forward to the rest of the articles for the next 30 days.

Thanks for sharing this!

[Nedy Udombat]

You can follow me to stay updated, I am glad you liked the article. @khophi

[Gift Egwuenu]

Awesome article Nedy! Keep them coming

[Nedy Udombat]

Thank you @lauragift21 .

[Samuel Umoren]

Simplest introduction for beginners.

[Nedy Udombat]

@umoren , Thank you.

[Olakunle Hassan]

so glad i'm following you, ready to get my JS knowledge solid.

thanks

[Will Adams]

Arrays are objects in JavaScript, their keys are the index. They just have an iterator. So both arrays and objects use the key value data structure they're not different in that respect.