In addition to primitive values, such as strings, numbers, and boolean, there are more complex data structures. Today, we’ll talk about objects and arrays.

— Why do we need them?

— Objects and arrays are needed to make programs convenient to develop and easy to maintain. With the help of objects, we can combine various data under a single name. For example, we can create a user object that will store information about the user.

const user = {
  name: 'Jack',
  age: 25
}

Here we create an object with two fields - name and age. If at some point in the future we need to refer to them, then we can use the entries user.name and user.age. By adding a period after the object’s name, we get access to its internal fields.

— Can I create an empty object?

— Sure. You can create an empty object and save the data (add new fields) to it later.

const user = {};
user.name = 'Jack';
user.age = 25;

As a result, you will get exactly the same structure as in the first example.

— Sounds clear to me.

— Object fields are also sometimes called properties. A property can be not only a primitive but also an object.

const user = {
  name: 'Jack',
  age: 25,
  address: {
    country: 'US',
    state: 'NY',
    postcode: '10005',
    street: '11 Wall St '
  }
}

To access the fields of a nested object, you need to use the same dot notation. For example, the command console.log(user.address.state) will display the string NY.

— What happens if I try to refer to a field that does not exist?

— Good question, Hero. In this case, the property value will be considered undefined. It is important to note that undefined in this case is not a string, but a special type that’s used to indicate that the field hasn’t been initialized.

To change the field, it is enough to use the same assignment operator.

const user = {
  name: 'Jack',
};

user.name = 'John';

Here we renamed the user and now his name is not Jack, but John.

— Have we just changed the object that was declared as a constant?

— Correct, but we have not changed the value of the user - it still refers to the same object. Only his inner state has changed, and this is permitted even though our user was declared as a constant.

Arrays

Objects allow us to store data with arbitrary keys (name, age, address, etc.) and describe entities from the “real world”.

But, quite often, we want to store the same type of data in an ordered format. Then we could refer to them as “first”, “second”, “third” and so on.

— Objects are not very suitable for this, right?

— Yes. But here arrays come to the rescue. An array is a data structure made up of similar elements such as strings, numbers, or objects.

We used curly braces to create an object ({}), and to create an array you should use the square brackets ([]).

const animals = ['Cow', 'Horse', 'Dog', 'Cat'];

console.log(animals[0], animals[3]); // Cow Cat

To get access to the element of the array, you should write the name of the array followed by the index of the element that you’re looking to get. Eventually, these values are passed to console.log and the first and last elements of the array are displayed on the screen.

Note that the numbering of the array elements starts at zero, and animals[1] will give us access to the second element of the array.

— Can I replace one of the strings in the array with an object?

— You can replace it with an object, or a number and even manually set it to undefined. JavaScript does not prohibit that in any way. But, this isn’t a good idea just yet.

If you want to improve the animals array so that they can have a name in addition to the animal type, you’re much better off making each element an object. And you don’t have to worry that some of the animals will turn out to be nameless.

const animals = [{
  type: 'Dog',
  name: 'Rex',
}, {
  type: 'Horse',
}];

This will create an array with a dog named Rex and a horse without a name. And, almost always, it will be MUCH better than this option:

const animals = [{
  type: 'Dog',
  name: 'Rex',
}, 'Horse'];

— How can I add a new element to the array?

— To add a new element to the array, you can use the push function. It is built into any JS array and adds an element to the end of it.

const animals = [{
  type: 'Dog',
  name: 'Rex',
}, {
  type: 'Horse',
}];

console.log (animals.length);

animals.push ({type: 'Cat', name: 'Murka'});

console.log (animals.length);

— Let me guess, are we printing the length of the array before and after adding a new element so that it is obvious that it has changed?

— Exactly. The length property can be found in any array and it’s always equal to the number of elements in the array.

Now let’s test your knowledge with a test and a few practical tasks.