Skip to main content

Javascript: Closure

CLOSURE

A closure is an inner function that has access to the outer function's variables. Obviously, the inner function has access to its own function scope ('local' variables defined between its braces), and it has access to the outer function's variables, which are Closures, and it has access to the global variables.

Using closure we can use scope even after outer function return
closure function A closure is an inner function that has access to:

  1. its own scope
  2. its argument
Simple Example 1:
function outer(){
       var a = "a is var of outer function";
       document.write(a);

      function inner(){
           var b = "b is var of inner function";

           document.write(b);
           document.write(a); //closure function
}
      inner();
     document.write(b); //outer function, no print
}

outer();

Advantage:
  • Inner function can access outer global, local in inner function
  • Outer function can't access inner function.
Another Example 2: 



function welcome(name){
var name = 'nepal';


function getName(){
return name;
}
function setName(newName){
name = newName;
}


return{
takeName: getName,
resetName: setName
}
}


var a = welcome('sinuna');
console.log('welcome', a);
var getNameResult = a.takeName();
console.log('getNameResult ', getNameResult);


//change inside scope
var b = a.resetName('USA');
console.log(b);


var getNewResult = a.takeName();
console.log('getNameResult 2', getNewResult);


Explanation:
var greetMsg = 'welcome '; global scope
function welcome(name){
     var textMsg = 'How can I serve you?';

//location is closure function and its outer function is welcome
function location(loc){
      function sayHello(){
}
//sayHello is closure function and its outer function is location. sayHello can access name ma ako, location ma ako and its own
var to = 'to';
return greetMsg + ' ' + name + ' ' + to + ' ' + loc + ' ' + textMsg;
//closure function

//greetMsg->global scope access, name->outerfunction access, to->own scope, loc->own argument, textMsg->parent function parameter
function sayHi(){
    //sayHello dont give access, sayHello is in location scope
} //sayHi is closure function and its outer function is welcome

var innerFn = location('ktm'); //return location('biratnagar') same 
console.log('innerFn >>', innerFn);
return location;
}

var welcomeFn = welcome('cnuna');
console.log('It will be undefined', welcomeFn); undefined
var callInnerFn = welcomeFn('Pokhara');


//Output: while calling welcome, we need to add value in return, eg. adding innerFn result in return, same value will be shown in outer function like in innerFn.

console.log('inner fn result', callInnerFn);

end block day 1 and day 2 course included IMP

Example: 
function welcome(name){
return 'welcome to broadway ' + name;
return 3044392;
return {key:value};
return true;
return [];

}
var sinuna = 'cnuna';

console.log(welcome(sinuna));

mutable and immutable
mutable: if the state of datatype changed after they are declared, they are a mutable property

immutable: the state will not be changed after declaration

array and Object
array and object are mutable

string number and boolean are immutable

mutable example
var fruits = ['apple', 'grape', 'orange'];
console.log('fruits before insertion', fruits);

var nextFruits = fruits;
nextFruits.push('banana');push le value add garcha
console.log('fruits after insertion', fruits);
console.log('nextFruits after insertion', nextFruits);

#immutable
var a = 'I am here';
var b = a;
b = 'hello';
console.log(a);
console.log(b);

Note: 

The argument is the actual value of this variable that gets passed to function. its outer function parameter: A parameter is a variable in a method definition. When a method is called, the arguments are the data you pass into the method's parameters. Parameter is variable in the declaration of function
global scope. closure is function and scope.

SDLC (Software development life cycle)
1. waterfall model : follows every steps serially
problem definition, identification, design, implementation, support, maintenance
once we are into step, we can not go back
traditional approach
if you want to go back again, you need to start it from begining

Lets relate waterfall model into js scope waterfall model ->top to bottom

Comments

Popular posts from this blog

Javascript: Object to Array and Array to Object

Output: Final Array [ { mango: 1 }, { apple: 2 }, { banana: 3 }, { orange: 1 }, { watermelon: 1 }, { papaya: 1 } ] Output: Final Object { mango: 1, apple: 2, banana: 3, orange: 1, watermelon: 1, papaya: 1 }

Javascript: Callback and High Order Function

CALLBACK A callback is a function that gets invoked after an asynchronous result appears. a callback function is an async function argument. - Asynchronous code result handle using callback and promises. // callback  function function with argument  // ---argument :// if a function pass-through function as an argument, it is higher-order function. function needs to be called in order to execute. a callback is used when calling a function asynchronous  What is a Callback or Higher-order Function? A callback function , also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern. High-order function is a function that takes ...

Javascript: Frontend - AngularJS

# FrontEnd Technologies: # Web (Internet) - Html, css framework (bootstrap, material design-> component based) Angular 2 - Single page application (fast). - Web application or website that interacts with the user by dynamically rewritting the current page rather than loading entire new pages from a server. - Can do asynchronous jobs. # Tools: - Typescript - VS code # MVVW (Model View ViewModel Pattern) -> two-way data binding - In angular, the controller (the C in MVC) is replaced by ViewModel (the VM in MVVM). # Typescript Programming Language Typescript (.ts) is imp in angular 2. - supersetup js - strictly typed program - can do class based oop - future programming language. - security maintain (TS code compile and run in js) - JS with additional features. # Data Binding - Controller and Views synchronize. Types: 1. Event -  eg: click, onClick, change 2. Property - eg: hide, show 3. 2-way binding - Reflect in view if changes in model- c...