Objects are a big part of JavaScript. Therefore, having a good understanding of objects and how to work with them is crucial. In this article, I would like to share basic concepts about objects; what objects, how to access values of objects, how to create objects, and how copying objects work differently from primitive types.

What are Objects?

An object is a collection of properties(name/key and value). An object looks like this.

const person = {
    name:'grace',
    age: 20,
    sayHi: function() {
        console.log('hi')
    }
    /* 
    // we can simplify it like this: 
    sayHi () {
        console.log('hi')
    }
    */
}

How to access the properties of an object

Dot notation

person.name // 'grace'
person.age // 20
person.sayHi // ƒ () { console.log('hi')}

Square bracket notation

person['name'] // 'grace'
person['age'] // 20
person['sayHi'] // ƒ () { console.log('hi')}

String values

let key = 'name';
person[key] // 'grace'

key = 'age';
person[key] // 20

key = 'sayHi';
person[key] // ƒ () { console.log('hi')}

How to get all properties of an object

for ... in

const person = {
    name:'grace',
    age: 20,
    sayHi () {
        console.log('hi')
    }
}

for (const key in person) {
    console.log(`${key} : ${person[key]}`)
}

// ouput: 

/*
name : grace
age : 20
sayHi : sayHi () {
        console.log('hi')
    }
*/

Object.keys() - get keys of an object

const person = {
    name:'grace',
    age: 20,
    sayHi () {
        console.log('hi')
    }
}

Object.keys(person) // output: ['name', 'age', 'sayHi']

hasOwnProperty() - check if an object has a specific property

const person = {
    name:'grace',
    age: 20,
    sayHi () {
        console.log('hi')
    }
}

person.hasOwnProperty('name') // output: true
person.hasOwnProperty('city') // output: false

How to Create New Object

Object initializers (Literal notation)

It will be great if our person object is able to introduce a name. So, I will add a new property in the person object.

const person = {
    name:'grace',
    age: 20,
    introduce () {
        console.log(`hi, my name is ${name}`) 
    }
}
person.introduce();

However, it shows an error message ReferenceError:name is not defined

How can we fix it?

const person = {
    name:'grace',
    age: 20,
    introduce () {
        console.log(`hi, my name is ${this.name}`) 
    }
}
person.introduce(); // hi, my name is grace

this keyword is a context of an object. It refers to which object we are in right now. It’s determined where and how to use it. In this example, the ‘this’ keyword refers to the person object. (In order to use the ‘this’ keyword in the method to refer to the object, we need to use a regular function, not an arrow function.)

Constructor function

// define how your object is going to look like
function Person(name, age) {
    this.name = name;
    this.age = age;
}

// instantiate new objects 
const person1 = new Person('grace', 20));
const person2 = new Person('monica', 22);

console.log(person1); // {name: 'grace', age: 20}
console.log(person2); // {name: 'monica', age: 22}

Object.create() method

const Person = {
    name: 'grace',
    age: 20,
    introduce() {
        console.log(`Hi, my name is ${this.name}`) 
    }
}

const person1 = Object.create(Person);
person1.introduce() // Hi, my name is grace

Copying Objects

An object is a reference type. So, when we try to copy the value of an object, it works differently from when we copy the value of primitive types.

• primitive type - copy and create new value

• reference type - copy just ‘pointer’ (not the actual object)

// primitive types
let a = 10;
let b = 10;
a === b // true

// reference type
let a = {value: 10}
let b = {value: 10}
a === b // false

// primitive types
let a = 10;
let b = a;

console.log(a, b) // 10 10

a = 20; 

console.log(a, b)// 20 10

// reference types
let a = {value: 10}
let b = a;

console.log(a, b) // {value: 10} {value: 10}

a.value = 20;

console.log(a, b) // {value: 20} {value: 20}

I hope this article helps you understand the basic concept of JavaScript objects. Thank you for reading.