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 Conference: Functional- Map, Reduce and Filter vs Object Oriented Programming

What is functional programming? and why? Source:  https://www.youtube.com/watch?v=e-5obm1G_FY A programming paradigm a coding style a mindset a sexy, buzz-wordy trend safer, easier to debug/maintain established community Not functional:  var name = “Anjana”;  var greeting = “Hi, I’m ”;  console.log(greeting + name);  Output : “Hi, I’m Anjana” Functional:   function greet(name) {         return “Hi, I’m ” + name;  }  greet(“Anjana”);  Output: “Hi, I’m Anjana” Avoid side effects use “pure” functions Not pure:   var name = “Anjana”;  function greet() {        console.log(“Hi, I’m ” + name);  } Pure:  function greet(name) {      return “Hi, I’m ” + name;  } Use higher-order functions functions can be inputs/outputs function makeAdjectifier(adjective) {      return function (string...

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: Prototype-based OOP

Prototype-based OOP Prototype-based programming is a style of OOP when inheritance is implemented via the process of cloning existing objects. In class-based OOP inheritance is built around the "parent-child" relationship between classes. Advantages: Objects and classes can be extended at runtime. eg: js(only 2018). JS Object Oriented Programming language but style: prototype. Prototype based Inheritance functional constructor(no class) as blueprint properties collection. with properties, we can make multiple instances.