CODEWITHSUNDEEP
javascript
Mitch
Mitch

Reputation: 661

Why use || in variable function declaration?

I'm learning js and I've come across an example in which || is used when declaring a var as a function: 

var Triangulation = Triangulation || (function() {   
...

It seems to me that this is checking to see if the var has already been declared before assigning it. Looking around the web, I don't see any other examples where this approach is used. What would be a reason to take this approach vs: 

var Triangulation = function() {   
...

Thanks

Upvotes: 14

Views: 336

Answers (5)

Jayaprakash Ponnusamy
Jayaprakash Ponnusamy

Reputation: 1

There are several kinds of operators we have used in Javascript as like && (and) || (or) and ! (Not) operators.

These operators are also known as Logical operators.

Logical operators are mainly used to control program flow. Usually, you will find them as part of an if, a while, or some other control statement.

The || operator is used to determine whether either of the conditions is true.

Example:

if (x==5 || y==5) { .... .... }

Thanks.

Upvotes: -1

Ruben Kazumov
Ruben Kazumov

Reputation: 3892

It means there is a chance the triangulation variable already defined, if it is, the triangulation variable returns itself, if not defined yet -- the anonymous function will return the value for the new variable triangulation.

And important/sensitive thing there is the var. It is a tricky business. For example:

<script>
var triangulation = function (){return(1);};
</script>

Actually means:

<script>
window.triangulation = function (){return(1);};// because "triangulation" is in global                       
                                               // namespace and "var" in this case 
                                               // means nothing "local", as you may expect
</script>

Next time, initialization var triangulation = ... will overwrite the global variable. If you want to preserve it, you have to write:

var triangulation = triangulation || function (){...};

Upvotes: 18

Tarun
Tarun

Reputation: 3165

For || operator , JS returns the value of first expression which evaluate to truthy value
For example :
A||B (assuming A is empty string and B is integer(12))
The above expression will return 12(i.e the first expression which evaluate to truthy value).

In your scenarior , we are checking if Triangulation is already declared then we need to compute the function expression and assigned it to Triangulation.
var Triangulation = Triangulation || (function() {

Upvotes: 2

sbking
sbking

Reputation: 7680

This is often used for namespaced packages that have their implementations split between multiple files, when you don't necessarily know (or want to manage) the file load order. Usually, you would do this with:

var Namespace = Namespace || {}

In your case it's just to prevent reassigning the Triangulation class if it's already defined.

Upvotes: 1

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94369

It checks if Triangulation exists before assigning it a new value using Short-circuiting. This is a common practice when you want to support a feature that differs from browsers to browsers.

One example is requestAnimationFrame. Since every browser require different vendor prefix, we use || to assign the correct method to the variable so that it supports all browsers.

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

//whatever exists will be assigned to window.requestAnimFrame .

Upvotes: 2

Related Questions