How can I add a key value pair to a JavaScript object

Question

Here is my object literal   var obj    key1  value1  key2  value2     How can I add field key3 with value3 to the object

User · Answer

We can add a key value pair to a JavaScript object in many ways    CASE - 1   Expanding an object Using this we can add multiple key  value to the object at the same time   x000D   x000D  const rectangle     width  4  height  6    const cube       rectangle  length  7   const cube2       rectangle  length  7  stroke  2     console log  Cube2     cube2     console log  Cube     cube     console log  Rectangle     rectangle   x000D   x000D   x000D   CASE - 2   Using dot notation  x000D   x000D  var rectangle     width  4  height  6    rectangle length   7  console log rectangle   x000D   x000D   x000D   CASE - 3   Using  square  notation  x000D   x000D  var rectangle     width  4  height  6        rectangle  length     7      console log rectangle   x000D   x000D   x000D

User · Answer

supported by most of browsers  and it checks if object key available or not you want to add  if available it overides existing key value and it not available it add key with value  example 1  let my object           now i want to add something in it    my object red    this is red color         red    this is red color     example 2  let my object     inside object     car    maruti         now i want to add something inside object of my object   my object inside object plane    JetKing         inside object     car    maruti    plane    JetKing       example 3  let my object     inside object     name    abhishek         now i want to add something inside object with new keys birth   gender   my object inside object birth    8 Aug   my object inside object gender    Male              inside object                     name    abhishek                    birth    8 Aug                    gender    Male

User · Answer

We can do this in this way too   var myMap   new Map    myMap set 0   my value1    myMap set 1   my value2     for  var  key  value  of myMap      console log key           value

User · Answer

There are two ways to add new properties to an object   var obj         key1  value1      key2  value2      Using dot notation   obj key3    value3     Using square bracket notation   obj  key3      value3     The first form is used when you know the name of the property  The second form is used when the name of the property is dynamically determined  Like in this example   var getProperty   function  propertyName        return obj propertyName       getProperty  key1    getProperty  key2    getProperty  key3        A real JavaScript array can be constructed using either   The Array literal notation   var arr         The Array constructor notation   var arr   new Array

User · Answer

Two most used ways already mentioned in most answers  obj key3    value3    obj  key3      value3     One more way to define a property is using Object defineProperty    Object defineProperty obj   key3       value   value3            undefined by default   enumerable  true          false by default   configurable  true        false by default   writable  true            false by default       This method is useful when you want to have more control while defining property  Property defined can be set as enumerable  configurable and writable by user

User · Answer

Your example shows an Object  not an Array   In that case  the preferred way to add a field to an Object is to just assign to it  like so   arr key3   value3

User · Answer

Year 2017 answer  Object assign   Object assign dest  src1  src2       merges objects  It overwrites dest with properties and values of  however many  source objects  then returns dest   The Object assign   method is used to copy the values of all enumerable own properties from one or more source objects to a target object  It will return the target object   Live example  x000D   x000D  var obj    key1   value1   key2   value2    Object assign obj   key3   value3      document body innerHTML   JSON stringify obj   x000D   x000D   x000D   Year 2018 answer  object spread operator       obj       obj     pair    From MDN   It copies own enumerable properties from a provided object onto a new object  Shallow-cloning  excluding prototype  or merging of objects is now possible using a shorter syntax than Object assign    Note that Object assign   triggers setters whereas spread syntax doesn   t   Live example It works in current Chrome and current Firefox  They say it doesn   t work in current Edge   x000D   x000D  var obj    key1   value1   key2   value2    var pair    key3   value3    obj       obj     pair    document body innerHTML   JSON stringify obj   x000D   x000D   x000D   Year 2019 answer Object assignment operator     obj     key3   quot value3 quot     Oops    I got carried away  Smuggling information from the future is illegal  Duly obscured

User · Answer

