Tag: JavaScript

All object properties in JavaScript are public. There is no explicit way to indicate that a property shouldn’t be accessed from outside. Sometime we don’t want the data to be public. For example, when an object uses a value to determine some sort of state, modify that data without the objects’ knowledge throws the state management process.

One way to avoid this is by using naming conventions. For example, it’s quite common to prefix properties with an underscore (such as _name) when they are not intended to be public. However, there are other ways of hiding data that don’t rely on conventions.

The Module Pattern

There are many different ways to create and compose objects in JavaScript. While JavaScript does not include the formal concept of private properties, we can create data or functions that are accessible only from within an object. For singleton objects, we can use the module pattern to hide data from the outside world. we can use an immediately invoked function expression (IIFE) to define local variables and functions that are accessible only by the newly created object. Privileged methods are methods on the object that have access to private data. We can also create constructors that have private data by either defining variables in the constructor function or by using an IIFE to create private data that is shared among all instances.

var yourObject = (function() {

      // private data variables

      return {
          // public methods and properties
      };
}());

Here we are defining custom type that are keeping their private properties. This is similar to module pattern inside the constructor to create instance-specific private data.

function Student(name) {
            this.name = name;
        }
        Student.prototype = (function () {
            //private variables inside this closure scope
            var age = 25;   
            var myGrades = [93, 95, 88, 0, 55, 91];

            function getAge() {
                return age;
            }
            function growOlder() {
                age++;
            }

            function getAverage() {
                var total = 0;
                for (var i = 0; i < myGrades.length; i++) {
                    total += myGrades[i];
                }
                return avg = (total / myGrades.length);
            }

            function getGradeStatus() {
                var failingGrades = myGrades.filter(function (item) {
                    return item < 70;
                });

                return 'You failed ' + failingGrades.length + ' times.';
            }

            //revaling
            return {
                getAverage: getAverage,
                getGradeStatus: getGradeStatus,
                getAge: getAge,
                growOlder: growOlder
            };

        })();
var student1 = new Student("shahzad");
var student2 = new Student("ali");
student1.name		//returns "shahzad"
student1.getAge();	//returns 25
student1.growOlder();	//increment age 
student1.getAge();	//returns 26
student1.getAverage();	//returns 70.33333333333333
student1.getGradeStatus();	//returns "You failed 2 times."
student2.name			//returns "ali"
student2.getAge();		//returns 26
student2.getAverage();		//returns 70.33333333333333
student2.getGradeStatus()	//returns "You failed 2 times."

If we want private data to be shared across all instances, we can use a hybrid approach that looks like the module pattern but uses a constructor;

var Student = (function() {
    //everyone shares the same age
    var age = 20;   
    function IStudent(name){
        this.name = name;
    }
    
    IStudent.prototype.getAge = function() {
        return age;
    };
    
    IStudent.prototype.growOlder = function() {
        age++;
    };
    
    return IStudent;
}());

var student1 = new Student("shahzad");
var student2 = new Student("ali");
console.log(student1.name);	//returns shahzad
console.log(student1.getAge());		//returns 20
console.log(student2.name);		//returns ali
console.log(student2.getAge());		//returns 20
student1.growOlder();			//increment age
console.log(student1.getAge());		//returns 21
console.log(student2.getAge());		//returns 21

The IStudent constructor is defined inside an IIFE. The variable age is defined outside the constructor but is used for two prototype methods. The IStudent constructor is then returned and becomes the Person constructor in the global scope. All instances of Person end up sharing the age variable, so chaing the value with one instance automatically affects the other instance.

The Mixins Pattern

Mixins are a powerful way to add functionality to objects while avoiding inheritance. A mixin copies properties from one object to another so that the receiving object gains functionality without inheriting from the supplying object. Unlike inheritance, mixins do not allow you to identify where the capabilities came from after the object is created. For this reason, mixins are best used with data properties or small pieces of functionality. Inheritance is still preferable when you want to obtain more functionality and know where that functionality came from.

