Making the code → Separator first

It is used when we have a set of some expressions separated by some short delimiter, which you need to submit to several lines.

Traditional Egyptian presentation:

var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .

1. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
2. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
3. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
4. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .
5. var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .

var userList= [ { name: 'Tom' , Age: 5, race: 'cat' }, { name: 'Jerry' , Age: 3, race: 'mouse' }, { name: 'Spike' , Age: 11, race: 'dog' } ] * This source code was highlighted with Source Code Highlighter .

Please note that at the end of each line is a comma, except for the last - there should not be a comma. The problem is that when you rearrange the lines in places and other copy-paste that speeds up the process of writing code, you must be very careful about commas, and since they are not navid, this inevitably leads to an error.

Delimited view at the beginning:

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 with one glance, which means that if you forget to fix some separator, it immediately catches the 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 the 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. ]
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 version with delimiters, the syntax fidelity is first evaluated by a quick glance, unlike the traditional version. In addition, it is easier to edit when all the delimiters are at the same level, and do not jump as they hit 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 define a callback, because the separator between operators is a newline character that you cannot put at the beginning of a line. Although, if someone does not break semi-colon, then it is possible:

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 is 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

Has anyone noticed a typo in one of the Egyptian codes? ;-)