Simply adding properties   And we want to add prop2   2 to this object  these are the most convenient options    Dot operator  object prop2   2  square brackets  object  prop2     2    So which one do we use then    The dot operator is more clean syntax and should be used as a default  imo   However  the dot operator is not capable of adding dynamic keys to an object  which can be very useful in some cases  Here is an example    x000D   x000D  const obj     x000D    prop1  1 x000D    x000D   x000D  const key   Math random    gt  0 5    key1     key2   x000D   x000D  obj key     this value has a dynamic key   x000D   x000D  console log obj   x000D   x000D   x000D    Merging objects   When we want to merge the properties of 2 objects these are the most convenient options    Object assign    takes a target object as an argument  and one or more source objects and will merge them together  For example     x000D   x000D  const object1     x000D    a  1  x000D    b  2  x000D     x000D   x000D  const object2   Object assign   x000D    c  3  x000D    d  4 x000D     object1   x000D   x000D  console log object2   x000D   x000D   x000D     Object spread operator        x000D   x000D  const obj     x000D    prop1  1  x000D    prop2  2 x000D    x000D   x000D  const newObj     x000D       obj  x000D    prop3  3  x000D    prop4  4 x000D    x000D   x000D  console log newObj   x000D   x000D   x000D    Which one do we use    The spread syntax is less verbose and has should be used as a default imo  Don t forgot to transpile this syntax to syntax which is supported by all browsers because it is relatively new   Object assign   is more dynamic because we have access to all objects which are passed in as arguments and can manipulate them before they get assigned to the new Object

User · Answer

var arrOfObj     name   eve    name  john    name  jane         var injectObj    isActive true  timestamp new Date             function to inject key values in all object of json array      function injectKeyValueInArray  array  keyValues           return new Promise  resolve  reject    gt                if   array length                  return resolve array                array forEach  object    gt                    for  let key in keyValues                        object key    keyValues key                                                resolve array                        call function to inject json key value in all array object     injectKeyValueInArray arrOfObj injectObj  then  newArrOfObj   gt           console log newArrOfObj             Output like this -      name   eve       isActive  true      timestamp  2017-12-16T16 03 53 083Z        name   john       isActive  true      timestamp  2017-12-16T16 03 53 083Z        name   jane       isActive  true      timestamp  2017-12-16T16 03 53 083Z

User · Answer

Performance  Today 2020 01 14 I perform tests on MacOs HighSierra 10 13 6 on Chrome v78 0 0  Safari v13 0 4 and Firefox v71 0 0  for  chosen solutions  I divide solutions to mutable  first letter M  and immutable  first letter I   I also provide few immutable solutions  IB IC ID IE  not yet published in answers to this question  Conclusions   fastest mutable solutions are much faster than fastest immutable   10x  classic mutable approach like obj key3    abc   MA MB  is fastest for immutable solutions  the     obj  key3  abc   and Object assign  IA IB  are fastest surprisingly there are immutable solutions faster than some mutable solutions for chrome  MC-IA  and safari  MD-IB      Details  In snippet below there are presended tested solution  you can prefrom test on your machine HERE  x000D   x000D  var o     x000D      key1  true  x000D      key2  3  x000D     x000D   x000D  var log   s f   gt  console log    s  -- gt    JSON stringify f     o        x000D   x000D   x000D   x000D  function MA obj    x000D    obj key3    abc   x000D    return obj  x000D    x000D   x000D  function MB obj    x000D    obj  key3      abc   x000D    return obj  x000D    x000D   x000D  function MC obj    x000D    Object assign obj   key3  abc     x000D    return obj  x000D    x000D   x000D  function MD obj    x000D    Object defineProperty obj   key3     x000D      value   abc            undefined by default x000D      enumerable  true          false by default x000D      configurable  true        false by default x000D      writable  true            false by default x000D        x000D    return obj  x000D    x000D   x000D  function IA obj    x000D    return     obj  key3  abc    x000D    x000D   x000D  function IB obj    x000D    return Object assign  key3  abc    obj   x000D    x000D   x000D  function IC obj    x000D    let ob  JSON parse JSON stringify obj   x000D    ob key3    abc   x000D    return ob  x000D    x000D   x000D   x000D  function ID obj    x000D   let ob  Object fromEntries Object entries obj    x000D    ob key3    abc   x000D    return ob  x000D    x000D   x000D  function IE obj    x000D   return Object fromEntries Object entries obj  concat    key3   abc      x000D    x000D   x000D   x000D   x000D  log  MA  MA   x000D  log  MB  MB   x000D  log  MC  MC   x000D  log  MD  MD   x000D  log  IA  IA   x000D  log  IB  IB   x000D  log  IC  IC   x000D  log  ID  ID   x000D  log  IE  IE   x000D  This snippet only presents code - it not perform tests itself  x000D   x000D   x000D

