const - JS | lectureJavaScript Fundamentals 2

After arrays, it's now time to learn about another data structure in JavaScript: objects. We have been using arrays up until this point as a data structure to store multiple related values in the same variable.

To introduce the concept of objects, let's consider the below array.

const user = [
  'John',
  'Doe',
  'Software Engineer',
  32,
  ['Banana', 'Apple', 'Melon'],
  ['Eric', 'Ulrich', 'Mary'],
];

Up till now, nothing new. Just an array with some values that belong to the user entity. We know intuitively that the first element in the array (user[0]) should be called the first name, the second (user[1]) the last name, the third (user[2]) job, the fourth (user[3]) age, the fith (user[4]) fruits and the last (user[6]) friends.

The problem with arrays is that there is no way of giving these variables a name, so we can't reference them by name but only by the order number in which they appear in the array. To solve that problem, we have another data structure in JavaScript called objects.

In objects, we define key-value pairs, and so we can give each of the values in our user array a name. Here is how it is we do it.

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:

/*
* Note that in objects, you can put any expression. For example,
* age: 2034 - 1980
*/

const user = {
  firstName: 'John',
  lastName: 'Doe',
  job: 'Software Engineer',
  age: 32,
  fruits: ['Banana', 'Apple', 'Melon'],
  friends: ['Eric', 'Ulrich', 'Mary'],
};

With the above, we now have an object which contains key-value pairs. The keys being, firstName, lastName, job, age, fruits and friends with their respective values. Essentially, we've assigned a name to each value that we had something impossible in arrays but now possible thanks to objects.

Each of these keys is also called a property. So in technical terms we say that the object user has 6 properties.

Objects are the most fundamental concept in the whole JavaScript language. There are actually many ways of creating objects in JavaScript. But creating an object like we just did is the simplest way of creating an object using curly braces. This way of creating an object is called the object literal syntax because we are writing down the entire object content.

To finish this lecture and to recap, just like arrays, we use objects to group different variables that belong together, such as the properties of user that we just created. The big difference between objects and arrays is that in objects, the order of values does not matter at all when we want to retrieve them. It is really important to keep that in mind.

In arrays, the order in which we specify the element matters a lot because that is how we access these elements. This means that we should use arrays for more ordered data and objects for more unstructured data.