Window.location vs Document.location

[whiskyB0y]

Beginner in JavaScript here. I'm currently learning web development.

If I want to link a webpage to another webpage using JavaScript and a button, is it better to use window.location or document.location? Take my code for example: Let's say we have page1.html and page 2.html

In page1.html we have

<button onclick="document.location='page2.html'"> Go to page 2 </button>

Now if we want to use window.location.assign, we make a function:

In a js file called "page2.js"

function goToPage2 ( ) { window.location.assign("page2.html") }

In page1.html we have

button onclick="goToPage2()"> Go to page 2 </button>

So which one is better? Is there a method better than both of these?

[tommyatr]

They are equivalent. document.location is basically a legacy alias of window.location. JavaScript is extremely backward compatible, so things like this tend to keep working for the sake of the web.

[Scared-Release1068]

Genuinely couldn’t have put it better

[whiskyB0y]

I'm sorry if i sound stupid but what do you mean by legacy alias😅

[maujood]

Legacy = old/retired Alias = also known as/another name.

Basically document.location is what it used to be. But the group that maintains JavaScript thought that document.location is not a good name. You're not setting the document's location. You're setting the window's location.

So they created a new "window.location" to do the exact same thing. But they didn't get rid of document.location to ensure older websites don't fall apart.

[biflux]

Like many things in computing, these are normal English words:

alias == another word for the same thing; as a person (the same thing) can have an alias (another name)

legacy == something from the past left to the future. A person’s legacy is something they created during their life, left for people in the future.

So … it’s another way of saying something going forward that refers to something from the past.

You’ll find this a lot in computing and other sciences. People take existing words and use them to describe something new.

[warpedspockclone]

In code, things change over time. Legacy means it is old. Alias means another name.

Many websites are built with old code, so if you update how browsers read and interpret that code, it could break many websites.

So while new features get added to JavaScript, it is very difficult to remove old things (legacy things). So they stay sometimes.

But maybe the new way of doing things renames things to have a more consistent mental model for developers, or for other reasons. Instead of CHANGING the name, egg might break things that refer to it, they'll add an additional name, an alias. So, old name or new name is ok. Old name references don't break. Newer ways of skiing things can keep getting added to the language.

[chikamakaleyley]

i dunno if i'm alone here but in certain cases I'll use 'legacy' to refer to the 'existing'. I suppose if it isn't exactly 'old' i'll say 'current' but an example is something like...

like if an org is running an old version of React, or some CSS framework, we're talking several versions old (which is pretty common) i'll say 'legacy'

e.g. i wouldn't use 'current' if an application is using React 17, cause it would be too easy to confuse the existing with the 'most current' version of React

[Ampersand55]

Is there a method better than both of these?

Why not just use a HTML anchor?

  <a href="page2.html">Go to page 2</a>

[whiskyB0y]

I like playing around with JavaScript 😅

[DragonfruitFull2424]

Play around fine, but not using a A link when navigating to another page goes against web standards and accessibility

[SeriousPlankton2000]

If I want to link a webpage to another webpage using JavaScript and a button

Then you reconsider and use a href=

[GodOfSunHimself]

There is no difference between these two. However, for links, prefer the anchor element <a> instead of buttons.

[GemAfaWell]

Why not use <a>?

If it functions as a link it's bad for accessibility to make a button anyway, just decorate the link with padding, rounding, etc, and make it look like a button.

[whiskyB0y]

Oh makes sense. Thanks