Scope-safe constructors

Scope-safe constructors are constructors that we can call with or without new to create a new object instance. This pattern takes advantage of the fact that this is an instance of the custom type as soon as the constructor begins to execute, which lets us alter the constructor’s behavior depending on whether or not you used the new operator.

function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    console.log(this.name);
};
var person1 = Person("shahzad");		//note: missing “new”
console.log(person1 instanceof Person);		//returns false
console.log(typeof person1);			//returns undefined
console.log(name);				//returns shahzad

The name is created as a global variable because the Person constructor is called without new. Since this code is running in nonrestrict mode so leaving out new would not throw an error. The fact that constructor begins with capital letter should be preceded by new. What if we want to allow this use case and have the function work without new. We can implement a pattern like this;

function Person(name) {
    if (this instanceof Person) {
        //called with "new"
    } else {
        //called without new
    }
}

Let’s re-write our constructor logic;

function Person(name) {
    if (this instanceof Person) {
        this.name = name;
    } else {
        return new Person(name);
    }
}
var person1 = Person("shahzad");
console.log(person1 instanceof Person);		//returns true
console.log(typeof person1);			//returns object
console.log(person1.name);			//returns shahzad

The constructor is called recursively via new if new keyword is not used to create a proper instance of the object. This way following are equivalent;

var person1 = new Person(“shahzad”);
var person2 = Person(“shahzad”);

console.log(person1 instanceof Person);		//returns true
console.log(person2 instanceof Person);		//returns true

Creating new objects without using the new operator is becoming more common. JavaScript itself has several reference types with scope-sfe constructors, such as Object, Array, RegExp, and Error.

Resources

https://www.theodinproject.com/paths/full-stack-javascript/courses/javascript/lessons/factory-functions-and-the-module-pattern

JavaScript does not offer classical inheritance structure where child class inherit properties of parent classes. JavaScript allows inheritance between objects with the help of prototype.

JavaScript built-in approach for inheritance is called prototype chaining, or prototypal inheritance. Prototype properties are automatically available on object instances which is a form of ineritance. Because prototype is also an object, it has its own properties and inherits properties from that. This is the prototype chain. An object inherits from its prototype, while that prototype in turn inherits from its prototype, and so on.

All objects inherit from Object. More specifically, all objects inherit from Object.prototype.

var person = {
    name: "shahzad"
};
var prototype = Object.getPrototypeOf(person);
console.log(prototype === Object.prototype);	//returns true

There are five method that appear on all objects through inheritance. They are inherited from Object.prototype;

hasOwnProperty() -> Determines whether an own property with the given name exists
propertyIsEnumerable() -> Determines whether an own property is enumerable
isPrototypeOf() -> Determines whether the object is the prototype of another
valueOf() -> Returns the value representation of the object
toString() -> Returns a string representation of the object

The last two are important when we need to make objects work consistently in JavaScript, and sometime we might want to define them ouself.

valueOf()

This method gets called whenever an operator is used on an object. By default, valueOf() simply returns the object instance. The primitive wrapper types override valueOf() so that it returns and string for String, a Boolean for Boolean and so on.

var now = new Date();
var earlier = new Date(2020,1,1);
console.log(now > earlier)	//returns true

now is the date representing the current time, and earlier is a fixed date in the past. When the greater-than-operator (>) is used, the valueOf() method is called on both objects before the comparison is performed. We can even subtract one date from another and get the difference in epoch time because of valueOf().

We can define our own valueOf() method if our objects are intended to be used with operators. We are not chaning how the operator works, only what value is used with operator’s default behavior.

toString()

The toString() method is called as a fallback whenever valueOf() returns a reference value instead of primitive value. It is also implicitly called on primitive values whenever JavaScript is expecting a string. For example, when a string is used as one operand for the plus operator, the other operand is automatically converted to a string. If the other operand is a primitive value, it is converted into a string representations (for example, true becomes “true”), but if its is reference value, then valueOf() is called.

