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
– Patrick Hund, Commented Aug 20, 2017 at 16:34
@ssube: That's not quite right: stackoverflow.com/q/30076219/218196 — Felix Kling
– Felix Kling, Commented Aug 20, 2017 at 16:37
Guaranteed order for for ... in or Object.keys came with ecmascript2017. ES6 allows for terrible pitfalls. — ASDFGerte
– ASDFGerte, Commented Aug 20, 2017 at 16:37

Nina Scholz · Accepted Answer · 2017-08-20 16:40:09Z

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, 2017 at 16:40

answered Aug 20, 2017 at 16:37

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

ASDFGerte Over a year ago

This solves the question, but what if there were non-enumerable properties (or getter/setter)?

Nina Scholz Over a year ago

@ASDFGerte, i would not rely on a order of an object. Object.assign copies only own enumerable properties.

mLstudent33 Over a year ago

This did not work:

disease_dict.assign({Select: "<td><div class='custom-control custom-checkbox'>"                                         + "<input type='checkbox' class='custom-control-input'"                                         +"id='customCheck1' name=${" + check_name + "}>"                                         +"<label class='custom-control-label' for='customCheck1'>"                                         + "</label></div></td>", disease_dict });

Sarang · Accepted Answer · 2020-05-17 07:58:15Z

5

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" };

answered May 17, 2020 at 7:58

Sarang

6881 gold badge7 silver badges13 bronze badges

Comments

akshay bagade · Accepted Answer · 2019-12-22 16:58:51Z

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, 2019 at 16:58

akshay bagade

1,2191 gold badge13 silver badges24 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related