How to add key/value pair in Javascript object at the start

Question

I have following object:

var obj = {"last_name": "john", "age": 23, "city": "London"}

I want to add a new element of first_name at the start of this object to look like this:

{"first_name": "Samuel", "last_name": "john", "age": 23, "city": "London"}

I know I can do obj.first_name = "Samuel" but it adds the new element at the end of the object. How can I add it at the start?

Objects are different than arrays, its properties do not have a particular order, so it cannot be done. — Patrick Hund, Aug 20 '17 at 16:34
Since ES6, object properties [have a guaranteed order](http://2ality.com/2015/10/property-traversal-order-es6.html). — ssube, Aug 20 '17 at 16:35
@ssube: That's not quite right: https://stackoverflow.com/q/30076219/218196 — Felix Kling, Aug 20 '17 at 16:37
Guaranteed order for `for ... in` or `Object.keys` came with ecmascript2017. ES6 allows for terrible pitfalls. — ASDFGerte, Aug 20 '17 at 16:37
@ASDFGerte: That's exactly wrong. There is no guaranteed order for `for...in` or `Object.keys`. See the link in my previous comment. — Felix Kling, Aug 20 '17 at 16:38
Possible duplicate of [Does JavaScript Guarantee Object Property Order?](https://stackoverflow.com/questions/5525795/does-javascript-guarantee-object-property-order) — OB Kenobi, Aug 20 '17 at 16:39
@FelixKling the `2015` was a typo and i corrected it already. The version **after** es6 of course :) — ASDFGerte, Aug 20 '17 at 16:40
**Why** do you want this or think you need this? While I can understand the need for ordered keyed collections, you seem to have a *record* for which order should be irrelevant. — Felix Kling, Aug 20 '17 at 16:40
If ES6 is an option you can use [Map](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Map) — OB Kenobi, Aug 20 '17 at 16:43
@ASDFGerte: I don't see how this changed. The spec says *"The mechanics and order of enumerating the properties is not specified but must conform to the rules specified below."* But the "rules specified below" do not specify an order. (and the link I posted actually points that out too) — Felix Kling, Aug 20 '17 at 16:44
@FelixKling The post you linked has a comment that the answer is outdated showing the behavior in ecmascript2017. The spec for es8 changed in the related parts, last time i checked. I had asked a question about this recently and noticed that the behavior changed yet again in es8 - it was about the MDN text of getOwnPropertyNames — ASDFGerte, Aug 20 '17 at 16:47
@ASDFGerte: I can see that to be the case for `Object.keys` but not for `for...in`. But whatever :D — Felix Kling, Aug 20 '17 at 16:53
@FelixKling After additional debate and research i noticed it was a misunderstanding on my side - Neither `Object.keys` nor `for ... in` have a specified order in ecmascript2017 aka es8. It uses a function that has order but may rearrange it (or so i currently believe :) ). The comments on the [linked question](https://stackoverflow.com/questions/30076219/does-es6-introduce-a-well-defined-order-of-enumeration-for-object-properties) would therefore be wrong. So confusing. — ASDFGerte, Aug 20 '17 at 21:36

Nina Scholz · Accepted Answer · 2017-08-20T16:40:09.950

12

While objects have actually (ES5) no order, you could generate a new object with Object.assign and use the new property as object to start with and assign the given object to it. The new object has properties in creation order.

var object = { last_name: "john", age: 23, city: "London" };

object = Object.assign({ first_name: "Samuel" }, object);

console.log(object);

edited Aug 20 '17 at 16:40

answered Aug 20 '17 at 16:37

Nina Scholz

376,160
25
347
392

1

This solves the question, but what if there were non-enumerable properties (or getter/setter)? – ASDFGerte Aug 20 '17 at 17:06
@ASDFGerte, i would not rely on a order of an object. `Object.assign` copies only own enumerable properties. – Nina Scholz Aug 20 '17 at 17:15
This did not work: `disease_dict.assign({Select: "
" + "" +"" + "
", disease_dict });` – mLstudent33 Nov 13 '20 at 23:32

score 5 · Answer 2 · answered May 17 '20 at 07:58

I tried, It works with spread operator. Do it in below way

var object = { last_name: "john", age: 23, city: "London" };
var newObject= { first_name: "Samuel" };
object = {...newObject, ...object }

o/p: { first_name: "Samuel", last_name: "john", age: 23, city: "London" };

score 0 · Answer 3 · answered Dec 22 '19 at 16:58

0

Can do with spread operator, not confident about order

var object = { last_name: "john", age: 23, city: "London" };

var newObj={first_name: "Samuel" ,... object}

console.log(newObj);

answered Dec 22 '19 at 16:58

akshay bagade

1,169
1
11
24

How to add key/value pair in Javascript object at the start

3 Answers3