Code Design → Separator First

It is used when we have a set of some expressions, separated by some short separator, which needs to be presented to several lines.

The traditional Egyptian way of representing:

1. var userList= [
2.     { name: 'Tom', Age: 5, race: 'cat' },
3.     { name: 'Jerry', Age: 3, race: 'mouse' },
4.     { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Please note that at the end of each line there is a comma, except for the last - there should not be a comma there. The problem is that when rearranging lines in places and other copy-paste accelerating the process of writing code, you need to carefully monitor the commas, and since they are not visible, this inevitably leads to an error.

Separated first:

1. var userList=
2. [  { name: 'Tom', Age: 5, race: 'cat' }
3. ,  { name: 'Jerry', Age: 3, race: 'mouse' }
4. ,  { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Here all the separators go in one line and are covered by one glance, which means that if you forget to fix some separator, it will immediately catch your eye:

1. var userList=
2. ,  { name: 'Jerry', Age: 3, race: 'mouse' }
3. [  { name: 'Tom', Age: 5, race: 'cat' }
4. ,  { name: 'Spike', Age: 11, race: 'dog' }
5. ]

* This source code was highlighted with Source Code Highlighter.

Now add nesting:

1. var userList= [
2.     {
3.         name: 'Tom',
4.         Age: 5,
5.         race: 'cat'
6.     },
7.     {
8.         name: 'Jerry',
9.         Age: 3,
10.         race: 'mouse',
11.     },
12.     {
13.         name: 'Spike',
14.         Age: 11,
15.         race: 'dog'
16.     }
17. ]
18.  
19. var userList=
20. [   {    name: 'Tom'
21.     ,    Age: 5
22.     ,    race: 'cat'
23.     }
24. ,   {    name: 'Jerry'
25.     ,    Age: 3
26.     ,    race: 'mouse'
27.     }
28. ,   {    name: 'Spike'
29.     ,    Age: 11
30.     ,    race: 'dog'
31.     }
32. ]

* This source code was highlighted with Source Code Highlighter.

In the variant with separators, the fidelity of the syntax is first evaluated by a cursory glance, in contrast to the traditional version. In addition, it is easier to edit when all the delimiters are on the same level, rather than jumping randomly at the end of the line.

A similar method can be applied when calling functions:

1. anElement.AddEventListener
2. (  'click'
3. ,  function( event ){
4.         if( event.button ) return true
5.         console.log( event )
6.         return false
7.    }
8. ,  false
9. )

* This source code was highlighted with Source Code Highlighter.

Please note that the Egyptian notation is used to determine the callback, because the separator between the operators is the line feed character, which you can’t put at the beginning of the line. Although, if you do not break the seven-column, then you can do this:

1. anElement.AddEventListener
2. (  'click'
3. ,  function( event )
4.    {  if( event.button ) return true
5.    ;  console.log( event )
6.    ;  return false
7.    }
8. ,  false
9. )

* This source code was highlighted with Source Code Highlighter.

But it’s more convenient to use the Egyptian notation and not bother with delimiters.

do not pay attention to the different tab sizes - all claims to the author of the syntax highlighter,

did anyone notice a typo in one of the Egyptian codes? ;-)