Overview

In part one, we discussed about what Objects are and how to create Objects in Javascript. If you are new to this blog, I would kindly recommend you to checkout Demystifying Objects - Part One first.

Are Arrays really Objects

In Javascript, arrays are also considered to be an Object with some special powers. Arrays have an additional object in their prototype chain that contains all the array methods and makes them special when compared with the normal Objects. In simplified terms, arrays are an ordered list of values where keys are integers where as objects are an unordered map from string keys to values

One of the most commonly used property in Arrays is the length property. length is an unsigned integer value which is always greater than the highest index of the array.

const arrayOne = [];
console.log(arrayOne.length); // 0

const arrayTwo = [1, 2, 3]; // Highest index = 2
console.log(arrayTwo.length); // 3

There are other properties like push, pop, shift, unshift etc which makes arrays special. Arrays have special algorithm to define it's properties. If a new property is set to an array and that property's name is a string which can be converted to an integer number, then the special algorithm applies.

const arrayThree = [];
arrayThree['0'] = "Hello"; // the index is a string which can be coerced to an integer
console.log(arrayThree); // ["Hello"]

Properties

Properties of an Object can either be referred by it's property name or by it's ordinal index. If the property is defined by it's name then we need to always refer that object by it's name and if the property is defined by it's index then we should always refer by its index.

Are methods considered to be functions?

Well, methods are properties of an Object which are functions. In other words methods are defined exactly the same way functions are defined except that they have to be assigned as a property of an Object

const blog = {
  name: "Javascript",
  print: function() {
   console.log("Blog name is Javascript");
 }
};
blog.print(); // prints "Blog name is Javascript"

Can we delete these properties?

Yes, we can delete all the non-inherited properties of an object using the delete keyword in Javascript

const NumberOne = {
  numberOne: 10;
}

delete NumberOne.number; // deletes numberOne property
console.log(NumberOne); // {}

Comparing Objects

As Objects are reference type, object comparisons will be different from other datatype comparisons. The key point to remember is that two distinct objects are never equal even if they have the same properties.

const NumberGame = {
  numberOne: 1
};

const NumberGameTwo = {
  numberOne: 1
};

console.log(NumberGame == NumberGameTwo); // this will be printing false
console.log(NumberGame === NumberGameTwo); // this will also be printing false

const NumberGame = {
  numberOne: 1
};

const NumberGameTwo = NumberGame;

console.log(NumberGame == NumberGameTwo); // this will be printing true
console.log(NumberGame === NumberGameTwo); // this will also be printing true

In the above example, both NumberGame and NumberGameTwo will be same as they both are referencing the same object

Role of `this` keyword

this is a special keyword in JS which can be used in methods to refer the current object. For example, declare two Objects CarOne and CarTwo which has the same properties name, colour and model. Define a function print which prints this.name, this.colour and this.model. On adding the function print to both CarOne and CarTwo as their properties and accessing the print method will return My car is ${this.name} which is ${this.colour} in colour and the model number is ${this.model} where this.name, this.value and this.colour is going to have the value of the specific object which was used to access the print method.

const CarOne = {
  name: "Maruti Alto 800",
  colour: "red",
  model: "2008"
};
const CarTwo = {
  name: "Honda Accord",
  colour: "black",
  model: "2010"
}

function print() {
  console.log(`My car is ${this.name} which is ${this.colour} in colour 
  and the model number is ${this.model}`);
}

CarOne.print = print;
CarTwo.print = print;

console.log(CarOne.print()); // this will be referring to CarOne
console.log(CarTwo.print()); // this will be referring to CarTwo

Getters and Setters

Getters and Setters are used to get and set a value of a specific property in an object respectively. These can be defined either using object initialiser or can be added to an already declared object at any point of time using the getter or setter adding method.

Example - Object Initialiser

const NumberGame = {
  numberOne: 10,
  get getNumberOne() {
    return this.numberOne * 10;
  },
  set setNumberOne(number) {
    this.numberOne = number + 10;
  }
}

console.log(NumberGame.numberOne); // this is a number => 10 
console.log(NumberGame.getNumberOne); // this is a getter method which returns => 100
NumberGame.setNumberOne = 10; // this is a setter method which sets the value => 10
console.log(NumberGame.numberOne); // this is a number with updated value=> 20

In the above example we have defined an Object NumberGame using the object initialiser method. As you may have noticed, there are two new things called get and set that's being used inside the object. Getter methods should always be prefixed with get keyword where the method should not accept any parameters whereas setter methods are always prefixed with set keyword which will accept exactly one parameter.

Example - Getter and Setter Adding Method

const NumberGame = {
  numberOne: 10
}

Object.defineProperties(NumberGame, {
  getNumberOne: {get: function() {return this.numberOne * 10;}},
  setNumberOne: {set: function(number) {this.numberOne = number + 10;}}
})

console.log(NumberGame.numberOne); // this is a number => 10
console.log(NumberGame.getNumberOne); // this is a getter which return value => 100
NumberGame.setNumberOne = 10; // this is a setter which sets value => 10
console.log(NumberGame.numberOne); // this a updated value of numberOne => 20

In this example, we have already defined the object NumberGame. After the declaration we want to add getter and setter to this object. For this purpose we make use of Object.defineProperties which accepts two parameters. The first parameter is the name of the object (NumberGame) where you want to use the getter and setter and the second parameter is an object whose property names (getNumberOne, setNumberOne) are the getter and setter names and the property values are objects where you define the getter and setter functions respectively ({get: function() {return this.numberOne * 10;}}, {set: function(number) {this.numberOne = number + 10;}})

If you compare both these methods, I would personally prefer the first one (Object Initialiser) as it is more readable and looks clean. That said, it always depends on the practise we follow in our organisations or in our personal projects.

I would like to end this topic by asking a question 🤔

const newObj = {
  language: "C"
}

newObj.language = "Javascript";
console.log("Value Change", newObj.language); // Javascript

Despite making newObj as a const, why am I able to manipulate. Let me know your answers in the comment section below.

Summary

What are Arrays
Difference between Arrays and Objects
What are getters and setters
How to delete properties
How to make two objects equal

Thank you

Hope you enjoyed this short series on Javascript Objects. I will be writing more topics related to Javascript. Let me know your thoughts or topics that you would like me to write in the comments section below. If you understood and enjoyed reading, please do show your love and share this to your fellow beings who could make maximum use of this. Always feel free to connect with me via twitter, linkedIn or email. Happy to help in all ways possible 😊

Until we meet again, The Mallu Dev signing off 👋 Cheers 🥂

Demystifying Objects - Part Two (Wrap Up)