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;"> neveropen </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> |
Output:
