Javascript: get object object names

Question

I am trying to write a function that needs to know the property names of the passed object, for example:

var data = { "key1":"value1", "key2":"value2", etc}
               ^ i want the string value "key1"

How to get string "key1" from data? I know that I can set the property dynamically, like data[prop]=value, but I want to know what propfrom the passed object.

If that doesn't make sense, I suppose I could try to explain more. Thank!

In the end I want to do something like:

for (var i = 0; i<data.length; i++)
{
    var name = data[i].getPropertyName() <--- not a real function
    // do stuff
}

Answer 1

Before we look at our options, pay attention to four key properties of JavaScript properties:

• Objects can have their own properties and properties that they inherit from their prototype.
• Properties may or may not be listed.
• , , (, ES2015/ES6), Symbol s.
• , , 1. , , , . ( , JavaScript , ), , . , a = ['x', 'y', 'z'] , "0", "1" "2". a[0] , 0 . ( , , JavaScript .)

( ). :

• A for-in loop (spec | MDN), hasOwnProperty , "" . ( Symbol s.) .
• Object.keys (spec | MDN) (ES5 +), , . ( Symbol s.)
• Object.getOwnPropertyNames (spec | MDN) (ES5 +), , , . ( Symbol s.)
• Reflect.enumerate (spec | MDN) (ES2015 +), , , . ( Symbol s.) ES2016.
• Object.getOwnPropertySymbols (spec | MDN) (ES2015 +), Symbol s, , . ( , .)
• Reflect.ownKeys (spec | MDN) (ES2015 +), , (Symbol string), .

, , , Object.getOwnPropertySymbols Reflect.ownKeys Symbol s.

( ES2015) for-in Object.keys. ES2015 , [[OwnPropertyKeys]] ( ) [[Enumerate]]. ( ES2015 - [ ] , , JavaScript- .)

. -, :

// Create an object with one "own" property (plus the ones it
// inherits from Object.prototype):
var proto = {
    one: 1
}

// Create an object that uses the above as its prototype
var obj = Object.create(proto);

// Add a couple of enumerable properties
obj.two = 2;
obj.three = 3;

// Add a non-enumerable property (by default, properties created
// with Object.defineProperty are non-enumerable)
Object.defineProperty(obj, "four", {
   value: 4,
   configurable: true,
   writable: true
});

ES5

(Object.create, , [ ], / JavaScript, IE8. Object.defineProperty ES5, /.)

, , Symbol.

, (* ):

                                                    +−−−−−−−−−−−−−−−−−+
Object.prototype−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−−+−−>| toString*       |−−>(...a function...)
                                                |   | valueOf*        |−−>(...a function...)
                                                |   | hasOwnProperty* |−−>(...a function...)
                                                |   | ...             |
                                                |   +−−−−−−−−−−−−−−−−−+
                                                |
                             +−−−−−−−−−−−−−−−+  |
proto−−−−−−−−−−−−−−−−−−−−+−−>| [[Prototype]] |−−+
                         |   | one: 1        |
                         |   +−−−−−−−−−−−−−−−+
                         |
      +−−−−−−−−−−−−−−−+  |
obj−−>| [[Prototype]] |−−+
      | two: 2        |
      | three: 3      |
      | four*: 4      |
      +−−−−−−−−−−−−−−−+

:

for-in

for-in ( , ), ( Symbol s).

for (var name in obj) {
    // name is the name of each property, so:
    console.log(name + " = " + obj[name]);
}

// Create an object with one "own" property (plus the ones it
// inherits from Object.prototype):
var proto = {
    one: 1
}

// Create an object that uses the above as its prototype
var obj = Object.create(proto);

// Add a couple of enumerable properties
obj.two = 2;
obj.three = 3;

// Add a non-enumerable property (by default, properties created
// with Object.defineProperty are non-enumerable)
Object.defineProperty(obj, "four", {
   value: 4,
   configurable: true,
   writable: true
});

for (var name in obj) {
    // name is the name of each property, so:
    console.log(name + " = " + obj[name]);
}

Hide result

two = 2
three = 3
one = 1

... . , , , ES2015.

for-in hasOwnProperty

, , hasOwnProperty:

for (var name in obj) {
    if (obj.hasOwnProperty(name)) {
        console.log(name + " = " + obj[name]);
    }
}

// Create an object with one "own" property (plus the ones it
// inherits from Object.prototype):
var proto = {
    one: 1
}

// Create an object that uses the above as its prototype
var obj = Object.create(proto);

// Add a couple of enumerable properties
obj.two = 2;
obj.three = 3;

// Add a non-enumerable property (by default, properties created
// with Object.defineProperty are non-enumerable)
Object.defineProperty(obj, "four", {
   value: 4,
   configurable: true,
   writable: true
});

for (var name in obj) {
    if (obj.hasOwnProperty(name)) {
        console.log(name + " = " + obj[name]);
    }
}

Hide result

two = 2
three = 3

one, .

hasOwnProperty - , , :

obj.hasOwnProperty = function() {
    return true;
};

... . , , Object.prototype:

var hasOwn = Object.prototype.hasOwnProperty;
for (var name in obj) {
    if (hasOwn.call(obj, name)) {
        console.log(name + " = " + obj[name]);
    }
}

, - Object.prototype.hasOwnProperty, , .

Object.keys (ES5 +, /)

Object.keys , . , , , , Symbol s.

