Most URLs are syntactically valid JavaScript code

The URL <a href="https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;label" rel="nofollow">https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Refe...</a> is also close to valid code <i>as an expression</i>.<p>Consider something like:<p><pre><code> foo ? https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;label </code></pre> I was hoping that was where the post was going with this :)<p>Sadly, JavaScript doesn&#x27;t have the &#x2F;&#x2F; operator (floor division) so it doesn&#x27;t quite work. And double-sadly, I can&#x27;t think of a language that has all the necessary ingredients; Python uses `and` and `or` for trinary syntax, not ? and :, and besides, you&#x27;d need to be able to overload the &#x2F;&#x2F; operator as unary rather than binary, which ... well, I&#x27;m not sure we&#x27;d <i>want</i> a language to be able to do that. But I do!<p>Still, if you want to confuse your coworkers, consider sneaking in something like:<p><pre><code> developer = {mozilla: 42} en = US = docs = web = Web = JavaScript = Reference = Statements = label = 420 console.log(developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;label) </code></pre> and be sure to hand in your resignation after pushing the commit.

&gt; The lowdown: you can copy and paste just about any website directly into your JavaScript code without modification and it won&#x27;t break anything.<p>Well, unless your code relies on an `http` or `https` label :)

One also could look at it the other way around: an URL <i>always</i> matches <i>any</i> string, that <i>includes</i> Javascript code. Here is a nice example from the real world:<p>Whenever I use the Regex engine of XML Schema (or later XPath), with the regular expression shown in RFC3986 - Uniform Resource Identifier (URI): Generic Syntax, I get the error: &quot;Regular expression matches any string.&quot;. (The reason for this being an error is, that the XSD regex engine had only one purpose: to constrain a string, so we can check for valid input or define a datatype. That&#x27;s why it behaves that way.) Here is the part with the regex from Appendix B[1] of aforementioned RFC:<p><pre><code> The following line is the regular expression for breaking-down a well-formed URI reference into its components. ^(([^:&#x2F;?#]+):)?(&#x2F;&#x2F;([^&#x2F;?#]*))?([^?#]*)(\?([^#]*))?(#(.*))? 12 3 4 5 6 7 8 9 The numbers in the second line above are only to assist readability; they indicate the reference points for each subexpression (i.e., each paired parenthesis). We refer to the value matched for subexpression &lt;n&gt; as $&lt;n&gt;. For example, matching the above expression to http:&#x2F;&#x2F;www.ics.uci.edu&#x2F;pub&#x2F;ietf&#x2F;uri&#x2F;#Related results in the following subexpression matches: $1 = http: $2 = http $3 = &#x2F;&#x2F;www.ics.uci.edu $4 = www.ics.uci.edu $5 = &#x2F;pub&#x2F;ietf&#x2F;uri&#x2F; $6 = &lt;undefined&gt; $7 = &lt;undefined&gt; $8 = #Related $9 = Related where &lt;undefined&gt; indicates that the component is not present, as is the case for the query component in the above example. Therefore, we can determine the value of the five components as scheme = $2 authority = $4 path = $5 query = $7 fragment = $9 </code></pre> [1]: <a href="https:&#x2F;&#x2F;datatracker.ietf.org&#x2F;doc&#x2F;html&#x2F;rfc3986#appendix-B" rel="nofollow">https:&#x2F;&#x2F;datatracker.ietf.org&#x2F;doc&#x2F;html&#x2F;rfc3986#appendix-B</a>

Semi-related, there&#x27;s a a useful trick for using Javascript labels as URLs.<p>Way back in the day, I used to write labels like `&lt;a href=&quot;javascript:open_save_dialog:;&quot;&gt;` instead of `&lt;a href=&quot;javascript:void(0)&quot;&gt;`. The idea is that both yield undefined to prevent the default URL following semantics of the link, to instead do whatever JS logic is attached to the onclick event, but when the user hovers over the link, the label makes the corner tooltip of the browser show descriptive information to the user about what clicking will do, whereas `void(0)` tells you nothing.

Remove the protocol part, and with the JS Proxy[0], you can actually do something like:<p><pre><code> await www.example.org </code></pre> as demonstrated in a tweet[1]. This is pretty interesting IMO :-)<p>[0]: <a href="http:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Global_Objects&#x2F;Proxy" rel="nofollow">http:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Refer...</a><p>[1]: <a href="https:&#x2F;&#x2F;twitter.com&#x2F;rreverser&#x2F;status&#x2F;1138788910975397888" rel="nofollow">https:&#x2F;&#x2F;twitter.com&#x2F;rreverser&#x2F;status&#x2F;1138788910975397888</a>

And in Rebol &amp; Red URL&#x27;s are syntactically valid datatypes (literals): <a href="http:&#x2F;&#x2F;www.rebol.com&#x2F;r3&#x2F;docs&#x2F;datatypes&#x2F;url.html" rel="nofollow">http:&#x2F;&#x2F;www.rebol.com&#x2F;r3&#x2F;docs&#x2F;datatypes&#x2F;url.html</a><p>For eg. in Red console:<p><pre><code> &gt;&gt; read https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;label == {&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en-US&quot; prefix=&quot;og: https:&#x2F;&#x2F;ogp.me&#x2F;ns#&quot;&gt;&lt;head&gt;&lt;me...</code></pre>

