Object Oriented JavaScript

1 © 2013, Cognizant Technology Solutions

 What will be covered?

 Primitive and Reference Types

 Functions
 Understanding Objects
 Constructors and Prototypes
 Inheritance
 Object Patterns

2 © 2013, Cognizant Technology Solutions

 Understanding Objects

 Defining Properties
 Detecting Properties
 Removing Properties
 Enumeration
 Property Access
 Types of Properties
 Property Attributes
 Preventing Object Modification

3 © 2013, Cognizant Technology Solutions

 Understanding Objects

 Even though there are a number of built in reference types in JavaScript, you will most
likely create your own objects fairly frequently.
 objects in JavaScript are dynamic, meaning that they can change at any point during
code execution.
 Whereas class-based languages lock down objects based on a class definition,
JavaScript objects have no such restrictions.

4 © 2013, Cognizant Technology Solutions

 Understanding Objects

Defining Properties

 There are two basic ways to create your own objects: using the Object constructor
and using an object literal.

var person1 = { name: “Suman" };

var person2 = new Object();

person2.name = “Suman";
person1.age = “234";
person2.age = “111";
person1.name = “Krishna";
person2.name = “Kumar";

5 © 2013, Cognizant Technology Solutions

 Understanding Objects

Defining Properties

 When a property is first added to an object, JavaScript uses an internal method called
[[Put]] on the object.

 The [[Put]] method creates a spot in the object to store the property.

 The result of calling [[Put]] is the creation of an own property on the object.

 An own property simply indicates that the specific instance of the object owns that
property.
 When a new value is assigned to an existing property, a separate operation called
[[Set]] takes place.

 This operation replaces the current value of the property with the new one.

6 © 2013, Cognizant Technology Solutions

 Understanding Objects

Detecting Properties

 Because properties can be added at any time, it’s sometimes necessary to check
whether a property exists in the object.
 JavaScript developers often incorrectly use patterns like the following to detect
whether a property exists:
// unreliable
if (person1.age) {
// do something with age
}
 The problem with this pattern is how JavaScript’s type coercion affects the outcome.

 The if condition evaluates to true if the value is truthy (an object, a nonempty string,
a nonzero number, or true) and evaluates to false if the value is falsy (null, undefined,
0, false, NaN, or an empty string).

7 © 2013, Cognizant Technology Solutions

 Understanding Objects

Detecting Properties

 Because an object property can contain one of these falsy values, the example code
can yield false negatives.
 For instance, if person1.age is 0, then the if condition will not be met even though the
property exists.
 A more reliable way to test for the existence of a property is with the in operator
 The in operator looks for a property with a given name in a specific object and returns
true if it finds it
console.log("name" in person1); // true
console.log("age" in person1); // true
console.log("title" in person1); // false

8 © 2013, Cognizant Technology Solutions

 Understanding Objects

Detecting Properties

 Keep in mind that methods are just properties that reference functions, so you can
check for the existence of a method in the same way.

 The following adds a new function, sayName(), to person1 and uses in to confirm the
function’s presence.
var person1 = {
name: “Suman",
sayName: function() {
console.log(this.name);
}
};
console.log("sayName" in person1); // true

 In most cases, the in operator is the best way to determine whether the property
exists in an object.

9 © 2013, Cognizant Technology Solutions

 Understanding Objects

Detecting Properties

 It has the added benefit of not evaluating the value of the property, which can be
important if such an evaluation is likely to cause a performance issue or an error.
 In some cases, however, you might want to check for the existence of a property only
if it is an own property.
 The in operator checks for both own properties and prototype properties.
 We have hasOwnProperty() method, which is present on all objects and returns true
only if the given property exists and is an own property.

 For example, the following code compares the results of using in versus
hasOwnProperty() on different properties in person1:

10 © 2013, Cognizant Technology Solutions

 Understanding Objects

Detecting Properties

var person1 = {
name: "Nicholas",
sayName: function() {
console.log(this.name);
} };

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

console.log(person1.hasOwnProperty("name")); // true
console.log("toString" in person1); // true
console.log(person1.hasOwnProperty("toString")); // false

 The toString() method, however, is a prototype property that is present on all objects.

11 © 2013, Cognizant Technology Solutions

 Understanding Objects

Removing Properties

 Just as properties can be added to objects at any time, they can also be removed.
 Simply setting a property to null doesn’t actually remove the property completely
from the object.
 Such an operation calls [[Set]] with a value of null, which you saw earlier in the
session, only replaces the value of the property.
 You need to use the delete operator to completely remove a property from an object.
 The delete operator works on a single object property and calls an internal operation
named [[Delete]].
 When the delete operator is successful, it returns true.

12 © 2013, Cognizant Technology Solutions

 Understanding Objects

Removing Properties

var person1 = {
name: “Suman"
};
console.log("name" in person1); // true
delete person1.name; // true
console.log("name" in person1); // false
console.log(person1.name); // undefined

13 © 2013, Cognizant Technology Solutions

 Understanding Objects

Enumeration

 By default, all properties that you add to an object are enumerable, which means that
you can iterate over them using a for-in loop.
 Enumerable properties have their internal [[Enumerable]] attributes set to true.

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

 Each time through the for-in loop, the property variable is filled with the next
enumerable property on the object until all such properties have been used.

14 © 2013, Cognizant Technology Solutions

 Understanding Objects

Enumeration

 If you just need a list of an object’s properties to use later in your program, ECMAScript
5 introduced the Object.keys() method to retrieve an array of enumerable property
names
var properties = Object.keys(object);
// if you want to mimic for-in behavior
var i, len;
for (i=0, len=properties.length; i < len; i++){
console.log("Name: " + properties[i]);
console.log("Value: " + object[properties[i]]);
}

 Typically, you would use Object.keys() in situations where you want to operate on an
array of property names and for-in when you don’t need an array.

15 © 2013, Cognizant Technology Solutions

 Understanding Objects

Enumeration

 Keep in mind that not all properties are enumerable. In fact, most of the native
methods on objects have their [[Enumerable]] attribute set to false.

 You can check whether a property is enumerable by using the propertyIsEnumerable()

method, which is present on every object

var person1 = { name: “Suman" };

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

var properties = Object.keys(person1);

console.log("length" in properties); // true

console.log(properties.propertyIsEnumerable("length")); // false

16 © 2013, Cognizant Technology Solutions

 Understanding Objects

Types of Properties

 There are two different types of properties: data properties and accessor properties.
 Data properties contain a value, like the name property from earlier examples
 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 require either a getter or a setter, though they can have both.

 There is a special syntax to define an accessor property using an object literal:

17 © 2013, Cognizant Technology Solutions

 Understanding Objects

Types of Properties

var person1 = {
_name: “Suman",
get name() {
console.log("Reading name");
return this._name;
},
set name(value) {
console.log("Setting name to %s", value);
this._name = value; }
};
console.log(person1.name); // "Reading name" then “Suman"
person1.name = “Mishra";
console.log(person1.name); // "Setting name to Mishra" then “Mishra"

18 © 2013, Cognizant Technology Solutions

 Understanding Objects

Types of Properties

 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 the property is
considered to be private, though in reality it is still public.)
 The special keywords get and set are used before the accessor property name,
followed by parentheses and a function body.
 Getters are expected to return a value, while setters receive the value being assigned
to the property as an argument
 Accessor properties are most useful when you want the assignment of a value to
trigger some sort of behavior, or when reading a value requires the calculation of the
desired return value.

19 © 2013, Cognizant Technology Solutions

 Understanding Objects

Property Attributes

 Prior to ECMAScript 5, there was no way to specify whether a property should be

enumerable.
 ECMAScript 5 changed this by introducing several ways of interacting with property
attributes directly, as well as introducing new attributes to support additional
functionality.
Common Attributes

 There are two property attributes shared between data and accessor properties.

 One is [[Enumerable]], which determines whether you can iterate over the property.

 The other is [[Configurable]], which determines whether the property can be

changed.

20 © 2013, Cognizant Technology Solutions

 Understanding Objects

Property Attributes

 By default, all properties you declare on an object are both enumerable and
configurable.

 If you want to change property attributes, you can use the Object.defineProperty()
method.

 This method accepts three arguments: the object that owns the property, the property
name, and a property descriptor object containing the attributes to set.

 The descriptor has properties with the same name as the internal attributes but
without the square brackets.

 So you use enumerable to set [[Enumerable]], and configurable to set [[Configurable]].

21 © 2013, Cognizant Technology Solutions

 Understanding Objects

Property Attributes

 For example, suppose you want to make an object property nonenumerable and
nonconfigurable:

var person1 = {
name: “Suman“
};
Object.defineProperty(person1, "name", { enumerable: false });

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

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

22 © 2013, Cognizant Technology Solutions

 Understanding Objects

Property Attributes

var properties = Object.keys(person1);

console.log(properties.length); // 0

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

// try to delete the Property

delete person1.name;
When JavaScript is running in strict mode, attempting to delete a nonconfigurable property
results in an error. In nonstrict mode, the operation silently fails.
console.log("name" in person1); // true
console.log(person1.name); // “Suman"

Object.defineProperty(person1, "name", { // error!!!

configurable: true });

23 © 2013, Cognizant Technology Solutions

 Understanding Objects

Data Property Attributes

 Data properties possess two additional attributes that accessors do not.

 The first is [[Value]], which holds the property value.
 This attribute is filled in automatically when you create a property on an object.
 All property values are stored in [[Value]], even if the value is a function.
 The second attribute is [[Writable]], which is a Boolean value indicating whether the
property can be written to. By default, all properties are writable unless you specify
otherwise.
 With these two additional attributes, you can fully define a data property using
Object.defineProperty() even if the property doesn’t already exist. Consider this code:

24 © 2013, Cognizant Technology Solutions

 Understanding Objects

Data Property Attributes

var person1 = { name: “Suman" };

 You’ve seen this snippet throughout this session; it adds the name property to person1
and sets its value. You can achieve the same result using the following (more verbose)
code
var person1 = {};
Object.defineProperty(person1, "name", {
value: “Suman",
enumerable: true,
configurable: true,
writable: true
});

25 © 2013, Cognizant Technology Solutions

 Understanding Objects

Data Property Attributes

 When Object.defineProperty() is called, it first checks to see if the property exists. If

the property doesn’t exist, a new one is added with the attributes specified in the
descriptor.
 In this case, name isn’t already a property of person1, so it is created.

 When you are defining a new property with Object.defineProperty(), it’s important to
specify all of the attributes because Boolean attributes automatically default to false
otherwise.

 For example, the following code creates a name property that is nonenumerable,
nonconfigurable, and nonwritable because it doesn’t explicitly make any of those
attributes true in the call to Object.defineProperty().

26 © 2013, Cognizant Technology Solutions

 Understanding Objects

Data Property Attributes

var person1 = {};
Object.defineProperty(person1, "name", { value: “Suman" });

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

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

delete person1.name;

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

person1.name = "Greg";
Nonwritable properties throw an error in strict mode when you try to
change the value. In nonstrict mode, the operation silently fails.
console.log(person1.name); // “Suman"

27 © 2013, Cognizant Technology Solutions

 Understanding Objects

Accessor Property Attributes

 Accessor properties also have two additional attributes.

 Because there is no value stored for accessor properties, there is no need for [[Value]]
or [[Writable]].
 Instead, accessors have [[Get]] and [[Set]], which contain the getter and setter
functions, respectively.
 The advantage of using accessor property attributes instead of object literal notation to
define accessor properties is that you can also define those properties on existing
objects.
 If you want to use object literal notation, you have to define accessor properties when
you create the object.
 As with data properties, you can also specify whether accessor properties are
configurable or enumerable.

28 © 2013, Cognizant Technology Solutions

 Understanding Objects

Accessor Property Attributes

var person1 = {
_name: “Suman",
get name() {
console.log("Reading name"); return
this._name;
},
set name(value) {
console.log("Setting name to ", value);
this._name = value;
}
};

 This code can also be written as follows:

29 © 2013, Cognizant Technology Solutions

 Understanding Objects

Accessor Property Attributes

var person1 = { _name: “Suman" };

Object.defineProperty(person1, "name", {
get: function() {
console.log("Reading name");
return this._name;
},
set: function(value) {
console.log("Setting name to ", value);
this._name = value; },
enumerable: true,
configurable: true
});

30 © 2013, Cognizant Technology Solutions

 Understanding Objects

Accessor Property Attributes

 For example, you can create a nonconfigurable, nonenumerable, nonwritable

property like this:
var person1 = { _name: “Suman" };
Object.defineProperty(person1, "name", {
get: function() {
console.log("Reading name");
return this._name;
}
});
console.log("name" in person1); // true
console.log(person1.propertyIsEnumerable("name")); // false
delete person1.name;
console.log("name" in person1); // true
person1.name = "Greg";
console.log(person1.name); // “Suman"
31 © 2013, Cognizant Technology Solutions
 Understanding Objects

Defining Multiple Properties

 It’s also possible to define multiple properties on an object simultaneously if you use
Object.defineProperties() instead of Object.defineProperty().
 This method accepts two arguments: the object to work on and an object containing
all of the property information.
 The keys of that second argument are property names, and the values are descriptor
objects defining the attributes for those properties.

 For example, the following code defines two properties:

32 © 2013, Cognizant Technology Solutions

 Understanding Objects

Defining Multiple Properties

var person1 = {}; // accessor property

Object.defineProperties(person1, { name: {
get: function() {
// data property to store data console.log("Reading name");
_name: { return this._name;
value: “Suman", },
enumerable: true, set: function(value) {
configurable: true, console.log("Setting name to ", value);
writable: true this._name = value; },
}, enumerable: true,
configurable: true
}
});

33 © 2013, Cognizant Technology Solutions

 Understanding Objects

Retrieving Property Attributes

 If you need to fetch property attributes, you can do so in JavaScript by using

Object.getOwnPropertyDescriptor().

 This method accepts two arguments: the object to work on and the property name to
retrieve.

 If the property exists, you should receive a descriptor object with four properties:
configurable, enumerable, and the two others appropriate for the type of property.

 For example, this code creates a property and checks its attributes:

34 © 2013, Cognizant Technology Solutions

 Understanding Objects

Retrieving Property Attributes

var person1 = { name: “Suman" };

var descriptor = Object.getOwnPropertyDescriptor(person1, "name");

console.log(descriptor.enumerable); // true
console.log(descriptor.configurable); // true
console.log(descriptor.writable); // true
console.log(descriptor.value); // “Suman"

35 © 2013, Cognizant Technology Solutions

 Understanding Objects

Preventing Object Modification

 Objects, just like properties, have internal attributes that govern their behavior.

 One of these attributes is [[Extensible]], which is a Boolean value indicating if the

object itself can be modified.
 All objects you create are extensible by default, meaning new properties can be
added to the object at any time.
 By setting [[Extensible]] to false, you can prevent new properties from being added to
an object.
 There are two different ways to accomplish this.

36 © 2013, Cognizant Technology Solutions

 Understanding Objects

Preventing Object Modification

Preventing Extensions

 One way to create a nonextensible object is with Object.preventExtensions().

 This method accepts a single argument, which is the object you want to make
nonextensible.
 Once you use this method on an object, you’ll never be able to add any new
properties to it again.
 You can check the value of [[Extensible]] by using Object.isExtensible().

 The following code shows examples of both methods at work.

37 © 2013, Cognizant Technology Solutions

 Understanding Objects

Preventing Object Modification

Preventing Extensions

var person1 = { name: “Suman" };

console.log(Object.isExtensible(person1)); // true

Object.preventExtensions(person1);

console.log(Object.isExtensible(person1)); // false

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

console.log("sayName" in person1); // false

38 © 2013, Cognizant Technology Solutions
 Understanding Objects

Preventing Object Modification

Sealing Objects

 The second way to create a nonextensible object is to seal the object.

 A sealed object is nonextensible, and all of its properties are nonconfigurable.

 That means not only can you not add new properties to the object, but you also
can’t remove properties
 You can use the Object.seal() method on an object to seal it.

 When that happens, the [[Extensible]] attribute is set to false, and all properties
have their [[Configurable]] attribute set to false.

39 © 2013, Cognizant Technology Solutions

 Understanding Objects
Preventing Object Modification
Sealing Objects

var person1 = { name: “Suman" };

console.log(Object.isExtensible(person1)); // true console.log(Object.isSealed(person1)); // false
Object.seal(person1);
console.log(Object.isExtensible(person1)); // false
console.log(Object.isSealed(person1)); // true
person1.sayName = function() { console.log(this.name); };
console.log("sayName" in person1); // false
person1.name = "Greg";
console.log(person1.name); // "Greg"
delete person1.name;
console.log("name" in person1); // true
console.log(person1.name); // "Greg"
var descriptor = Object.getOwnPropertyDescriptor(person1, "name");
console.log(descriptor.configurable); // false

40 © 2013, Cognizant Technology Solutions

 Constructors and Prototypes

 Constructors
 Prototypes

41 © 2013, Cognizant Technology Solutions

 Thank You

42 © 2013, Cognizant Technology Solutions