weird plus syntax in route doc

[hematy61]

📚 Docs or angular.io bug report

Description

In the routing documentation there is a weird plus syntax which doesn't make sense at all.

🔬 Minimal Reproduction

What's the affected URL?**

https://angular.io/start/routing

Reproduction Steps**

Expected vs Actual Behavior**

📷Screenshot

🔥 Exception or Error

🌍 Your Environment

Browser info

Anything else relevant?

[trotyl]

+ operator convert a string value to a number value.

[ericmartinezr]

To complement @trotyl's answer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus_()

[AnthonyLenglet]

Would it be clearer to perhaps use

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    this.product = products[Number(params.get('productId'))];
  });
}

instead ?

[hematy61]

@trotyl @ericmartinezr thanks a billion. looks I need to refresh my JS foundations. I knew that "!" would turn a value to a boolean but never thought about + or - operators. that's pretty neat.

@AnthonyLenglet I think that 's better to keep it there as everyone knows what Number() is doing, but doesn't know about +. However adding some sub-notes to describe what + is doing would be awesome. and probably, prevent opening another issue by someone else for the same topic. right?

[Airblader]

Angular is complex enough, I'd try to not also explain JS in the docs as well and instead just use the easier to understand approach using the Number constructor.

[lazarljubenovic]

as everyone knows what Number() is doing, but doesn't know about +

there is a weird plus syntax which doesn't make sense at all

The problem with these statements is that everyone can say that for any two things. I'd never consider using the simplest unary operator something people don't know about. The documentation is for a JavaScript framework, and basic knowledge is required in order to understand it. Explaining JavaScript along the way would just make the docs more bulky.

[hematy61]

@lazarljubenovic well, I'm a big fan of + sign now 💯 . and nobody can say that they're master in a language (at least this is what I think). using the + sign is redundant here as JS arrays are gonna coerce their indexes into String. therefor there isn't any difference between arr["2"] and arr[2].

[Airblader]

using the + sign is redundant here […]

In JavaScript, maybe, but in TypeScript with --noImplicitAny this is a type error.

_{URLs like ?productId=length would also lead to unintended effects}

[hematy61]

well I'm new to TS, and you must be right. however I removed the plus sign on StackBlitz and the component still working. any idea why?

[sdavids]

The documentation is for a JavaScript framework, and basic knowledge is required in order to understand it.

Well, you forget the following:

• sometimes it is JavaScript syntax/idiom/wtf
• sometimes it is TypeScript syntax/idiom
• sometimes it is a Template Expression
• sometimes it is a microsyntax

For beginners it is really hard to distinguish those.

Also, it is really hard to search for +, that is one of the reasons why operator overloading is so insidious.

Scala:

val b = 0 +: a

Have fun trying to find out what it does just using your favorite internet search ...

[lazarljubenovic]

That's why you need to learn to use something before you use it.

Good luck searching for anything here. And yet for centuries people have been happily using this kind of mathematical notation. Chemistry has no problems with H He Li Be B C N O F Ne Na Mg Al Si P S and stoichiometry equations. Physics has no problems with various conventions, greek letters, bars, superscripts and subscripts. And you know what, even latin-based languages have no problem with B/8, l/I/|/1, p/q/d/b, D/O/C, E/F. Japanese have no problem with 待/侍.

And yet whenever syntax comes up in online discussions for web-related technologies, everyone is suddenly confused by symbols. I wonder why. It's not hard at all to search for it. "javascript unary plus", "javascript plus in front of string", etc will all pretty quickly lead you to the answer.

Also I searched "scala plus colon" and got this. Obviously it means nothing to be because I have never used Scala in my entire life. If I have, I'd probably have learned about +: at some point as well.

[sdavids]

That's why you need to learn to use something before you use it.

Some people read the JavaScript language spec.
Memorize it.
Read the JavaScript standard library.
Memorize it.
Read the TypeScript language spec.
Memorize it.
Read the template expressions syntax.
Memorize it.
Read the ngFor microsyntax.
Memorize it.

Only then they feel ready for Angular ...

Other people read "JS in 24h" and try to create their first website with Angular—when they stumble upon something unfamiliar they try to find it in the docs or via a search engine.

Other people just copy/paste and don't think about why there is a seemingly random +:

People are different.

For some English is not their native language.

Some remember random stuff like:

JS arrays are gonna coerce their indexes into String [but in] TypeScript with --noImplicitAny this is a type error."

Some learn one mathematical notation in school ... move to a different country as an exchange student having to learn a new notation for the same concepts ... go back to their original country and go to college having to learn yet another notation for the same concepts ...

I advocate for tutorials to mention everything not obvious or to do it in an obvious way.

And yes, one cannot explain everything and "obvious" is relative 😉

[lazarljubenovic]

You don't memorize the spec, you reference it.

“Obvious” is relative, indeed -- relative to the conext of the article and to the target audience. It's “obvious” that 2 + 3 is 5 to most grown ups, and it's “obvious” that sqrt(9) is 3 to most people who browse GitHub. It's also “obvious” to most people using Angular that foo() is syntax for a fuction call. Of couse there's a lot of knowledge behind each of these concepts, and it even depends on how deep you wanna go (theres whole books on rigurously proving that 1 + 1 is 2).

I just don't understand where you draw the line. Because the screenshot posted uses...

• method declaration with no arguments (In the routing documentation there is a weird pair of parenthesis which doesn't make sense at all)
• fat-arrow function (In the routing documentation there is a weird arrow which doesn't make sense at all)
• using single quotes instead of more commonly used double quotes in other languages (In the routing documentation single quotes are used for string which doesn't make sense at all)

So are we just waiting for someone to open all of these, and then change the docs accordingly? Am I going to open Angular docs in 5 years and see every article starting with and explanation on how to use every part of JavaScript syntax, because these types of accepted issues have accumulated?

OP is using RxJS and dependency injection in that screenshot. It's expected to know what unary operator + is at that point. Just like you're expected to know how to perform addition of fractions by the time you're learning about differentials. Obviously, it can happen that you somehow skip this "quirk" of JavaScript -- then you go ahead and do a search for "javascript unary plus with string".

There's nothing wrong with not knowing these things; my question is how do we decide how far to go in explaining things in the docs? What's the criteria to make a difference between these:

this person is confused by something and we suspect that more people might be as well, so let's explain it in more detail

and

this person is an outlier for getting this far without learning things in order, let's explain this to him in the issue, let's open a StackOverflow question and provide a good answer, but keep the current wording, as we believe it keeps a good balance between "understandable" and "not overexplaining things unrelated to the topic"

[Airblader]

On the off-chance of an unpopular opinion, but I agree with @lazarljubenovic. The Angular docs shouldn't make things unnecessarily complex, but it should be expected that the developers know the language. I don't think anyone is doing themselves a favor by trying to learn Angular if they don't know JavaScript.

[alan-agius4]

Closing as this has already been addressed.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}