This is a playground to test JavaScript. It runs a completely standard copy of Node.js on a virtual server created just for you. Every one of npm’s 300,000+ packages are pre-installed, so try it out:
// 1.I am Basic (Closure)
function getmyName(firstname,lastname){
// makeFullName is the closure function
function makeFullName(){
return `My name is ${firstname} ${lastname}`;
}
return makeFullName();
// return makeFullName;
}
getmyName("Liam","Gallagher");
// getmyName("Liam","Gallagher")();
// 2. zzZombie Closure
// Closures have access to the outer function’s variable even after the outer function returns (outer function is dead!)
function showName(firstname,lastname) {
// makeFullName is the closure function
function makeFullName (nickname){
let makemystringliteral = `Your name is ${firstname} ${lastname} and your nickname is ${nickname}`;
console.log(makemystringliteral);
return makemystringliteral;
}
// notice the absense of ()
return makeFullName;
}
var printname1 = showName("George","Best")("El Beatle");
var printname2 = showName("Giovanni da Silva","Oliveira");
printname1;
printname2("Zio");
// 3. I can change the Ref
// Closures store references to the outer function’s variables
// and not the actual value
function userID(){
let theID = 42;
//We are returning an object with some inner functions
return {
getID: function() {
return theID;
},
setID: function(theNewID) {
theID = theNewID;
}
}
}
let makeID = userID();
let makeID2 = userID();
makeID.getID(); // 42
makeID.setID(99); // Changes the outer function's variable
makeID.getID(); // 99 returns the updated value
makeID2.getID(); // 42. the value hasn't changed since this is another reference stored in the memory
// 4. Hiding Variables
// Closures are frequently used to hide global variables
// this is an example of a function that pollutes the global scope
let z = 0
function increasePollution(){
z++
console.log(`global scope is polluted. You have been warned ${z} times!`)
return z
}
increasePollution();
increasePollution();
// Lets fix the above problem. We are using an IIFE here because it is cool.
let increase = (function(){
// The variable i is hidden in the local scope and does not pollute the global environment.
let i=0
return function() {
i++
console.log(`counter is ${i} `);
return i
}
})();
increase();
increase();
// 5. Multiple Nested functions
// All nested function exist in the same outter function reference in memory
function weLiveInTheSameHouse() {
let count = 0;
let nestedObj = {};
nestedObj.increment = function(){
count++
}
nestedObj.decrement = function(){
count--
}
nestedObj.getCounter = function(){
console.log(`the counter value is ${count}`);
return count;
}
return nestedObj;
};
let nested = weLiveInTheSameHouse();
nested.getCounter(); // 0
nested.increment();
nested.increment();
nested.getCounter(); // 2
nested.decrement();
nested.getCounter(); // 1
// 5.1 Multiple Nested functions IIFE
// lets rewrite the above code using an IFFE
let weLiveInTheSameHouseIFFE = ( () => {
let count = 0;
let nestedObj = {};
nestedObj.increment = () => {
count++
}
nestedObj.decrement = () => {
count--
}
nestedObj.getCounter = () => {
console.log(`the counter value is ${count}`);
return count;
}
return nestedObj;
})();
weLiveInTheSameHouseIFFE.getCounter(); // 0
weLiveInTheSameHouseIFFE.increment();
weLiveInTheSameHouseIFFE.increment();
weLiveInTheSameHouseIFFE.getCounter(); // 2
weLiveInTheSameHouseIFFE.decrement();
weLiveInTheSameHouseIFFE.getCounter(); // 1