29

Look at the snippet below. It's a perfectly normal snippet (look at the markdown if you don't believe me). It's not working.

var location = {
  map: {
    geo: "20.471884,-157.5056",
    p: "Hawaii"
  }
};

const [lat, lng] = map.geo.split(",");
console.log(lat);
console.log(lng);

How is this happening, and how do we fix it?

This is due to the location overriding window.location. How could we fix this? Should we update the Stack Snippets engine to allow these variable names? Maybe using an IIFE as suggested would fix the issue.

5
  • 10
    That’s what happens when you assign location in the global scope in JavaScript. Use const location, scope it in a function or use a different variable name. This answers the “How is this happening”, but the “how do we fix it” remains. Jun 2, 2019 at 4:34
  • Apparently const location doesn’t necessarily work. Jun 2, 2019 at 4:54
  • 4
    If we wrapped everything in IIFEs it would invalidate several questions about this very issue. I think, stack snippets should be about Minimal, complete and verifiable examples or Minimal reproducible examples. The code in this snippet wouldn’t work in a real application, so why should it work in the snippet? How often does this even happen? Jun 2, 2019 at 5:00
  • 7
    The Stack Snippet backend could be modified to show a friendlier “The snippet has been redirected to /[object Object] note rather than a “Server Error in '/' Application.” message. This would also make legitimate uses of window.location not look like an error. Jun 2, 2019 at 5:29
  • 2
    Long story short: Avoid var ... Jun 3, 2019 at 8:06

2 Answers 2

27

It's due to the var location, which assigns to window.location and attempts to replace the page. But you assigned an object to location, resulting in a request to

https://stacksnippets.net/[object%20Object]

which doesn't exist, of course, resulting in the "Server Error in '/' Application.".

Use a different variable name

var loc = {
  map: {
    geo: "20.471884,-157.5056",
    p: "Hawaii"
  }
};

const [lat, lng] = loc.map.geo.split(",");
console.log(lat);
console.log(lng);

or put it in an IIFE

(() => {
  var location = {
    map: {
      geo: "20.471884,-157.5056",
      p: "Hawaii"
    }
  };

  const [lat, lng] = location.map.geo.split(",");
  console.log(lat);
  console.log(lng);
})();

(semi-related: 1 2)

I suppose this could be fixed by Stack Overflow by automatically wrapping Javascript snippet code in an IIFE, eg, from this markdown:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    // Javascript here
    // More Javascript here

<!-- end snippet -–>

generate

<!DOCTYPE html>
<html>
<head>
    <style>

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>

    <script type="text/javascript">(function() {
        // Javascript here
// More Javascript here
    })();</script>
</body>
</html>

instead of

<!DOCTYPE html>
<html>
<head>
    <style>

    </style>
    <script src="/scripts/snippet-javascript-console.min.js?v=1"></script>
    </head>
<body>

    <script type="text/javascript">
        // Javascript here
// More Javascript here
    </script>
</body>
</html>

That would also fix the window.name problem in the other question, though it would make a few questions resulting from window shenanigans not reproducible in the snippet console.

Unfortunately, window.location is not configurable, so it couldn't even theoretically be overwritten so as to throw an error if the user tries to assign to it.

5
  • 4
    Kaiido suggestion could solve the window shenanigans by allowing multiple snippets modes: like one mode where it keeps the current behavior, and another mode where the JS is wrapped in an IIFE. We already have a parameter to show or hide the console, so having a parameter to embed in IIFE or not sounds like a reasonable addition.
    – Cœur
    Jun 3, 2019 at 7:08
  • 1
    I quite like the IIFE idea - a feature request wouldn't go unnoticed. Jun 3, 2019 at 8:04
  • @JamesCoyle I'm not seeing what the additional parameter would accomplish - window is accessible regardless, it being a parameter doesn't prevent properties from being able to be implicitly referenced (eg const foo = location), and while declared variables could not conflict with window properties, the same would be true regardless in the IIFE regardless of argument, right? Jun 4, 2019 at 8:33
  • 1
    One bigger concern about this IIFE auto-wrapping than "shenanigans": all the onevent attribute would break. Ok, that's bad practice, but unfortunately still frequent in many beginner tutorials, and of course here too. Moreover, since they are generally new to web-dev, the ones posting this will have even harder time to understand why their code breaks at a different place here than anywhere else with a confusing eventhandler is undefined error message when they'd have correctly written it in their code => They'll think SO is broken.
    – Kaiido
    Jun 5, 2019 at 0:51
  • 1
    @Kaiido That's a great point, and is the same issue many have with JSFiddle: stackoverflow.com/questions/5431351/… An implicit IIFE might well cause more problems than it solves. Jun 5, 2019 at 1:14
15

This has already been brought before.
The only thing that Stack-Snippets do wrong here is that it's not very clear what the structure of the generated document is.

And the only "solution" I can think of would be to add an option à la jsfiddle to set different modes of script inclusion.

  • "no wrap in head",
  • "no wrap in body" [current],
  • "wrap in load event handler".

IMO, any other solution would be at least as much confusing as is the current behavior.

2
  • 1
    And then two people add the same answer with two different "snippet modes" using a global variable, one works one doesn't ... IMO thats even more confusing. Jun 3, 2019 at 8:06
  • 4
    @JonasWilms why would it be? I never said this option should not be visible from the post.
    – Kaiido
    Jun 3, 2019 at 8:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .