A Simple Guide to Objects in JavaScript

Welcome to this lesson, in this lesson, we will talk about objects in JavaScript.

What is an object?

It is a derived data that represents an entity or a thing (living or non-living).

It is a derived data type because it has properties (sub-division) and its properties are made up of primitive data type (non-derived data type).

Let's illustrate objects.

Romeo is in a street of Verona looking out for Juliet to share pleasantries. Tybalt came to the scene with a sword to fight off Romeo.

Romeo, Tybalt, Juliet and Sword are objects in JavaScript.

Living and Non-living things are represented with objects in JavaScript.

A JavaScript object is a collection of properties of a living or not living thing.

Each of the properties of an object is always represented as a "key: value" pair.

Hey! Please can I get some examples of what can be considered as an object?

Let's do this:

let name = 'Ayobami';
let age = 25;
let occupation = 'teaching';
let country = 'Nigeria';

If all the variables above refer to the same person or are properties of a thing, we collect them into an object so that it will be easy to pass them around.

Object Creation

An object can be in form of a "key:value" pair(s) wrapped with curly braces.

let obj = {
  key:value // a property
}

In this case, our object will be passed to a variable named person as in:

let person = {
    name: 'Ayobami',
    age: 25,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}

"person" is an object and it has properties such as name, age and others as in above.

Oh! Don't be surprised when someone tells you that the variable "person" can be called an instance. Anything that references an object is called an instance of the object it references.

The variable person has an object as its value. Now, it is easy to pass "person" around. If you give me 'person', I can do wonder with it.

Getting Properties of an Object

Any object property has two things - key and value.

Both dot (.) notation and square brackets [] can be used to get the properties of an object.

To get the value of a property of "person", we can simply do:

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
console.log(person.name); //and Ayobami is shown in the console.
or
console.log(person["name"]); //and Ayobami is shown in the console.

We still get the same thing and for others, we can do:

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
console.log(person.age); //and 2000 is shown in the console.

console.log(person.occupation); //and teaching is shown in the console.

console.log(person.speak()); //and Hey! Do you understand? is shown in the console.

What if you want to get the key of a property instead of the value of the key?

Yeah! We can do that but we will get there soon.

Setting Properties of an Object.

To add a new property to the person object, let's do

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
person.continent = 'Africa';
console.log(person)// person now has continent property

or

person["continent"] = 'Africa';
console.log(person)// we get the same result.

We can also change the value of a property the same way as in:

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
person.country = 'Canada'; 
or
person["country"] = 'Canada';

By setting the country property to a new value, we change its value to the new one.

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
console.log(person.country) // now we have Canada instead of Nigeria.

That is it.

Any object has some methods such as hasOwnProperty, which is used to check whether an object has a property or not, and getOwnPropertyNames which is used to get the property name of an object.

Let's quickly talk about the two but we will leave others for now.

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
console.log(person.hasOwnProperty("region"))// false

It is false because it does not have a property named region.

let person = {
    name: 'Ayobami',
    age: 2000,
    occupation: 'teaching',
    country: 'Nigeria',
    speak: function (){
        return 'Hey! Do you understand?';
    }
}
console.log( Object.getOwnPropertyNames(person) )// ["name","age","occupation", "country", "speak"] 

or

Object.keys(person)// ["name","age","occupation", "country", "speak"] 

Yeah! It returns all the property names as an array.

Wow! We are done with this lesson. In the next lesson, we will discuss Object and Array Destructuring.

Stay tuned!

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