const - JS | lectureJavaScript Fundamentals 2

We are now going to learn our very first data structure. Arrays. Let's say we want to store some fruits in variables to use them later in our code. From what we've learned so far, this is how we would do it:

const fruit_1 = 'Banana';
const fruit_2 = 'Apple';
const fruit_3 = 'Pineapple';
const fruit_4 = 'Orange';

Doing this means if we had 20 fruits, we would have to create 20 variables. It would be tedious, and there will be no fun in doing that. Instead, won't it be great to bundle all these values together into some bigger container? Well, that's the reason why we have data structures in JavaScript, and arrays are such a data structure.

An array is like a big container in which we can throw variables and then later reference them. That's super important because programming is, most of the time, all about data. We get data from somewhere, store and process data, and then give some data back. And that data has to go somewhere .i.e it has to be stored in someplace reason why we use data structures, just like Arrays.

The two most important data structures, at least in JavaScript, are Arrays and Objects.

Back to our fruits, instead of declaring a variable to store every single fruit, let's store our fruits in an array. Here is how we do it:

const fruits = ['Banana', 'Apple', 'Pineapple', 'Orange'];

You can see that to create our array, we used brackets inside which we added our fruits, each separated by a comma. You can now try to log the fruits variable to see what it looks like.

This is the absolute basic about arrays. There is actually another way of creating an array in JavaScript:

const evenNumbers = new Array(2, 4, 6, 8, 10);

You have to note that an array can hold as many values as we want and values of any type we'd like. It doesn't have to be strings as we previously did; numbers work just the same.

You can also see that the new way of creating an array uses an Array function. It's a function because we called it using parenthesis. We also needed to use the new keyword because otherwise, it will not work.

It's way more usual to use the brackets as we did before, which is called the literal syntax.

Now that we know how to create and put elements into an array let's figure how to get an element out of an array. To get an element out of an array, we make use of the square bracket syntax again. Let's say we want to log to the console the first element of the fruits array.

console.log(fruits[0]); // Result ==> Banana

The first element is at fruits[0] and not fruits[1]. This is because arrays are zero-based, which means that Banana is element number zero, and Apple is element number one, and so on.

So if we wanted Orange, we would do:

console.log(fruits[3]); // Result ==> Orange

We can also get the actual number of elements inside an array by doing:

console.log(fruits.length); // Result ==> 4

The dot length is something called a property, which we will see soon when we talk about objects.

Anyway, what matters is that this will be the exact amount of elements in the array; and it is not zero bound. Meaning it will not be three even though the last element in the fruits array is element number three. Instead, it gives us the number of elements in the array. So logging that should give us 4 in the console.

We can use this to get the last element of an array automatically. Here is how we can do that

console.log(fruits[fruits.length - 1]);

We are doing fruits.length - 1 because, remember fruits.length is not zero-based. Thus it will give us 4, but the last element in our array is at position 3, and so we always need to subtract one from fruits.length. This also means that we can put any expression inside the array brackets when searching for an element. It doesn't always have to be a number.

Moving on, the bracket syntax notation is not only used to retrieve elements from an array, but we can also use it to change or mutate elements in an array.

Say, for example, we wanted to change the fruit Apple to something else. To do so, we will do this:

fruits[1] = 'Watermelon';
console.log(fruits); // Result ==> ["Banana", "Watermelon", "Pineapple", "Orange"]

On logging you notice that our previous Apple has been changed to Watermelon.

But wait for a second! Didn't I say in one of the previous lectures that variables declared with const cannot be changed? In fact, we declared the fruits variable at the beginning with const, but we were still able to change one element from Apples to Banana.

Isn't that a contradiction? Well, what wasn't mentioned before was that only primitive values are immutable. An array is not a primitive value, so we can always change or mutate it. It works this way because of how JavaScript stores things in memory which we will see later.

What you need to know right now is that we can mutate arrays even though they are declared with const, but we cannot replace the entire array.

So doing something like this will not work.

// This will be illegal

fruits = ['Melons', 'Raspberries'];

If you ever try executing this, you will get a TypeError in the console.

The next thing I would like to show you is that an array can hold values with different types simultaneously.

Let's create an array that holds all kinds of information about a user.

// fruits is the array we created at the beginning

const user = ['John', 'Doe', 2021 - 1980, 'Software Engineer', fruits];

You can see that the array makes it handy for us to store all the necessary information about our user. This is convenient because we don't have to create a variable for each of the data points.