Playing with JavaScript Objects

As a JavaScript developer we all know the importance of Objects. Objects are core of the JavaScript and in programming world they said If you know JavaScript Object, You are master in JavaScript.

Web developer life is incomplete with JavaScript.

Now will try to understand What is Object? To Understand Objects in computer science first let’s understand Object in real world.

Look around right now and you’ll find many examples of real-world objects: your dog, your desk, your television set, your bicycle. Real-world objects share two characteristics: They all have state and behavior.

Now as we clear what is object in real world let’s understand Object in Computer Science.

By going to the definition In computer science, an object can be a variable, a data structure, a function, or a method, and as such, is a value in memory referenced by an identifier.

This will lead us Object in JavaScript. In JavaScript, an object is a standalone entity, with properties and type.

Basically, all three is the same thing and visualization of all three is little different with respect to every prospective. Now after reading about JavaScript Object and comparing with real world object We are curious how to create an object.

Object Creation in JavaScript is fun. We have multiple ways to create these Objects. Here we focus on two of the most important one.

1. Create an Object by using Object Literal :

This is most smartest way to create an Object. Here we declare object into variable with curly braces {} and inside that we can use key:value pair.

example :

var country = {
 "name" : "United State",
 "capital" : "Washington DC",
 "currency" : "Dollar"
 }

Now we have our object called country. country.name will return United State.

If we want to add some more fields in the existing object we can do so by the following code.

country.president = "Joe Biden"

Alternate way to create this object we declare a template object and later add the property in that. In our example code first we get country object and then we have to add the properties in that.

var country = {};

country.name = "United State",
country.capital = "Washington DC",
country.currency = "Dollar"

2. Create an object by using new keyword ().

This is also one of the way, where we can create and object. First we declare an object by using new keyword and then add properties to this.

const games = new Object();

games.name : "Call of Duty”,
games.publisher : "Activision Publishing Inc.‬",
games.platform : "Xbox One"

Now we have two different way to create an object. Question comes here is which is better for execution. As we discussed earlier smartness way to create is using literal. This will improve the performance and easy to maintain.

Things to remember : JavaScript Objects are Mutable

Yes, JavaScript objects are mutable. A mutable object is an object whose state can be modified after it is created. It implies that JavaScript Objects are addressed by reference and not by value.

Lets see this example :

const person = {
 firstName: "Maddy",
 lastName:"R",
 age:20,
 eyeColor:"blue"
}

const developer = person;
developer.age = 10;

Now this will change the age at both the places. In person object as well as in developer. This is happening because developer object are nothing but copy of person object.

JavaScript have more Framework than the apps built in JavaScript.

In previous section we discussed what is object and how to create it. Now Let’s see properties of JavaScript Objects.

JavaScript property is nothing but the variable that is attached to the object. we can change, delete or add new properties in JavaScript. To do any kind of operation on JavaScript object we need to access first. So, question here is How to access JavaScript Properties ?

Syntax :

objectName.propertyName

Here we are using the dot notation to get access the object. So as per country object from previous section, I am using currency to explain here.

country.currency // return Dollor.
country.flag // undefined (we not declered flag in country object)

Alternate way to access properties in JavaScript is [] notation

country[name] // return United State

Now we know how to access JavaScript Object, so we can do any kind of operation which we want.

We noticed here that JavaScript object is nothing but collection of Unordered properties. So, some collection involve here means we can loop thorough to get all the properties of JavaScript in one shot. JavaScript is iterables.

If you want to see JavaScript array and looping please check this blog.

[embed]Everything about JavaScript Array[] In our regular development we always get stuck at some point when we need to play with an Array. No matter what library…medium.com

Here is the syntax to loop JavaScript Object.

for (let variable in object) {
 // code
}

example code .

for (let key in country) {
 output += country[key];
}

We understand we can loop JavaScript object. We can also implement some operation like adding and deleting the JavaScript Object. Below is the code example of that.

Adding

country.president = "Joe Biden"

Deleting

delete country.president;

These are the way we can add and delete in our object. JavaScript objects inherit the properties of their prototype. (I will separate post on Inheritance). The delete keyword does not delete inherited properties, but if you delete a prototype property, it will affect all objects inherited from the prototype.

JavaScript is the first page of internet. reddit comes later.

Now we are aware about JavaScript properties so let’s move on something little more complicated and useful stuff. As we know in our real world object is not only the property but also carrying some functionality with themself. In similar manner in JavaScript object we can add some functionality. It mean we are associating some method with that.

Now before adding any method we need to understand the scope of that method with respect to the JavaScript Object. To determine scope we use “this keyword”

