Writing a JavaScript Function: The Usual, The Okay and The Complicated

This post is part of a series that explores how flexible programming languages and frameworks can get. We all know that with any given task, there are several approaches available to achieve it. Let's look at this in action!

In this post, we will look at the different approaches in implementing one of the basics in JavaScript: declaring functions. There's probably more than 3 ways to declare functions in JavaScript, it's a fairly flexible language, but, I carefully selected three unique ones that better matches the ff. categories: The Usual, The Okay, and The Complicated.

The Usual

function multiplyNumbers(a, b) {
   return a * b;
}

We all know about this one. This is simply following the very basic function declaration syntax. Easy to understand and very straightforward. I don' think I need to explain this further. Let's step it up a bit.

The Okay

(function(win) {
    win.multiplyNumbers = function(a, b) {
        return a * b;
    };
})(window);

Now we're onto something. This approach introduces a new layer of scope. A wrapper anonymous function accepts the window object. Inside the anonymous function, the actual multiplication function is assigned to the multiplyNumbers variable of the window object. Since the inner function is attached to the window object, anyone outside of the anonymous function will still be able to access it by simply using the normal syntax:

multiplyNumbers(5, 6);

One benefit of this approach is that we can limit the scope of certain variables. Here's another example:

(function(win) {
    var PIConst = 3.14;

    win.getCircumference = function(radius) {
        return 2 * PIConst * radius;
    };
})(window);

In this example, a constant variable is introduced to represent the value of PI. Again, the getCircumference function is still accessible to everyone, but no one will have access to the PIConst variable.

Now, let's move to something more exciting.

The Complicated

We've looked at the basic function declaration syntax as well as the anonymous approach. What will happen if we combine both? Let's go crazy!

function getCircumference(radius) {
    var PIConst = 3.14;

    return (function(radius_internal) {
        return 2 * PIConst * radius_internal;
    })(radius);
}

The above approach is pretty much the same as The Okay one. But, instead of an anonymous function wrapping the actual function, I inverted it.

The getCircumference function is not performing the work. It's merely returning an anonymous function that is the one who will do the computation. In terms of the execution, everytime the getCircumference function is called, the internal anonymous function will be executed first. Then, the anonymous function's result will be bubbled out. Looks fun right?

The End

There's most likely lots of approaches to declaring functions in JavaScript. Feel free to share them by responding to this post.

I hoped you enjoyed exploring these different approaches with me. I'll be posting more in this series (covering other programming languages too!) so make sure you keep an eye!

Writing a JavaScript Function: The Usual, The Okay and The Complicated

Comments

The Usual, The Okay and The Complicated

Creating an Event Listener: The Usual, The Okay and The Complicated

More from this blog

Dynamic Component Rendering in React

Feature Management in ReactJS

A Topic-centric Approach To Organizing Content using Notion

Building an API using Express and MongoDB

Modular Routing in React

The Usual

The Okay

The Complicated

The End

Command Palette

Comments

The Usual, The Okay and The Complicated

Creating an Event Listener: The Usual, The Okay and The Complicated

More from this blog

The Usual

The Okay

The Complicated

The End