var person = {
    name: "shahzad"
};
var message = "Name = " + person;	
console.log(message);	//returns Name = [object Object]

The code constructs the string by combining “Name =” with person. Since person is an object, its toString() method is called. The method is inherited from Object.prototype and returns the default value of “[object object]” in most JavaScript engines. If we are not happy with this value, we need to provide our own toString() method implementation.

var person = {
    name: "shahzad",
    toString: function() {
        return "[Name " + this.name + " ]"
    }
};
var message = "Name = " + person;
console.log(message);		//returns Name = [Name shahzad ]

Object Inheritance

The simples type of inheritance is between objects. All we have to do is specify what should be the new object’s [[Prototype]].

When a property is accessed on an object, the JavaScript engine goes through a search process. If the property is found on the instance, that property value is used. If the property is not found on the instance, the search continues on [[Prototype]]. If the property is still not found, the search continues to that object’s [[Prototype]], and so on until the end of the chain is reached. That chain usually ends with Object.prototype, whose [[Prototype]] is set to null.

We can also create objects with a null [[Prototype]] via Object.create();

var nakedObject = Object.create(null);
console.log("toString" in nakedObject);		//returns false
console.log("valueOf" in nakedObject);		//returns false

The naked object is an object with no prototype chain. That means built-in methods such as toString() and valueOf() aren’t present on the object. This object is a completely blank slate with no predefined properties, which makes it perfect for creating a lookup hash without potential naming collisions with inherited property names. There aren’t many other uses for an object like this. For example, any time you use an operator on this object, you’ll get an error “Cannot convert object to primitive value.”.

Constructor Inheritance

Object inheritance is the basis of constructor inheritance. Every function has a prototype property that can be modified or replaced. The property is automatically assigned to be a new generic object and has single own property called constructor. In effect, the JavaScript engine does the following for you;

//your write this
function MyConstructor(){
	//initialization
}

//JavaScript engine does this for you behind the scenes
MyConstructor.prototype = 
Object.create(Object.prototype, {
	constructor: {
		configurable: true,
		enumerable: true,
		value: MyConstructor,
		writable: true
}
});

MyConstructor is a subtype of Object, and Object is a supertype of MyConstructor. Prototype property is writable, we can change the prototype chain by overwriting it.

//first constructor
function Rectangle(length, width){
    this.length = length;
    this.width = width;
};

Rectangle.prototype.getArea = function() {
    return this.length * this.width;
};

Rectangle.prototype.toString = function() {
    return "[Rectangle " + this.length + " X " + this.width + "]";
};

//inherits from Rectangle
//second constructor
function Square(size) {
    this.length = size;
    this.width = size;
};

Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

Square.prototype.toString = function() {
    return "[Square " + this.length + " x " + this.width + "]";
};

var rect = new Rectangle(5,10);
var square = new Square(6);
console.log(rect.getArea());	//returns 50
console.log(square.getArea());	//returns 36
console.log(rect.toString());	//returns [Rectangle 5 X 10]
console.log(square.toString());	//returns [Square 6 x 6]
console.log(rect instanceof Rectangle);	//returns true
console.log(rect instanceof Object);	//returns true
console.log(square instanceof Square);	//returns true
console.log(square instanceof Rectangle);	//returns true
console.log(square instanceof Object);	//returns true

In the above code, there are two constructors: Rectangle and Square. The Square constructor has it prototype property overwritten with an instance of Rectangle. No arguments are passed into Rectangle at this point because they don’t need to be used, and if they were, all instances of Square would share the same dimensions. The constructor property is restored on Square.prototype after the original value is overwritten.

rect is created as an instance of Rectangle, and square is created an an instance of Square. Both objects have the getArea() method because it is inherited from Rectangle.prototype. The square variable is considered as instance of Square as well as Rectangle and Object because instanceof uses the prototype chain to determine the object type.

Square.prototype doesn’t actually need to be overwritten. Rectangle constructor isn’t doing anything that is necessary for Square. The only relevant part is that Square.prototype needs to somehow link to Rectangle.prototype in order for inheritance to happen. That means, we can simplify the example by using Object.create();

//inherits from Rectangle
function Square(size) {
    this.length = size;
    this.width = size;
};
Square.prototype = Object.create(Rectangle.prototype, {
    constructor: {
        configurable: true,
        enumerable: true,
        value: Square,
        writable: true
    }
});
Square.prototype.toString = function() {
    return "[Square " + this.length + " x " + this.width + "]";
};
var square = new Square(5)
console.log(square.getArea());		//returns 25
console.log(square instanceof Square);	//returns true
console.log(square instanceof Rectangle);	//returns true
console.log(square instanceof Object);	//returns true
console.log(square.toString());		//returns [Square 5 x 5]

In this version, Square.prototype is overwritten with a new object that inherits from Rectangle.prototype, and the Rectangle constructor is never called. That means we don’t need to worry about causing an error by calling the constructor without arguments anymore.

Always make sure that you overwrite the prototype before adding properties to it, or you will lose the added methods when the overwrite happens.

Accessing Supertype (Base) Methods

In our previous example, the Square type has its own toString() method that shadown toString() on the prototype. What if we want to use base type method? JavaScript allows you to directly access the method on the supertype’s prototype and use either call() or apply() to execute the method.

Replace this;

Square.prototype.toString = function() {
    return "[Square " + this.length + " x " + this.width + "]";
};

With this;

Square.prototype.toString = function() {
    var text = Rectangle.prototype.toString.call(this);
    return text.replace("Rectangle", "Square");
};
var square = new Square(5)
console.log(square.getArea());	//returns 25
console.log(square.toString());	//returns [Square 5 X 5]

JavaScript lack classes, it turns to constructors and prototype to bring a similar order to objects.

Constructors

A constructor is simply a function that is used with new to create an object. There are built-in constructors for Object, Array and Functions. The advantage of constructors is that objects created with the same constructor contains the same properties and methods.

The constructor names should begin with capital letter, to distinguish them from other functions.

function Person() {
    //intentionally empty
}

This function is a constructor. The clue that Person is a constructor is in the name – the first letter is capitalized. Let’s create some instances;

var person1 = new Person();
var person2 = new Person();

The new operator automatically creates an object of the given type and returns it. We can use the instanceof operator to confirm object’s type.

console.log(person1 instanceof Person)		//returns true
console.log(person2 instanceof Person)		//returns true

We can also check the type of an instance using the constructor property. For generic objects (those created via an object literal or the object constructor), constructor is set to Object. For objects created with a custom constructor, constructor points back to that constructor function, in our case Person.

console.log(person1.constructor === Person);	//returns true
console.log(person2.constructor === Person);	//returns true

Let’s add some properties inside constructor;

function Person(name){
    this.name = name;
    this.sayName = function()
    {
        console.log(this.name);
    };
}

Now we can use the Person constructor to create objects with an initialized name property;

var person1 = new Person("shahzad");
var person2 = new Person("ali");
console.log(person1.name);		//returns shahzad
console.log(person2.name);		//returns ali

person1.sayName();			//returns shahzad
person2.sayName();			//returns ali

Make sure to always call constructors with new; otherwise it will be created on global objects. Constructors don’t eliminate code redundancy. For example, each instance has its own sayName() method even though sayName() doesn’t change. What if we have 100 instances of an object, then there are 100 copies of a function that do the exact same thing, just with different data.

If would be much more efficient if all of the instances shared one method, and then that method could use this.name to retrieve the appropriate data. This is where prototypes come in.

Prototypes

Think of prototype as a recipe for an object. Almost every function (except some built-in functions) has a prototype property that is used during the creation of new instances. This property is shared among all of the object instances. For example, hasOwnProperty() method is defined on generic Object prototype, but it can be accessed from any objects.

