Object Properties and Methods in Javascript Hindi Tutorial

Javascript Object tutorial में हमने देखा object क्या है और कितने तरीके से object create किया जाता है | जैसे की एक object में कई properties और methods होते हैं | तो इस article में हम देखेंगे की कैसे object के properties और methods को manipulate कर सकते हैं | यानि की कैसे नए properties add, delete या modify कर सकतें हैं |

Table of Contents hide

1 adding new property in object

2 modifying property in object

3 delete object property

4 access all object properties

5 Methods in javascript object

6 अन्य javascript tutorial के सुझाव

adding new property in object

object बनाने के बाद और उसमे properties और method डालने के बाद भी हमे बाद में कुछ और properties देने की जरुरत पद सकती है | तो हम उन नए property वैसे ही डाल सकतें हैं जैसे एक empty object में property assign करतें हैं |

objectname के साथ नए property का नाम .(dot)operator या [](square bracket) में लिख कर उसे value assign कर सकतें हैं |

Syntax:
object_name.new_propertyname = value
object_name[new_propertyname] = value

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {empid:1021, name:"Rajan"};
   
   //adding new properties
   employee["department"] = "Finanace";   
   employee.salary = 30000;
   console.log(employee);
  </script>
 </body>
</html>

ऊपर के उदाहरण में देखिये employee नाम का object बनाया गया है | और उसमे बाद में array notation और .(dot) notation दोनों तरीकों से नयी property जोड़ी गयी है |

output:

modifying property in object

जैसे नयी property उसी तरीके से existing property में नयी value डाल सकते हैं |

Syntax:
object_name.existing_propertyname = new_value
object_name[ existing_propertyname] = new_value

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                    empid:1021, 
                    name:"Rajan", 
                    salary: 30000,
                    department: "Finanace"
                  };
   
   //modifying salary property with new value
   employee.salary = 50000;
   console.log(employee);
  </script>
 </body>
</html>

उदाहरण में देखिये salary property में एक नयी value डाली गयी है जिससे फिर output में salary की value 30000 के बदले 50000 दिखाई देगा |

output:

delete object property

javascript में delete keyword का उपयोग करके किसी object से कोई भी property को delete की जा सकती है |

Syntax:
delete objectname.property;

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace"
		  };
   
   //delete salary property
   delete employee.salary;
   console.log(employee);
  </script>
 </body>
</html>

output:

access all object properties

Real time javascript programming में एक object में कई सारे properties हो सकतें हैं | सारे properties को याद रखना और एक एक करके सबको चेक करना मुस्किल है |

अगर हमे पता न हो एक object के अंदर कितनी properties define की गयी है, पर उन सबको देखना चाहते हैं | तब हम loop लगाके और उस loop में in operator के जरिये सारे properties के नाम और value को देख सकते हैं |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace"
		  };
   
   for(let key in employee)
   {
     console.log(key+": " + employee[key]);
   }
  </script>
 </body>
</html>

ऊपर के उदाहरण में देखिये for loop के अंदर हमने key नाम का एक variable बनाया है | और in operator के जरिये employee object की सारी properties को एक एक करके iterate किया है |

इसीलिए key variable में सारे properties के नाम store हैं और उसके सारे values को employee[key] से access कर सकते हैं |

output:

नॉटपॉइंट: in operator के जरिये object में कोई property है या नहीं वो पता कर सकतें हैं | और ये result true या false में return करता है |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace"
		  };   
   console.log('location' in employee);
  </script>
 </body>
</html>

उदाहरण में देखिये in operator के जरिये employee object में ‘location’ property को चेक करे हैं | और ये property employee object में नहीं है इसीलिए ये false output में return करेगा |

output:

Methods in javascript object

object के जरिये जब कोई action करवानी है तो उन action को function में लिखी जाती है | object के functions को method कही जाती है |

object बनाने के समय में ही method लिख सकतें हैं या फिर बाद में function बनाके उसे, object से attach कर सकतें हैं |

methods बनाने तरीकों चलिए अब सीखते हैं |

anonymous type

इस तरीके में function का कोई नाम नहीं होता | function code को direct object के methodname से जोड़ कर के लिखी जाती है |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace"
		  };   
   employee.greet = function(){
                                console.log("Welcome to my Office");
			      }				  
   employee.greet();
  </script>
 </body>
</html>

उदाहरण में देखिये employee नाम का object पेहले से बना हुआ है | अब object के बाहार एक anonymous method बनाया और उसे greet() नाम के property से जोड़ दीया | अब greet(), employee object का method बन गया है | जिसे हमने console.log के जरिये call किया है जिसका output निचे देखिये |

output:

object बनाते समय ही उसमे property डालने के साथ भी methods लिखी जा सकती है | हम ऊपर के उदाहरण में बताई गयी method को अब object के अंदर कैसे लिखेंगे वो देखेंगे |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace",
		   greet : function(){
                                      console.log("Welcome to my Office");
				     }	
		  };
   employee.greet();
  </script>
 </body>
</html>

2. named function

हम एक function को नाम देकर भी बना सकतें हैं और उसे object के method से जोड़ कर call कर सकतें हैं |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace"
		  };
   function welcome(){
                       console.log("Welcome to my Office");
		     }			  
   employee.greet = welcome;
   employee.greet();
  </script>
 </body>
</html>

code में देखिये हमने एक welcome() नाम का function बनाया और उसे object के greet method से attach कर दीया | और जैसे object method call करते हैं वैसे ही call किया |

ये एक छोटा सा उदाहरण है method का | आप anonymous function बना सकतें हैं या फिर function को एक नाम देकर उसे object से attach कर सकते हैं | ये दोनों तरीके हैं object में method बनाने का |

ES6 version में javascript में object के अंदर method लिखने का एक नए तरीके को बताया गया है जहाँ object method से direct function code को curly bracket के अंदर लिखी जाती है | वो भी बिना function keyword का उपयोग किये |

उदाहरण:

<!doctype html>
<html>
 <head></head>
 <body>
  <h2>javascript object tutorial</h2>
  <script>
   var employee = {
                   empid:1021,
                   name:"Rajan",
		   salary: 30000, 
		   department: "Finanace",
		   greet() {
                            console.log("Welcome to my Office");
			   }
		 };
   employee.greet();
  </script>
 </body>
</html>

उदाहरण में देखिये greet() method में function code सिर्फ curly bracket अंदर लिख कर assign की गयी है | कोई extra function keyword की जरुरत नहीं पड़ी है | इस तरीके से कम code में हम object के लिए method define कर सकतें हैं |