Basic Closure Examples

node v14.20.0
version: 3.1.0
endpointsharetweet
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
Loading…

no comments

    sign in to comment