function Person(name){
    this.name = name;
}

Person.prototype.sayName = function() {
    console.log(this.name);
};

var p = new Person("shahzad");
var p1 = new Person("ali");

console.log(person1.name)	//returns "shahzad"
console.log(person2.name)	//returns "ali"
person1.sayName();		//returns “shahzad”
person2.sayName();		//returns “ali”

Let’s assign constructor property specifically on the prototype;

Person.prototype = {
    constructor: Person,
    
    sayName: function() {
        console.log(this.name);
    },
    
    toString: function() {
        return "[Person " + this.name + "]";
    }
};

var person1 = new Person("shahzad");
var person2 = new Person("ali");
console.log(person1 instanceof Person);		//returns true
console.log(person1.constructor === Person);	//returns true
console.log(person1.constructor === Object);	//returns false
console.log(person2 instanceof Person);		//returns true
console.log(person2.constructor === Person);	//returns true
console.log(person2.constructor === Object);	//returns false

JavaScript Objects can be created using object constructor and object literal;

Using Object literal

var person1 = {
    name: "shahzad"
};
person1.age = 34;
person1		//returns  {name: "shahzad", age: 34}

using Object constructor

var person2 = new Object();
person2.name = "shahzad"
person2.age = 34
person2		//returns  {name: "shahzad", age: 34}

JavaScript uses an internal method called [[Put]] to add a property to object. We can compare this to adding a key to a hash table for the first time. Internally JavaScript engine makes a [[Put]] call that results in the creation of an own property on the object. This means that the specific instance of the object owns that property. All operations on the property must be performed through that object.

When a new value is assigned to existing property, a separate operation called [[Set]] happens. Thee operation results in replacing current property value with a new one.

Detecting Properties

Properties can be added dynamically. If we want to check the existence of a property;

if (person1.age){
    console.log("property exists")		//returns “property exists“
}

This method of checking property works but it is not reliable. The if condition evaluates to true if the value is truthy (an object, a nonempty string, a nonzero number, or true) and false if the value is falsy (null, undefined, 0, false, NaN, or an empty string). In the example code, the object property can contain one of these falsy value and will return false negatives.

Let’s test this;

person1.age = 0
if (person1.age){
    console.log("property exists")		//returns false negative value “Undefined”
}

A more reliable way to test the existence of a property is with “in” operator.

console.log("name" in person1);	//returns true
console.log("age" in person1);		//returns true
console.log("title" in person1);		//returns false

The “in” operator looks for a property in an object and returns true if exists otherwise false. We can also check the existence of a method using “in” operator.

var person = {
    name: "shahzad",
    sayName: function(){
        console.log(this.name);
    }
};
console.log("sayName" in person);	//returns true

The “in” operator added benefit is to not evaluating the value of the property which affects function performance overall.

What If we want to check existence of a property only if it is an own property.

The “in” operator checks for own properties and prototype properties.

console.log("name" in person);		//returns true
console.log("toString" in person);	//returns true

The hasOwnProperty() method checks the presence of an own property in the object.

console.log(person.hasOwnProperty("name"));		//returns true
console.log(person.hasOwnProperty("toString"));	//returns false

Removing Properties

Setting a property to null doesn’t actually remove the property completely. The will make an operation call [[Set]] with a value of null. We need to use the delete operator to completely remove a property from an object. The delete operator works on a single object property. We can think of this operation as removing a key/value pair from hash table.

When delete operation is successful, it returns true;

var person = {
    name: "shahzad"
};
console.log(person)		//returns {name: "shahzad"}
console.log("name" in person)	//returns true
delete person.name		//returns true – no output
console.log("name" in person)	//returns false
console.log(person.name)	//returns undefined

Object Enumeration

All properties we add to an object are enumerable by default. We can iterate over them using for-in loop. Enumerable properties have their internal [[Enumerable]] attribute set to true. The for-in loop enumerates all enumerable properties on an object, assigning the property name to a variable.

