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
    18,147
    Thanks
    203
    Thanked 2,547 Times in 2,525 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,778
    Thanks
    6
    Thanked 1,021 Times in 994 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,389
    Thanks
    13
    Thanked 353 Times in 349 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,074
    Thanks
    0
    Thanked 256 Times in 252 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/
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 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
    •