Tips

ECMAScript – Trailing Commas

Pandiyan MuruganLeave a comment

JavaScript allowed trailing commas in array literals since the beginning. Trailing commas in other places have added in the later edition of ECMAScript.

What is trailing comma & why?

Trailing commas is also called as final commas.

It can be used while if you are adding new parameters or property to JavaScript code. If you want to add a new property, you can simply add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome.

Arrays, Object literals, function parameters allow trailing commas. However, JSON doesn’t allow trailing commas.

Trailing commas in Array literals

JavaScript allows the trailing commas in arrays.

literals1

If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped.

literals2

However, the final comma in the array is ignored.

Object literals

Trailing comma is supported in Object literals from the ECMAScript 5 edition.

literals3.PNG

Trailing commas in functions

ECMAScript 2017 allows trailing commas in function parameter lists.

Trailing commas allowed function definition and function calls. Trailing commas don’t affect the length property of function declarations or their arguments object.

literals4.PNG

Function parameters with commas only are invalid which will throw SyntaxError.

literals5

What about Internet Explorer Support?

If we are using babel to convert our scripts to native JavaScript to support Internet Explorer. We don’t have to worry about the compatibility.

The babel will convert our scripts with trailing commas to support the IE.

Example: It will remove the commas while building the package.

Left side: Our ECMAScript code

Right side: Equivalent Code generated by babel

literals6.PNG

makes version-control diffs cleaner and editing code might be less troublesome

Let’s talk about the main advantage, the Version control support.

Check out the below sample, I’m trying to add an entry to list to two arrays.

One has trailing commas and other not. When we are adding an entry to an array which has trailing comma, the GIT diff looks clean. That’s the main advantage of this whole concept.

When we are having a trailing comma, it only shows the addition of entry.

gitliteral

 

And again, its based every individual to decide whether they want to use this concept or not.

Cheers,

Happy Coding!

CORS Origin problem in C# Angular application

Pandiyan MuruganLeave a comment

I’ve been working on some personal project which is built using angular and C#

The front end is built with Angular and backend (actually API) is built using C#

So technically both project has been deployed in different folders in my case.

Whenever I’m debugging and calling my API which is also running in debugging mode of local environment everything fine.

When I’ve deployed my API in IIS and tried access from the angular application which is debugging mode.

I have received the following error in my browser’s console as

No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

I have started looking a solution to this problem. I have started adding various headers in my angular httpclient, nothing works.

Later, found that we have to add access control header in server side. By default angular support and provides all the necessary things we need. So we don’t need to anything in angular application side

Then found a configuration which needs to be done in server side to avoid the cross-origin problem.

It’s pretty straightforward, we have to update our server-side configuration with the following change. In my case, it’s my C# API project web.Config

<system.webServer>
<httpProtocol>
<customHeaders>
<add name=”Access-Control-Allow-Origin” value=”*” />
</customHeaders>
</httpProtocol>
<system.webServer>

This one tweak allows us to add this custom header to all our API requests and provides us to access in cross-origin too.

That’s it.

Happy Coding!