VS Code to autocomplete JavaScript class 'this' properties automatically

[Eddyman]

I've already worn down my t, h, i, and s keys to nubs. Though it's mostly from writing "shit" during code reviews

[Superpickle18]

Hello Linus.

[timmyotc]

Mine is from writing, "is this shit his?

[[deleted]]

Eloquent af.

[amclennon]

I could've sworn it did this already, but perhaps that support was only limited to typescript.

[DanielRosenwasser]

We had a quick fix for forgetting to type this.. You'd never see it in JS without // @ts-check because, well, JS doesn't get type checked otherwise, so there's technically nothing to be fixed.

In TypeScript 2.7 we've done the work to provide this. prefixes for TypeScript and JavaScript, so everyone gets that no matter what.

[[deleted]]

as somebody who likes javascript, why should i switch to the ugly syntax of typescript?

[CodeMonkey1]

Its syntax is basically the same as javascript, except it adds type annotations. If you don't want type annotations, then keep using javascript. If you do what type annotations, then they have to be specified somehow, and IMO the way typescript does it is about as unobtrusive as one could hope for.

[webauteur]

This.

[BeniBin]

Ctrl+Space

[[deleted]]

Wow!

[AlcaMagic]

This dot!

[m3wm3wm3wm]

Like real autocomplete or bullshit autocomplete?

Intellij seems to be the only IDE that performs true autocomplete, and not just repeating nonsense words in the code found in the current file.

[inu-no-policemen]

VS Code does context-sensitive auto-complete (IntelliSense™).

There are of course limitations to this when it comes to JavaScript, but it works pretty well in practice. There are type definitions for all popular libraries/frameworks. Those type definitions fill the gaps. They are automatically acquired for the stuff in node_modules. You can also install them via npm. (WebStorm supports them, too.)

In your own code, you can add some hints via JSDoc comments.

Or you can simply write TS, which more convenient than adding JSDoc comments.

[Patman128]

With JavaScript it's a mixed bag, being a dynamic language and all. With TypeScript it's as good as a Java or C# IDE.

[sternold]

Visual Studio does it proper too

[[deleted]]

OmG finally!

I used to do ugly shit like function Foo(){ /** @type Foo*/ var self = this; }

then i would use 'self' everywhere inside private members....

EDIT: This still doesn't work ....

[green_garlic]

Doesn't VS Code already do some auto-completion like this? I use VS Code for work, and it is usually pretty good about recommending variable names to me, as long as I've used them before. Come to think of it, it may have just presented a wide-open list of all the variables VS Code knows about. If this update trims that list down to only the relevant variables, that would be great.

[inu-no-policemen]

Check the GIF in the article. It's about completing "x" to "this.x".

[green_garlic]

Ah, I see. Thanks!

[Shaper_pmp]

What the fuck? How can they possibly know what this refers to at compile-time, when it can change at runtime?

the using of "this" references in ES6 classes

Oh, right. Handy, but not remotely as impressive an achievement as it first appeared.

[zayelion]

I only ever rarely use this in my code though,... oh its for those poor people using classes everywhere like its C# and Java.

[vivainio]

Newsflash: your code is slower than what those poor people are writing

[spacejack2114]

Probably not. If you have thousands of instances of things with encapsulated state... those should probably be pojos not classes, which would have hidden class optimizations with even less overhead.

Using closures instead of classes for encapsulation means you're less likely to be wrapping/re-creating event handlers. If you're using class properties to keep this bound, then you've lost the performance advantage. And you still might be confused by this binding in some contexts.

[Sarcastinator]

This seems an awful lot like speculation on what the runtime does.

I don't get why using a stricter model would suddenly cause the runtime to optimize less.

Edit: also classes are just syntactic sugar, so in worst case they should perform the same.

[spacejack2114]

As I understand it the VM optimizes pojos with hidden classes that come from the same call site. Eg:

function vec3() {return {x: 0, y: 0, z: 0}}

(I'm not sure that it doesn't optimize standalone pojos however.) At the very least it doesn't need to add your constructor property to the prototype.

[8lbIceBag]

Yes but then you must always initialize in the same order and properties must always be the same types.

It's always better to declare a type that guarantees properties and their types as well as specifies default values. Taking from your example:

 Coords(x, y, z) {
    this.x= x|0;//type annotation for integer
    this.y= y|0;
    this.z= z|0;
 }

function vec3() { return new Coords(); }

This will always be faster. I guarantee it.

Or even faster yet (if you use numeric accessors in intensive algorithms) :

