Objects in javascript | How to create objects in javascript

Objects in javascript | How to create objects in javascript

Hey Learners!

Are you planning something bang on this Christmas, and you are upset because you are not getting any ideas that what should I do and how should?

Objects in javascript | How to create objects in javascript

So, Don't worry Learners we are the
Codewithrandom team are here to help you. Today we are going to have new learning that will make your Christmas eve enjoyable and memorable πŸŽ†πŸŽ‡.


Again, Welcome to our new blog. Today we are going to learn javascript objects in detailπŸŽ‡.

PrerequisiteYou should have basic knowledge of Javascript and Data type in javascript. If you want to quick recap of these topics then please go through it. Data Type Javascript.

OBJECTS

This is only a non-primitive datatype in Javascript. It is very important in javascript because it is a building block of the OOPS concept of javascript and this is only one aspect of  OOPS. It is a unique entity that contains property and method
 
What! you are asking about what is the property and the method πŸ€”. Hold on hold because we are going to discuss these technical very creative manner in steps. 

Let's understand property and method with this real-life example.

                Object                                Properties                                    Methods

  •         bike.name- Steelgrip                                  bike.start()
  •         bike.model-2020                                        bike.flash()
  •         bike.weight- 950kg                                    bike.stop()
  •         bike.color-blacksketch                               bike.break()



Guys don't focus on bike because this is very expensive and luxurious and we are not going to buy it.😁
So, here is our main focus to understand that what is property and methods. If I state in a simple word then,

Property -  The characteristic of an object is called Property. So in the case of our imaginative example, all the characteristic is properties of the bike such as bike.name, bike. model or all the outer looks we can define.

Method - All the action of this particular object is called method. Like in our example of bike as start, flash, and break all are the function of this bike object.

Note -  

  •  All bikes have the same properties, but the property value differs from bike to bike.
  • All bikes have the same methods, but the methods are performed at different times.


Till now we have discussed a lot with theoretical knowledge, you must be assuming something practically about the object. I mean in the programming world practically means coding 😎. So let's have a quick look. 

 let bike = {  
   name:'steelgrip',  
   model:2020,  
   //method  
   startdisplay : function(){  
     return (`The name of bike is   
      ${bike.name} and model number is ${bike.model}`)  
   },  
   //object within object  
   internal_feature : {  
     weight:'950kg',  
     color:'blacksketch'  
   }  
 }  
 console.log(bike.startdisplay());  
 console.log(bike.internal_feature.weight);  
 //Output will be   
 The name of bike is   
      steelgrip and model number is 2020  
 950kg  
I know you must be thinking what is this weird code all about. So Learner this is our object. An Object can be created with figure brakets{--} with an optional list of properties. A properties is a "key: value" pair, value could be anything as per user wants. And at the same place of key, we can put our method as well which will be our function.  So, all these properties you can match up with the above exampleπŸ‘†.

So, we have two-three different approaches for creating objects. 

Creating Objects

  1. Using object literals: Object literal syntax uses the {…} notation to initialize an object and its methods/properties directly. Let us look at an example of creating objects using this method.

 

 let bike = {  
   name:'steelgrip',  
   model:2020,  
   //method  
   startdisplay : function(){  
     return (`The name of bike is   
      ${bike.name} and model number is ${bike.model}`)  
   },  
   //object within object  
   internal_feature : {  
     weight:'950kg',  
     color:'blacksketch'  
   }  
 }  
 console.log(bike.startdisplay());  
 console.log(bike.internal_feature.weight);  
 //Output will be   
 The name of bike is   
      steelgrip and model number is 2020  
 950kg  
This is the same example as above because we used string literal in this example.
 
2. Object Constructor: Another way to create objects in JavaScript involves using the “Object” constructor. The Object constructor creates an object wrapper for the given value. This uses new keyword conjugation that allows creating new objects.
 const company = new Object();  
 company.name = 'steelforth India';  
 company.location = 'Shrinagar';  
 company.established = 1951;  
 company.displayInfo = function(){  
      console.log(`${company.name} was established  
           in ${company.established} at ${company.location}`);  
 }  
 company.displayInfo();  
 //Output will be  
 steelforth India was established  
           in 1951 at Shrinagar  
3. Constructors: Constructors in JavaScript, like in most other OOP languages, provide a template for the creation of objects. In other words, it defines a set of properties and methods that would be common to all objects initialized using the constructor.

Let's see an example :
 function Vehicle(name, maker) {  
 this.name = name;  
 this.maker = maker;  
 }  
 let car1 = new Vehicle('Fiesta', 'Ford');  
 let car2 = new Vehicle('Santa Fe', 'Hyundai')  
 console.log(car1.name); // Output: Fiesta  
 console.log(car2.name); // Output: Santa Fe  
aa



How can we access object members?
  1. dot notation :  (objectName.member name)
  const company = new Object();   
  company.name = 'steelforth India';   
  company.location = 'Shrinagar';   
  company.established = 1951;   
  company.displayInfo = function(){   
    console.log(`${company.name} was established   
       in ${company.established} at ${company.location}`);   
  } 
 console.log(company.name); // Output: steelforth India  
 console.log(company.established); // Output: 1951  
   2. Bracket Notation : objectName["memberName"]
  
 const company = new Object();   
  company.name = 'steelforth India';   
  company.location = 'Shrinagar';   
  company.established = 1951;   
  company.displayInfo = function(){   
    console.log(`${company.name} was established   
       in ${company.established} at ${company.location}`);   
  } 
 console.log(company.['name']); // Output: steelforth India  
 console.log(company.['established']); // Output: 1951  

Iterating over all keys of an object
For iterating over the key of all objects we can use For......in the constructor. Let see how its works.

 let employee = {  
      gender : "male"  
 }  
 var worker1 = Object.create(employee);  
 worker1.name = "Newton";  
 worker1.age = 23;  
 worker1.specialist = "Cricketer";  
 for (let key in worker1) {  
      console.log(key);  
 }            
 //output  
 name  
 age  
 specialist  
 gender  

Deleting properties

To Delete a property of an object we can make use of the delete operator. An example of its usage has been listed below:
let person1 = {  
      channelname: "Edux"  
 }  
 // Output : Edux  
 console.log(person1.channelname);  
 delete person1.channelname  
 // Output : undefined  
 console.log(person1.channelname);                 

By this blog... We have learned Javascript Objects in detail.  And we checked all our concepts with performing coding.
Now I'm looking for your reviews.
So, How was the learning 😁, Learners!

I gave only one example of each sub-topic of the object, So at last, I will recommend you don't set it as a boundary for learning more you can perform your own code. Until you will not allow your finger to roll on the keyboard you will be not get anything new. So hustle yourself for learning.😊

I hope you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar

Post a Comment

Previous Post Next Post