Objects and Arrays

02.08.2018 |

Episode #6 of the course Fundamentals of JavaScript by Matt Fay

 

Today’s lesson will consist of one of the most famous fundamental topics of programming: objects and arrays.

 

Objects

Objects, also known as “dictionaries,” are a way to store data. They consist of different, or same, data types, such as variables and functions (more on functions later), which are called properties (i.e., they belong to the object, hence “property”) and methods when they’re contained within an object.

To create an object, it’s as simple as defining a variable:

var pet = {};

It’s essentially the same thing as declaring a regular variable, only that we set it equal to the curly braces, and that’s our object. Our object is empty, so let’s add some properties! Within our object, we declare the properties and everything else that will “belong” to that object:

var pet = {
    name: “Luna”,
    type: “Dog”,
    age: 5,
    friendly: true
}
console.log(pet); // {name: “Luna”, type: “Dog”, age: 5, friendly: true}

Pretty simple, no? We have multiple properties in our object, of different types of value. We have strings, a number, and a boolean value of true. If we wanted to access a specific property, we can do something like:

console.log(pet.name); // Luna
console.log(pet.age); // 5

That is called dot notation, recognized by the “.” above. We can also access our object’s properties with bracket notation:

console.log(pet[‘name’]); // Luna
console.log(pet[‘age’]); // 5

In addition, we can add more properties to our object with dot notation or bracket notation:

// Adding properties with dot notation
pet.breed = “Border Collie”;
console.log(pet); // {name: “Luna”, type: “Dog”, age: 5, friendly: true, breed: “Border Collie”}

// Adding properties with bracket notation:
pet[“breed”] = “Border Collie”;
console.log(pet); // {name: “Luna”, type: “Dog”, age: 5, friendly: true, breed: “Border Collie”}

We can change the value of properties:

pet.age = 6;

And we can delete properties:

delete pet.age;

 

Arrays

Arrays are similar to objects. They store data that we could use at a later time.

var array = [‘Pizza’, 3, 4, true];

The positions of the elements in an array are called indexes. When we count the number of elements in the array, we start counting at index 0. So, if we were to ask our interpreter how many elements are in our above array, array.length;, we’d get 4, as we’d expect. However, if you were to try accessing the array element ‘Pizza’, you would need to know that it is in index, or position 0. Counting our above array, we’d say 0(‘Pizza’), 1(3), 2(4), 3(true).

We need a way to actually use these. In order to use arrays, we need to be able to access them. It’s as simple as accessing our object properties!

Focusing on the array above, let’s log pizza to the console:

array[0]; // ‘Pizza’

Similar to changing our object’s values, we can do the same here with our array.

array[0] = ‘Hamburger’;
console.log(array); // ‘Hamburger’, 3, 4, true;

Arrays and objects are not only useful in JavaScript but also virtually in every programming language. So, if you decide JavaScript isn’t your thing, you can easily transition the skills you learn here to another language.

In the next lesson, we’ll learn about functions and what they’re all about.

 

Share with friends