Prototypal Inheritance in JavaScript

Prototypal Inheritance in JavaScript

	function Person(name, place) {
	this.name = name;
	this.place = place;
	}
	Person.prototype = {
	getName : function() {
	return this.name;
	},
	setName : function(name) {
	this.name = name;
	}
	};
	Person.prototype.constructor = Person;
	function Employee(id, job, name, place) {
	Person.call(this, name, place);
	this.id = id;
	this.job = job;
	}
	Employee.prototype = Object.create(Person.prototype);
	Employee.prototype.constructor = Employee;
	Employee.prototype.getJob = function() {
	return this.job;
	};
	Employee.prototype.setJob = function(job) {
	this.job = job;
	};
	var e1 = new Employee(121, "JS", "Deepak", "Delhi");
	console.log(e1.getName()); // "Deepak"
	e1.setName("Chetan");
	console.log(e1.getName()); // "Chetan"
	console.log(e1.getJob()); // "JS"
	e1.setJob("JavaScript Developer");
	console.log(e1.getJob()); // "JavaScript Developer"

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - Prototypal Inheritance

Closure in JavaScript

Closure is when a function remembers its lexical scope even when the function is executed outside its lexical scope.

We can make private variable with closure.

For Example

	function myFunction() {
	name = "Deepak";
	function displayName() {
	console.log(name);
	}
	show(displayName);
	}
	function show(displayName) {
	displayName(); // "Deepak"
	}
	myFunction();

view raw gistfile1.js hosted with ❤ by GitHub

	function myFunction() {
	name = "Deepak";
	return function() {
	console.log(name);
	};
	}
	function show() {
	myFunction()(); // "Deepak"
	}
	show();

view raw gistfile1.js hosted with ❤ by GitHub

	var add = (function() {
	var count = 0; // private variable
	return function() { // public anonymous function
	count += 1;
	console.log(count);
	};
	})();
	add(); // 1
	add(); // 2
	add(); // 3

view raw gistfile1.js hosted with ❤ by GitHub

	var name = (function() {
	var name = "Deepak"; // private variable
	return { // public API
	getName: function() {
	return name;
	},
	setName: function(newName) {
	name = newName;
	}
	};
	})();
	console.log(name.getName()); // "Deepak"
	name.setName("Chetan");
	console.log(name.getName()); // "Chetan"

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - Closure
Link 2 - Closure
Link 3 - Closure
Link 4 - Closure

Hoisting in JavaScript

Hoisting in JavaScript

Moving the declaration of variable and function at the top is called Hoisting.

First function declaration is hoisted and then variable declaration is hoisted.

Example 1

	console.log(a); // undefined
	var a = 10;
	console.log(a); // 10

view raw gistfile1.js hosted with ❤ by GitHub

In the above program JavaScript compiler moves declaration of variable at the top.

	var a;
	console.log(a); // undefined
	a = 10;
	console.log(a); // 10

view raw gistfile1.js hosted with ❤ by GitHub

Example 2

	console.log(a); // undefined
	var a = 10;
	console.log(a); // 10
	greet(); // "Hello"
	function greet() {
	console.log("Hello");
	}

view raw gistfile1.js hosted with ❤ by GitHub

In the above program JavaScript compiler moves declaration of variable and function at the top.

	function greet() {
	console.log("Hello");
	}
	var a;
	console.log(a); // undefined
	a = 10;
	console.log(a); // 10
	greet(); // "Hello"

view raw gistfile1.js hosted with ❤ by GitHub

Function Declaration and Function Expression in JavaScript

Function Declaration

function keyword is the first word in statement then it is a function declaration.

Just as variable declaration must start with "var", function declaration must begin with "function".

	function square(x) { // function declaration
	return x*x;
	}
	console.log(square(5)); // 25

view raw gistfile1.js hosted with ❤ by GitHub

Function Expression

function keyword is not the first word in statement then it is a function expression.

function expression can be Anonymous function expression or named function expression

	var square = function(x) { // Anonymous function expression
	return x*x;
	};
	console.log(square(5)); // 25

view raw gistfile1.js hosted with ❤ by GitHub

	var a = function square(x) { // Named function expression
	return x*x;
	};
	console.log(a(5));

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - Function Declaration
Link 2 - Anonymous Function Expression
Link 3 - Named Function Expression
 

New Keyword in JavaScript