this keyword :

The JavaScript this keyword refers to the object it belongs to. In an object method, this refers to the “owner” of the method.

example :

const football = {
  team: “Manchester United”,
  stadium: “Old Trafford”,
  ranking: 1,
  teamPerfomance: function() {
    return this.team + “ : “ + this.ranking;
  }
};

Here this is the football object that “owns” the teamPerfomance function.

So by now we are clear with the this keyword in JS. This will lead to most interesting topic called JavaScript Methods.

JavaScript methods are actions that can be performed on objects. Methods are functions stored as object properties. In our previous example we saw how to create a method in JavaScript Object.

Here is the example where we see how we can access the JavaScript methods by using previous example.

Syntax : objectName.methodName()

example : var teamRanking = football.teamPerfomance();

The above example will return Team Name and Ranking which is Manchester United : 1

Now here I got one question in mind. Can we add method in object.

so here is the way by which we can add a method.

football.teamName (){
 return footballTeam;
}

example : var teamRanking = football.teamPerfomance();

The above example will return Team Name and Ranking which is Manchester United : 1

Now here I got one question in mind. Can we add method in object.

so here is the way by which we can add a method.

football.teamName (){ return footballTeam; }

We are adding new method here separately. In JavaScript we have many in built methods which we can use in our development. Let’s see some of the examples where we can play with Objects and fetch the value or modify the data in desired format.

var book = {
 name : “JavaScript Manual”,
 author : “JavaScript Heros”,

}

1. we can fetch the object like this.

console.log(Book.author); // will print author name.

2. Using Object.values()

 Object.values() convert JavaScript object into array. so in our example 

 Object.values(book) // this will return in array

output = [“JavaScript Manual”,”JavaScript Heros”]

3. JSON.stringify()

This is one of the important inbuilt method in JavaScript. This will convert whole object into String.

let myString = JSON.stringify(book);

Output will be ‘{“name”:”JavaScript Manual”,”author”:”JavaScript Heros”}’

We can play around with JSON stringfy method.

As long as you code, you’ll have these feelings !

So far we know what is object,its properties, how to create and some play around with that. Now we will focus on some advanced concept like constructor.

What is Constructor ?

A constructor is a function that creates an instance of a class which is typically called an “object”. In JavaScript, a constructor gets called when you declare an object using the new keyword.

Keep in mind that When constructor is get called a new instance of an object is getting created.

let see this example. I am creating a object here.

function car(name, model){
   this.name = name;
   this.model = model;
}

Now here we have declared our object. You remember this keyword, this keyword starts referring to that newly created object and hence it becomes the current instance object. Now create an instance of the Object called Car.

var car1 = new car("Ford", "Figo")

var car2 = new car("Fiat", "Pinto")

So here we are using new keyword to create an object.

Note : In JavaScript, if you don’t specify any constructor, a default constructor is automatically created which has no parameters:

constructor(){}

Now if we want to add method in the constructor that also we achieve by using below code.

function car(name, model){
    this.name = name;
    this.model = model;
    this.carType = function(){
      return this.name;
    }
}

Since we are clear with the concept of constructor and default constructor, Now we are going to see three different type of Objects.

1. Number Object : Numbers can be created as an object

var num = new Number(1000)
Number {1000}

2. Boolean Object : boolean can also be created as objects using the new keyword:

bol = new Boolean(false)

3. String Object : string can also be created as objects using the new keyword:

var firstName = new String(“John”);

Object Prototype :

Prototypes are the mechanism by which JavaScript objects inherit features from one another. All JavaScript objects inherit properties and methods from a prototype

Date objects inherit from Date.prototype

Array objects inherit from Array.prototype

Car objects inherit from Car.prototype

Note: The Object.prototype is on the top of the prototype inheritance chain:

Date objects, Array objects, and Car objects inherit from Object.prototype.

(I will cover Object Prototype separately in Inheritance post, which is coming soon)

Inheritance is the object-oriented way to become wealthy?

Now when we have a good knowledge of JavaScript Object, Let’s discuss JavaScript Object Accessors.

Syntax

let obj = {
 get propName() {
 // getter, the code executed on getting obj.propName
 },

set propName(value) {
 // setter, the code executed on setting obj.propName = value
 }
};

CODE

let user = {
 name: “John”,
 surname: “Smith”
};

let user = {
 name: “John”,
 surname: “Smith”,

get fullName() {
 return `${this.name} ${this.surname}`;
 }
};

alert(user.fullName); // John Smith

This is all the basic and advance concept of Objects in JavaScript.

Keep coding !!