//define object
var person1 = {
    name: "shahzad",
    age: 34
};

//enumerate this object
var property;
for (property in person1) {
    console.log("Name: " + property);
    console.log("Value: " + person1[property]);
}

//return values
Name: name
Value: shahzad
Name: age
Value: 34

If we just want to need a list of an object’s properties to use later in the program, ECMAScript 5 introduced the Object.keys() method. This retrieves an array of enumerable property names;

var properties = Object.keys(person1);
var i, len;
for (i=0,len=properties.length;i<len;i++){
    console.log("Name: " + properties[i]);
    console.log("Value: " + person1[properties[i]]);
}
//return values
Name: name
Value: shahzad
Name: age
Value: 34

The for-in-loop and Object.keys() behaves similar but there is a difference in underlying behavior. The for-in-loop enumerates own (instance) properties and prototype properties. Object.keys() returns only own (instances) properties.

Not all properties are enumerable. Most of the native methods on object have their [[Ienumerable]] attribute set to false. To check if a property is enumerable or not, use this;

Check with propertyIsEnumberable

console.log("name" in person1)		//returns true
console.log(person1.propertyIsEnumerable("name"));	//returns true

Check with Object.Keys

var properties = Object.keys(person1)
console.log("length" in properties)	//returns true – native property
console.log(properties.propertyIsEnumerable("length"));	//returns false

Types of properties

JavaScript has data properties and accessor properties. Data properties contain a value, like the name property from earlier example. The default behavior of the [[Put]] method is to create a data property.

Accessor properties don’t contain a value but instead define a function to call when the property is read (called a getter), and a function to call when the property is written to (called a setter). Accessor properties only required either a getter or a setter, though they can have both.

var person = {
    _name: "shahzad",
    
    get name() {
        console.log("readming name");
        return this._name;
    },
    set name(value) {
        console.log("setting name to %s", value);
        this._name = value;
    }
};
console.log(person.name) 	//returns “readming name” then “shahzad”
person.name = "Ali";		//returns “setting name to Ali” then “Ali”

This example defines an accessor property called name. There is a data property called _name that contains the actual value for the property. The leading underscore is a common convention to indicate that property is considered to be private, though in reality it is still public.

The syntax for getter and setter looks a lot like function without function keyword. The special keyword get and set are used before accessor property name.

Property Attributes

Prior to ECMAScript 5, there was no way to access the internal attributes of a property at all. ECMAScript 5 changed this by introducing several ways of interacting with property attributes directly as well as introducing new attributes. It’s now possible to create properties that behave the same way as built-in JavaScript properties.

Common attributes

There are two property attributes shared between data and accessor properties. One is [[Enumerable]] which determines whether we can iterated over the property, and second is [[Configurable]] which determines whether the property can be changed. By default all properties on an object are both enumerable and configurable.

Object.defineProperty() method is used to change property attributes.

var person1 = {
    name: "shahzad"
};

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

console.log("name" in person1);	//returns true
console.log(person1.propertyIsEnumerable("name"));	//returns false

This is alternative method for doing the same thing;

var properties = Object.keys(person1);
console.log(properties.length);		//returns 0
Object.defineProperty(person1,"name",{
    configurable:false
});
delete person1.name			//try to delete the property, returns false
console.log("name" in person1);	//return true

Data Property Attributes

There are two additional attributes in data property that accessor do not. The first is [[Value]], which holds the property value. This attribute is filled in automatically when we create a property on an object. The second is [[Writable]], which is Boolean value indicating whether the property can be written to. By default, all properties are writable unless we specify otherwise.

With these two additional attributes, we can define a data property using Object.defineProperty() even if the property does not already exist.

var person1 = {};
Object.defineProperty(person1, "name", {
    value: "shahzad",
    enumerable: true,
    configurable: true,
    writable: true
});

Object.defineProperty() will first check to see if the property exists, if it doesn’t it will create a new one. It is important to specify all the attributes because Boolean attributes default to false. For example;

