1. #1
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Lightbulb Leading comma or Trailing comma: that is the question.

    Leading comma or Trailing comma: that is the question.


    As you may have noticed from code fragments I've posted on this forum that I'm using leading commas in my code. People keep asking me about reasons why I have decided so and if there are any positive or negative consequences of this so I have decided to write this article where I would explain my whys. What I would like to state at the beginning is that I do now want this thread to become a war of friends and enemies like some Windows vs. Linux, or Intel vs. AMD, discussions. I do not want anybody to change their coding practices because: The truth for you is that what works for you.

    What works for me are leading commas. Wky?

    First, compiler or script interpreter doesn't care if I've written leading or trailing commas. The only who cares is myself and other human beings that will read, understand, modify and debug the code.

    So first comes reading and understanding. Lets take the following examples:

    PHP Code:
    var = {
        
    id2,
        
    useAccessibilityFeaturestrue,
        
    autoLoadtrue,
        
    name'demo',
        
    translateHelpTextstrue
    }; 
    In this example, if I want to check if I haven't forgotten a comma or if I don't have an extra comma there (infamous IE extra comma error) I have to look at the ends of all five lines with various lengths to see if comma is there and, in the case of the last line, to check that comma is not there.



    PHP Code:
    var = {
        
    id:2
        
    useAccessibilityFeatures:true
        
    autoLoad:true
        
    name:'demo'
        
    translateHelpTexts:true
    }; 
    In this example I just look to the code as a whole if it has the expected apperance (first line w/o comma to the left and then column of commas).

    You know, one line will always be different because number of commas is one less than number of properties.

    The modifying of the code or putting some leading comments before the properties to temporarily disable them is pretty same in both cases. What makes bigger difference is a handling of errors I may have done in the code by browser. Let's make an error in the examples:



    PHP Code:
    var = {
        
    id2,
        
    useAccessibilityFeaturestrue,
        
    autoLoadtrue,
        
    name'demo',
    //    translateHelpTexts: true
    }; 
    What happens here? Please-help-my-app-works-in-FF-but-not-in-IE help forum query, waiting for some hours for reply and then not believing: How could I be that stupid?



    PHP Code:
    var = {
    //    id:2
        
    useAccessibilityFeatures:true
        
    autoLoad:true
        
    name:'demo'
        
    translateHelpTexts:true
    }; 
    And what happens here? Nice fat syntax error in both Firefox and IE with line number. Finding the line in the code and fix it is the matter of seconds and I can continue with some more important things.



    I have better things to do as to hunt a stray extra trailing comma in the code for hours. And you?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  2. #2
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I read the perl best practices book a long while ago and it's transformed my programming style a lot.

    It's all preference. I choose commas at the end but concatenation in the front.

    PHP Code:

    myobj 
    = { '1',
                  
    '2',
                  
    '3'
    };

    // PHP/perl
    $var "data"
           
    $row["data1"]
           . 
    $row["data2"]
           . 
    "etc";

    //JavaScript
    var myVar 'data'
                   
    row['data1'
                   + 
    row['data2']
                   + 
    'etc'

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Toronto, ON, CA
    Posts
    202
    Vote Rating
    0
    timb is on a distinguished road

      0  

    Default


    I was think of switching to using leading commas in my code. I already do it with sql statements, why not with javascript? Here's a sample of my sql formatting:
    Code:
    SELECT
        field1
        , field2
        , field3
    FROM
        table1
    WHERE
        field1 = somevalue1
        AND field2 = somevalue2
        AND field3 = somevalue3

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by djliquidice View Post
    I read the perl best practices book a long while ago and it's transformed my programming style a lot.

    It's all preference. I choose commas at the end but concatenation in the front.

    [
    //JavaScript
    var myVar = 'data'
    + row['data1']
    + row['data2']
    + 'etc';


    [/php]
    I use also leading operators like this:
    PHP Code:
    //JavaScript
    var myVar 
        
    'data'
        
    row['data1'
        + 
    row['data2']
        + 
    'etc'

    It's very easy to let's say comment out +'etc'.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    I think the leading commas just don't look that pleasing to the eye. that's just me though

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by djliquidice View Post
    I think the leading commas just don't look that pleasing to the eye. that's just me though
    Beauty is just matter of consideration. I like women you would maybe not and vice versa. I've taken the practical approach to speedup devel/debug.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by timb View Post
    I was think of switching to using leading commas in my code. I already do it with sql statements, why not with javascript? Here's a sample of my sql formatting:
    Code:
    SELECT
        field1
        , field2
        , field3
    FROM
        table1
    WHERE
        field1 = somevalue1
        AND field2 = somevalue2
        AND field3 = somevalue3
    Same as mine.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  8. #8
    Sencha User willgillen's Avatar
    Join Date
    Mar 2007
    Posts
    110
    Vote Rating
    0
    willgillen is on a distinguished road

      0  

    Talking


    I had started using leading commas about a year ago for the same reasons that Saki mentioned in the lead of this post. It is just so much easier to debug. Although, I hadn't though of using the leading commas in SQL, and leading operators, but you can bet I will now.

    Just another reason this forum has become my favorite.

    As an aside, I have to say that I've been in the extjs.com forum (and originally the forum as it existed on jackslocum.com before Ext went final). I've screened through many posts that have rocketed my understanding of javascript and sharpened my coding practices. But most recently, I've noticed that Saki has contributed a wealth of information and takes his time to make some of the most informative posts I've seen in here. I wish there was an award we could give to Saki for the time that he takes to contribute to the forums here!

    Thank you Saki!

    -- W.G.

  9. #9
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    Tampa, FL
    Posts
    6,955
    Vote Rating
    17
    jack.slocum will become famous soon enough jack.slocum will become famous soon enough

      0  

    Default


    IMO, leading commas make code difficult to read. Notice in your first example how each "block" lines up perfectly. This means you can look at code and easily scan for blocks. This is critical for someone like me who likes to "scan" code. I can digest a lot of code quickly by looking at it and following the flow. With leading commas (or by omitting braces), I wouldn't be able to do that because I can't quickly decipher where each block begins and ends because they don't line up. Just my opinion.
    Jack Slocum
    Ext JS Founder
    Original author of Ext JS 1, 2 & 3.
    Twitter: @jackslocum
    jack@extjs.com

  10. #10
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,538
    Vote Rating
    380
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    Quote Originally Posted by jack.slocum View Post
    IMO, leading commas make code difficult to read. Notice in your first example how each "block" lines up perfectly. This means you can look at code and easily scan for blocks. This is critical for someone like me who likes to "scan" code. I can digest a lot of code quickly by looking at it and following the flow. With leading commas (or by omitting braces), I wouldn't be able to do that because I can't quickly decipher where each block begins and ends because they don't line up. Just my opinion.
    Once I used this "blocking" for the same reasons: Look and know. Maybe I'll start again.

    PHP Code:
    var = {
          
    id:2
        
    useAccessibilityFeatures:true
        
    autoLoad:true
        
    name:'demo'
        
    translateHelpTexts:true
    }; 
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM