A Simple Guide to Arrays in JavaScript.

Welcome to this lesson, in this lesson, we will talk about data structures starting with arrays.

What is an array?

An array is the arrangements of objects or values in a linear order, that is, a line.

Let's illustrate it:

Romeo fell in love with Juliet. They went out on a date. They joined a line of people waiting to order wine.

The line of people they met can also be called an array of people.

If the first person that joins the line of people leaves first, the line becomes a queue. QUEUE - First In, First Out.

If the last person to join the line of people leaves first, the line becomes a stack. STACK - Last In, First Out.

Array, in JavaScript, is a data type specifically for storing values or object in a linear order just like a straight line.

An array is a derived data type because its created by pairing primitive data type or an object with an index.

The index shows the order or position of each element.

It is written as a list of values between square brackets, separated by commas like this:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];

That is how to create arrays using an array literal and it is the easiest way to create a JavaScript Array.

Hey! Just wait!

Look at this picture.

It is a queue of people. You can see they are arranged just like our arrayOfPeople above.

Let's compare them. We can say the first person in the picture is Ayo, the second person is Ope, the third person is Dupe and so on.

To recognize an array, we must see order (1st, 2nd, 3rd, etc) and usually multiple elements ( 'Ope', 'Ayo', 'Ola' )

Indexing in an Array:

Any array has an index starting from zero.

Stop there! What is an index?

An index refers to the position of element in array.

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];

'Ayo' in the arrayOfPeople has 0 as its index, 'Ope' has 1, 'Dupe' has 2, 'Ola' has 3, 'Ariyo' has 4 and 'Temi' has 5 as its index.

Length of an Array.

Length of an array refers to the total number of elements it contains.

arrayOfPeople.length // 6: There are six people in the array of people.

Programmatically, the length of arrayOfPeople should be 5 because the index of an array starts from zero. So, to get the right length of an array in JavaScript, we have to subtract 1 from its length;

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
let lengthOfArrayOfPeople = arrayOfPeople.length - 1;

Assessing or Getting Items in an Array:

To get an element in an array, we simply do:

arrayName[indexOfItem];

For example, in the arrayOfPeople:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];

We can get 'Ayo' with its index.

The index of 'Ayo' in the array of people is 0. So we can get it as in:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
arrayOfPeople[0] // 'Ayo' is returned
arrayOfpeople[1] // 'Ope' is returned
// You can log it in the console if you are not yet building things
console.log(arrayOfPeople[0]) // 'Ayo' is logged.

If we want to get the last person in the array of people and do:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
// undefined 
lastPerson = arrayOfPeople[arrayOfPeople.length]; // wrong

// Temi
lastPerson = arrayOfPeople[arrayOfPeople.length - 1]; // right

If you count from zero, the last person in the arrayOfPeople should have index 5 but by using the total length, we have 6 instead of 5. That is why it returns "undefined". So, we have to subtract one from the length of the array in a case like this.

Changing Elements in an Array:

Elements in an array can be accessed with their indexes. To set or change an element in an array, we can simply set a new value to its index in the given array as in.

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];

arrayOfPeople[0] = 'Obama'; 
/* arrayOfPeople is now ['Obama', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi']. 'Ayo' has been replaced with 'Obama' */

We can change any element by setting its index in the given array to another value as it is done above.

Appending New Element to an Array:

"Append" means to add to the end. So, in this case, we are adding a new element to the end of an array.

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
arrayOfPeople[arrayOfPeople.length] = 'Tola'; // We have added a new person to the arrayOfPeople.

arrayOfPeople // ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Tola'];

Can you explain what happens above?

As I have explained, to get the actual length of an array in JavaScript, we have to subtract 1 from it. So, the length of arrayOfPeople is 6 but it will be 5 if we subtract 1 from it, right?

By doing:

arrayOfPeople[arrayOfPeople.length] = 'Tola';

We add another index (6) to the end of the arrayOfPeope and set its value to 'Tola'.

Think about it!

Using Some Array Methods

"Array" has a lot of methods we can use on it. Let's just use some of them as in:

let arrayOfPeople = ['Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo'];

Now, Obama wants to join the queue to stay behind me because I am a cool guy but the question is: how are we going to add him to the array of people.

We will just do:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
arrayOfPeople.push('Obama');

let's check it in the console;

console.log(arrayOfPeople) // ['Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo', 'Obama'];

Obama has been added to the end of the array. That is it.

What does push() array method do?

"The push() method adds new items to the end of an array and returns the new length." - MDN

What if we want to add Obama to the beginning of the array of people?

In that case, instead of using push(), we will use unshift() as in:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];

arrayOfPeople.unshift('Obama');

console.log(arrayOfPeople) // ['Obama', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo'];

Obama is added to the beginning of the array of people.

What does unshift() array method do?

"The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array." - MDN

E.g

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
let NewLengthOfArrayOfPeople = arrayOfPeople.unshift('Obama'); // ['Obama', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo'];

As I have explained, Obama is added to the beginning of arrayOfPeople and we can check that by logging it in the console as in:

console.log(arrayOfPeople); // ['Obama', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo'];

Then, what will be the value of NewLengthOfArrayOfPeople if we log it in the console?

console.log(NewLengthOfArrayOfPeople) // 7.

Boom! 7 is logged in the console because "The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array." - MDN

What if we want to remove the first or the last person in the array of people?

To remove the first person/item from the array of people, we can just do:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
arrayOfPeople.shift() // return 'Ope';
console.log(arrayOfPeople)

'Ope' has been removed from the start of the array.

What does shift() array do?

"The shift method removes the element at the "zeroeth" index and shifts the values at consecutive indexes down, then returns the removed value." - MDN

According to this MDN, shift() removes the first element of an array and returns the element. For example,

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
let personRemovedFromArrayOfPeople = arrayOfPeople.shift();
console.log(arrayOfPeople) // ['Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi', 'Ayo']
console.log(personRemovedFromArrayOfPeople)// Obama

Recall that we added Obama to the beginning of the array of people. Using shift method on the array of people remove Obama from the array and returned as the value of personRemovedFromArrayOfPeople.

To remove the last person/item from the start of the array, we can do:

let arrayOfPeople = ['Ayo', 'Ope', 'Dupe', 'Ola', 'Ariyo', 'Temi'];
let personRemovedFromArrayOfPeople = arrayOfPeople.pop()// returns 'Ayo';

The pop method removes the last element from the array of people and returns that value to the caller.
'Ayo' has been removed from the end of the array and returned as the value of personRemovedFromArrayOfPeople.

Also, we have many other array methods such as map(), reduce(), some(), every() filter(), concat() and many others. They will be treated in the next lesson.

One more thing

Are you having difficulties to learn and understand JavaScript and build projects with it? JavaScript for a Total Novice teaches JavaScript and Project Making Fundamentals with simple illustrations and examples that make everything so easy. You can now handle any difficult projects without fear.

Don't trust me, get a free previous to judge by yourself: https://bit.ly/3o3TMyg