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

Hanky Panky
  • 46,730
  • 8
  • 72
  • 95
Mitch
  • 641
  • 1
  • 10
  • 13
  • 4
    probably a way of setting it once and only once? – Sico Nov 23 '13 at 06:59
  • check this one...http://stackoverflow.com/questions/2100758/javascript-or-variable-assignment-explanation – Nikhil N Nov 23 '13 at 07: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 Nov 23 '13 at 07:05
  • 2
    Why is this question got so many upvote? I mean this question has been asked many times already. – Derek 朕會功夫 Nov 23 '13 at 07: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 '13 at 09:36

5 Answers5

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 (){...};
Ruben Kazumov
  • 3,803
  • 2
  • 26
  • 39
  • 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. – John Kurlak Nov 23 '13 at 07: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 .
Derek 朕會功夫
  • 92,235
  • 44
  • 185
  • 247
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() {

Tarun
  • 3,162
  • 3
  • 29
  • 45
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.

sbking
  • 7,630
  • 24
  • 33
-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.

Jayaprakash Ponnusamy
  • 1