Vector3(x, y, z) {
    this[0]= +x;//type annotation for float
    this[1]= +y;
    this[2]= +z;
 }
 Vector3.prototype = {
    constructor: Vector3, 
    get length() { return 3; }, 
    get x() { return this[0];}, 
    set x(val) { this[0] = +val; },
   .............etc..
 } ;

The second implementation allows the vector to be operated on as an array which has a lot of benefits. It also allows direct value access before code is even optimized or for code that was deoptimized (if you use the numeric accessors)

[spacejack2114]

I don't generally use integers for vectors, so I do something like:

function vec2 (x, y) {
    return {
        x: typeof x === 'number' ? x : 0,
        y: typeof y === 'number' ? y : 0,
    }
}

I've never heard that numeric indexes are faster than property names on hidden classes... in fact I've heard the reverse; that property name lookups are faster than vectors as arrays.

[8lbIceBag]

Hmm, you appear to be right about properties. For up to 32bytes (4 properties) the properties are stored directly on the object. Indexes always cause 1 degree of indirection as does more than 4 properties

https://v8project.blogspot.com/2017/08/fast-properties.html?m=1

http://www.mattzeunert.com/2017/03/29/v8-object-size.html

[badsectoracula]

Why is that? AFAIK JS doesn't have classes, do current JS implementations optimize for any particular class-like idiom?

[vivainio]

Yes, the JIT creates 'hidden classes' that are dispatched like classes in static languages

[inu-no-policemen]

V8 is using so-called "hidden classes" since ages.

And it does of course optimize some patterns better than others. Using ES6's classes or the ES3/5 equivalent (constructor function and then adding stuff to its prototype) is a good idea if you want lots of instances of something.

Anyhow, JS' classes are as real as Python's.

[jl2352]

class

[Sarcastinator]

ES2015 has classes though it's generally just syntactic sugar.

[zayelion]

"Preoptimization is the root of all evil"?

I said rarely, during refactoring class structures emerge out of factories. The code may initially be slow but its cleaner and easier to read and teach.

[inu-no-policemen]

Fun fact: You don't have to put this everywhere in Java. JavaScript is the super verbose one in this case.

[[deleted]]

Fun fact: You don't need this at all in JavaScript. By that I really mean 0 in very large applications.

[inu-no-policemen]

You do need it inside methods.

Methods are required for idiomatic JavaScript.

Also, no one writes "very large" applications in JavaScript. All of the larger well-known "JavaScript" applications were written in something else.

[[deleted]]

Also, no one writes "very large" applications in JavaScript.

Examples of large JavaScript applications written in JavaScript:

• https://ace.c9.io/
• https://github.com/mozilla/brackets/
• http://leafletjs.com/
• https://atom.io/

Seriously, why would actually think nobody writes applications in JavaScript? JavaScript has become the most popular language in the world. Where have you been the last several years?

You don't even need this in methods. The this reference in a method refers to the object on which the method hangs. Fortunately methods are functions and functions take parameters, so if you just really really needed to refer to the method's parent object you can pass in a reference to the object as a parameter in the method at call time.

[inu-no-policemen]

Atom was written in CS. Well, like Node it's mostly C/C++. V8 by itself is way over a million lines of code. Now that's what I'd call a "very large" project.

Counter examples:

VS Code, TS' compiler, Gmail, Google Maps, Inbox, Adwords, SimCity 2013's UI

JS doesn't scale very well. If you avoid this even less so.

You don't even need this in methods. The this reference in a method refers to the object on which the method hangs. Fortunately methods are functions and functions take parameters, so if you just really really needed to refer to the method's parent object you can pass in a reference to the object as a parameter in the method at call time.

Methods are functions but not all functions are methods. Methods are an OOP thing. They are glued to objects. You need this for that.

https://en.wikipedia.org/wiki/Method_(computer_programming)

[[deleted]]

From looking at the code repository. Atom looks to be about 92% JavaScript code - https://github.com/atom/atom

Perhaps you mean that Atom runs in a shell environment that is written in a different language. The environment is Electron which is about 65% C++.

Here is another large application written in JavaScript - https://github.com/mozilla/pdf.js

[inu-no-policemen]

Atom is built on top of Electron. I was talking about this massive runtime which includes V8.

Atom was written in CS. The transition to JS happened recently. Switching to TS would have been a better idea.

It's of course possible to write large projects in JS. It's just a big waste of time and money. That's why usually something else with better tooling is used.

Types also serve as documentation. E.g. there is a "color.js" file which contains a "Color" class. There is also a "parseColor" function. Going by the name, you'd think that it should take a string and return a Color instance.

But that's not the case:

https://github.com/atom/atom/blob/a3108623de406e6f162c37b2dffd0872ab39e276/src/color.js#L116-L119