The new keyword create an instance of a user-defined object.

The new keyword create an instance of a built-in object types that has a constructor function.

Below program create an instance of a user-defined object.

	function Person(name, age, sex) {
	this.name = name;
	this.age = age;
	this.sex = sex;
	}
	var person1 = new Person("Deepak", 24, "Male");
	console.log(person1.name); // "Deepak"
	console.log(person1.age); // 24
	console.log(person1.sex); // "Male"

view raw gistfile1.js hosted with ❤ by GitHub

Below program create an instance of a built-in object types that has a constructor function.

	var obj = new Date();
	var todayDate = obj.getDate();
	console.log(todayDate);

view raw gistfile1.js hosted with ❤ by GitHub

New operator takes a function constructor as a argument and create a new object which is extend from the prototype property of the function constructor and then execute the function constructor with the content of the newly created object and then return the newly created object.

	/* this is not the real implementation of
	new keyword this is only the basic implementation */
	var myNew = function(fun){
	var newObj = Object.create(fun.prototype);
	fun.call(newObj);
	return newObj;
	};

view raw gistfile1.js hosted with ❤ by GitHub

	/* this is not the real implementation of new
	keyword this is only the basic implementation */
	var myNew = function(fun){
	var newObj = Object.create(fun.prototype);
	fun.call(newObj);
	return newObj;
	};
	function C() {
	console.log(this); // C{}
	this.a = 37;
	}
	var obj = myNew(C);
	//var obj = new C();
	console.log(obj); // C {a:37}
	console.log(obj.a); // 37

view raw gistfile1.js hosted with ❤ by GitHub

this value with new keyword

When a function is used as a constructor (with the new keyword), its "this" is bound to new object being constructed.

	function C() {
	this.a = 37;
	}
	var obj = new C();
	console.log(obj.a); // 37

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - new keyword
Link 2 - new keyword
Link 3 - new keyword
Link 4 - new keyword

bind() method in JavaScript

bind() method - Hard binding

bind() method creates a new function that will have "this" set to the parameter passed to bind.

bind() method is used when we want "this" value to be predictable

	function displayName() {
	console.log(this.name);
	}
	var obj1 = {name: "Deepak"};
	var obj2 = {name: "Chetan"};
	var orig = displayName;
	var displayName = function() {
	orig.call(obj1);
	};
	displayName(); // "Deepak"
	displayName.call(obj2); // "Deepak"

view raw gistfile1.js hosted with ❤ by GitHub

In the above program displayName() method always has obj1 as "this" value.

	function bind2(fun, obj) {
	return function() {
	fun.call(obj);
	};
	}
	function displayName() {
	console.log(this.name);
	}
	var obj1 = {name: "Deepak"};
	var obj2 = {name: "Chetan"};
	var displayName = bind2(displayName, obj1);
	displayName(); // "Deepak"
	displayName.call(obj2); // "Deepak"

view raw gistfile1.js hosted with ❤ by GitHub

	if(!Function.prototype.bind2) {
	Function.prototype.bind2 = function(obj) {
	var fun = this;
	return function() {
	fun.apply(obj, arguments);
	};
	};
	}
	function displayName(lastName) {
	console.log(this.name + " " + lastName);
	}
	var obj1 = {name: "Deepak"};
	var obj2 = {name: "Chetan"};
	var displayName = displayName.bind2(obj1);
	displayName("Sisodiya"); // "Deepak Sisodiya"
	displayName.call(obj2, "Sisodiya"); // "Deepak Sisodiya"

view raw gistfile1.js hosted with ❤ by GitHub

	function displayName(lastName) {
	console.log(this.name + " " + lastName);
	}
	var obj1 = {name: "Deepak"};
	var obj2 = {name: "Chetan"};
	var displayName = displayName.bind(obj1);
	displayName("Sisodiya"); // "Deepak Sisodiya"
	displayName.call(obj2, "Sisodiya"); // "Deepak Sisodiya"

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - Hard binding
Link 2 - Hard binding
Link 3 - Hard binding
Link 4 - Hard binding

call() and apply() method in JavaScript

call() and apply() method - Explicit binding

The call() method calls a function with a given "this" value and arguments provided individually.

                         
                         fun.call(thisValue, arg1, arg2, - - - -);

The apply() method calls a function with a given this value and arguments provided as an array.

                         fun.call(thisValue, [argArray]);

