What is Syntactic Sugar in Javascript?

Question

I have seen so many posts which says that Class are just Syntactic Sugar or asking if Class are Syntactic Sugar in Javascript ES6

But I am having tough time understanding the meaning of Syntactic Sugar (I do get the literal meaning of making things easy to read or understand).

My Question is how classes are syntactic sugar in Javascript?

For example in this question are es6 classes just syntactic sugar for the prototypal pattern in javascript?

Like how is this example relevant

class Thing {
   //... classy stuff
}

vs

var Thing = function() {
  // ... setup stuff
};

Thing.prototype.doStuff = function() {};

Shouldn't there be some method (doStuff) in the above class to make it equal comparison?

Yes there would be a `doStuff(){}` declaration in the _"classy stuff"_ section — Patrick Evans, Jun 13 '18 at 11:06
Are you really just asking us to explain someone else's stack overflow question? Why don't you just comment on the original question and ask them what they meant? — musefan, Jun 13 '18 at 11:13
I see multiple questions, try to ask one at a time. Short answer: `class` is called syntactic sugar as before it was introduced there are `functions` everywhere which where used to declare a `class` like construct that can be instantiated + definition of **syntactic sugar** remains same for almost every language it won't differ for javascript read: https://en.wikipedia.org/wiki/Syntactic_sugar — Vinod Srivastav, Jun 13 '18 at 11:14

score 16 · Accepted Answer · answered Jun 13 '18 at 11:05

Yes, there should be the method in the class in the provided example.

Syntactic sugar means that the new features of the language are not really new. Instead, they are a nicer syntax for something existing/ You could do exactly the same by writing something different in the old version. Due to that, there are transpilers like Babel which can convert the new syntax to the old one.

score 7 · Answer 2 · edited Jun 20 '20 at 09:12

Syntactic sugar is abstract syntax (shorthand, simplified, easy to understand, exposed whats necessary)

Anything which is simplified is a syntactic sugar.

For example

Shortened forms such as "don't" or "haven't" could be considered syntactic sugar

let a = b + c can have syntactic sugar as let a = b.Add(c)

Wikipedia -

In computer science, syntactic sugar is syntax within a programming language that is designed to make things easier to read or to express. It makes the language "sweeter" for human use: things can be expressed more clearly, more concisely, or in an alternative style that some may prefer. source

With a good example

An array reference is a procedure of two arguments: an array and a subscript vector, which could be expressed as get_array(Array, vector(i,j))

Instead, many languages provide syntax like Array[i,j]

Similarly an array element update is a procedure of three arguments;

Something like set_array(Array, vector(i,j), value), but many languages provide syntax like Array[i,j] = value.

score 3 · Answer 3 · answered Jun 13 '18 at 11:07

In the cases of javascript classes we use the term Syntactic Sugar because while you are writing class Something {} the interpreter will actually produce javascript code based on the good old prototype.

So the "class" addition is nothing more than an easing for developers to avoid the old prototype pattern and make things easier for people coming from object oriented backgrounds to coop with javascripts functonal nature.

In your example the comparison is not correct since there is a function missing but the point is that in the end classes use the old prototypes behind the scenes

What is Syntactic Sugar in Javascript?

3 Answers3