Whenever I come back to writing JavaScript after a long break, I always forget how to correctly return objects from lambda expressions, and end up with this:<p><pre><code> () =&gt; { foo: &quot;bar&quot;; baz: &quot;qux&quot;; } </code></pre> Thankfully TypeScript warns me it&#x27;s a ()=&gt;void function instead of whatever was expected in the context. I scratch my head for a while and then remember:<p><pre><code> () =&gt; ({ foo: &quot;bar&quot;, baz: &quot;qux&quot; });</code></pre>

No different than Java or any lang that supports labels and c style comments

At some point in the distant past I was working on a tool that would identify PowerShell script using the built in parsing API. It was astonishing the wide variety of files that parsed without error, including a lot of XML files.

You really should not use this ever in any situation, but for historical reasons[1], if they are the only thing on the line you can use HTML comments in JavaScript like so:<p><pre><code> function foo() { &lt;!--- returns true ----&gt; return true; } </code></pre> This works at least in Chrome and V8, not sure about Firefox.<p>[1] <a href="https:&#x2F;&#x2F;stackoverflow.com&#x2F;a&#x2F;1508005&#x2F;1888964" rel="nofollow">https:&#x2F;&#x2F;stackoverflow.com&#x2F;a&#x2F;1508005&#x2F;1888964</a>

So even a data URI can be valid JS syntax<p><pre><code> data:document&#x2F;document,alert(&#x27;hi&#x27;) </code></pre> If ran as JS it will alert &quot;hi&quot;. If put into a link it will force the browser to download a document containing the <i>alert</i> statement.

I was actually not aware that JavaScript supports labels. Quite funny since, usually, these articles are about quirks in JS that basically no other language has.

This is a neat trick, but I&#x27;m more interested in the little remark about how Svelte uses the $: label<p><a href="https:&#x2F;&#x2F;svelte.dev&#x2F;docs#3_$_marks_a_statement_as_reactive" rel="nofollow">https:&#x2F;&#x2F;svelte.dev&#x2F;docs#3_$_marks_a_statement_as_reactive</a><p>Is Svelte doing something clever with these labels at runtime, or is it just using the label to do some kind of transformation when the javascript is compiled, anyone know?

&gt; The lowdown: you can copy and paste just about any website directly into your JavaScript code without modification and it won&#x27;t break anything.<p>The following doesn&#x27;t seem to be valid though. :( Am I missing something?<p><pre><code> https:&#x2F;&#x2F;developer.mozilla.org&#x2F;en-US&#x2F;docs&#x2F;Web&#x2F;JavaScript&#x2F;Reference&#x2F;Statements&#x2F;label let a = 1;</code></pre>

I can remember putting the URL of the Matrix movie website, in some plain Java code that dealt with well, matrices.<p>What I did not know is my code was more or less secretly reviewed by a senior engineer, who was a bit surprised, but learnt something he told me.<p>This is how the secret review became public. My red pill, indeed!<p>edit: typo

C# too

Neat, but as TFA says, not useful.<p>Objective-S makes URIs useful: <a href="http:&#x2F;&#x2F;objective.st&#x2F;URIs&#x2F;" rel="nofollow">http:&#x2F;&#x2F;objective.st&#x2F;URIs&#x2F;</a>

<p><pre><code> Unused label.ts (7028) &#x27;https:&#x27; is defined but never used. (eslintno-unused-labels) Delete `https:` (eslintprettier&#x2F;prettier)</code></pre>

Awesome! It&#x27;s basically a label either https: or http: that gets nothing assigned to it since the &#x2F;&#x2F; turns everything afterwards into a comment.

one of my earliest programming qirk encounters was scratching my head over why `() =&gt; { key: value }` returns nothing

Nix has first-class support for URLs. Like, there are strings (&quot;<a href="https:&#x2F;&#x2F;example.org" rel="nofollow">https:&#x2F;&#x2F;example.org</a>&quot;) and URLS (<a href="https:&#x2F;&#x2F;example.org" rel="nofollow">https:&#x2F;&#x2F;example.org</a>). And if URL is not valid, it will be parser error.<p>However, this &quot;feature&quot; turned out to be misfeature and may be removed in future.<p>The RFC: <a href="https:&#x2F;&#x2F;github.com&#x2F;NixOS&#x2F;rfcs&#x2F;blob&#x2F;master&#x2F;rfcs&#x2F;0045-deprecate-url-syntax.md" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;NixOS&#x2F;rfcs&#x2F;blob&#x2F;master&#x2F;rfcs&#x2F;0045-deprecat...</a>

javascript delenda est

I wanted to read this, but the styling of the website cuts diagonally across the content on my tablet in portrait mode.<p>It makes the article unreadable...