ADVERTISEMENT

What are Objects in JavaScript – Objects in JavaScript

Telegram Group Join Now

ADVERTISEMENT

What are Objects in JavaScript – Objects in JavaScript

What are Objects in JavaScript? Create Objects in JavaScript
What are Objects in JavaScript? Create Objects in JavaScript

Prerequisite – You should have basic knowledge of Javascript and Data type in javascript.

ADVERTISEMENT

Objects in Javascript

ADVERTISEMENT

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 properties and methods. Javascript objects are the data types that can takes in collections of key-value pairs.
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
What are Objects in JavaScript - Objects in JavaScriptBike.Name- SteelgripBike.Start()
 Bike.Model-2020 Bike.Flash()
 Bike.Weight- 950kgBike.Stop()
 Bike.Color-BlacksketchBike.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👆.

ADVERTISEMENT

50+ HTML, CSS & JavaScript Projects With Source Code

ADVERTISEMENT

 

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

1. Creating Objects in JavaScript

ADVERTISEMENT

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.

ADVERTISEMENT

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 of new objects.

ADVERTISEMENT

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.\

15+ Product Card Using HTML and CSS [ Demo + Code]

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

How can we access object members?

  • 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

  •  Bracket Notation : objectName[“memberName”]

ADVERTISEMENT

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

ADVERTISEMENT

For iterating over the key of all objects we can use For……in the constructor. Let’s see how its works.

ADVERTISEMENT

Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)

ADVERTISEMENT

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.

ADVERTISEMENT

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

What is Object In JavaScript?

Javascript Objects Are The Data Types That Can Takes In Collections Of Key-Value Pairs. It is A unique entity that contains properties and methods

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT