How to add key/value pair to a JavaScript object ?

0 0 1 minute read

In order to add key/value pair to a JavaScript object, Either we use dot notation or square bracket notation. Both methods are widely accepted.

Example 1: This example adds {“nextFavColor” : “red”} to the GFG_p object by using dot notation.

html

<h1 style="color:green;"> 
    GeeksForGeeks 
</h1> 
 
<p id="GFG_up" style="color:red;"></p> 
 
<button onclick="Geeks()"> 
    Click to add 
</button> 
 
<p id="GFG_down" style="color:green;"></p> 
 
<script> 
    var GFG_p = {fName:"Geeks", lName:"forGeeks", 
                age:100, favColor:"green"}; 
    var p_up = document.getElementById("GFG_up"); 
    var p_down = document.getElementById("GFG_down"); 
    p_up.innerHTML = JSON.stringify(GFG_p); 
      
    function Geeks() { 
        GFG_p.nextFavColor = "Red"; 
        p_down.innerHTML = JSON.stringify(GFG_p);     
    } 
</script>

Output:

Example 2: This example adds {“thirdFavColor” : “blue”} to the GFG_p object by using square bracket notation.

html

<h1 style="color:green;"> 
    zambiatek 
</h1> 
  
<p id="GFG_up" style="color:blue;"></p> 
  
<button onclick="Geeks()"> 
    Click to add 
</button> 
  
<p id="GFG_down" style="color:green;"></p> 
  
<script> 
    var GFG_p = {fName:"Geeks", lName:"forGeeks", 
                age:100, favColor:"green"}; 
    var p_up = document.getElementById("GFG_up"); 
    var p_down = document.getElementById("GFG_down"); 
    p_up.innerHTML = JSON.stringify(GFG_p); 
      
    function Geeks() { 
        GFG_p["thirdFavColor"] = "blue"; 
        p_down.innerHTML = JSON.stringify(GFG_p);     
    } 
</script>