[JavaScript] Object

JavaScript Object might be confusing if you are accustomed to class-based languages such as C# or Java. But the true power of JavaScript comes from the dynamic nature of its object.

 

1. Object Literals

We can create objects very simply in JavaScript without any definition of it. Also you can add the property at any time. Yes, there will be no runtime error when you mistype the property name.

let person = { name: 'Homer' };
person.age = 36; // dynamic property
person.nam = 'Bart'; // not an error, "nam" is created
person.showInfo = function () {
  return this.name + ': ' + this["age"];
};

console.log(person.showInfo()); // Homer: 36

Note that you can access the object properties through the dot (.) notation or the bracket ([]) notation.

 

2. Classes?

It is easy to create an object with the literal syntax and add properties dynamically. But what if you want to create multiple objects with the same structures? Using literals can be error-prone and tedious.

Traditionally, constructor functions with the “new” keyword is used. Even better, the class syntax is introduced in ES2015.

You can find how to use constructors and classes here:

[JavaScript] Custom Objects

[JavaScript – ES2015] Class – How to Define it

 

3. Object.create()

Object.create() is how objects are created under the hood in JS.

let person = Object.create(Object.prototype,
  {
    name: {
      value: 'Homer',
      enumerable: true,
      writable: true,
      configurable: true
    }
  });
console.log(person.name);

 

4. Property Descriptors

When you create an object using Object.create(), you are providing property descriptor for each property.

You can get the descriptor object using the “Object.getOwnPropertyDescriptor()” function.

let person = { name: 'Homer' };

// {configurable: true, enumerable: true, value: "Homer", writable: true}
console.info(Object.getOwnPropertyDescriptor(person, "name"));

 

5. writable Attribute

The “writable” attribute specifies whether the property can be changed from the initial value or not.

The “Object.defineProperty()” is used to modify the property descriptor.

'use strict'
let person = { name: 'Homer' };

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

// {..., writable: false}
console.info(Object.getOwnPropertyDescriptor(person, "name"));

person.name = "Bart"; // error only in the strict mode
// SCRIPT5045: Assignment to read-only properties is not allowed
// in strict mode

Note that the error only occurs in the strict mode.

 

6. enumerable Attribute

The “for..in” loop is used to iterate the properties of an object. By setting the “enumerable” attribute false, you make the property not to be exposed when the object is iterated. Another use case is the “JSON.stringify()“.

let person = { name: 'Homer', age: 36 };

for (let pName in person) {
  console.log(pName + ': ' + person[pName]); // name + age 
}
console.log(JSON.stringify(person));

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

console.log(person.name); // still OK
for (let pName in person) {
  console.log(pName + ': ' + person[pName]); // age only
}
console.log(JSON.stringify(person));

 

7. configurable Attribute

When the “configurable” attribute is false, you cannot change the property any more. It is funny that once you set the property non-configurable, you cannot make it configurable again.

 

8. Delete the Property

You can even remove the property from an object through the “delete” keyword.

let person = { name: 'Homer', age: 36 };

delete person.age;

for (let pName in person) {
  console.log(pName + ': ' + person[pName]); // name only
}

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s