14

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

5
  • 4
    probably a way of setting it once and only once?
    – Sico
    Nov 23, 2013 at 6:59
  • check this one...stackoverflow.com/questions/2100758/…
    – Nikhil N
    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{} . 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. 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
    Nov 23, 2013 at 9:36

5 Answers 5

19

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 (){...}; 
1
  • 7
    A common usage of this pattern is when you create "namespaces." For example, you might define: $ = $ || {}; $.app = $.app || {}; $.app.something = $.app.something || {}; Then, you can include the same basic stuff at the top of every file to ensure that your namespaces are defined and that your definitions don't clobber each other. Nov 23, 2013 at 7:02
2

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 .
2

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

1

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.

-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.

1
  • has nothing to do with the question.
    – oligofren
    Apr 7, 2015 at 17:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.