JavaScript has some stunning features like Closures, Prototype etc. which can help to improve the readability and maintainability of the code. However, it is not easy for inexperienced developer to consume and apply those features in day to day coding. The purpose of the presentation ‘Advanced JavaScript’ is to help a reader easily understand the concept and implementation of some advanced JavaScript features.

1. Advanced
Presented by
Humayun Kayesh

3. ● ‘this’
● Closure
● Prototype
● Module pattern
Agenda

4. ‘this’

5. ‘this’
● A variable with the value of the object that
invokes the function where this is used.
● Refers to an object; that is, the subject in
context
● Not assigned a value until an object invokes the
function where this is defined

6. How is the Value of ‘this’ Determined?
The value of ‘this’, is based on the context in which the
function is called at runtime.
Confused?!! Let’s see an example...

7. var foo = 'foo';
var myObject = {
foo: 'I am myObject.foo'
};
var sayFoo = function() {
console.log(this.foo);
};
// give myObject a sayFoo property and have it point to sayFoo function
myObject.sayFoo = sayFoo;
myObject.sayFoo(); // logs 'I am myObject.foo'
sayFoo(); // logs 'foo'
How is the Value of ‘this’ Determined?

8. ‘this’ Inside Nested Functions
Q: What happens to ‘this’ when it is used inside of a
function that is contained inside of another function?
Ans: ‘this’ loses its way and refers to the head object
(window object in browsers), instead of the object within
which the function is defined.
Solution Hint: Using scope to keep track of function context

9. var myObject = {
myProperty:'I can see the light',
myMethod:function() {
console.log(this.myProperty); //logs 'I can see the light'
var helperFunction = function() {
console.log(this.myProperty); //logs 'Undefined'
}();
}
}
myObject.myMethod(); // invoke myMethod
‘this’ Inside Nested Functions

10. Closure

11. Closure
● A Closure is the local variables for a function - kept alive
after the function has returned
● A function having access to the parent scope, even
after the parent function has closed.
● The closure has three scope chains:
o has access to its own scope
o has access to the outer function’s variables and
o has access to the global variables

12. Example

13. Example

14. Practical example

15. Prototype

16. Prototype
● A prototype is a collection of properties and
methods that can be automatically attached to
an object when it is created
● Every JavaScript function has a prototype
property
● Used primarily for inheritance

17. Prototype Code Example
PictureProtoType = {
getSize: function(){ return this.height * this.width; },
fetchThumbnail:function(){ /*...*/ }
};
function Picture(name, height, width){
this.name = name;
this.height = height;
this.width = width;
}
Picture.prototype = PictureProtoType;
var picture = new Picture('MyPhoto.jpg', 600, 750);
picture.getSize();

18. Prototype Lookups are Dynamic
● You can add properties to the prototype of an
object at any time
● The prototype chain lookup will find the new
property as expected
See example...

19. Prototype Lookups are Dynamic
PictureProtoType = {
getSize: function(){
return this.height * this.width;
},
fetchThumbnail:function(){ /*...*/ }
};
function Picture(name, height, width){
this.name = name;
this.height = height;
this.width = width;
}
Picture.prototype = PictureProtoType;
var picture = new Picture('MyPhoto.jpg', 600,
750);
picture.getSize();
PictureProtoType.getBlackAndWhite = function()
{
/* code... */
}
picture.getBlackAndWhite();

20. Extending Native Objects
var keywords = [
"landscape", "tranquil", "green", "vegetation"
] ;
console.log(keywords);
Array.prototype.clear=function(){ this.length=0; }
keywords.clear();
console.log(keywords);

21. JavaScript Module Pattern

22. Creating a module
(function () {
// code...
})();
It declares a function, which then calls itself
immediately.

23. Basic Module
var Module = (function () {
var privateMethod = function () {
// do something
};
})();

24. Public Method
var Module = (function () {
return {
publicMethod: function () {
// code
}
};
})();
Module.publicMethod();

25. Anonymous Object Literal Return
var Module = (function () {
var privateMethod = function () {};
return {
publicMethodOne: function () { // I can call `privateMethod()` you know... },
publicMethodtwo: function () { //Code… },
publicMethodThree: function () { // Code… }
};
})();

26. Revealing Module Pattern
var Module = (function () {
var privateMethod = function () {
// private
};
var someMethod = function () {
// public
};
var anotherMethod = function () {
// public
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
})();

27. Extending A Module
var Module = (function () {
var privateMethod = function () {
// private
};
var someMethod = function () {
// public
};
var anotherMethod = function () {
// public
};
return {
someMethod: someMethod,
anotherMethod: anotherMethod
};
})();
var ModuleTwo = (function (Module) {
Module.extension = function () {
// another method!
};
return Module;
})(Module || {});

28. Advantages
● Cleaner approach for developers
● Supports private data
● Less clutter in the global namespace
● Localization of functions and variables through
closures

29. Q&A…