Arrow Functions and a better way of functional/Object Oriented programming in JS

3/30 of LeetCode’s 30 days of JavaScript Solution and Explanation

In this solution we are introducing a new function expression syntax called the Arrow Syntax which was introduced in ES6 version of JS to make the JavaScript code look cleaner and simpler when it’s used in callbacks and while it’s being used in a definition as a variable or it’s being or returned as a functions but they also must be used with caution as they do behave a little different than regular function expressions we use and those key things to be kept in mind are

• Arrow functions do not have their own this value. The value of this inside an arrow function is always inherited from the enclosing scope.
• They also don’t have arguments, or super, and should not be used as methods.
• Arrow functions cannot use yield within their body and cannot be created as generator functions.

So once you have understood what are arrow functions where to use and when to use and when and where not lets jump into how to use it

if you see our code and specifically where we are defining functions as a variable which is possible because of concept called First class objects which we discussed in our previous solutions so we can see this line

const increment =()=>{
        return ++co
    }

as the name suggests the arrow (=>) the function is defined like that only

Now coming to the other part of the code which is returning functions inside of an object and here comes a big question what are these Objects which we keep on talking about

An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method.
Objects in JavaScript, just as in many other programming languages, can be compared to objects in real life. In JavaScript, an object is a standalone entity, with properties and type. Compare it with a cup, for example. A cup is an object, with properties. A cup has a color, a design, weight, a material it is made of, etc. The same way, JavaScript objects can have properties, which define their characteristics.

So As the definition goes for the JavaScript object we can define functions as a property inside of the Object now if you come from a purely object oriented language background this might sound a little weird to you but trust me it also makes it a little more beautiful having the flexibility to define objects on fly without having to define a structure or a class some developers do prefer classes but that is also just a syntactical sugar over the underlying objects of JavaScript

so using the above concept we can return the object containing functions like this

return {increment,decrement,reset}

so combining the above concepts we can finally define our code like

/**
 * @param {integer} init
 * @return { increment: Function, decrement: Function, reset: Function }
 */
var createCounter = function(init) {
    var co=init
    
    const increment =()=>{
        return ++co
    }
    
    const decrement= ()=>{
        return --co
    }
    
    const reset =()=>{
        co=init
        return co
    }
  return {increment,decrement,reset}
};

/**
 * const counter = createCounter(5)
 * counter.increment(); // 6
 * counter.reset(); // 5
 * counter.decrement(); // 4
 */

Conclusion

Using Arrow Functions and Objects In JavaScript you can craft a simple yet sophisticated code which will be clean and easier to debug.

Problem — https://leetcode.com/problems/counter-ii/description/

Previous Article — https://medium.com/@varnitsharma-102/the-story-of-lexical-environment-and-execution-context-in-javascript-6ab15a18fb2c