call and apply method tells that on whose context you want to execute the function.

	var person = {
	init : function(name) {
	this.name = name;
	},
	getName : function() {
	console.log(this.name);
	}
	};
	person.init("Deepak");
	person.getName(); // "Deepak"
	// Here getName method is invoked in the context of person object
	var anotherPerson = {
	name : "Chetan"
	};
	person.getName.call(anotherPerson); // "Chetan"
	//person.getName.apply(anotherPerson); // "Chetan"
	// Here getName method is invoked in the context of anotherPerson

view raw gistfile1.js hosted with ❤ by GitHub

person.getName.call(anotherPerson) here value of "this" inside getName() method is anotherPerson.

Arguments object do not have Array's methods but we can invoke Array's method explicitly by using call() and apply().

	function myFunction() {
	Array.prototype.push.call(arguments, "four");
	//Array.prototype.push.apply(arguments, ["four"]);
	console.log(arguments[3]); // "four"
	}
	myFunction("one", "two", "three");

view raw gistfile1.js hosted with ❤ by GitHub

above two program can be done either using call() or apply() method

Where to use call() and where to use apply() method

When we don't know about number of arguments then we should use apply() method otherwise we can use call() method.

	var person = {
	init : function(id , name) {
	this.id = id;
	this.name = name;
	},
	getName : function() {
	console.log(this.name);
	}
	};
	person.init(111, "Deepak");
	person.getName(); // "Deepak"
	function getObject(obj) {
	var extendObj = Object.create(obj);
	var argu = [];
	for(var i=1; i < arguments.length; i=i+1) {
	argu.push(arguments[i]);
	}
	obj.init.apply(extendObj,argu);
	return extendObj;
	}
	var p1 = getObject(person , 121 , "Chetan");
	//var p1 = Object.create(person);
	//p1.init(121 , "Chetan");
	p1.getName(); // "Chetan"

view raw gistfile1.js hosted with ❤ by GitHub

Link 1 - Explicit binding
Link 2 - Explicit binding
Link 3 - Explicit binding

This Keyword in JavaScript

Every function while executing has a reference to its current execution context called this.

                                                          or

In JavaScript whenever a function execute it contain this keyword in its execution context.

There are 5 rule to identify the value of this

Rule 1 - Default binding

a.b.c() here a.b is called "call side" and c() is function, inside function c the value of "this" is a.b

	var name = "Narendra";
	function displayName() {
	console.log(this.name);
	}
	displayName(); // "Narendra"

view raw gistfile1.js hosted with ❤ by GitHub

Here call side is nothing, then value of "this" is global object(Window) and display "Narendra" because name is defined in global scope.

	function displayName() {
	console.log(this.name);
	}
	displayName(); // "undefiend"

view raw gistfile1.js hosted with ❤ by GitHub

Here call side is nothing then value of "this" is global object(Window) and display "undefined" because name is not defined in global scope.

link1 - default binding

link2 - default binding

Rule 2 - Implicit binding 

a.b.c() here a.b is called "call side" and c() is function, inside function c the value of "this" is a.b

	function displayName() {
	console.log(this.name);
	}
	var obj1 = {name: "Deepak", displayName: displayName};
	var obj2 = {name: "Chetan", displayName: displayName};
	obj1.displayName();
	// Here value of "this" is obj1 and it display "Deepak"
	obj2.displayName();
	// Here value of "this" is obj2 and it display "Chetan"

view raw gistfile1.js hosted with ❤ by GitHub

In the above example when  we write obj1.displayName() then displayName function become.

	function displayName() {
	console.log(obj1.name);
	}

view raw gistfile1.js hosted with ❤ by GitHub

and when we write obj2.displayName() then displayName function become.

	function displayName() {
	console.log(obj2.name);
	}

view raw gistfile1.js hosted with ❤ by GitHub

link - implicit binding

Rule 3 - Explicit binding
Rule 4 - Hard binding

Rule 5 - New Keyword  

Array like object in JavaScript

"Array like object" is look like Array.

Has index to access elements.

Has length property.

But they do not have Array's methods like push(), pop(), splice(), sort() etc

Example : arguments is an array like object

	function myFunction() {
	console.log(arguments); // ["one", "two", "three"]
	console.log(arguments.length); // 3
	}
	myFunction("one", "two", "three");

