Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Jun 2010
    Posts
    293
    Thanks
    63
    Thanked 8 Times in 8 Posts

    Please help me undestand an aspect of Javascript syntax

    I am relatively new to Javascript ... less new than I used to be ... but still pretty new.

    Yesterday, I came across the following syntax:

    Code:
    x = y || z;
    In other languages that I am familiar with (PHP, C, C++, Java), when the || operator is used, it is a logical OR operator - i.e. it returns 1 if either of its operands are logically true.

    In the javascript examples that I have seen, however, operations are subsequently performed on x (as per my example above) as if it were an object, array, string, etc.

    So what does x = y || z; actually do in javascript?

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,907
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Quote Originally Posted by XmisterIS View Post
    I am relatively new to Javascript ... less new than I used to be ... but still pretty new.

    Yesterday, I came across the following syntax:

    Code:
    x = y || z;
    In other languages that I am familiar with (PHP, C, C++, Java), when the || operator is used, it is a logical OR operator - i.e. it returns 1 if either of its operands are logically true.

    In the javascript examples that I have seen, however, operations are subsequently performed on x (as per my example above) as if it were an object, array, string, etc.

    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.




    So what does x = y || z; actually do in javascript?

    Let x equal the value of y if y is "truthy". If y is "falsey" (i.e. one of the 5 values false, null, undefined, NaN, zero or an empty string) then let x equal the value of z.

    Example:
    Code:
    var x = "ABC";
    var y = "";
    var z = "Philip";
    x = y || z;
    alert (x);  // Philip
    Have a look at
    http://www.i-programmer.info/program...and-falsy.html


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.
    Last edited by Philip M; 10-11-2013 at 10:37 AM. Reason: Typo

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    XmisterIS (10-11-2013)

  • #3
    Regular Coder
    Join Date
    Jun 2010
    Posts
    293
    Thanks
    63
    Thanked 8 Times in 8 Posts
    I figured it probably did something like that ... is that the standard behaviour of || in javascript under all circumstances? If so, that's actually quite neat and useful.

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,621
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    || is still a logical OR operator in JavaScript. Basically the example says: “let x be equal to y OR to z if y is falsey”

  • Users who have thanked VIPStephan for this post:

    XmisterIS (10-11-2013)

  • #5
    Senior Coder Dormilich's Avatar
    Join Date
    Jan 2010
    Location
    Behind the Wall
    Posts
    3,237
    Thanks
    12
    Thanked 340 Times in 336 Posts
    In other words, logical operators in JS return the respective expression that is used in the comparison.
    The computer is always right. The computer is always right. The computer is always right. Take it from someone who has programmed for over ten years: not once has the computational mechanism of the machine malfunctioned.
    André Behrens, NY Times Software Developer

  • #6
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    It is also called "short circuit evaluation". To show its power and usefulness, I made up a function that gets the width of an element that may include padding, border, and margin depending on the passed parameters. The function is a one-liner (formatted for readability) using short-circuit evaluation technique.

    PHP Code:
    <div id="box" style="width: 100px; height: 100px; padding: 10px; margin: 20px; border: 1px solid black;"></div>
    <
    button type="button" onclick="alert(getWidth(document.getElementById('box')));">Width</button>
    <
    button type="button" onclick="alert(getWidth(document.getElementById('box'), true));">Width Padding</button>
    <
    button type="button" onclick="alert(getWidth(document.getElementById('box'), true, true));">Width Padding Border</button>
    <
    button type="button" onclick="alert(getWidth(document.getElementById('box'), true, true, true));">Width Padding Border Margin</button
    PHP Code:
    function getWidth(objincludePaddingincludeBorderincludeMargin) {
        return 
    parseFloat(obj.style.width) + (
            (
                
    includePadding && (parseFloat(obj.style.paddingLeft) + parseFloat(obj.style.paddingRight))
            ) || 
    0
        
    ) + (
            (
                
    includeBorder && (parseInt(obj.style.borderLeftWidth10) + parseInt(obj.style.borderRightWidth10))
            ) || 
    0
        
    ) + (
            (
                
    includeMargin && (parseFloat(obj.style.marginLeft) + parseFloat(obj.style.marginRight))
            ) || 
    0
        
    );    

    You can see the demo here: http://jsfiddle.net/dC34J/

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,603
    Thanks
    0
    Thanked 645 Times in 635 Posts
    The only way in which JavaScript isn't just doing an OR between those values is that it does an implicit conversion to true or false to do the compare but leaves the actual values alone and provides the first true one as the result.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •