Difference between Static function declaration and the normal function declaration in Javascript?

Question

There are many ways one can declare a function in javascript. One of the ways is declaring a class and a static function inside is as showed below.

class className {
 static fucntionName() {
 }
}

another way of is declaring is through the tradition javascript style as showed below.

function functionName() {
}

I would like to know the advantages/disadvantages of using either of the cases. Is there any specific use cases for the static methods, why declare a class(we know that in javascript there is no need to instantiate the class in order to access the static function). Why not just use the traditional way (the second case in the above example) of function declaration in all/any use case?

I would like to understand this is in detail.

Answer 1

I would like to know the advantages/disadvantages of using either of the cases.

apples and oranges. A class doesn't have to be exported and a module doesn't have to be a class. They are not the same thing, although the exported module can be a class.

Is there any specific use cases for the static methods

When you want a class to provide some functionality, but this aint' something that is specific to a single instance of that class. Like var c = Point.interpolate(a, b, .5);
The static interpolate function doesn't belong to any of the points it's operating on. It's more appropriate to define this function static on the class that provides this functionality (interpolating points) .

we know that in javascript there is no need to instantiate the class in order to access the static function

That's the very definition of a static function that you don't have to instantiate the class to call it. That's not something JS specific.

Why not just use the traditional way (the second case in the above example) of function declaration in all/any use case

Because as I started, a class and a module ain't necessarily the same thing. And it is nicer/cleaner to write

class Foo{
    ...
    static fn(){...}
}

than

class Foo {
    ...
}

Foo.fn = function(){...};

Although in the end, both is just little more than

function Foo(){...}
Foo.fn = function(){};
// + Foo.prototype stuff

But the class syntax is cleaner. Simpler to read and to understand, even if you're just scanning over this piece of code.

Answer 2

A static method is callable from the class itself, as you already know.

A non- static method is callable from an instance of the class, so you basically have to create an object before being able to access that method.

For example, for a addNumbers(var a, var b) which does return a+b , is it really necessary to waste memory instantiating an object of the class just to add those 2 numbers? No, you just need the result and that's the whole point of having static.

Using the first style allows you to group methods in a particular class (think of something like namespaces). Maybe you can define classes like Math and String , which both have the add method but implemented in a different way. Calling add() by itself would be confusing, but Math.add() and String.add() are not.

The export style, on the other way, does a completely different thing. It allows you to use functions from another module.

Think about this:

first_module.js

function cube(var x) {
    return x * x * x;
}

second_module.js

import { cube } from 'first_module'; // <-- ERROR
alert( cube(3) ); // <-- Undefined function

But, if you declare first_module this way:

export function cube(var x) {
    return x * x * x;
}

Then second_module will work fine.

Answer 3

What is a static function?

Declaring a static function within a class creates a class level function that is not callable by instances of that function. An example of this is the Object.assign function. Static functions are often used to build functions that operate on instances of the type on which it is defined.

Answer 4

A static method can only be called within the class and is useful for utility functions, like say, massaging the parameter variables that are coming in, or setting up constants, (or Object.assign mentioned previous) when that must be done every time, before passing on to an instantiation of the class, to avoid unnecessary use of memory as a previous commentator noted.

Once everything is cleaned up, you can export the rest of your function for instantiation elsewhere in your code, where arguments will be cleaned up/constants set, again and again each time you use the class, and your instantiation can focus on the dynamic stuff.