Home

Welcome to the Javascript-getOwnPropertyNames-and-Object.keys- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

Javascript methods Objec.keys and Object.getOwnPropertyNames should return an array of an object`s property names.

An example follows:

function myClass()
{
    this.X = 1;
    this.Y = 2;
}

//Instance object
myObject = new myClass();


//Outputs: ["X", "Y"]
console.log(Object.keys(myObject));

//Outputs: ["X", "Y"]
console.log(Object.getOwnPropertyNames(myObject));

Both methods shouldn't return the object's prototype property names.

A second listing follows:

function myClass()
{
    this.X = 1;
    this.Y = 2;
}

//Defining a prototype attribute
myClass.prototype.Z = 3;

//Instance object
myObject = new myClass();


//Outputs: ["X", "Y"] - the prototype property name "Z" is not included 
console.log(Object.keys(myObject));

//Outputs: ["X", "Y"] - the prototype property name "Z" is not included
console.log(Object.getOwnPropertyNames(myObject));

🔖 A difference between both methods is that Objec.keys should not return non enumerable properties. This could be set to true or false with e.g. the javascript method Object​.define​Property. A use for such feature could be the desire to define which properties are iterable when e.g. using a for...in loop.

A third code snippet follows based on the second one:

function myClass()
{
   this.X = 1;
   this.Y = 2;
}

//Defining a prototype attribute
myClass.prototype.Z = 3;

//Instance object
myObject = new myClass();

//Changing enumerability of property "X" from myObject to false
Object.defineProperty(myObject,"X",
{
   enumerable: false
});


//Outputs: ["Y"]
console.log(Object.keys(myObject));

//Outputs: ["X", "Y"]
console.log(Object.getOwnPropertyNames(myObject));

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

• First 🅱️utton allows to load a file. In this case it should be the "keys.txt"

• 🅱️ utton "LOAD" loads the pre prepared content of the file "keys.txt"

• 🅱️ utton "REFRESH" reloads the current web page

• 🅱️ utton "SHOW ALL" uses Object​.get​OwnProperty​Names to show in area "myInstance Keys" the properties of the instance myInstance which were set by loading the file "keys.txt"

• 🅱️ utton "SHOW PARTLY" uses Object.keys

File keys.txt

• Within the file every row is a property.

• The first column describes if the property is defined directly or in protoytpe.

• Second column describes the name of the property.

• Third column describes the value of the property.

• Fourth column is only needed if the property is not defined in prototype and defines the enumerability.

To use the project just download the files and execute "index.html". Note that all files(folder "wiki_images") should be placed in the same folder so that the functionality of the code is guaranteed.