JavaScript ES5 Object Methods

❮ Previous Next ❯

In 2009, ECMAScript 5 introduced many new methods for objects in JavaScript.

Managing Objects

// Create object with an existing object as prototype
Object.create()

// Adding or changing an object property
Object.defineProperty(object, property, descriptor)

// Adding or changing object properties
Object.defineProperties(object, descriptors)

// Accessing Properties
Object.getOwnPropertyDescriptor(object, property)

// Returns all properties as an array
Object.getOwnPropertyNames(object)

// Accessing the prototype
Object.getPrototypeOf(object)

// Returns enumerable properties as an array
Object.keys(object)

Protecting Objects

// Prevents adding properties to an object
Object.preventExtensions(object)

// Returns true if properties can be added to an object
Object.isExtensible(object)

// Prevents changes of object properties (not values)
Object.seal(object)

// Returns true if object is sealed
Object.isSealed(object)

// Prevents any changes to an object
Object.freeze(object)

// Returns true if object is frozen
Object.isFrozen(object)

Changing a Property Value

Syntax

Object.defineProperty(object, property, {value : value})

This sample is changing a property's value.

Changing Meta Data

ES5 enables modification of the metadata for the following properties:

writable : true // Property value can be changed
enumerable : true // Property can be enumerated
configurable : true // Property can be reconfigured

writable : false // Property value can not be changed
enumerable : false // Property can be not enumerated
configurable : false // Property can be not reconfigured

ES5 permits the modification of getters and setters.

// Defining a getter
get: function() { return language }
// Defining a setter
set: function(value) { language = value }

This example sets the language to be read-only.

Object.defineProperty(person, "language", {writable:false});

This instance renders language non-countable.

Object.defineProperty(person, "language", {enumerable:false});

Listing All Properties

This example displays all characteristics of an object:

Listing Enumerable Properties

This sample displays only the countable characteristics of an object:

Adding a Property

This example introduces a fresh feature to an object:

Adding Getters and Setters

You can use the Object.defineProperty() method to add Getters and Setters.

A Counter Example

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Object.defineProperty()</h2>
    <p>This example changes a property value.</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        language: "EN"
      };
      // Change a property
      Object.defineProperty(person, "language", {
        value: "NO"
      })
      document.getElementById("demo").innerHTML = person.language;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Object.getOwnPropertyNames()</h2>
    <p>This example list the properties of an object.</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        language: "EN"
      }
      // Change Property
      Object.defineProperty(person, "language", {
        enumerable: false
      });
      // Display Properties
      document.getElementById("demo").innerHTML = Object.getOwnPropertyNames(person);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Object.keys()</h2>
    <p>This example list the enumerable properties of an object.</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        language: "EN"
      }
      // Change Property
      Object.defineProperty(person, "language", {
        enumerable: false
      });
      // Display Properties
      document.getElementById("demo").innerHTML = Object.keys(person);
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Object.defineProperty()</h2>
    <p>This example adds a new property to an object.</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe",
        language: "EN"
      };
      // Add a property
      Object.defineProperty(person, "year", {
        value: "2008"
      })
      document.getElementById("demo").innerHTML = person.year;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Object.defineProperty()</h2>
    <p>This example shows how to use the defineProperty() method to include a getter and a setter.</p>
    <p id="demo"></p>
    <script>
      // Create an object:
      const person = {
        firstName: "John",
        lastName: "Doe"
      };
      // Define a getter
      Object.defineProperty(person, "fullName", {
        get: function() {
          return this.firstName + " " + this.lastName;
        }
      });
      // Display full name
      document.getElementById("demo").innerHTML = person.fullName;
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript Getters and Setters</h2>
    <p>Perfect for creating counters:</p>
    <p id="demo"></p>
    <script>
      // Define an object
      const obj = {
        counter: 0
      };
      // Define Setters and Getters
      Object.defineProperty(obj, "reset", {
        get: function() {
          this.counter = 0;
        }
      });
      Object.defineProperty(obj, "increment", {
        get: function() {
          this.counter++;
        }
      });
      Object.defineProperty(obj, "decrement", {
        get: function() {
          this.counter--;
        }
      });
      Object.defineProperty(obj, "add", {
        set: function(value) {
          this.counter += value;
        }
      });
      Object.defineProperty(obj, "subtract", {
        set: function(value) {
          this.counter -= value;
        }
      });
      // Play with counter:
      obj.reset;
      obj.add = 5;
      obj.subtract = 1;
      obj.increment;
      obj.decrement;
      document.getElementById("demo").innerHTML = obj.counter;
    </script>
  </body>
</html>

❮ Previous Next ❯

JavaScript Tutorial

JS Math

JS Versions

JS Objects

JS Functions

JS Classes

JS Async

JS HTML DOM

JS Browser BOM

JS Web APIs

JS AJAX

JS JSON

JS vs jQuery

JS Graphics