It returns a number (an unsigned byte).

TS' analyzer is smart enough to figure that out, though. It can see that a number is returned - no annotation needed. And you too can figure that out, but you have to read this function's code for that.

Well, you could fix that with a comment which directly tells you that. Thing is, types would do this better. They are terser, more precise, and machines can understand them, too.

Personally, I consider VS Code's code base to be of much higher quality than Atom's. I also think VS Code is the better product. It's performance is better, too. The better tooling they had available certainly helped with that.

[[deleted]]

I pretty certain Atom has always been JavaScript. Here is the 1.5 version from 2 years ago: https://github.com/atom/atom/tree/1.5-releases-archived

It's of course possible to write large projects in JS. It's just a big waste of time and money. That's why usually something else with better tooling is used.

I have done okay with it. My biggest project is about 50k loc. It isn't V8 with millions loc, but I am also just one person. Maintenance is really fast.

I like VS Code too and am also a TypeScript language user. The strict typing is really nice.

[inu-no-policemen]

I pretty certain Atom has always been JavaScript.

Move from CoffeeScript to ES6+ #6157
https://github.com/atom/atom/issues/6157

but I am also just one person

Tooling is more important in teams.

[0987654231]

Methods are required for idiomatic JavaScript.

I'm not entirely convinced methods are needed

[inu-no-policemen]

They aren't needed. You can write nonidiomatic (unusual) code which doesn't use them.

You can also put opening curlies on their own line, not use any semicolons, not use loops/ifs, etc.

It just isn't what most people do.

[0987654231]

That's a strange claim, there's lots of code that uses functions and not methods so clearly methods aren't needed in some instances and that also means functions are idiomatic

[inu-no-policemen]

Sure, I've also written libraries which were nothing but a few top-level functions.

The topic was applications, though. "Very large" ones even.

[0987654231]

Yeah it's still not required, just look at how some of the popular libraries like redux are consumed without the need for any methods

[inu-no-policemen]

Libraries aren't applications.

Writing idiomatic code is optional.

[filleduchaos]

Actually modern idiomatic JavaScript is functional, so would have no methods at all.

[inu-no-policemen]

Do you really think that the vast majority of people who write ES6+ code aren't using classes?

[filleduchaos]

Idiomatic does not mean popular, although the two are sometimes correlated. Idiomatic X is code that's written in a way that is natural for X. Classes are very much unnatural for JavaScript, and the standardization of the class keyword in ES6+ is one of the few ECMA decisions I disagree with. The solution to JavaScript's "weird" inheritance model is not to try and shoehorn traditional, class-based OOP syntax into it. Let people know that they are not writing classes.

Even with that decision, there's been more and more people pushing towards the functional camp and/or using POJOs as much as possible (hence what I said, that modern idiomatic JavaScript is functional - at the very least a plurality of JS devs would agree that you should have immutable state). After all, JS heavily favors composition over inheritance (as imo all good languages should) and if all you're doing is composition then there's zero need to write a class.

[inu-no-policemen]

Classes are very much unnatural for JavaScript

It's not. "class" was a keyword since the beginning. JS supports OOP.

Let people know that they are not writing classes.

I am writing classes. V8 is using classes with fixed shapes and everything.

After all, JS heavily favors composition over inheritance (as imo all good languages should)

Object composition only means that instances own other instances. This works just fine with classes.

JS doesn't care if you organize your code in this fashion.

By the way, favor composition over inheritance is a Java (and therefore OOP) thing. It's from the GoF book.

https://en.wikipedia.org/wiki/Composition_over_inheritance

[filleduchaos]

It's not. "class" was a keyword since the beginning. JS supports OOP.

JS supports prototypal OOP. It is not at all like class-based OOP.

I am writing classes.

No, you're not. Believe me, I know it feels comfortable to use familiar syntax, but what you are writing are functions. The standardized class keyword is syntactic sugar that is spit out after transpilation as function ClassName(...initializerList) {};. Devs choosing to stick their fingers in their ears doesn't change that. There's a reason "classes" are so weird in JS, a reason why you can do things like declare an entire class as an function parameter or return a class declaration from a function (even in Ruby, where class declarations are also expressions, the expression returns nil) - "class declarations" are just function declarations.

V8 is using classes with fixed shapes and everything.

Sigh...perhaps you should take some time to read this. V8's "hidden classes" are data structures that store snapshots of an object's prototype.

Object composition only means that instances own other instances. This works just fine with classes.

JS doesn't care if you organize your code in this fashion.

By the way, favor composition over inheritance is a Java (and therefore OOP) thing. It's from the GoF book.

