Prototypal Inheritance in JavaScript

Prototypal Inheritance in JavaScript

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

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

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

Example 2

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

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 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



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.

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

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 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.


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

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


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.

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().


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.

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


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


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


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


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


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





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


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

"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.

 
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.


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.

Object in Javascript

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

for Example :

person is Object which has two properties name and place

setting property

getting property

There are three way to create object in Javascript

1. using an object literal

         

2. using new keyword

        

3. inheriting Object.prototype

   

         

Everything in Javascript is Object

Everything in Javascript is Object except primitive values

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

Dates are always objects

Arrays are always objects

Functions are always objects

Objects are objects


See the link of examples
Object in Javascript
Type of operator