Understanding Private Variables (Closure?) in Javascript with specific example

Question

OK, I have tried to use a closure to no avail on the following code to keep a variable private. I am brand new to javascript and have read a number of posts about closures and can still not wrap my head around them. Below, I have a function that, upon each press of a particular button, displays the next word in an array. I want my counter variable ("whatNumber" below) that I am using in this function to not be global but I cannot figure out how. Here is my simple code:

var wordList = ["jumper", "stumpy", "smelly gumdrops", "awesome puttputt", "soilent green"];
var whatNumber = 0;

function changeWord(){
    if (whatNumber < wordList.length) {
        alert(wordList[whatNumber]);
        whatNumber++;
    }
};

Wrap the changeWord routine in an IIFE ((function() { ... })()) and declare your variable inside that. Return the function from inside the IIFE. — user663031
– user663031, Commented Jul 16, 2015 at 12:44

Bwaxxlo · Accepted Answer · 2015-07-16 13:02:02Z

2

function changeWord(){
    var wordList = ["jumper", "stumpy", "smelly gumdrops", "awesome puttputt", "soilent green"];
    var whatNumber = 0;
    return function alertWord(){
        if (whatNumber < wordList.length) {
            alert(wordList[whatNumber]);
            whatNumber++;
        }
    }
};
//to run this
var alertNewWord = changeWord();
alertNewWord() //jumper
alertNewWord() //stumpy

This comes with a bonus of being able to have different functions having different levels of alerting. e.g: if you do another var anotherAlertFn = changeWord() and you call anotherAlertFn() it will result in "jumper". The initial functions (i.e: alertNewWord()) will still have it's own state, i.e: whatNumber === 3 while anotherAlertFn has whatNumber === 1. This can be very useful, imagine a function keeping score for different players in a game. Every player can use the same function without being able to cheat (i.e: change their score) and never affecting other players' scores.

edited Jul 16, 2015 at 13:02

answered Jul 16, 2015 at 12:57

Bwaxxlo

1,88013 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

silent_john Over a year ago

OK that works perfectly! I am going to study this. Since I know exactly what it does I should be able to start to figure out closures. Thanks so much!

Bwaxxlo Over a year ago

@silent_john check my edit with further explanation on closures.

silent_john Over a year ago

Wow, this is great. To help motivate me to learn javascript, my first project is actually a word game like catchphrase! So your hypothetical example of points will be perfect too. Thanks again!

Bwaxxlo Over a year ago

@silent_john checkout a small "Guess the Number" game I made a while back. It uses the same concept.

Collectives™ on Stack Overflow

Understanding Private Variables (Closure?) in Javascript with specific example

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related