How do I remove the first property of an object like:

var obj = { x:1, y:2, z:3 };

so that obj bees:

{ y:2 , z:3 };

This approach doesn’t work for me:

delete obj.x

as I don't know any details about the object’s properties.

I just need to delete the first property.

How do I remove the first property of an object like:

var obj = { x:1, y:2, z:3 };

so that obj bees:

{ y:2 , z:3 };

This approach doesn’t work for me:

delete obj.x

as I don't know any details about the object’s properties.

I just need to delete the first property.

• javascript
• object

• 1 That Javascript is invalid. When you fix it, by the way, Javascript don't guarantee property order. What you see as "first property" can be another property on whatever environment. Use arrays or Map, which is something like an object with keys and values, but with property insertion order guarantee. – Jorge Fuentes González Commented Aug 17, 2019 at 16:05
• @JorgeFuentesGonzález no they are ordered, but not in the sequence they are inserted – Code Maniac Commented Aug 17, 2019 at 16:08
• Property order of object – Code Maniac Commented Aug 17, 2019 at 16:10
• Object order isn't guaranteed, but all modern browsers handle object key ordering in the same way – Damon Commented Aug 17, 2019 at 16:12
• @CodeManiac Javascript specs say that property order is not guaranteed. Other thing is that most engines, internally, save them in some kind of order, but if they suddenly change how they work internally because of whatever reason and you get different result, you can't plain as they are still under Javascript specs. If you want true insertion order with specs support, use Map() instead. For example, when a sort() function returns the same value for 2 entries, order is not guaranteed to be the same in different engines. And that's what happens with IE<->Chrome. This is the same. – Jorge Fuentes González Commented Aug 17, 2019 at 16:13

2 Answers 2

In modern JS environments (ES2015+), the ordering of keys is well-defined so you should be able to do something like this:

const keys = Reflect.ownKeys(obj); // thanks to Paulpro for improving this!
if (keys.length) delete obj[keys[0]];

Note that delete won't always work, but for most "normal" objects this should do what you need.

Since there's some contention over the ordering of JS objects, here's the ECMAScript standard: https://www.ecma-international/ecma-262/6.0/#sec-ordinary-object-internal-methods-and-internal-slots-ownpropertykeys

First of all: Javascript (ES5) don't guarantee property order. There are still browsers running on ES5 (IE11 ahem, although they keep property order partially) so depending on your environment, I remend you to follow this rule.

That's a really really important point.

Now, after you understood why you shouldn't do that, I'll explain a way to remove the first property (whatever first is in your current environment).

You can do it two ways. The most performant way in IE11 and Firefox is this one:

for (var i in obj) {
    delete obj[i];
    break;
}

And also you can do:

delete obj[Object.keys(obj)[0]];

Which is less performant on IE and Firefox but better on Chrome (performance test below):

function newList() {
    var objs = [];
    var props = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMOPQRSTUVWXYZ";
    for (var i = 0; i < 200000; i++) {
        var obj = {};
        for (var ii = 0; ii < props.length; ii++) {
            obj[props[ii]] = ii;
        }
        objs.push(obj);
    }
    return objs;
}

var objs = newList();
console.time("Object.keys()");
for (var i = 0; i < objs.length; i++) {
    delete objs[i][Object.keys(objs[i])[0]];
}
console.timeEnd("Object.keys()");

objs = newList();
console.time("for...in");
for (i = 0; i < objs.length; i++) {
    for (var j in objs[i]) {
        delete objs[i][j];
        break;
    }
}
console.timeEnd("for...in");

NOTE: Woah, surprise for me. In V8 Object.keys() works pretty well right now. But in Firefox and IE11 preformance is still worse.

Chrome:

IE11:

Firefox:

Not tested more browsers as those 3 are the only ones I develop for (yeah... IE11...). Surprised also that IE11 has better performance than Firefox. Usually is way worse.

Seems that the overhead for Object.keys() is when creating the array, but the overall performance changes with the amount of properties on both ways. Thank you for telling me to do some tests Jonas Wilms.