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

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

• javascript

• 4 probably a way of setting it once and only once? – Sico Commented Nov 23, 2013 at 6:59
• check this one...stackoverflow.com/questions/2100758/… – Nikhil N Commented Nov 23, 2013 at 7:02
• var Triangulation = Triangulation || (function() { just implies that if Trianglulation is declared before coming to this step then skip the step. else carry on executing the code inside function{} . – Rajshekar Reddy Commented Nov 23, 2013 at 7:05
• 2 Why is this question got so many upvote? I mean this question has been asked many times already. – Derek 朕會功夫 Commented Nov 23, 2013 at 7:07
• Thanks very much for the answers. I appreciate the insights into the namespace issues. @Nikhil, this is a different use than the thread you linked to (which I had already read). Its not a question of what || does, but why to use it in this situation. – Mitch Commented Nov 23, 2013 at 9:36

5 Answers 5

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 (){...}; 

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 .

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() {

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.

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.