Object.defineProperty(person1, "name", {
    value: "shahzad",
});

enumberalbe, configurable and writable will be automatically false.

Accessor Property Attributes

There are two additional attributes, [[Get]] and [[Set]]. There is no value stored for getters/setters so there is no need for [[Value]] or [[Writable]] attributes.

Defining Multiple Properties

We can define multiple properties, If we use Object.defineProperties() instead of Object.defineProperty().

var person = {};
Object.defineProperties(person, {
    _name: {
        value: "shahzad",
        enumerable:true,
        configurable:true,
        writable: true
    },
    //accessor property
    name: {
        get: function() {
            console.log("reading name");
            return this._name;
        },
        set: function(valule) {
            console.log("Setting name to %s", value);
            this._name = value;
        },
        enumerable: true,
        configurable: true
    }
});        

Retrieving Property Attributes

Object.getOwnPropertyDescriptor() can be used to fetch property attributes. This method works only on own properties. For example, this code create a property and check its attributes;

var person = {
    name: "shahzad"
};
var descriptor = Object.getOwnPropertyDescriptor(person, "name");

console.log(descriptor.enumerable);	//returns true
console.log(descriptor.configurable);	//returns true
console.log(descriptor.writable);	//returns true
console.log(descriptor.value);		//returns “shahzad”

Preventing Object Modification

[[Extensible]] attribute is a Boolean value indicating if the object can be modified. By default all objects are extensible, meaning new properties can be added.

To prevent extension, first method is to use Object.preventExtensions().

var person = {
    name: "shahzad"
};
console.log(Object.isExtensible(person));	//returns true
Object.preventExtensions(person);		//prevent extension
console.log(Object.isExtensible(person));	//returns false
//modify object
person.sayName = function(){
    console.log(this.name);
};
console.log("sayName" in person);		//return false, object is not modified

Attempting to add a property/method to a nonextensible object will throw an error in strict mode. In nonrestrict mode, the operation fails silently.

To prevent extension, second method is to use Object.seal().

var person = {
    name: "shahzad"
};
console.log(Object.isExtensible(person));	//returns true
console.log(Object.isSealed(person));		//returns false
Object.seal(person)				//Seal the object
console.log(Object.isExtensible(person));	//returns false
console.log(Object.isSealed(person));		//returns true
//try to modify object
person.sayName = function(){
    console.log(this.name);
};
console.log("sayName" in person);		//returns false
person.name = "Ali";
console.log(person.name);			//returns “Ali”
delete person.name;				//returns false
console.log("name" in person);			//returns true
console.log(person.name);			//returns “Ali”
var descriptor = 
    Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor.configurable);		//returns false

Be sure to use strict mode with sealed objects so we’ll get an error when someone tries to use the object incorrectly.

The last way to create a nonextensible object is to freeze it. In essence, a frozen object is a sealed object where data properties are also read-only. Frozen objects can not become unfrozen so they remain in the state when they become frozen. We can use Object.freeze() to freeze an object and Object.isFrozen() to determine if an object is frozen.

var person = {
    name: "shahzad"
};
console.log(Object.isExtensible(person));	//returns true
console.log(Object.isSealed(person));		//returns false
console.log(Object.isFrozen(person));		//returns false
Object.freeze(person);				//freeze object, data properties becomes read-only
console.log(Object.isExtensible(person));	//returns false
console.log(Object.isSealed(person));		//returns true
console.log(Object.isFrozen(person));		//returns true
//try to modify object
person.sayName = function(){
    console.log(this.name);
};
console.log("SayName" in person);		//returns false
person.name = "Ali";
console.log(person.name);			//returns shahzad
delete person.name;				//returns false
console.log("name" in person);			//returns true
console.log(person.name);			//returns shahzad
var descriptor = 
    Object.getOwnPropertyDescriptor(person, "name");
console.log(descriptor.configurable);		//returns false
console.log(descriptor.writable);		//returns false