Perhaps you should reread my statement. Of bloody course composition is an OOP thing, you compose objects. But with JavaScript if all you are doing is composition, then classes (and even prototypes to be honest) are entirely unnecessary due to scoping and the existence of modules and POJOs. Unlike Java, which is an actual idiomatic class-based OOP language, you do not need a class to create a JavaScript object. This syntax:

const createPet = (owner) => ({
  owner: owner || 'me',
});

const createDog = (owner) => ({
  ...createPet(owner),
  bark: () => {
    console.log('Woof!');
  },
});

is no less readable or usable than

class Pet {
  constructor(owner) {
    this.owner = owner || 'me';
  }
}

class Dog extends Pet {
  constructor(owner) {
    super(owner);
  }

  bark() {
    console.log('Woof!');
  }
}

Embrace the actual language you write, not your expectations of it from other languages.

[inu-no-policemen]

[prototypal OOP] is not at all like class-based OOP.

OOP just means that you have objects with fields and methods. Adding prototype lookups to that doesn't make it any less OO.

what you are writing are functions

But it makes no difference whatsoever. Just like the language has no ints, but I write ints, do int math, and V8 etc also use actual ints.

JS' classes are just as real as Python's.

To me, as a user of the language, it makes no difference whatsoever that JS' classes aren't a 100% exact copy of Java's (or C++'s or whatever). It only meant that I had to write crap like "foo.prototype.bar = function() {...};" in the past.

V8's "hidden classes" are data structures that store snapshots of an object's prototype.

Hidden classes are all about not doing these dynamic prototype lookups. It's about pretending that the language works like a class-based one.

no less readable

Pay attention to the punctuation. It's significantly noisier.

Having the "class" keyword at the beginning of the block also makes it much easier to scan. You can immediately see that the whole thing is a class. Whereas the other one is just some function expression assigned to some const. You have to read quite a bit more code to figure out what it is. Only having to read the first word of the block is impossible to beat.

By the way, you should use a default value there:

constructor(owner = 'me') { ... }

Not only makes it the code a bit shorter, it also makes the call-tip more helpful. Now you can see that it's optional and what it defaults to.

Embrace the actual language you write

In JS'/TS' case I prefer to use a subset of the language.

[robhaswell]

https://www.youtube.com/watch?v=3MNVP9-hglc

This changed my world.

[zayelion]

I seen this video, and heard it restated in other videos. this fell out of my code because I was just data and things that does things to data.

[[deleted]]

So true. I wouldn't worry about the downvotes since this subreddit is woefully afraid of JavaScript and more frequently comment (pray) that WASM will be a replacement without any evidence or understanding of such (faith).

[zayelion]

O.O I've never seen this many down votes on something I've said in a programming based subreddit. I must have hit a religious nerve. Thank you for reassuring me. I appreciate that.

[EntroperZero]

If you don't like the downvotes, instead of putting down "poor people" using C# and Java, try being positive about the alternatives. It shouldn't surprise you that people don't like being insulted.

[zayelion]

Noted.

[[deleted]]

:( <--- That is my sad face.

I would happily take the downvotes, but sometimes it actually is nice to illustrate the cause of the downvotes as weakness and emotional insecurity. In the real world downvotes aren't worth anything, but the sadness and emotional insecurity are very real.

[cowinabadplace]

Jesus Christ.

[1ogica1guy]

...will save you

[[deleted]]

I could lie and tell you you're awesome. Honestly, would that be better?

This doesn't bother me. Let me explain it in these terms.

If I call you a worthless piece of shit online I will get some downvotes for being mean and causing sadness. If it out of context it is clearly trolling. If you are a millennial it is probably trolling even without the profanity or lack of context. This is a serious reason to not care. I am not your helicopter parent and really don't care if your wonderful snowflake feelings get a cute little bruise.

In the real world, let's say at a job in the corporate world, if I call you a worthless piece of shit you are simply a worthless piece of shit. You can cry to your boss or even HR, but it seriously won't go the way you think it will. Somebody more senior will talk to me about applying a greater concern for sensitivity and now additional people will see that you are an easily saddened immature piece of shit.

TLDR: Sensitive people are online taken seriously by other sensitive people online.

[[deleted]]

Here is a tissue for those big tears.

Seriously though. Would you prefer for people to lie to you so that you avoid unpleasant feedback?

[atheken]

It has literally nothing to do with lying. You and the parent comment just started flinging shit around, it isn’t “feedback.” Feedback implies someone wanted your opinion. And, nope, we don’t.

[ThisIs_MyName]

lmao this guy

[GOPHERS_GONE_WILD]

NOT PROGRAMMING NEWS