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?


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๐ŸŽ‡.

Prerequisite – You 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

Objects in javascript | How to create objects in javascript
  •         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
Share on:

Leave a Comment