13 ms·
ES6 Classes
- saagarjha 8y agoI’m quite unfamiliar with OOP in JavaScript, so I’d appreciate if someone could chime in with how this differs from ES5: is this just syntactic sugar, or is there a semantic change as well?
- grahamperich 8y agoIt's just syntactic sugar. Still using prototypal inheritance under the hood.
- chrismorgan 8y agoIt’s not quite only sugar, though it’s close, just as spread is almost purely sugar, but when applied to constructors can do things that were beforetimes impossible. My favourite subtle distinction is that methods are not constructors—this is true of object shorthand as well. You were taught that these two were equivalent? var x = { foo() {} }; var x = { foo: function() {} }; Try this on each: new x.foo The second definition works, but the first fails because x.foo is not a constructor. This has actually caught me, in a codebase with an old-style Class() creator (and no, `class` is not quite a suitable replacement there, at this stage, for reasons I won’t go into). `Class({ init: function(){} })` would work fine, but `Class({ init() {} })` would yield an uninstantiable class—except that the result was being fed through Bublé, which reinstated the `: function` for old browsers’ sake. So it was only when I removed Bublé from the pipeline that it blew up! (To demonstrate this same point in ES6 classes, `new (new class { foo() {} }).foo` will fail.)
- runarberg 8y agoFrom MDN[1]: > JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax does not introduce a new object-oriented inheritance model to JavaScript. [1]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...
- runarberg 8y agoDo note though that there is a lot of syntax that is hidden with the `class` keyword. So even though it is primarily a syntactic sugar, it is by no means trivial.
- ronilan 8y agoCalling something “syntactical sugar” makes it sound unhealthy. I found the ES6 classes to be very helpful in conceptualizing stuff. When I started playing with them I’ve built myself a demo https://codepen.io/ronilan/pen/PObzew https://codepen.io/ronilan/pen/PObzew as a clone of same done previously in Ruby. Then I found classes to be very useful for bigger “vanilla” projects (https://github.com/ronilan/BlockLike https://github.com/ronilan/BlockLike) I’d call them “syntactical vitamins”.
- labster 8y agoThere's no alliteration there. I'd go with syntactic soylent.
- krapp 8y ago> Calling something “syntactical sugar” makes it sound unhealthy. I would argue that, more often than not, it is, and it becomes less healthy the more of it you have. Javascript, for all its faults, is syntactically a simple language and it should have been kept that way.
- deleted 8y ago[deleted]
- runarberg 8y agoArticle from january last year. Should it be marked with (2018)?
- 11235813213455 8y agoI really dislike the formatting with a space between function name and arguments function foo (a, b) { compared to the more common: function foo(a, b) {
- pagnol 8y agoFor better or for worse this is part of the "Standard Style": https://www.npmjs.com/package/standard https://www.npmjs.com/package/standard It always seemed like an odd choice to me that would make people less likely to adopt it.
- otras 8y agoImportant emphasis on the quotation marks around the word standard. From the readme: > But this isn't a real web standard! > Of course it's not! The style laid out here is not affiliated with any official web standards groups, which is why this repo is called standard/standard and not ECMA/standard. > The word "standard" has more meanings than just "web standard" :-) I’m not a fan of the naming, but I could also be biased because I disagree with some of the formatting rules.
- wanted2 8y agoUnfortunately in the JS community you cannot say these things without being punished. If you do anything else than strict eslint with "airbnb settings", or default prettier settings, your head goes off! Don't ever say this to your JS team mate. It's a very rigid community if it comes to these futilities.
- Waterluvian 8y agoThis is... puzzling. Where do you see these attitudes? Both ways are perfectly cromulent and it's fine for people to have opinions. In my years of JS dev the main thing I've seen from the community is "pick a style and stick to it. Be consistent." And that's pretty typical and sage advice of all programming. The reason to downvote parent is that it's bringing up a tired debate. We may as well discuss tabs vs. spaces while we're at it.
- ChrisSD 8y agoI think ES6 classes are the worst of all worlds. I know people from a Java background really want classes in their Javascript but this is not that. ES6 classes look like kind of sort of like a class but if you poke it at all you see lots of sharp edges and weird behaviours that make no sense unless you know what it's sugar for.
- gedy 8y agoI think the point was to simplify the JS Prototype syntax to be more "normal-looking" and less confusing to devs, not some rich OOP model compared to true OOP languages.
- ChrisSD 8y agoJavascript is a true OOP language. I'm all in favour of simplifying some of the syntax but why call it a "class"? That's only going to further confuse matters. I already have a hard enough time trying to teach Javascript's OOP model without adding to the confusion.
- kowdermeister 8y agoWhy not? It's totally reasonable if you learn a language to get familiar with the concepts in it. Every language is different here and there and the 'class' describes well what it does: wrap things together that belong together.
- krapp 8y ago>and the 'class' describes well what it does: wrap things together that belong together. So does "Object". All "Class" does, here is paper over some of the complexity of making JS objects. If anything, JS classes hide necessary concepts about the language from the developer. At least with the old, ugly way of doing things, you were forced to confront prototypes and scope and how 'this' worked.
- dmitriid 8y ago
- _31 8y agoI'm happy about the class syntax additions that came with ES6, especially the method definitions. It's increased my productivity (and happiness) when working with js.
- iteriteratedone 8y agoIt has done nothing for my productivity and only makes it more complex of a task for me to make sense of a javascript file.
- nightski 8y agoMy only complaint is having to manually bind methods in the constructor. I understand why it's necessary but it is tedious. I suppose the answer is to just use TypeScript but we are talking about ES6 here.
- matthewmacleod 8y agoHave you looked at using arrow functions in class properties for this? They have some issues, but avoid all the tedious manual binding. Alternatively, the autobind decorator could help - though I’ve never used that myself.
- LiquidFlux 8y agoI've used Autobind a great deal as of recent with React classes, it's been both pleasant to use and I've yet to experience any issues with it.
- seekbeak 8y agoCan't the majority of that manual binding be done by good 'ol fat arrows?
- randomfool 8y agoNo- static isDog (animal) { return Object.getPrototypeOf(animal).constructor.name === this.name; } Yes- static isDog (animal) { return animal instanceof Dog; }
- chrismorgan 8y agoOr, if you want to check “is a Dog and not an instance of some subtype of it”: static isDog (animal) { return Object.getPrototypeOf(animal).constructor === this; } Definitely no need for the `.name` check—that weakens it enormously, especially in the presence of minification.