Advance Objects: JavaScript

5 min readApr 9, 2022

Saturday started well. It is a sunny day, and sunny days often bring happiness around. Talking of Happiness, I saw this Hoptimist during my work trip to Copenhagen, Denmark and the shop lady told me that this is for happiness… when you touch it, it bounces and it helps with your mood ;)

I did not give it a lot of thought then, but now I asked one of my colleagues who are still there to bring one for me :P

I also re-arranged my workplace and now I am happy with the new setting 😍. I added some green plants on the side as well ;)

Now let’s move on to Advance Objects in Javascript

Advanced Objects

These concepts are built upon fundamentals of creating objects i.e advanced features that can be implemented to objects.

The this Keyword

Every JavaScript function or method has a this context. For a function defined inside of an object, this refers to that object itself. For a function defined outside of an object, this refers to the global object ( window in a browser, global in Node.js)

The reserved keyword this refers to a method’s calling object, and it can be used to access properties that belong to the object.

If the property is accessed without this keyword, the output is undefined , because inside the scope of provideInfo() method, there is no automatic access to other properties of the robot object.

Arrow Functions and this

JavaScript arrow functions do not have their own this context, but use this of the surrounding lexical context. Arrow functions inherently bind or tie, an already defined this value to the function itself that is not the calling object.

diet is a property that uses arrow notation to define the function. Since dietType does not exist in the global context, accessing this.dietType returns undefined.

Hence, arrow functions are not recommended for writing object methods.

Privacy, Getters, and Setters

Accessing and updating properties is a requirement while working with objects. Privacy in objects would mean that certain properties should only be mutable when conditions are met.

JavaScript does not have privacy built-in for objects as in other languages. JavaScript uses naming conventions to signal interaction with a property. An underscore _ is placed before the name of the property that should not be directly altered, although it is still possible to re-assign the property

const bankAccount = {
  _amount: 1000
}bankAccount._amount = 1000000;

Getters and Setters are used to return the value of internal properties and safely re-assign values respectively.

Getters

Getters can perform an action on the data when returning a property.
Getters can return different values using conditionals.
In a getter, the properties of the calling object can be accessed using this.
The functionality of the code becomes easy to understand

In general, getter methods do not need to be called with a set of parentheses.

Setters

Like getter methods, there are similar advantages to using setter methods that include checking inputs, performing actions on properties, and displaying the intention of how to use the object.

An example of having both getter and setter

Factory Functions

A factory function is a function that returns an object and can be reused to make multiple object instances. Factory functions can also have parameters allowing customization of the returned object.

To make an object that represents a specific monster like a ghost, monsterFactory can be called with the necessary arguments and assign the return value to a variable.

Property Value Shorthand aka Destructing

ES6 introduced some new shortcuts for assigning properties to variables known as destructuring.

In the previous factory function example, each key was assigned a value even though the key name was the same as the parameter name assigned to it. The destructing technique can help shorten this ;)

const monsterFactory = (name, age) => {
  return { 
    name,
    age 
  }
};

Destructured Assignment

The JavaScript destructuring assignment is a shorthand syntax that allows object properties to be extracted into specific variable values.

In destructured assignment a variable is created with the name of an object’s key that is wrapped in curly braces { } and assign to it the object

Built-in Object Methods

Objects also have built-in methods, for example .hasOwnProperty() , valueOf() are object instance methods. The Object class methods such as Object.assign() , Object.entries() , and Object.keys() are also helpful.

Notes at a glance

The object that a method belongs to is called the calling object.
The this keyword refers to the calling object and can be used to access properties of the calling object.
Methods do not automatically have access to other internal properties of the calling object.
The value of this depends on where the this is being accessed from.
One should not use arrow functions as methods if needed to access other internal properties.
JavaScript objects do not have built-in privacy, rather there are conventions to follow to notify others about the intent of the code.
The usage of an underscore before a property name means that the developer does not intend for that property to be directly changed.
Setters and getter methods allow for more detailed ways of accessing and assigning properties.
Factory functions allows to create object instances quickly and repeatedly.
There are different ways to use object destructuring: one way is the property value shorthand and another is destructured assignment.

Exercise 01 — Meal Maker

Set up a menu for a restaurant website that displays special menu of the day and price

Exercise 02 — Team Stats

Use JavaScript data structures to create, retrieve and add information about your favorite sports team or challenge to create total number of games team played or avg score of all the games.

That is all for today :D

If you fancy checking my 100 Days journey, please feel free to stop by ❤