## DEV Community is a community of 867,901 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Artem

Posted on

# Counter Using Functional Approach in Javascript

In my previous post, I showed my readers how to implement Singleton in JavaScript using closure, and IIFE.

This time, I want to show you how to utilize the same building blocks, as well as one more functional programming technique, to implement a basic counter!

Let's start with a counter that takes a starting number as an argument, and uses closure to keep track of the current count:

``````function from(start) {
let i = start - 1

function inc() {
i = i + 1
return i
}
return inc
}
``````

As you can see, I have outer function `from()` which takes parameter `start`. Then, I initialize `i` with the value of `start - 1`, and enclose it in inner function `inc()`. Every time `inc()` is executed, it increases `i`, and returns it. Finally, the inner function is returned from the outer.

Now, let's see how to use this counter:

``````(function () {
let count = from(0)

for(let i = 0; i < 10; i++) {
console.log(
count()
)
}
}())
``````

I wrapped the counter in anonymous IIFE, just because it is a good practice to separate variables from global scope, even when doing something as simple as this example.

Notice, how closure allows this counter to have a "memory". Similar technique can be utilized in order to implement memoization in more advanced and computationally heavy algorithms.

Another thing I want to show you is a concept of higher-order functions. It is exactly what it sounds like:

In mathematics and computer science, a higher-order function is a function that does at least one of the following: takes one or more functions as arguments, returns a function as its result.

Actually, if you think about it, our function `from` already fall under definition of the higher-order function. It returns another function, `inc`. Let's make something that satisfy both properties of the definition!

I will build a counter that starts counting from a given value, but doesn't count past certain limit. Past the limit, it returns `undefined`. I have the counting logic written in the example above, and only need to handle the limit part. A good approach is to create a function `to` that takes two arguments: a counter, and a limit. It then returns another function, that calls a counter, and makes sure the limit is not reached. Here is an implementation:

``````function to(counter, limit) {
return function() {
let j = counter();
if(j > limit) {
return undefined
}
return j
}
}
``````

Notice, that in the example I am returning an anonymous function. I actually did it on purpose, in order to show a reader that JavaScript is pretty flexible in this extend. You can as well use an arrow function. It is all up to your particular implementation!

Finally, I will include an example of the whole program:

``````function from(start) {
let i = start - 1

function inc() {
i = i + 1
return i
}
return inc
}

function to(counter, limit) {
return function() {
let j = counter();
if(j > limit) {
return undefined
}
return j
}
}

(function (){
let count = to(from(3), 10);

for(let i = 0; i < 10; i++) {
console.log(
count()
)
}
}())
``````

To sum up, I showed a reader how to use closure in order to implement a simple counter, and introduced a notion of higher-order function. Also, I gave a hint on how to implement memoization using approach from this example! If you have any questions, let me know in comments!

Happy hacking!