view raw gistfile1.js hosted with ❤ by GitHub

	arguments -> ["one", "two", "three"]
	0 -> "one"
	1 -> "two"
	2 -> "three"
	length -> 3

view raw gistfile1.js hosted with ❤ by GitHub

"Array like object" do not have Array's methods but we can invoke Array's methods explicitly.

	function myFunction() {
	Array.prototype.push.call(arguments, "four");
	console.log(arguments) // ["one", "two", "three", "four"]
	console.log(arguments.length) // 4
	console.log(arguments[3]) // "four"
	}
	myFunction("one", "two", "three");

view raw gistfile1.js hosted with ❤ by GitHub

See the link of example
Array like object in JavaScript

Scope in Javascript

JavaScript has two scopes : global scope and local scope

A variable declared inside a function definition has local scope

A variable declared outside a function definition has global scope

	var name = "deepak";
	function address() {
	var location = "delhi";
	}

view raw gistfile1.js hosted with ❤ by GitHub

"name" variable has global scope to the window object

"address" function has global scope to the window object

"location" variable has local scope to the function address()

When a variable declared without the keyword var then that variable become global variable.

 

	var name = "deepak";
	function address() {
	var location = "delhi";
	job = "Javascript Developer";
	}

view raw gistfile1.js hosted with ❤ by GitHub

here "job" variable has global scope to the window object

A local variable can only be used inside the function where it is defined. It is hidden from outside the function. Global variable can be used anywhere in the program.

	var name = "deepak";
	function address() {
	var location = "delhi";
	job = "JavaScript Developer";
	console.log(location);
	}
	console.log(name); // "deepak"
	address(); // "delhi"
	console.log(job); // "JavaScript Developer"

view raw gistfile1.js hosted with ❤ by GitHub

Lifetime of JavaScript variables

local variables are created when the function is invoked and garbage collected when the execution of function is completed. Global variables is created when it is declared and garbage collected when you close the page. So global has lifetime in the entire program.

	var name = "deepak";
	function address() {
	var location = "delhi";
	job = "JavaScript Developer";
	}
	console.log(name); // "deepak"
	address();
	console.log(job); // "JavaScript Developer"
	console.log(location); // error

view raw gistfile1.js hosted with ❤ by GitHub

Object in Javascript

Object in Javascript are “name value pairs” and this name value pairs are called Object Properties

for Example :

	var person = {
	name : "Deepak",
	place : "delhi"
	};

view raw 1 hosted with ❤ by GitHub

person is Object which has two properties name and place

setting property

	person.job = "Javascript Developer";
	person["job"] = "Javascript Developer";

view raw gistfile1.js hosted with ❤ by GitHub

getting property

	person.name // "deepak"
	person.place // "delhi"
	person.job // "Javascript Developer"
	person["name"] // "deepak"
	person["place"] // "delhi"
	person["job"] // "Javascript Developer"

view raw gistfile1.txt hosted with ❤ by GitHub

There are three way to create object in Javascript

1. using an object literal

         

	var person = {
	name : "Deepak",
	place : "delhi"
	};

view raw 1 hosted with ❤ by GitHub

2. using new keyword

        

	var person = new Object();
	person.name = "deepak";
	person.place = "delhi";

view raw gistfile1.js hosted with ❤ by GitHub

3. inheriting Object.prototype

   

         

	var person = Object.create(Object.prototype);
	person.name = "deepak";
	person.place = "delhi";

view raw gistfile1.js hosted with ❤ by GitHub

Everything in Javascript is Object

Everything in Javascript is Object except primitive values

primitive values are strings, numbers, true, false and undefined.

	var str = "deepak";
	console.log(typeof str); // string
	var num = 2;
	console.log(typeof num); // number
	var bool = true;
	console.log(typeof bool); // boolean
	var x;
	console.log(typeof x); // undefined

view raw gistfile1.js hosted with ❤ by GitHub

Dates are always objects

Arrays are always objects

Functions are always objects

Objects are objects

	var date = new Date();
	console.log(typeof date); // object
	var date = ["deepak", "chetan", "narendra"];
	console.log(typeof date); // object
	function myFunction(a, b) {
	return a + b;
	}
	console.log(typeof myFunction); // function
	var person = {
	name : "deepak",
	place : "delhi"
	};
	console.log(typeof person); // object

view raw gistfile1.js hosted with ❤ by GitHub

See the link of examples
Object in Javascript
Type of operator