Hi Folks, In this article we are going to learn about objects in JavaScript. Concept of an object is inspired from real world. In real world, whatever we see around us is an object, which has some properties.
Let’s understand from real world example then we’ll dive into core concept. Mobile is an object, it has white color and 4GB RAM. So white color and 4GB ram are the properties of Mobile. Properties are made from key : value pair. Refer the below image to understand the key : value pair.
Color , RAM and version is a key and white, 4GB and iOS18 is a value. Every object has different properties. Key can be same for different mobile but values will be different. Value of Color and RAM will be different for different mobile.
Let’s understand the syntax of an object in JavaScript.
let object_Name = { };
In curly braces, we define the properties of an object.
e.g. Mobile.
let Mobile = {
color : "white",
RAM : "4GB" ,
Version : "iOS18" ,
}
console.log(Mobile);
Objects in JavaScript
It is collection of properties which are aligned as Key : Value Pairs.
Key and Values are separated by colon ( : ).
Objects are non-linear Data Structure.
Syntax
let object_Name = { };
e.g.
let car = {
Name : "BMW" ,
Model : "M340i" ,
Color : "Blue" ,
}
1. Print an object
let car = {
Name : "BMW" ,
Model : "M340i" ,
Color : "Blue" ,
}
console.log(car);
// Output
{Name: 'BMW', Model: 'M340i', Color: 'Blue'}
As we can see above, just console the name of an object will print the whole object with it’s key : value pairs.
2. Print the value of a particular key.
To access the value of a particular key , we use the dot(.) notation. Let’s print the value of name and model of car.
console.log(car.Name); // BMW
console.log(car.Model); // M340i
3.How to change the value of a particular key.
car.Color = "Black" ;
console.log(car);
// Print
// { Name: 'BMW', Model: 'M340i', Color: 'Black' }
4.How to add new property in objects.
car.price = "100k$";
console.log(car);
// Print
// { Name: 'BMW', Model: 'M340i', Color: 'Blue', price: '100k$' }
5.How to delete any property in an objects.
delete car.Color;
console.log(car);
// Print
// { Name: 'BMW', Model: 'M340i' }
6.If we try to access a property which doesn’t exist.
console.log(car.gear);
// Print
// undefined
If we try to access any property in an objects which doesn’t exist the it returns undefined.
8.Define a function inside an object.
let car = {
Name : "BMW" ,
Model : "M340i" ,
Color : "Blue" ,
move : function(){
console.log("Car is moving");
}
}
car.move();
// As we are calling move function then it will run and print "Car is moving".
As we an see above, there is no need to define the name of a function inside an object. we can call our function by the name of key.
Define an objects inside a function.
function calculator(num1 , num2){
let obj = {
sum : num1 + num2 ,
diff : num1 - num2,
prod : num1 * num2 ,
}
return obj;
}
As this function is returning an object, hence we will call the function inside a variable through which we can access all the keys of an objects.
let obj = calculator(10 , 20);
console.log(obj.sum);
console.log(obj.diff);
console.log(obj.prod);
Methods vs Functions
If a function is defined inside an object then it is called Methods.
e.g.
let greet = {
greetings : function (){
console.log("Good Morning !!");
}
}
greet.greetings();
In the above example, “greetings()”
function is defined inside an object. therefore it will called a method.
Note:-
Thank you so much for reading it completely, Go and get your hands dirty on it and try all the code by yourself. If you liked it do like, comment, share and follow for more content. Comment for any feedback.