User · Answer

var employees        employees push  id 100 name  Yashwant  age 30    employees push  id 200 name  Mahesh  age 35

User · Answer

Either obj  key3     value3 or obj key3   value3 will add the new pair to the obj   However  I know jQuery was not mentioned  but if you re using it  you can add the object through   extend obj  key3   value3     E g     x000D   x000D  var obj    key1   value1   key2   value2    x000D      ini   append JSON stringify obj    x000D   x000D    extend obj  key3   value3     x000D   x000D      ext   append JSON stringify obj    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p id  ini  gt Initial   lt  p gt  x000D   lt p id  ext  gt Extended   lt  p gt  x000D   x000D   x000D    jQuery extend target  object1   objectN   merges the contents of two or more objects together into the first object   And it also allows recursive adds modifications with   extend true object1 object2      x000D   x000D  var object1     x000D    apple  0  x000D    banana    weight  52  price  100    x000D    cherry  97 x000D     x000D  var object2     x000D    banana    price  200    x000D    durian  100 x000D     x000D      ini   append JSON stringify object1        x000D   x000D    extend  true  object1  object2    x000D    x000D      ext   append JSON stringify object1    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt p id  ini  gt Initial   lt  p gt  x000D   lt p id  ext  gt Extended   lt  p gt  x000D   x000D   x000D

User · Answer

In case you have multiple anonymous Object literals inside an Object and want to add another Object containing key value pairs  do this   Firebug  the Object   console log Comicbook     returns       Object   name  Spiderman   value  11    Object   name  Marsipulami     value  18    Object   name  Garfield   value  2      Code   if  typeof Comicbook 3    undefined         private formArray 3    new Object        private formArray 3   name      Peanuts       private formArray 3   value      12       will add Object  name  Peanuts   value  12   to the Comicbook Object

User · Answer

In order to prepend a key-value pair to an object so the for in works with that element first do this       var nwrow     newkey    value         for var column in row           nwrow column    row column             row   nwrow

User · Answer

You can create a new object by using the   key   value  syntax    x000D   x000D  const foo     x000D    a   key   x000D    b   value  x000D    x000D   x000D  const bar     x000D     foo a   foo b x000D    x000D   x000D  console log bar       key   value   x000D  console log bar key      value x000D   x000D  const baz     x000D      key2     value2  x000D    x000D   x000D  console log baz       key2   value2   x000D  console log baz key2      value2 x000D   x000D   x000D    With the previous syntax you can now use the spread syntax     foo     bar  to add a new object without mutating your old value    x000D   x000D  const foo    a  1  b  2   x000D   x000D  const bar       foo        c    3    x000D   x000D  console log bar       a  1  b  2  c  3  x000D  console log bar c      3 x000D   x000D   x000D

User · Answer

According to Property Accessors defined in ECMA-262 http   www ecma-international org publications files ECMA-ST Ecma-262 pdf  P67   there are two ways you can do to add properties to a exists object  All these two way  the Javascript engine will treat them the same   The first way is to use dot notation   obj key3   value3    But this way  you should use a IdentifierName after dot notation   The second way is to use bracket notation   obj  key3     value3    and another form   var key3    key3   obj key3    value3    This way  you could use a Expression  include IdentifierName  in the bracket notation

User · Answer

Since its a question of the past but the problem of present  Would suggest one more solution  Just pass the key and values to the function and you will get a map object   var map       function addValueToMap key  value    map key    map key         map key  push value

User · Answer

You could use either of these  provided key3 is the acutal key you want to use   arr   key3      value3    or  arr key3   value3    If key3 is a variable  then you should do   var key3    a key   var value3   3  arr  key3     value3    After this  requesting arr a key would return the value of value3  a literal 3

User · Answer

