JavaScript Add Property To Existing Object
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this tutorial we will show you the solution of JavaScript add property to existing object, here we defined object with some properties then we adding another property by just append that property name with property value.
We can add as many properties we want to add on existing object then result displayed on console using console.log() method.
Step By Step Guide On JavaScript Add Property To Existing Object :-
Here we defined object ‘obj’ using keyword ‘let’ with properties ‘Name:’Arun’,Age:’32’’.
When user needs to add some other property we can just use dot or square brackets method.
Here we used dot method then we are going to adding ‘Work’ property with value ‘Manager’ so we just used dot symbol like ‘obj.Work:’Manager’’ it successfully added with existing ‘obj’.
We can see the result on console panel.
<!DOCTYPE html>
<html>
<head>
<title>Add Property</title>
</head>
<body>
<script>
let obj={
Name:'Arun',
Age:'32',
}
console.log("Before Adding Property")
console.log(obj);
obj.Work='Manager';
console.log("After Adding Property");
console.log(obj);
</script>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contains information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- In script we defined object ‘obj’ with values ‘Name:’Arun’,Age:’32’’ then we printed our object ‘obj’ for user can identify difference between before and after adding property.
- Then we added ‘Work’ property with value ‘Manager’ to the existing object ‘obj’ by ‘obj.Work:’Manager’’ and this modified result also finally printed on console.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to add property to existing object in javascript.
When we executes our program on browser we can’t see result because we displayed result on console using ‘console.log()’ method.
For open console we need to use shortcut ‘ctrl+shift+j’ then right hand side console panel will open with our printed result.
As we know we can also use square bracket method result will be same and we can modify existing object with different values we will see about them later.
I hope this tutorial on JavaScript add property to existing object helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