var propNames = Object.keys(obj);

, forEach:

propNames.forEach(function(name) {
    console.log(name + " = " + obj[name]);
});

// Create an object with one "own" property (plus the ones it
// inherits from Object.prototype):
var proto = {
    one: 1
}

// Create an object that uses the above as its prototype
var obj = Object.create(proto);

// Add a couple of enumerable properties
obj.two = 2;
obj.three = 3;

// Add a non-enumerable property (by default, properties created
// with Object.defineProperty are non-enumerable)
Object.defineProperty(obj, "four", {
   value: 4,
   configurable: true,
   writable: true
});

var propNames = Object.keys(obj);
propNames.forEach(function(name) {
    console.log(name + " = " + obj[name]);
});

Hide result

, :

two = 2
three = 3

, ES2015.

Object.getOwnPropertyNames (ES5 +)

Object.getOwnPropertyNames , , . Symbol s.

var propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(function(name) {
    console.log(name + " = " + obj[name]);
});

// Create an object with one "own" property (plus the ones it
// inherits from Object.prototype):
var proto = {
    one: 1
}

// Create an object that uses the above as its prototype
var obj = Object.create(proto);

// Add a couple of enumerable properties
obj.two = 2;
obj.three = 3;

// Add a non-enumerable property (by default, properties created
// with Object.defineProperty are non-enumerable)
Object.defineProperty(obj, "four", {
   value: 4,
   configurable: true,
   writable: true
});

var propNames = Object.getOwnPropertyNames(obj);
propNames.forEach(function(name) {
    console.log(name + " = " + obj[name]);
});

Hide result

, :

two = 2
three = 3
four = 4

[[OwnPropertyKeys]] , , :

• , .
• .

, two, three, four, , . , , :

var obj2 = {};
obj2.four = 4;
obj2[0] = "zero";
obj2.two = 2;
obj2.three = 3;
Object.getOwnPropertyNames(obj2).forEach(function(name) {
    console.log(name + " = " + obj2[name]);
});

var obj2 = {};
obj2.four = 4;
obj2[0] = "zero";
obj2.two = 2;
obj2.three = 3;
Object.getOwnPropertyNames(obj2).forEach(function(name) {
    console.log(name + " = " + obj2[name]);
});

Hide result

:

0 = zero
four = 4
two = 2
three = 3

0 , , . four, , two, three.

Reflect.enumerate (ES2015) ES2016

Reflect.enumerate ES2016.

< > Reflect.enumerate ES2015. , , , , Symbol . "" ( , [[OwnPropertyKeys]], ( "" ).

for-of :

for (let name of Reflect.enumerate(obj)) {
    console.log(name + " = " + obj[name]);
}

:

two = 2
three = 3
one = 1

one , , "own" .

. , ES2015 , JavaScript Reflect.

Object.getOwnPropertySymbols (ES2015 +)

Object.getOwnPropertySymbols Symbol s, , . ( , ). , , Symbol - . , :

var obj3 = {};
obj3[Symbol("x")] = "ecks";
obj3[1] = "one";
obj3[Symbol("y")] = "why";
obj3.z = "zee";
Object.getOwnPropertySymbols(obj3).forEach(function(symbol) {
    console.log(symbol.toString() + " = " + obj3[symbol]);
});

var obj3 = {};
obj3[Symbol("x")] = "ecks";
obj3[1] = "one";
obj3[Symbol("y")] = "why";
obj3.z = "zee";
Object.getOwnPropertySymbols(obj3).forEach(function(symbol) {
    console.log(symbol.toString() + " = " + obj3[symbol]);
});

Hide result

:

Symbol(x) = ecks
Symbol(y) = why

z , , Symbol. Symbol(x) , .

Symbols, , , , , toString Symbol(the name here) . , toString (thesymbol.toString()) String(theSymbol); + .

Reflect.ownKeys (ES2015 +)

Reflect.ownKeys , (Symbol string), . :

var obj3 = {};
obj3[Symbol("x")] = "ecks";
obj3[1] = "one"
obj3[Symbol("y")] = "why";
obj3.z = "zee";
Reflect.ownKeys(obj3).forEach(function(key) {
    console.log(key.toString() + " = " + obj3[key]);
});

var obj3 = {};
obj3[Symbol("x")] = "ecks";
obj3[1] = "one"
obj3[Symbol("y")] = "why";
obj3.z = "zee";
Reflect.ownKeys(obj3).forEach(function(key) {
    console.log(key.toString() + " = " + obj3[key]);
});

Hide result

:

1 = one
z = zee
Symbol(x) = ecks
Symbol(y) = why

, [[OwnPropertyKeys]]: 1 , , . z , string. Symbol -named, , .

Answer 2

var data = { "key1":"value1", "key2":"value2"}; //etc

for (var prop in data) {
  var propName = prop;
  var propVal = data[prop];
  // do something with your new variables
}

, .

Answer 3

Inspired by the answers above, I wondered how to list ALL the properties of any object (both emumerable and not) up the inheritance chain. This feature seems to be sufficient.

var allPropNames = [];

function digAllPropsOut (ob){
    var propNames = Object.getOwnPropertyNames(ob);
    propNames.forEach(function(name) {
        allPropNames.push(name);
    });
    // allPropNames.push('\n');
    ob = Object.getPrototypeOf(ob);
    if (ob)
        digAllPropsOut(ob);
}