A short and elegant way in next Javascript specification  candidate stage 3  is    obj         obj        key3   value3      A deeper discussion can be found in Object spread vs Object assign and on Dr  Axel Rauschmayers site   It works already in node js since release 8 6 0    Vivaldi  Chrome  Opera  and Firefox in up to date releases know this feature also  but Mirosoft don t until today  neither in Internet Explorer nor in Edge

User · Answer

You can either add it this way   arr  key3     value3    or this way   arr key3   value3    The answers suggesting keying into the object with the variable key3 would only work if the value of key3 was  key3

User · Answer

You can create a class with the answer of   Ionu  G  Stan  function obj        obj new Object        this add function key value           obj    key     value            this obj obj     Creating a new object with the last class   my obj new obj    my obj add  key1    value1    my obj add  key2    value2    my obj add  key3   value3      Printing the object   console log my obj obj     Return  key1   value1   key2   value2   key3   value3      Printing a Key  console log my obj obj  key3      Return value3   I m newbie in javascript  comments are welcome  Works for me

User · Answer

I know there is already an accepted answer for this but I thought I d document my idea somewhere   Please  people  feel free to poke holes in this idea  as I m not sure if it is the best solution    but I just put this together a few minutes ago   Object prototype push   function  key  value       this  key     value     return this      You would utilize it in this way   var obj    key1  value1  key2  value2   obj push   key3    value3       Since  the prototype function is returning this you can continue to chain  push s to the end of your obj variable  obj push      push      push        Another feature is that you can pass an array or another object as the value in the push function arguments   See my fiddle for a working example  http   jsfiddle net 7tEme

User · Answer

arr key3   value3    because your arr is not really an array    It s a prototype object  The real array would be   var arr     key1  value1    key2  value2      but it s still not right  It should actually be   var arr     key  key1  value  value1    key  key2  value  value2

User · Answer

Best way to achieve same is stated below   function getKey key      return    key       var obj    key1   value1   key2   value2    getKey  key3      value3       console log obj

User · Answer

I have grown fond of the LoDash   Underscore when writing larger projects   Adding by obj  key   or obj key are all solid pure JavaScript answers  However both of LoDash and Underscore libraries do provide many additional convenient functions when working with Objects and Arrays in general    push   is for Arrays  not for objects   Depending what you are looking for  there are two specific functions that may be nice to utilize and give functionality similar to the the feel of arr push    For more info check the docs  they have some great examples there     merge  Lodash only   The second object will overwrite or add to the base object  undefined values are not copied   var obj    key1   value1   key2   value2    var obj2    key2  value4   key3   value3   key4  undefined     merge obj  obj2   console log obj         key1   value1   key2   value4   key3   value3        extend     assign  The second object will overwrite or add to the base object  undefined will be copied   var obj    key1   value1   key2   value2    var obj2    key2  value4   key3   value3   key4  undefined     extend obj  obj2   console log obj         key1   value1   key2   value4   key3   value3   key4  undefined      defaults  The second object contains defaults that will be added to base object if they don t exist  undefined values will be copied if key already exists   var obj    key3   value3   key5   value5    var obj2    key1   value1   key2  value2   key3   valueDefault   key4   valueDefault   key5  undefined     defaults obj  obj2   console log obj         key3   value3   key5   value5   key1   value1   key2   value2   key4   valueDefault       extend  In addition  it may be worthwhile mentioning jQuery extend  it functions similar to   merge and may be a better option if you already are using jQuery   The second object will overwrite or add to the base object  undefined values are not copied   var obj    key1   value1   key2   value2    var obj2    key2  value4   key3   value3   key4  undefined     extend obj  obj2    console log obj         key1   value1   key2   value4   key3   value3     Object assign    It may be worth mentioning the ES6  ES2015 Object assign  it functions similar to   merge and may be the best option if you already are using an ES6 ES2015 polyfill like Babel if you want to polyfill yourself   The second object will overwrite or add to the base object  undefined will be copied   var obj    key1   value1   key2   value2    var obj2    key2  value4   key3   value3   key4  undefined   Object assign obj  obj2    console log obj         key1   value1   key2   value4   key3   value3   key4  undefined

[javascript] How can I add a key/value pair to a JavaScript object?

Examples related to javascript

Examples related to object-literal