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

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        JavaScript | Add a key/value
        pair to JavaScript object 
    </title
</head
      
<body style = "text-align:center;"
    <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
</body
  
</html>                    

chevron_right


Output:



  • Before clicking on the button:
  • After clicking on the button:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
  
<head
    <title
        JavaScript | Add a key/value
        pair to JavaScript object 
    </title
</head
      
<body style = "text-align:center;"
    <h1 style = "color:green;"
        GeeksForGeeks 
    </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
</body
  
</html>                    

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.