DEV Community

Ayobami Ogundiran
Ayobami Ogundiran

Posted on • Updated on

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'];
Enter fullscreen mode Exit fullscreen mode

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.

Queue

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'];
Enter fullscreen mode Exit fullscreen mode

'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.
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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' */
Enter fullscreen mode Exit fullscreen mode

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.
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

let's check it in the console;

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

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'];
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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'];
Enter fullscreen mode Exit fullscreen mode

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

console.log(NewLengthOfArrayOfPeople) // 7.
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

'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
Enter fullscreen mode Exit fullscreen mode

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';
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)